trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-05-13 13:17:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: use react-router for links and redirects

Browse source
This commit is contained in:
trafficlunar 2026-04-17 18:25:33 +01:00
parent 87b885a2f8
commit 12203901e9
35 changed files with 1222 additions and 1111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
backend/src/app/robots.ts
View file

@ -1,12 +0,0 @@
import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
allow: "/",
disallow: ["/*?*page=", "/profile*?*tags=", "/edit/*", "/profile/settings", "/random", "/submit", "/report/mii/*", "/report/user/*", "/admin"],
},
sitemap: `${process.env.NEXT_PUBLIC_BASE_URL}/sitemap.xml`,
};
}

101
frontend/package.json
View file

@ -1,53 +1,52 @@
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@bprogress/react": "^1.2.7",
"@fontsource-variable/lexend": "^5.2.11",
"@hello-pangea/dnd": "^18.0.1",
"@nanostores/react": "^1.1.0",
"@tailwindcss/vite": "^4.2.2",
"@tomodachi-share/shared": "workspace:*",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"canvas-confetti": "^1.9.4",
"dayjs": "^1.11.20",
"downshift": "^9.3.2",
"embla-carousel-react": "^8.6.0",
"jsqr": "^1.4.0",
"nanostores": "^1.2.0",
"qrcode-generator": "^2.0.4",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-dropzone": "^15.0.0",
"react-image-crop": "^11.0.10",
"react-router": "^7.14.1",
"tailwindcss": "^4.2.2",
"zod": "^4.3.6"
},
"devDependencies": {
"@eslint/js": "^9.39.4",
"@iconify/react": "^6.0.2",
"@types/canvas-confetti": "^1.9.0",
"@types/node": "^24.12.2",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@types/seedrandom": "^3.0.8",
"@vitejs/plugin-react": "^6.0.1",
"eslint": "^9.39.4",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.5.2",
"globals": "^17.4.0",
"typescript": "~6.0.2",
"typescript-eslint": "^8.58.0",
"vite": "^8.0.4"
}
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@bprogress/react": "^1.2.7",
"@fontsource-variable/lexend": "^5.2.11",
"@hello-pangea/dnd": "^18.0.1",
"@nanostores/react": "^1.1.0",
"@tailwindcss/vite": "^4.2.2",
"@tomodachi-share/shared": "workspace:*",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"canvas-confetti": "^1.9.4",
"dayjs": "^1.11.20",
"downshift": "^9.3.2",
"embla-carousel-react": "^8.6.0",
"jsqr": "^1.4.0",
"nanostores": "^1.2.0",
"qrcode-generator": "^2.0.4",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-dropzone": "^15.0.0",
"react-image-crop": "^11.0.10",
"react-router": "^7.14.1",
"tailwindcss": "^4.2.2",
"zod": "^4.3.6"
},
"devDependencies": {
"@eslint/js": "^9.39.4",
"@iconify/react": "^6.0.2",
"@types/canvas-confetti": "^1.9.0",
"@types/node": "^24.12.2",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1",
"eslint": "^9.39.4",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.5.2",
"globals": "^17.4.0",
"typescript": "~6.0.2",
"typescript-eslint": "^8.58.0",
"vite": "^8.0.4"
}
}

13
frontend/public/robots.txt Normal file
View file

@ -0,0 +1,13 @@
User-Agent: *
Allow: /
Disallow: /*?*page=
Disallow: /profile*?*tags=
Disallow: /edit/*
Disallow: /profile/settings
Disallow: /random
Disallow: /submit
Disallow: /report/mii/*
Disallow: /report/user/*
Disallow: /admin
Sitemap: https://api.tomodachishare.com/sitemap.xml

7
frontend/src/components/description.tsx
View file

@ -1,4 +1,5 @@
import { Icon } from "@iconify/react";
import { Link } from "react-router";
interface Props {
text: string;
@ -19,9 +20,9 @@ export default function Description({ text, className }: Props) {
const url = new URL(part);
return (
<a
<Link
key={index}
href={`/out?url=${encodeURIComponent(part)}`}
to={`/out?url=${encodeURIComponent(part)}`}
target="_blank"
className="text-blue-700 underline break-all ml-1 inline-flex items-center group"
title={`Go to ${url.hostname}`}
@ -30,7 +31,7 @@ export default function Description({ text, className }: Props) {
{url.pathname !== "/" ? url.pathname : ""}
{url.search}
<Icon icon="mi:arrow-right-up" fontSize={16} className="transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a>
</Link>
);
} catch {
// Normal text/Invalid URL fallback

23
frontend/src/components/footer.tsx
View file

@ -1,4 +1,5 @@
import { Icon } from "@iconify/react";
import { Link } from "react-router";
export default function Footer() {
return (
@ -11,38 +12,42 @@ export default function Footer() {
{/* Links section */}
<div className="flex flex-wrap justify-center items-center gap-x-4 text-sm max-sm:gap-x-12">
<a href="/terms-of-service" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
<Link to="/terms-of-service" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
Terms of Service
</a>
</Link>
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
•
</span>
<a href="/privacy" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
<Link to="/privacy" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
Privacy Policy
</a>
</Link>
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
•
</span>
<a
href="https://discord.gg/48cXBFKvWQ"
<Link
to="https://discord.gg/48cXBFKvWQ"
target="_blank"
className="text-[#5865F2] hover:text-[#454FBF] transition-colors duration-200 hover:underline inline-flex items-end gap-1"
>
<Icon icon="ic:baseline-discord" className="text-lg" />
Discord
</a>
</Link>
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
•
</span>
<a href="https://trafficlunar.net" target="_blank" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline group">
<Link
to="https://trafficlunar.net"
target="_blank"
className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline group"
>
Made by <span className="text-orange-400 group-hover:text-orange-500 font-medium transition-colors duration-200">trafficlunar</span>
</a>
</Link>
</div>
{/* Copyright */}

15
frontend/src/components/header-profile.tsx
View file

@ -2,6 +2,7 @@ import { Icon } from "@iconify/react";
import { useEffect } from "react";
import { useStore } from "@nanostores/react";
import { session } from "../session";
import { Link } from "react-router";
export default function HeaderProfile() {
const API_BASE_URL = import.meta.env.VITE_API_URL;
@ -25,15 +26,15 @@ export default function HeaderProfile() {
<>
{!$session?.user ? (
<li>
<a href={"/login"} className="pill button h-full">
<Link to={"/login"} className="pill button h-full">
Login
</a>
</Link>
</li>
) : (
<>
<li title="Your profile">
<a
href={`/profile/${$session?.user?.id}`}
<Link
to={`/profile/${$session?.user?.id}`}
aria-label="Go to profile"
className="pill button gap-2! p-0! h-full max-w-64"
data-tooltip="Your Profile"
@ -46,12 +47,12 @@ export default function HeaderProfile() {
className="rounded-full aspect-square object-cover h-full bg-white outline-2 outline-orange-400"
/>
<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{$session?.user?.name ?? "unknown"}</span>
</a>
</Link>
</li>
<li title="Logout">
<a href={`${API_BASE_URL}/api/auth/signout`} aria-label="Log Out" className="pill button p-2! aspect-square h-full" data-tooltip="Log Out">
<Link to={`${API_BASE_URL}/api/auth/signout`} aria-label="Log Out" className="pill button p-2! aspect-square h-full" data-tooltip="Log Out">
<Icon icon="ic:round-logout" fontSize={24} />
</a>
</Link>
</li>
</>
)}

17
frontend/src/components/header.tsx
View file

@ -1,18 +1,19 @@
import { Icon } from "@iconify/react";
import SearchBar from "./search-bar";
import HeaderProfile from "./header-profile";
import { Link } from "react-router";
export default function Header() {
return (
<header className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-md:grid-cols-1">
<a
href={"/"}
<Link
to={"/"}
aria-label="Go to Home Page"
className="font-black text-3xl text-orange-400 flex items-center gap-2 max-md:justify-center max-md:col-span-2"
>
<img src="/logo.svg" width={56} height={45} alt="logo" />
TomodachiShare
</a>
</Link>
<div className="flex justify-center max-lg:justify-end max-md:justify-center">
<SearchBar />
@ -20,19 +21,19 @@ export default function Header() {
<ul className="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-md:justify-center">
<li title="Random Mii">
<a
href={`${import.meta.env.VITE_API_URL}/random`}
<Link
to={`${import.meta.env.VITE_API_URL}/random`}
aria-label="Go to Random Link"
className="pill button p-0! h-full aspect-square"
data-tooltip="Go to a Random Mii"
>
<Icon icon="mdi:dice-3" fontSize={28} />
</a>
</Link>
</li>
<li>
<a href={"/submit"} className="pill button h-full">
<Link to={"/submit"} className="pill button h-full">
Submit
</a>
</Link>
</li>
<HeaderProfile />
</ul>

5
frontend/src/components/mii/author-buttons.tsx
View file

@ -1,5 +1,6 @@
import { Icon } from "@iconify/react";
import DeleteMiiButton from "./delete-mii-button";
import { Link } from "react-router";
interface Props {
mii: any;
@ -13,10 +14,10 @@ export default function AuthorButtons({ mii }: Props) {
return (
<>
<a aria-label="Edit Mii" href={`/edit/${mii.id}`}>
<Link aria-label="Edit Mii" to={`/edit/${mii.id}`}>
<Icon icon="mdi:pencil" />
<span>Edit</span>
</a>
</Link>
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} inMiiPage />
</>
);

4
frontend/src/components/mii/delete-mii-button.tsx
View file

@ -4,6 +4,7 @@ import { Icon } from "@iconify/react";
import LikeButton from "../like-button";
import SubmitButton from "../submit-button";
import { useNavigate } from "react-router";
interface Props {
miiId: number;
@ -13,6 +14,7 @@ interface Props {
}
export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Props) {
const navigate = useNavigate();
const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false);
@ -28,7 +30,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
}
close();
window.location.reload(); // I would use router.refresh() here but the Mii list doesn't update
navigate(0);
};
const close = () => {

3
frontend/src/components/mii/list/filter-menu.tsx
View file

@ -7,9 +7,10 @@ import GenderSelect from "./gender-select";
import OtherFilters from "./other-filters";
import MakeupSelect from "./makeup-select";
import type { MiiGender, MiiMakeup, MiiPlatform } from "@tomodachi-share/shared";
import { useSearchParams } from "react-router";
export default function FilterMenu() {
const searchParams = new URLSearchParams(window.location.search);
const [searchParams] = useSearchParams();
const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false);

7
frontend/src/components/mii/list/gender-select.tsx
View file

@ -1,9 +1,11 @@
import { useState, useTransition } from "react";
import { Icon } from "@iconify/react";
import type { MiiGender, MiiPlatform } from "@tomodachi-share/shared";
import { useNavigate, useSearchParams } from "react-router";
export default function GenderSelect() {
const searchParams = new URLSearchParams(window.location.search);
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [, startTransition] = useTransition();
const [selected, setSelected] = useState<MiiGender | null>((searchParams.get("gender") as MiiGender) ?? null);
@ -23,8 +25,7 @@ export default function GenderSelect() {
}
startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`;
navigate(`?${params.toString()}`);
});
};

7
frontend/src/components/mii/list/makeup-select.tsx
View file

@ -1,9 +1,11 @@
import { useState, useTransition } from "react";
import { Icon } from "@iconify/react";
import type { MiiMakeup } from "@tomodachi-share/shared";
import { useNavigate, useSearchParams } from "react-router";
export default function MakeupSelect() {
const searchParams = new URLSearchParams(window.location.search);
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [, startTransition] = useTransition();
const [selected, setSelected] = useState<MiiMakeup | null>((searchParams.get("makeup") as MiiMakeup) ?? null);
@ -22,8 +24,7 @@ export default function MakeupSelect() {
}
startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`;
navigate(`?${params.toString()}`);
});
};

21
frontend/src/components/mii/list/mii-grid.tsx
View file

@ -2,6 +2,7 @@ import { Icon } from "@iconify/react";
import LikeButton from "../../like-button";
import DeleteMiiButton from "../delete-mii-button";
import { Link } from "react-router";
interface Props {
// miis: Prisma.MiiGetPayload<{ include: { user: { select: { id: true; name: true } }; _count: { select: { likedBy: true } } } }>[];
@ -25,7 +26,7 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
</div>
)}
<a href={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
<Link to={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
<img
src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`}
width={240}
@ -33,13 +34,13 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
alt="mii image"
className="w-full h-auto aspect-3/2 object-contain"
/>
</a>
</Link>
<div className="p-4 flex flex-col gap-1 h-full">
<div className="flex justify-between">
<a href={`/mii/${mii.id}`} className="relative font-bold text-2xl line-clamp-1 w-full text-ellipsis wrap-break-word" title={mii.name}>
<Link to={`/mii/${mii.id}`} className="relative font-bold text-2xl line-clamp-1 w-full text-ellipsis wrap-break-word" title={mii.name}>
{mii.name}
</a>
</Link>
<div title={mii.platform === "SWITCH" ? "Switch" : "3DS"} className="text-[1.25rem] opacity-25">
{mii.platform === "SWITCH" ? (
<Icon icon="cib:nintendo-switch" className="text-red-400" />
@ -50,9 +51,9 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
</div>
<div id="tags" className="flex flex-wrap gap-1">
{mii.tags.map((tag: string) => (
<a href={`?tags=${tag}`} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
<Link to={`?tags=${tag}`} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
{tag}
</a>
</Link>
))}
</div>
@ -60,16 +61,16 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
<LikeButton likes={mii._count.likedBy} miiId={mii.id} isLiked={false} abbreviate />
{!userId && (
<a href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">
<Link to={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">
@{mii.user?.name}
</a>
</Link>
)}
{/* {userId && Number(session.data?.user?.id) == userId && (
<div className="flex gap-1 text-2xl justify-end text-zinc-400">
<a href={`/edit/${mii.id}`} title="Edit Mii" aria-label="Edit Mii" data-tooltip="Edit">
<Link to={`/edit/${mii.id}`} title="Edit Mii" aria-label="Edit Mii" data-tooltip="Edit">
<Icon icon="mdi:pencil" />
</a>
</Link>
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy} />
</div>
)} */}

11
frontend/src/components/mii/list/other-filters.tsx
View file

@ -1,8 +1,11 @@
import type { MiiPlatform } from "@tomodachi-share/shared";
import { type ChangeEvent, useState, useTransition } from "react";
import { useLocation, useNavigate, useSearchParams } from "react-router";
export default function OtherFilters() {
const searchParams = new URLSearchParams(window.location.search);
const location = useLocation();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [, startTransition] = useTransition();
const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
@ -22,8 +25,7 @@ export default function OtherFilters() {
}
startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`;
navigate(`?${params.toString()}`);
});
};
@ -40,8 +42,7 @@ export default function OtherFilters() {
}
startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`;
navigate(`?${params.toString()}`);
});
};

7
frontend/src/components/mii/list/platform-select.tsx
View file

@ -1,9 +1,11 @@
import { useState, useTransition } from "react";
import { Icon } from "@iconify/react";
import type { MiiPlatform } from "@tomodachi-share/shared";
import { useNavigate, useSearchParams } from "react-router";
export default function PlatformSelect() {
const searchParams = new URLSearchParams(window.location.search);
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [, startTransition] = useTransition();
const [selected, setSelected] = useState<MiiPlatform | null>((searchParams.get("platform") as MiiPlatform) ?? null);
@ -20,8 +22,7 @@ export default function PlatformSelect() {
}
startTransition(() => {
// router.push(`?${params.toString()}`);
window.location.href = `?${params.toString()}`;
navigate(`?${params.toString()}`);
});
};

15
frontend/src/components/mii/list/sort-select.tsx
View file

@ -1,13 +1,15 @@
import { useTransition } from "react";
import { useSelect } from "downshift";
import { Icon } from "@iconify/react";
import { useNavigate, useSearchParams } from "react-router";
type Sort = "likes" | "newest" | "oldest" | "random";
type Sort = "likes" | "newest" | "oldest";
const items = ["likes", "newest", "oldest", "random"];
const items = ["likes", "newest", "oldest"];
export default function SortSelect() {
const searchParams = new URLSearchParams(window.location.search);
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [, startTransition] = useTransition();
const currentSort = (searchParams.get("sort") as Sort) || "newest";
@ -22,13 +24,8 @@ export default function SortSelect() {
params.set("page", "1");
params.set("sort", selectedItem);
if (selectedItem == "random") {
params.set("seed", Math.floor(Math.random() * 1_000_000_000).toString());
}
startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`;
navigate(`?${params.toString()}`);
});
},
});

7
frontend/src/components/mii/list/tag-filter.tsx
View file

@ -1,12 +1,14 @@
import { useEffect, useMemo, useState, useTransition } from "react";
import TagSelector from "../../tag-selector";
import { useNavigate, useSearchParams } from "react-router";
interface Props {
isExclude?: boolean;
}
export default function TagFilter({ isExclude }: Props) {
const searchParams = new URLSearchParams(window.location.search);
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [, startTransition] = useTransition();
const rawTags = searchParams.get(isExclude ? "exclude" : "tags") || "";
@ -45,8 +47,7 @@ export default function TagFilter({ isExclude }: Props) {
}
startTransition(() => {
// router.push(`?${params.toString()}`, { scroll: false });
window.location.href = `?${params.toString()}`;
navigate(`?${params.toString()}`);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [tags]);

7
frontend/src/components/mii/share-mii-button.tsx
View file

@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { Icon } from "@iconify/react";
import { Link } from "react-router";
interface Props {
miiId: number;
@ -128,15 +129,15 @@ export default function ShareMiiButton({ miiId }: Props) {
<div className="flex justify-end gap-2 mt-4">
<div className="flex gap-2 w-full">
{/* Save button */}
<a
href={`${import.meta.env.VITE_API_URL}/mii/${miiId}/image?type=metadata`}
<Link
to={`${import.meta.env.VITE_API_URL}/mii/${miiId}/image?type=metadata`}
className="pill button p-0! aspect-square size-11 cursor-pointer text-xl"
aria-label="Save Image"
data-tooltip="Save Image"
download={"hello.png"}
>
<Icon icon="material-symbols:save-rounded" />
</a>
</Link>
{/* Copy button */}
<button

34
frontend/src/components/pagination.tsx
View file

@ -1,12 +1,14 @@
import { useCallback, useMemo } from "react";
import { Icon } from "@iconify/react";
import { Link, useLocation, useSearchParams } from "react-router";
interface Props {
lastPage: number;
}
export default function Pagination({ lastPage }: Props) {
const searchParams = new URLSearchParams(location.search);
const location = useLocation();
const [searchParams] = useSearchParams();
const page = Number(searchParams.get("page") ?? 1);
const createPageUrl = useCallback(
@ -33,63 +35,63 @@ export default function Pagination({ lastPage }: Props) {
return (
<div className="flex justify-center items-center w-full mt-8">
{/* Go to first page */}
<a
href={page === 1 ? "#" : createPageUrl(1)}
<Link
to={page === 1 ? "#" : createPageUrl(1)}
aria-label="Go to First Page"
aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined}
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
>
<Icon icon="stash:chevron-double-left" />
</a>
</Link>
{/* Previous page */}
<a
href={page === 1 ? "#" : createPageUrl(page - 1)}
<Link
to={page === 1 ? "#" : createPageUrl(page - 1)}
aria-label="Go to Previous Page"
aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined}
className={`pill bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
>
<Icon icon="stash:chevron-left" />
</a>
</Link>
{/* Page numbers */}
<div className="flex mx-2">
{numbers.map((number) => (
<a
<Link
key={number}
href={createPageUrl(number)}
to={createPageUrl(number)}
aria-label={`Go to Page ${number}`}
aria-current={number === page ? "page" : undefined}
className={`pill p-0! w-8 h-8 text-center rounded-md! ${number == page ? "bg-orange-400!" : "bg-orange-100! hover:bg-orange-400!"}`}
>
{number}
</a>
</Link>
))}
</div>
{/* Next page */}
<a
href={page >= lastPage ? "#" : createPageUrl(page + 1)}
<Link
to={page >= lastPage ? "#" : createPageUrl(page + 1)}
aria-label="Go to Next Page"
aria-disabled={page >= lastPage}
tabIndex={page >= lastPage ? -1 : undefined}
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
>
<Icon icon="stash:chevron-right" />
</a>
</Link>
{/* Go to last page */}
<a
href={page >= lastPage ? "#" : createPageUrl(lastPage)}
<Link
to={page >= lastPage ? "#" : createPageUrl(lastPage)}
aria-label="Go to Last Page"
aria-disabled={page >= lastPage}
tabIndex={page >= lastPage ? -1 : undefined}
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
>
<Icon icon="stash:chevron-double-right" />
</a>
</Link>
</div>
);
}

25
frontend/src/components/profile-information.tsx
View file

@ -3,6 +3,7 @@ import { Icon } from "@iconify/react";
import Description from "./description";
import { useStore } from "@nanostores/react";
import { session } from "../session";
import { Link } from "react-router";
interface Props {
user?: any;
@ -23,9 +24,9 @@ export default function ProfileInformation({ user, page }: Props) {
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
<div className="flex w-full gap-4 overflow-x-scroll">
{/* Profile picture */}
<a href={`/profile/${user.id}`} className="size-28 aspect-square">
<Link to={`/profile/${user.id}`} className="size-28 aspect-square">
<img src={user.image ?? "/guest.png"} className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center" />
</a>
</Link>
{/* User information */}
<div className="flex flex-col w-full relative py-3">
<div className="flex items-center gap-2">
@ -60,34 +61,34 @@ export default function ProfileInformation({ user, page }: Props) {
{/* Buttons */}
<div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-sm">
{!isOwnProfile && (
<a aria-label="Report User" href={`${import.meta.env.VITE_API_URL}/report/user/${user.id}`}>
<Link aria-label="Report User" to={`${import.meta.env.VITE_API_URL}/report/user/${user.id}`}>
<Icon icon="material-symbols:flag-rounded" />
<span>Report</span>
</a>
</Link>
)}
{isOwnProfile && isAdmin && (
<a aria-label="Go to Admin" href="/admin">
<Link aria-label="Go to Admin" to="/admin">
<Icon icon="mdi:shield-moon" />
<span>Admin</span>
</a>
</Link>
)}
{/* {isOwnProfile && page !== "likes" && (
<a aria-label="Go to My Likes" href="/profile/likes">
<Link aria-label="Go to My Likes" to="/profile/likes">
<Icon icon="icon-park-solid:like" />
<span>My Likes</span>
</a>
</Link>
)} */}
{isOwnProfile && page !== "settings" && (
<a aria-label="Go to Settings" href="/profile/settings">
<Link aria-label="Go to Settings" to="/profile/settings">
<Icon icon="material-symbols:settings-rounded" />
<span>Settings</span>
</a>
</Link>
)}
{page && (
<a aria-label="Go Back to Profile" href={`/profile/${user.id}`}>
<Link aria-label="Go Back to Profile" to={`/profile/${user.id}`}>
<Icon icon="tabler:chevron-left" />
<span>Back</span>
</a>
</Link>
)}
</div>
</div>

4
frontend/src/components/profile-settings/delete-account.tsx
View file

@ -2,8 +2,10 @@ import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { Icon } from "@iconify/react";
import SubmitButton from "../submit-button";
import { useNavigate } from "react-router";
export default function DeleteAccount() {
const navigate = useNavigate();
const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false);
@ -17,7 +19,7 @@ export default function DeleteAccount() {
return;
}
window.location.href = "/404";
navigate("/404");
};
const close = () => {

6
frontend/src/components/profile-settings/index.tsx
View file

@ -6,12 +6,14 @@ import ProfilePictureSettings from "./profile-picture";
import SubmitDialogButton from "./submit-dialog-button";
import DeleteAccount from "./delete-account";
import z from "zod";
import { useNavigate } from "react-router";
interface Props {
currentDescription: string | null | undefined;
}
export default function ProfileSettings({ currentDescription }: Props) {
const navigate = useNavigate();
const [description, setDescription] = useState(currentDescription);
const [name, setName] = useState("");
@ -39,7 +41,7 @@ export default function ProfileSettings({ currentDescription }: Props) {
}
close();
window.location.reload();
navigate(0);
};
const handleSubmitNameChange = async (close: () => void) => {
@ -63,7 +65,7 @@ export default function ProfileSettings({ currentDescription }: Props) {
}
close();
window.location.reload();
navigate(0);
};
return (

4
frontend/src/components/profile-settings/profile-picture.tsx
View file

@ -6,8 +6,10 @@ import dayjs from "dayjs";
import SubmitDialogButton from "./submit-dialog-button";
import Dropzone from "../dropzone";
import { useNavigate } from "react-router";
export default function ProfilePictureSettings() {
const navigate = useNavigate();
const [error, setError] = useState<string | undefined>(undefined);
const [newPicture, setNewPicture] = useState<FileWithPath | undefined>();
@ -30,7 +32,7 @@ export default function ProfilePictureSettings() {
}
close();
location.reload();
navigate(0);
};
const handleDrop = useCallback((acceptedFiles: FileWithPath[]) => {

10
frontend/src/components/search-bar.tsx
View file

@ -1,16 +1,17 @@
import { useState } from "react";
import { Icon } from "@iconify/react";
import { querySchema } from "@tomodachi-share/shared/schemas";
import { useNavigate, useSearchParams } from "react-router";
export default function SearchBar() {
const searchParams = new URLSearchParams(window.location.search);
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [query, setQuery] = useState(searchParams.get("q") || "");
const handleSearch = () => {
const result = querySchema.safeParse(query);
if (!result.success) {
// router.push("/", { scroll: false });
window.location.href = "/";
navigate("/", { preventScrollReset: true });
return;
}
@ -19,8 +20,7 @@ export default function SearchBar() {
params.set("q", query);
params.set("page", "1");
// router.push(`/?${params.toString()}`, { scroll: false });
window.location.href = `/?${params.toString()}`;
navigate(`/?${params.toString()}`, { preventScrollReset: true });
};
const handleKeyDown = (event: React.KeyboardEvent) => {

4
frontend/src/components/submit-form/index.tsx
View file

@ -21,8 +21,10 @@ import Carousel from "../carousel";
import SubmitButton from "../submit-button";
import Dropzone from "../dropzone";
import type { MiiPlatform, MiiGender, MiiMakeup } from "@tomodachi-share/shared";
import { useNavigate } from "react-router";
export default function SubmitForm() {
const navigate = useNavigate();
const [files, setFiles] = useState<FileWithPath[]>([]);
const handleDrop = useCallback(
@ -113,7 +115,7 @@ export default function SubmitForm() {
return;
}
window.location.href = `/mii/${id}`;
navigate(`/mii/${id}`);
};
useEffect(() => {

14
frontend/src/components/provider.tsx → frontend/src/layout.tsx
View file

@ -1,7 +1,8 @@
import Footer from "./components/footer";
import Header from "./components/header";
import { useEffect } from "react";
import { ProgressProvider } from "@bprogress/react";
export default function Providers({ children }: { children: React.ReactNode }) {
export default function Layout({ children }: { children: React.ReactNode }) {
// Calculate header height
useEffect(() => {
const header = document.querySelector("header");
@ -24,8 +25,11 @@ export default function Providers({ children }: { children: React.ReactNode }) {
}, []);
return (
<ProgressProvider height="4px" color="var(--color-amber-500)" options={{ showSpinner: false }} shallowRouting>
{children}
</ProgressProvider>
<>
<Header />
{/* <AdminBanner /> */}
<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">{children}</main>
<Footer />
</>
);
}

26
frontend/src/main.tsx
View file

@ -1,4 +1,4 @@
import { StrictMode, Suspense } from "react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router";
import "./index.css";
@ -13,19 +13,15 @@ import MiiPage from "./pages/mii.tsx";
import SubmitPage from "./pages/submit.tsx";
import IndexPage from "./pages/index.tsx";
import ProfileSettingsPage from "./pages/settings.tsx";
import Providers from "./components/provider.tsx";
import Header from "./components/header.tsx";
import Footer from "./components/footer.tsx";
import { ProgressProvider } from "@bprogress/react";
import LinkOutPage from "./pages/out.tsx";
import Layout from "./layout.tsx";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<Providers>
<Suspense fallback={<div>Loading header...</div>}>
<Header />
</Suspense>
{/* <AdminBanner /> */}
<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">
<BrowserRouter>
<BrowserRouter>
<ProgressProvider height="4px" color="var(--color-amber-500)" options={{ showSpinner: false }} shallowRouting>
<Layout>
<Routes>
<Route path="/" element={<IndexPage />} />
<Route path="/mii/:id" element={<MiiPage />} />
@ -35,13 +31,13 @@ createRoot(document.getElementById("root")!).render(
</Route>
<Route path="/submit" element={<SubmitPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/out" element={<LinkOutPage />} />
<Route path="/privacy" element={<PrivacyPage />} />
<Route path="/terms-of-service" element={<TermsOfServicePage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
</main>
<Footer />
</Providers>
</Layout>
</ProgressProvider>
</BrowserRouter>
</StrictMode>,
);

5
frontend/src/pages/index.tsx
View file

@ -1,9 +1,10 @@
import { Suspense, useEffect, useMemo, useState } from "react";
import { Suspense, useEffect, useState } from "react";
import FilterMenu from "../components/mii/list/filter-menu";
import SortSelect from "../components/mii/list/sort-select";
import MiiGrid from "../components/mii/list/mii-grid";
import Pagination from "../components/pagination";
import Skeleton from "../components/mii/list/skeleton";
import { useSearchParams } from "react-router";
interface ApiResponse {
totalCount: number;
@ -12,7 +13,7 @@ interface ApiResponse {
}
export default function IndexPage() {
const searchParams = useMemo(() => new URLSearchParams(location.search), []);
const [searchParams] = useSearchParams();
const [data, setData] = useState<ApiResponse | null>(null);
const [loading, setLoading] = useState(true);

28
frontend/src/pages/login.tsx
View file

@ -1,6 +1,6 @@
import { Icon } from "@iconify/react";
import { useStore } from "@nanostores/react";
import { useNavigate } from "react-router";
import { Link, useNavigate } from "react-router";
import { session } from "../session";
export default function LoginPage() {
@ -23,41 +23,41 @@ export default function LoginPage() {
</div>
<div className="flex flex-col items-center gap-2">
<a
href={`${API_URL}/api/auth/signin/discord`}
<Link
to={`${API_URL}/api/auth/signin/discord`}
aria-label="Login with Discord"
className="pill button gap-2 px-3! bg-indigo-400! border-indigo-500! hover:bg-indigo-500!"
>
<Icon icon="ic:baseline-discord" fontSize={32} />
Login with Discord
</a>
<a
href={`${API_URL}/api/auth/signin/github`}
</Link>
<Link
to={`${API_URL}/api/auth/signin/github`}
aria-label="Login with GitHub"
className="pill button gap-2 px-3! bg-zinc-700! border-zinc-800! hover:bg-zinc-800! text-white"
>
<Icon icon="mdi:github" fontSize={32} />
Login with GitHub
</a>
<a
href={`${API_URL}/api/auth/signin/google`}
</Link>
<Link
to={`${API_URL}/api/auth/signin/google`}
aria-label="Login with Google"
className="pill button gap-2 px-3! bg-white! border-gray-300! hover:bg-gray-100! text-black! flex items-center"
>
<Icon icon="material-icon-theme:google" fontSize={32} />
Login with Google
</a>
</Link>
</div>
<p className="mt-8 text-xs text-zinc-400">
By signing up, you agree to the{" "}
<a href="/terms-of-service" className="underline hover:text-zinc-600">
<Link to="/terms-of-service" className="underline hover:text-zinc-600">
Terms of Service
</a>{" "}
</Link>{" "}
and{" "}
<a href="/privacy" className="underline hover:text-zinc-600">
<Link to="/privacy" className="underline hover:text-zinc-600">
Privacy Policy
</a>
</Link>
.
</p>
</div>

5
frontend/src/pages/mii.tsx
View file

@ -9,10 +9,11 @@ import SwitchAddMiiTutorialButton from "../components/tutorial/switch-add-mii";
import MiiInstructions from "../components/mii/instructions";
import { Icon } from "@iconify/react";
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router";
import { Link, useNavigate, useParams } from "react-router";
export default function MiiPage() {
const { id } = useParams();
const navigate = useNavigate();
const [mii, setMii] = useState<any>(null);
const [loading, setLoading] = useState(true);
@ -31,7 +32,7 @@ export default function MiiPage() {
.catch((err) => {
console.error(err);
setLoading(false);
window.location.href = "/404";
navigate("/404");
});
}, [id]);

21
frontend/src/pages/not-found.tsx
View file

@ -1,14 +1,17 @@
import { Icon } from "@iconify/react";
import { Link } from "react-router";
export default function NotFoundPage() {
return <div className="grow flex items-center justify-center">
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-8 max-w-xs w-full text-center flex flex-col">
<h2 className="text-7xl font-black">404</h2>
<p>Page not found - you swam off the island!</p>
<a href="/" className="pill button gap-2 mt-8 w-fit self-center">
<Icon icon="ic:round-home" fontSize={24} />
Travel Back
</a>
return (
<div className="grow flex items-center justify-center">
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-8 max-w-xs w-full text-center flex flex-col">
<h2 className="text-7xl font-black">404</h2>
<p>Page not found - you swam off the island!</p>
<Link to="/" className="pill button gap-2 mt-8 w-fit self-center">
<Icon icon="ic:round-home" fontSize={24} />
Travel Back
</Link>
</div>
</div>
</div>
);
}

64
frontend/src/pages/out.tsx Normal file
View file

@ -0,0 +1,64 @@
import { Icon } from "@iconify/react";
import { Link, useNavigate, useSearchParams } from "react-router";
export default function LinkOutPage() {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const url = searchParams.get("url");
if (!url || Array.isArray(url)) navigate("/");
let parsed: URL;
try {
parsed = new URL(url);
} catch {
navigate("/"); // redirect if URL is invalid
}
// Next.js doesn't allow attacks like these but you can never be too safe
if (!["http:", "https:"].includes(parsed.protocol)) navigate("/");
const isSafe = Array.from(SAFE_LINKS).some((domain) => parsed.hostname === domain || parsed.hostname.endsWith(`.${domain}`));
if (isSafe) navigate(url);
return (
<div className="grow flex items-center justify-center">
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg py-8 px-6 max-w-md w-full text-center flex flex-col items-center">
<h2 className="text-3xl font-black flex items-center gap-2 mb-1">
<Icon icon="mingcute:alert-fill" className="text-5xl" />
Warning
</h2>
<p>You're attempting to leave TomodachiShare island! The destination website is potentially dangerous.</p>
<div className="bg-zinc-100 border border-zinc-300 rounded-md p-2 break-all w-full mt-4">
<code className="font-mono text-sm">{url}</code>
</div>
<div className="flex justify-center gap-2">
<Link to="/" className="pill button gap-2 mt-8 w-fit self-center bg-zinc-100! border-zinc-300! hover:bg-zinc-300!">
<Icon icon="ic:round-home" fontSize={24} />
Travel Back
</Link>
<Link to={url} target="_blank" rel="noopener noreferrer" className="pill button gap-2 mt-8 w-fit self-center">
<Icon icon="ic:round-open-in-new" fontSize={21} />
Continue
</Link>
</div>
</div>
</div>
);
}
const SAFE_LINKS = new Set([
"tomodachishare.com",
"trafficlunar.net",
"youtube.com",
"youtu.be",
"twitter.com",
"x.com",
"reddit.com",
"tiktok.com",
"tumblr.com",
"instagram.com",
"wikipedia.org",
]);

5
frontend/src/pages/profile.tsx
View file

@ -1,9 +1,10 @@
import { useEffect, useState } from "react";
import ProfileInformation from "../components/profile-information";
import { useParams } from "react-router";
import { useNavigate, useParams } from "react-router";
export default function ProfilePage() {
const { id } = useParams();
const navigate = useNavigate();
const [user, setUser] = useState<any>(null);
const [loading, setLoading] = useState(true);
@ -20,7 +21,7 @@ export default function ProfilePage() {
.catch((err) => {
console.error(err);
setLoading(false);
window.location.href = "/404";
navigate("/404");
});
}, [id]);

250
frontend/src/pages/terms-of-service.tsx
View file

@ -1,129 +1,145 @@
import { Link } from "react-router";
export default function TermsOfServicePage() {
return <div className="bg-amber-50 border-2 border-amber-500 rounded-2xl p-6">
<h1 className="text-2xl font-bold">Terms of Service</h1>
<h2 className="font-light">
<strong className="font-medium">Effective Date:</strong> March 26, 2026
</h2>
return (
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl p-6">
<h1 className="text-2xl font-bold">Terms of Service</h1>
<h2 className="font-light">
<strong className="font-medium">Effective Date:</strong> March 26, 2026
</h2>
<hr className="border-black/20 mt-1 mb-4" />
<hr className="border-black/20 mt-1 mb-4" />
<p>
By registering for, or using this service, you confirm that you understand and agree to the terms below. If you do not agree to these terms, you should
not use the service.
</p>
<p className="mt-1">
If you have any questions or concerns, please contact me at:{" "}
<a href="mailto:hello@trafficlunar.net" className="text-blue-700"> hello@trafficlunar.net </a>
.
</p>
<p>
By registering for, or using this service, you confirm that you understand and agree to the terms below. If you do not agree to these terms, you should
not use the service.
</p>
<p className="mt-1">
If you have any questions or concerns, please contact me at:{" "}
<a href="mailto:hello@trafficlunar.net" className="text-blue-700">
{" "}
hello@trafficlunar.net{" "}
</a>
.
</p>
<ul className="list-decimal ml-5 marker:text-xl marker:font-semibold">
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Usage Policy</h3>
<ul className="list-decimal ml-5 marker:text-xl marker:font-semibold">
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Usage Policy</h3>
<section>
<p className="mb-2">As a user of this site, you must abide by these guidelines:</p>
<ul className="list-disc list-inside indent-4">
<li>Nothing that would interfere with or gain unauthorized access to the website or its systems.</li>
<li>Nothing that is against the law in the United Kingdom.</li>
<li>No NSFW, violent, gory, or inappropriate Miis or images.</li>
<li>No spam.</li>
<li>No impersonation of others.</li>
<li>No malware, malicious links, or phishing content.</li>
<li>No harassment, hate speech, threats, or bullying towards others.</li>
<li>Miis must be high quality: for example, not following all instructions on the submit form correctly.</li>
<li>Avoid using inappropriate language. Profanity may be automatically censored.</li>
<li>No use of automated scripts, bots, or scrapers to access or interact with the site.</li>
</ul>
<p className="mt-2">
If you find anybody or a Mii breaking these rules, please report it by going to their page and clicking the &quot;Report&quot; button.
</p>
</section>
</li>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Termination</h3>
<section>
<p className="mb-2">As a user of this site, you must abide by these guidelines:</p>
<ul className="list-disc list-inside indent-4">
<li>Nothing that would interfere with or gain unauthorized access to the website or its systems.</li>
<li>Nothing that is against the law in the United Kingdom.</li>
<li>No NSFW, violent, gory, or inappropriate Miis or images.</li>
<li>No spam.</li>
<li>No impersonation of others.</li>
<li>No malware, malicious links, or phishing content.</li>
<li>No harassment, hate speech, threats, or bullying towards others.</li>
<li>Miis must be high quality: for example, not following all instructions on the submit form correctly.</li>
<li>Avoid using inappropriate language. Profanity may be automatically censored.</li>
<li>No use of automated scripts, bots, or scrapers to access or interact with the site.</li>
</ul>
<p className="mt-2">
If you find anybody or a Mii breaking these rules, please report it by going to their page and clicking the &quot;Report&quot; button.
</p>
</section>
</li>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Termination</h3>
<section>
<p className="mb-2">
We reserve the right to suspend or terminate your access to the site at any time if you violate these Terms of Service or engage in any activities
that disrupt the functionality of the site.
</p>
<p>
To request deletion of your account and personal data, please refer to the{" "}
<a href="/privacy" className="text-blue-700"> Privacy Policy </a>{" "}
(see &quot;Data Deletion&quot;) or email me at{" "}
<a href="mailto:hello@trafficlunar.net" className="text-blue-700"> hello@trafficlunar.net </a>
</p>
</section>
</li>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Eligibility</h3>
<section>
<p className="mb-2">By using this service, you confirm that you are at least 13 years old or have the consent of a parent or guardian.</p>
</section>
</li>
<section>
<p className="mb-2">
We reserve the right to suspend or terminate your access to the site at any time if you violate these Terms of Service or engage in any activities
that disrupt the functionality of the site.
</p>
<p>
To request deletion of your account and personal data, please refer to the{" "}
<Link to="/privacy" className="text-blue-700">
{" "}
Privacy Policy{" "}
</Link>{" "}
(see &quot;Data Deletion&quot;) or email me at{" "}
<a href="mailto:hello@trafficlunar.net" className="text-blue-700">
{" "}
hello@trafficlunar.net{" "}
</a>
</p>
</section>
</li>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Eligibility</h3>
<section>
<p className="mb-2">By using this service, you confirm that you are at least 13 years old or have the consent of a parent or guardian.</p>
</section>
</li>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Liability</h3>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Liability</h3>
<section>
<p className="mb-2">
This service is provided &quot;as is&quot; and without any warranties. We are not responsible for any user-generated content or the actions of users
on the site. You use the site at your own risk.
</p>
<p>
We do not guarantee continuous or secure access to the service and are not liable for any damages resulting from interruptions, loss of data, or
unauthorized access.
</p>
</section>
</li>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">DMCA & Copyright</h3>
<section>
<p className="mb-2">
This service is provided &quot;as is&quot; and without any warranties. We are not responsible for any user-generated content or the actions of
users on the site. You use the site at your own risk.
</p>
<p>
We do not guarantee continuous or secure access to the service and are not liable for any damages resulting from interruptions, loss of data, or
unauthorized access.
</p>
</section>
</li>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">DMCA & Copyright</h3>
<section>
<p className="mb-2">
If you believe that content uploaded to this site infringes on your copyright, you may submit a DMCA takedown request by emailing{" "}
<a href="mailto:hello@trafficlunar.net" className="text-blue-700"> hello@trafficlunar.net </a>{" "}
or by reporting the Mii on its page.
</p>
<p className="mb-2">Please include:</p>
<ul className="list-disc list-inside indent-4">
<li>Your name and contact information</li>
<li>A description of the copyrighted work</li>
<li>A link to the allegedly infringing material</li>
<li>A statement that you have a good faith belief that the use is not authorized</li>
<li>
A statement that the information in the notice is accurate and, under penalty of perjury, that you are authorized to act on behalf of the
copyright owner
</li>
<li>Your electronic or physical signature</li>
</ul>
</section>
</li>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Nintendo Disclaimer</h3>
<section>
<p className="mb-2">
If you believe that content uploaded to this site infringes on your copyright, you may submit a DMCA takedown request by emailing{" "}
<a href="mailto:hello@trafficlunar.net" className="text-blue-700">
{" "}
hello@trafficlunar.net{" "}
</a>{" "}
or by reporting the Mii on its page.
</p>
<p className="mb-2">Please include:</p>
<ul className="list-disc list-inside indent-4">
<li>Your name and contact information</li>
<li>A description of the copyrighted work</li>
<li>A link to the allegedly infringing material</li>
<li>A statement that you have a good faith belief that the use is not authorized</li>
<li>
A statement that the information in the notice is accurate and, under penalty of perjury, that you are authorized to act on behalf of the
copyright owner
</li>
<li>Your electronic or physical signature</li>
</ul>
</section>
</li>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Nintendo Disclaimer</h3>
<section>
<p className="mb-2">
This site is not affiliated with, endorsed by, or associated with Nintendo in any way. &quot;Mii&quot; and all related character designs are
trademarks of Nintendo Co., Ltd.
</p>
<p>
All Mii-related content is shared by users under the assumption that it does not violate any third-party rights. If you believe your rights have
been infringed, please see the DMCA section above.
</p>
</section>
</li>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Changes to this Terms of Service</h3>
<section>
<p className="mb-2">
This site is not affiliated with, endorsed by, or associated with Nintendo in any way. &quot;Mii&quot; and all related character designs are
trademarks of Nintendo Co., Ltd.
</p>
<p>
All Mii-related content is shared by users under the assumption that it does not violate any third-party rights. If you believe your rights have
been infringed, please see the DMCA section above.
</p>
</section>
</li>
<li>
<h3 className="text-xl font-semibold mt-6 mb-2">Changes to this Terms of Service</h3>
<section>
<p className="mb-2">
This Terms of Service may be updated from time to time. We encourage you to review the terms periodically to stay informed about the use of the
site. We may notify users via a site banner or other means if changes are made to the Terms of Service.
</p>
</section>
</li>
</ul>
</div>;
<section>
<p className="mb-2">
This Terms of Service may be updated from time to time. We encourage you to review the terms periodically to stay informed about the use of the
site. We may notify users via a site banner or other means if changes are made to the Terms of Service.
</p>
</section>
</li>
</ul>
</div>
);
}

4
shared/src/schemas.ts
View file

@ -38,7 +38,7 @@ export const idSchema = z.coerce.number({ error: "ID must be a number" }).int({
export const searchSchema = z.object({
q: querySchema.optional(),
sort: z.enum(["likes", "newest", "oldest", "random"], { error: "Sort must be either 'likes', 'newest', 'oldest', or 'random'" }).default("newest"),
sort: z.enum(["likes", "newest", "oldest"], { error: "Sort must be either 'likes', 'newest', 'oldest'" }).default("newest"),
tags: z
.string()
.optional()
@ -71,8 +71,6 @@ export const searchSchema = z.object({
.max(100, { error: "Limit cannot be more than 100" })
.optional(),
page: z.coerce.number({ error: "Page must be a number" }).int({ error: "Page must be an integer" }).min(1, { error: "Page must be at least 1" }).optional(),
// Random sort
seed: z.coerce.number({ error: "Seed must be a number" }).int({ error: "Seed must be an integer" }).optional(),
// Other
parentPage: z.string().optional(),
userId: idSchema.optional(),