ttcmd: adds hr element

help pages: adds a way to extract the table of contents to the parent,
smoothes out the rough loading on help pages

app/help/[article]/client.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { TTCMD, TTCMDRenderer } from "@/components/ttcmd";
+import { FC, use, useCallback, useState } from "react";
+
+export const HelpClient: FC<{ body: Promise<string>; title: string }> = ({
+  body: bodyPromise,
+  title,
+}) => {
+  const body = use(bodyPromise);
+  const [toc, setToc] = useState<Token[]>();
+  const escapeTOC = useCallback((t: Token[]) => {
+    setToc(t);
+    return true;
+  }, []);
+
+  return (
+    <>
+      <section className="heading">
+        <h2 className="strapline">Help</h2>
+        <h1>{decodeURIComponent(title)}</h1>
+      </section>
+      <section className="grid grid-cols-3 gap-x-8 gap-y-6 my-6">
+        <div className="col-span-2">
+          <TTCMD
+            body={body}
+            escapeTOC={escapeTOC}
+          />
+        </div>
+        {toc && (
+          <div className="sticky top-8 h-min">
+            <TTCMDRenderer tokens={toc} />
+          </div>
+        )}
+      </section>
+    </>
+  );
+};

app/help/[article]/loading.tsx

@@ -0,0 +1,5 @@
+import { Loader } from "@/components/loader";
+
+export default function Loading() {
+  return <Loader />;
+}

app/help/[article]/page.tsx

@@ -1,31 +1,25 @@
-import { TTCMD } from "@/components/ttcmd";
-import { ArrowLeftCircleIcon } from "@heroicons/react/24/solid";
-import { readFile } from "fs/promises";
+import { readMD } from "@/actions/readMD";
+import { HelpClient } from "./client";
 import { Suspense } from "react";
+import { Loader } from "@/components/loader";
+
+// export const
 
 export default async function Help({
   params,
 }: {
   params: { article: string };
 }) {
-  if (!params.article.endsWith(".md")) return <></>;
-  const body = readFile(
+  if (!params.article.endsWith(".md")) return;
+  const body = readMD(
     "./md/help articles/" + decodeURIComponent(params.article),
-    "utf-8",
   );
   return (
-    <>
-      <section className="heading">
-        <h2 className="strapline">Help</h2>
-        <h1>{decodeURIComponent(params.article).replace(".md", "")}</h1>
-      </section>
-      <section className="grid grid-cols-3 gap-x-8 gap-y-6 my-6">
-        <div className="col-span-2">
-          <Suspense>
-            <TTCMD body={body} />
-          </Suspense>
-        </div>
-      </section>
-    </>
+    <Suspense fallback={<Loader />}>
+      <HelpClient
+        body={body}
+        title={decodeURIComponent(params.article).replace(".md", "")}
+      />
+    </Suspense>
   );
 }