ttcMD: adds frontmatter extraction and token,

fixes inline-code... again

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>
         )}