diff --git a/app/favicon.ico b/app/favicon.ico index 718d6fe..85c000a 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css index 17612e6..cab3c9d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -25,6 +25,13 @@ @apply dark:text-primary-500 text-primary-100 uppercase font-bold mb-2 text-lg } + .heading { + @apply pb-8 border-b border-b-primary-500 dark:border-b-dark-500 min-w-full; + } + .heading h1 { + @apply text-5xl font-bold + } + .card { @apply dark:bg-mixed-200 bg-primary-500 rounded-3xl p-6 shadow-2xl /* mix-blend-luminosity */ diff --git a/app/help/[article]/error.tsx b/app/help/[article]/error.tsx new file mode 100644 index 0000000..9ecd2d8 --- /dev/null +++ b/app/help/[article]/error.tsx @@ -0,0 +1,31 @@ +"use client"; + +export default function Error({ + error, + reset, +}: { + error: Error & { digest?: string }; + reset: () => void; +}) { + return ( +
+
+

Uh oh!

+

+ Seems like you found an article that doesn't exist. If you + clicked on a link from another help article, it's likely that + either the article has been renamed or hasn't been written yet. +

+

+ You can let Emma know about the missing article in + [#help-articles](insert discord link here) on the official + CyborgGrizzly Discord server. Be sure to include the below error and + the page that you came from in case the link is broken. +

+ 
+          {`${error.name}\n${error.message}\n${error.digest}`}
+
+
+
+ ); +} diff --git a/app/help/[article]/page.tsx b/app/help/[article]/page.tsx new file mode 100644 index 0000000..d4d4b12 --- /dev/null +++ b/app/help/[article]/page.tsx @@ -0,0 +1,26 @@ +import { TTCMD } from "@/components/ttcmd"; +import { readFile } from "fs/promises"; +import Error from "next/error"; +import { Suspense } from "react"; + +export default async function Help({ + params, +}: { + params: { article: string }; +}) { + const body = readFile( + "./md/help articles/" + decodeURIComponent(params.article), + "utf-8", + ); + return ( + <> +
+

Help

+

How to use TTCMD

+
+ + + + + ); +} diff --git a/app/help/page.tsx b/app/help/page.tsx new file mode 100644 index 0000000..d2235b0 --- /dev/null +++ b/app/help/page.tsx @@ -0,0 +1,32 @@ +import { QuestionMarkCircleIcon } from "@heroicons/react/24/solid"; +import { readdir } from "fs/promises"; +import Link from "next/link"; + +export default async function HelpHome() { + const articles = await readdir("./md/help articles"); + + return ( + <> +
+

Help

+

Table of Contents

+
+
+ +
+ + ); +} diff --git a/app/layout.tsx b/app/layout.tsx index 5e4f48f..9de98d6 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -6,6 +6,7 @@ import { CircleStackIcon, Cog8ToothIcon, PuzzlePieceIcon, + QuestionMarkCircleIcon, } from "@heroicons/react/24/solid"; import Link from "next/link"; @@ -42,6 +43,11 @@ export default function RootLayout({ icon: Cog8ToothIcon, text: "Settings", }, + { + to: "/help", + icon: QuestionMarkCircleIcon, + text: "How do?", + }, ]; return ( @@ -49,7 +55,7 @@ export default function RootLayout({