ttcMD: adds frontmatter extraction and token,

fixes inline-code... again

app/globals.css

@@ -31,7 +31,7 @@
   }
 
   .heading {
-    @apply pb-8 border-b border-b-primary-500 dark:border-b-dark-500 min-w-full;
+    @apply pb-6 border-b border-b-primary-500 dark:border-b-dark-500 min-w-full;
   }
   .heading h1 {
     @apply text-5xl font-bold;
@@ -68,7 +68,7 @@
     @apply rounded-t-md;
   }
   .accordion:has(+ .accordion) {
-    @apply border-b border-black/20;
+    @apply border-b border-black/20 dark:border-white/20;
   }
   .accordion:not(:has(+ .accordion)) {
     @apply rounded-b-md;

app/help/[article]/client.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { TTCMD, TTCMDRenderer } from "@/components/ttcmd";
-import { FC, use, useCallback, useState } from "react";
+import { extractFrontMatter } from "@/lib/tcmd";
+import { FC, use, useCallback, useEffect, useState } from "react";
 
 export const HelpClient: FC<{ body: Promise<string>; title: string }> = ({
   body: bodyPromise,
@@ -14,21 +15,47 @@ export const HelpClient: FC<{ body: Promise<string>; title: string }> = ({
     return true;
   }, []);
 
+  const [frontMatter, setFrontMatter] = useState<FrontMatter>({});
+  const [cleanBody, setBody] = useState<string>("");
+
+  useEffect(() => {
+    if (!body) return;
+
+    const [frontmatter, clean] = extractFrontMatter(body);
+    setFrontMatter(frontmatter);
+    setBody(clean);
+  }, [body]);
+
   return (
     <>
       <section className="heading">
         <h2 className="strapline">Help</h2>
-        <h1>{decodeURIComponent(title)}</h1>
+        <h1>{frontMatter.title || decodeURIComponent(title)}</h1>
+        <div className="text-white/50">
+          {!!frontMatter.date && (
+            <div className="text-white/50">
+              Published: {frontMatter.date}
+              {!!frontMatter.updated && (
+                <span className="text-white/50">
+                  , Last updated: {frontMatter.updated}
+                </span>
+              )}
+            </div>
+          )}
+          {!!frontMatter.author && (
+            <div className="italic text-white/50">By: {frontMatter.author}</div>
+          )}
+        </div>
       </section>
       <section className="grid grid-cols-3 gap-x-8 gap-y-6 my-6">
         <div className="col-span-2">
           <TTCMD
-            body={body}
+            body={cleanBody}
             escapeTOC={escapeTOC}
           />
         </div>
         {toc && (
-          <div className="sticky top-8 h-min">
+          <div className="sticky top-6 h-min">
             <TTCMDRenderer tokens={toc} />
           </div>
         )}