From 78e02c4b63d680200a64d4661dd3f89539b8f622 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Tue, 11 Apr 2023 19:19:33 +0200
Subject: [PATCH] fix(website): navigation and 404

---
 .../[package]/[version]/[item]/loading.tsx    |  1 -
 .../[package]/[version]/[item]/not-found.tsx  | 22 +++++++++++++++++++
 .../[package]/[version]/[item]/page.tsx       | 10 ++++++++-
 .../packages/[package]/[version]/loading.tsx  |  1 -
 apps/website/src/app/providers.tsx            | 15 +++++--------
 apps/website/src/components/ServiceWorker.tsx |  9 --------
 apps/website/src/components/Sidebar.tsx       |  6 ++---
 .../src/components/SystemThemeFallback.tsx    |  9 --------
 8 files changed, 40 insertions(+), 33 deletions(-)
 delete mode 100644 apps/website/src/app/docs/packages/[package]/[version]/[item]/loading.tsx
 create mode 100644 apps/website/src/app/docs/packages/[package]/[version]/[item]/not-found.tsx
 delete mode 100644 apps/website/src/app/docs/packages/[package]/[version]/loading.tsx
 delete mode 100644 apps/website/src/components/ServiceWorker.tsx
 delete mode 100644 apps/website/src/components/SystemThemeFallback.tsx

diff --git a/apps/website/src/app/docs/packages/[package]/[version]/[item]/loading.tsx b/apps/website/src/app/docs/packages/[package]/[version]/[item]/loading.tsx
deleted file mode 100644
index bde40d687..000000000
--- a/apps/website/src/app/docs/packages/[package]/[version]/[item]/loading.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '~/app/loading';
diff --git a/apps/website/src/app/docs/packages/[package]/[version]/[item]/not-found.tsx b/apps/website/src/app/docs/packages/[package]/[version]/[item]/not-found.tsx
new file mode 100644
index 000000000..ef415676c
--- /dev/null
+++ b/apps/website/src/app/docs/packages/[package]/[version]/[item]/not-found.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export default function NotFound() {
+	const pathname = usePathname();
+	const href = pathname.split('/').slice(0, -1).join('/');
+
+	return (
+		<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
+			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
+			<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
+			<Link
+				className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
+				href={href}
+			>
+				Take me back
+			</Link>
+		</div>
+	);
+}
diff --git a/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx b/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx
index 68f1ff3fa..8c2908912 100644
--- a/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx
+++ b/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx
@@ -140,5 +140,13 @@ function Member({ member }: { member?: ApiItem }) {
 export default async function Page({ params }: { params: ItemRouteParams }) {
 	const member = await fetchMember(params);
 
-	return <div className="relative top-6">{member ? <Member member={member} /> : null}</div>;
+	if (!member) {
+		notFound();
+	}
+
+	return (
+		<div className="relative top-6">
+			<Member member={member} />
+		</div>
+	);
 }
diff --git a/apps/website/src/app/docs/packages/[package]/[version]/loading.tsx b/apps/website/src/app/docs/packages/[package]/[version]/loading.tsx
deleted file mode 100644
index bde40d687..000000000
--- a/apps/website/src/app/docs/packages/[package]/[version]/loading.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '~/app/loading';
diff --git a/apps/website/src/app/providers.tsx b/apps/website/src/app/providers.tsx
index 245040a52..4a90036e5 100644
--- a/apps/website/src/app/providers.tsx
+++ b/apps/website/src/app/providers.tsx
@@ -2,15 +2,12 @@
 
 import { ThemeProvider } from 'next-themes';
 import type { PropsWithChildren } from 'react';
-import { ServiceWorker } from '~/components/ServiceWorker';
-import { SystemThemeFallback } from '~/components/SystemThemeFallback';
+import { useSystemThemeFallback } from '~/hooks/useSystemThemeFallback';
+import { useUnregisterServiceWorker } from '~/hooks/useUnregisterServiceWorker';
 
 export function Providers({ children }: PropsWithChildren) {
-	return (
-		<>
-			<ThemeProvider attribute="class">{children}</ThemeProvider>
-			<ServiceWorker />
-			<SystemThemeFallback />
-		</>
-	);
+	useUnregisterServiceWorker();
+	useSystemThemeFallback();
+
+	return <ThemeProvider attribute="class">{children}</ThemeProvider>;
 }
diff --git a/apps/website/src/components/ServiceWorker.tsx b/apps/website/src/components/ServiceWorker.tsx
deleted file mode 100644
index 84d63d48d..000000000
--- a/apps/website/src/components/ServiceWorker.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-'use client';
-
-import { useUnregisterServiceWorker } from '~/hooks/useUnregisterServiceWorker';
-
-export function ServiceWorker() {
-	useUnregisterServiceWorker();
-
-	return null;
-}
diff --git a/apps/website/src/components/Sidebar.tsx b/apps/website/src/components/Sidebar.tsx
index 73f1880d6..4c605ada2 100644
--- a/apps/website/src/components/Sidebar.tsx
+++ b/apps/website/src/components/Sidebar.tsx
@@ -7,7 +7,7 @@ import { VscSymbolField } from '@react-icons/all-files/vsc/VscSymbolField';
 import { VscSymbolInterface } from '@react-icons/all-files/vsc/VscSymbolInterface';
 import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
 import { VscSymbolVariable } from '@react-icons/all-files/vsc/VscSymbolVariable';
-import { usePathname } from 'next/navigation';
+import { useSelectedLayoutSegment } from 'next/navigation';
 import { useMemo } from 'react';
 import { ItemLink } from './ItemLink';
 import { Section } from './Section';
@@ -83,7 +83,7 @@ function resolveIcon(item: string) {
 }
 
 export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
-	const pathname = usePathname();
+	const segment = useSelectedLayoutSegment();
 	const { setOpened } = useNav();
 
 	const groupItems = useMemo(() => groupMembers(members), [members]);
@@ -97,7 +97,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
 						{groupItems[group].map((member, index) => (
 							<ItemLink
 								className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
-									pathname === member.href
+									decodeURIComponent(segment ?? '') === member.href
 										? 'bg-blurple text-white'
 										: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
 								}`}
diff --git a/apps/website/src/components/SystemThemeFallback.tsx b/apps/website/src/components/SystemThemeFallback.tsx
deleted file mode 100644
index a8f52606e..000000000
--- a/apps/website/src/components/SystemThemeFallback.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-'use client';
-
-import { useSystemThemeFallback } from '~/hooks/useSystemThemeFallback';
-
-export function SystemThemeFallback() {
-	useSystemThemeFallback();
-
-	return null;
-}