From ee907f32f31b70696a33a5b32cfdc0c8cd532ccf Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Wed, 12 Apr 2023 00:39:35 +0200
Subject: [PATCH] feat(guide): sidebar

---
 apps/guide/contentlayer.config.ts             | 12 ++--
 apps/guide/src/app/guide/[[...slug]]/page.tsx |  4 +-
 apps/guide/src/components/Section.tsx         | 16 +++++
 apps/guide/src/components/Sidebar.tsx         | 62 +++++++++++++++++--
 .../{index.mdx => 01-introduction.mdx}        |  0
 .../01-initial-files.mdx}                     |  0
 .../02-creating-commands.mdx}                 |  0
 ...ent.mdx => 02-requesting-more-content.mdx} |  0
 .../01-async-await.mdx}                       |  0
 .../02-collections.mdx}                       |  0
 .../{whats-new.mdx => 03-whats-new.mdx}       |  0
 .../src/content/{test.mdx => 04-test.mdx}     |  0
 12 files changed, 82 insertions(+), 12 deletions(-)
 create mode 100644 apps/guide/src/components/Section.tsx
 rename apps/guide/src/content/{index.mdx => 01-introduction.mdx} (100%)
 rename apps/guide/src/content/{creating-your-bot/index.mdx => 02-creating-your-bot/01-initial-files.mdx} (100%)
 rename apps/guide/src/content/{creating-your-bot/creating-commands.mdx => 02-creating-your-bot/02-creating-commands.mdx} (100%)
 rename apps/guide/src/content/{requesting-more-content.mdx => 02-requesting-more-content.mdx} (100%)
 rename apps/guide/src/content/{additional-info/async-await.mdx => 03-additional-info/01-async-await.mdx} (100%)
 rename apps/guide/src/content/{additional-info/collections.mdx => 03-additional-info/02-collections.mdx} (100%)
 rename apps/guide/src/content/{whats-new.mdx => 03-whats-new.mdx} (100%)
 rename apps/guide/src/content/{test.mdx => 04-test.mdx} (100%)

diff --git a/apps/guide/contentlayer.config.ts b/apps/guide/contentlayer.config.ts
index 715e9606b..0d3672c04 100644
--- a/apps/guide/contentlayer.config.ts
+++ b/apps/guide/contentlayer.config.ts
@@ -17,21 +17,21 @@ export const Content = defineDocumentType(() => ({
 			type: 'string',
 			required: true,
 		},
-		summary: {
-			type: 'string',
-		},
-		image: {
+		category: {
 			type: 'string',
+			required: true,
 		},
 	},
 	computedFields: {
 		slug: {
 			type: 'string',
-			resolve: (doc) => doc._raw.flattenedPath,
+			// eslint-disable-next-line unicorn/prefer-string-replace-all
+			resolve: (doc) => doc._raw.flattenedPath.replace(/\d+-/g, ''),
 		},
 		url: {
 			type: 'string',
-			resolve: (post) => `/guide/${post._raw.flattenedPath}`,
+			// eslint-disable-next-line unicorn/prefer-string-replace-all
+			resolve: (doc) => `/guide/${doc._raw.flattenedPath.replace(/\d+-/g, '')}`,
 		},
 	},
 }));
diff --git a/apps/guide/src/app/guide/[[...slug]]/page.tsx b/apps/guide/src/app/guide/[[...slug]]/page.tsx
index 4d9fac091..3e2cd2faa 100644
--- a/apps/guide/src/app/guide/[[...slug]]/page.tsx
+++ b/apps/guide/src/app/guide/[[...slug]]/page.tsx
@@ -1,5 +1,5 @@
 import { allContents } from 'contentlayer/generated';
-import { notFound } from 'next/navigation';
+import { redirect } from 'next/navigation';
 import { Mdx } from '~/components/Mdx';
 
 export async function generateStaticParams() {
@@ -10,7 +10,7 @@ export default function Page({ params }: { params: { slug: string[] } }) {
 	const content = allContents.find((content) => content.slug === params.slug?.join('/'));
 
 	if (!content) {
-		notFound();
+		redirect('/guide/introduction');
 	}
 
 	return (
diff --git a/apps/guide/src/components/Section.tsx b/apps/guide/src/components/Section.tsx
new file mode 100644
index 000000000..075760697
--- /dev/null
+++ b/apps/guide/src/components/Section.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import { Section as DJSSection, type SectionOptions } from '@discordjs/ui';
+import type { PropsWithChildren } from 'react';
+import { useMedia } from 'react-use';
+
+// This is wrapper around the Section component from @discordjs/ui,
+// it simply automatically sets the dense prop to true if the screen
+// width is less than 768px. This is done to separate client-side logic
+// from server-side rendering.
+export function Section(options: PropsWithChildren<SectionOptions>) {
+	const matches = useMedia('(max-width: 768px)', true);
+	const modifiedOptions = { ...options, dense: matches };
+
+	return <DJSSection {...modifiedOptions} />;
+}
diff --git a/apps/guide/src/components/Sidebar.tsx b/apps/guide/src/components/Sidebar.tsx
index 8b2509924..5b5aca8ce 100644
--- a/apps/guide/src/components/Sidebar.tsx
+++ b/apps/guide/src/components/Sidebar.tsx
@@ -1,8 +1,62 @@
 'use client';
 
-export function Sidebar() {
-	// const pathname = usePathname();
-	// const { setOpened } = useNav();
+import { allContents } from 'contentlayer/generated';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Section } from './Section';
+import { useNav } from '~/contexts/nav';
 
-	return null;
+function transformItemsByCategory(allContents: any[]) {
+	return allContents.reduce((accumulator: any, content) => {
+		if (!accumulator[content.category]) {
+			accumulator[content.category] = [];
+		}
+
+		accumulator[content.category].push(content);
+		return accumulator;
+	}, {});
+}
+
+const items = allContents.map((content) => ({
+	title: content.title,
+	category: content.category,
+	slug: content.slug,
+	href: content.url,
+}));
+
+const itemsByCategory = transformItemsByCategory(items);
+
+export function Sidebar() {
+	const pathname = usePathname();
+	const { setOpened } = useNav();
+
+	return (
+		<div className="flex flex-col gap-3 p-3">
+			{Object.keys(itemsByCategory).map((category, idx) => (
+				<Section
+					buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+					key={`${category}-${idx}`}
+					title={category}
+				>
+					{itemsByCategory[category].map((member, index) => (
+						<Link
+							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 ${
+								decodeURIComponent(pathname ?? '') === member.href
+									? 'bg-blurple text-white'
+									: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
+							}`}
+							href={member.href}
+							key={`${member.title}-${index}`}
+							onClick={() => setOpened(false)}
+							title={member.title}
+						>
+							<div className="flex flex-row place-items-center gap-2 lg:text-sm">
+								<span className="truncate">{member.title}</span>
+							</div>
+						</Link>
+					))}
+				</Section>
+			))}
+		</div>
+	);
 }
diff --git a/apps/guide/src/content/index.mdx b/apps/guide/src/content/01-introduction.mdx
similarity index 100%
rename from apps/guide/src/content/index.mdx
rename to apps/guide/src/content/01-introduction.mdx
diff --git a/apps/guide/src/content/creating-your-bot/index.mdx b/apps/guide/src/content/02-creating-your-bot/01-initial-files.mdx
similarity index 100%
rename from apps/guide/src/content/creating-your-bot/index.mdx
rename to apps/guide/src/content/02-creating-your-bot/01-initial-files.mdx
diff --git a/apps/guide/src/content/creating-your-bot/creating-commands.mdx b/apps/guide/src/content/02-creating-your-bot/02-creating-commands.mdx
similarity index 100%
rename from apps/guide/src/content/creating-your-bot/creating-commands.mdx
rename to apps/guide/src/content/02-creating-your-bot/02-creating-commands.mdx
diff --git a/apps/guide/src/content/requesting-more-content.mdx b/apps/guide/src/content/02-requesting-more-content.mdx
similarity index 100%
rename from apps/guide/src/content/requesting-more-content.mdx
rename to apps/guide/src/content/02-requesting-more-content.mdx
diff --git a/apps/guide/src/content/additional-info/async-await.mdx b/apps/guide/src/content/03-additional-info/01-async-await.mdx
similarity index 100%
rename from apps/guide/src/content/additional-info/async-await.mdx
rename to apps/guide/src/content/03-additional-info/01-async-await.mdx
diff --git a/apps/guide/src/content/additional-info/collections.mdx b/apps/guide/src/content/03-additional-info/02-collections.mdx
similarity index 100%
rename from apps/guide/src/content/additional-info/collections.mdx
rename to apps/guide/src/content/03-additional-info/02-collections.mdx
diff --git a/apps/guide/src/content/whats-new.mdx b/apps/guide/src/content/03-whats-new.mdx
similarity index 100%
rename from apps/guide/src/content/whats-new.mdx
rename to apps/guide/src/content/03-whats-new.mdx
diff --git a/apps/guide/src/content/test.mdx b/apps/guide/src/content/04-test.mdx
similarity index 100%
rename from apps/guide/src/content/test.mdx
rename to apps/guide/src/content/04-test.mdx