handoff-app 1.1.2 → 1.1.3-0

package/Changelog.md

@@ -6,6 +6,50 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## \[1.1.3] - 2026-03-27
+
+This release reworks the markdown page rendering system with four improvements:
+n-level deep routing, automatic table-of-contents generation, standardized code
+block styling, and GitHub Flavored Markdown table support.
+
+### Features
+
+- **N-level deep markdown routing** — Replaced the fixed two-level routing
+  (`[level1]` / `[level1]/[level2]`) with a single `[...slug]` catch-all route
+  that supports markdown pages at any directory depth. A new recursive
+  `buildCatchAllStaticPaths` function walks `config/docs` and `pages`
+  directories to collect `.md` files at any nesting level. The sidebar menu now
+  also recursively scans directories to surface deeply nested pages.
+
+- **Automatic table of contents** — The existing but unused `PageTOC` component
+  is now wired into the catch-all markdown page. It scans rendered headings
+  (h1–h6) via a `MutationObserver` and populates the right-hand "On This Page"
+  anchor nav automatically. Fixed a timing bug where headings were scanned
+  before the markdown content was in the DOM, and fixed anchor IDs that were
+  incorrectly prefixed with `#` (producing `##id` in URLs).
+
+- **Standardized code block styling** — Markdown fenced code blocks now render
+  with a toolbar header matching the site's `CodeHighlight` component: a
+  language icon, filename or language label, and a copy-to-clipboard button. A
+  new `remarkCodeMeta` remark plugin preserves the fence info string so metadata
+  like `` ```bash filename="deploy.sh" `` is parsed and displayed. The Prism
+  theme respects dark mode via `next-themes`, and registered languages now
+  include bash, css, scss, jsx, tsx, typescript, yaml, handlebars, and more.
+
+- **Markdown table support** — Added `remark-gfm` to all `ReactMarkdown`
+  instances across the codebase (17 files). Pipe tables, strikethrough,
+  autolinks, and task lists now render correctly. Tables are styled via Tailwind
+  Typography's `.prose table` defaults.
+
+### Changed
+
+- Deleted `src/app/pages/[level1]/index.tsx` and
+  `src/app/pages/[level1]/[level2]/index.tsx` (replaced by `[...slug]`).
+- Removed `buildL1StaticPaths`, `buildL2StaticPaths`, and the `SubPageType`
+  interface from `src/app/components/util/index.ts`.
+- `ComponentGuidelines` now uses `MarkdownComponents` and the remark plugins
+  for consistent rendering.
+
 ## \[1.1.2] - 2026-03-26
 
 This release improves integration with downstream platforms (for example HubSpot) by letting

package/dist/cli.js

@@ -19,7 +19,7 @@ class HandoffCliError extends Error {
  * Show the help message
  */
 const showVersion = () => {
-    return 'Handoff App - 1.1.2';
+    return 'Handoff App - 1.1.3';
 };
 /**
  * Define a CLI error

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handoff-app",
-  "version": "1.1.2",
+  "version": "1.1.3-0",
   "description": "Automated documentation toolchain for building client side documentation from figma",
   "author ": {
     "name": "Convertiv",
@@ -109,6 +109,7 @@
     "react-scroll": "^1.8.9",
     "react-syntax-highlighter": "^16.1.0",
     "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
     "sass": "^1.85.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss": "^4.1.14",

package/src/app/components/ComponentGuidelines.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import { MarkdownComponents, remarkCodeMeta } from './Markdown/MarkdownComponents';
 
 export interface ComponentGuidelinesProps {
   content: string;
@@ -10,7 +12,7 @@ export const ComponentGuidelines: React.FC<ComponentGuidelinesProps> = ({ conten
   return (
     <>
       <div className="prose">
-        <ReactMarkdown rehypePlugins={[rehypeRaw]}>{content}</ReactMarkdown>
+        <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>{content}</ReactMarkdown>
       </div>
     </>
   );

package/src/app/components/Markdown/MarkdownComponents.tsx

@@ -1,23 +1,56 @@
+import { useTheme } from 'next-themes';
 import React, { ReactElement } from 'react';
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
+import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
+import handlebars from 'react-syntax-highlighter/dist/esm/languages/prism/handlebars';
 import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
 import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
+import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
 import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
 import sass from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
-import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
+import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
+import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
 import html from 'react-syntax-highlighter/dist/esm/languages/prism/xml-doc';
+import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
-import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import CopyCode from '../CopyCode';
+
+import {
+  Braces,
+  Code,
+  FileCode2,
+  FileText,
+  FileType,
+  Terminal,
+} from 'lucide-react';
+
+SyntaxHighlighter.registerLanguage('bash', bash);
+SyntaxHighlighter.registerLanguage('sh', bash);
+SyntaxHighlighter.registerLanguage('shell', bash);
+SyntaxHighlighter.registerLanguage('zsh', bash);
+SyntaxHighlighter.registerLanguage('css', css);
+SyntaxHighlighter.registerLanguage('handlebars', handlebars);
+SyntaxHighlighter.registerLanguage('hbs', handlebars);
+SyntaxHighlighter.registerLanguage('javascript', js);
 SyntaxHighlighter.registerLanguage('js', js);
 SyntaxHighlighter.registerLanguage('json', json);
+SyntaxHighlighter.registerLanguage('jsx', jsx);
 SyntaxHighlighter.registerLanguage('markdown', markdown);
+SyntaxHighlighter.registerLanguage('md', markdown);
 SyntaxHighlighter.registerLanguage('sass', sass);
+SyntaxHighlighter.registerLanguage('scss', sass);
 SyntaxHighlighter.registerLanguage('tsx', tsx);
+SyntaxHighlighter.registerLanguage('typescript', typescript);
+SyntaxHighlighter.registerLanguage('ts', typescript);
 SyntaxHighlighter.registerLanguage('html', html);
-/**
- * Custom renderer type that we support
- */
+SyntaxHighlighter.registerLanguage('xml', html);
+SyntaxHighlighter.registerLanguage('yaml', yaml);
+SyntaxHighlighter.registerLanguage('yml', yaml);
+
 export type CustomRenderers = {
   code: (props: any) => ReactElement;
+  pre: (props: any) => ReactElement;
   h1: (props: any) => ReactElement;
   h2: (props: any) => ReactElement;
   h3: (props: any) => ReactElement;
@@ -27,32 +60,27 @@ export type CustomRenderers = {
   paragraph: (props: { children: React.ReactNode }) => ReactElement;
 };
 
-/**
- * Build the headers in markdown
- * @param param0
- * @returns
- */
-const Headings = (element) => {
+function extractText(node: any): string {
+  if (typeof node === 'string') return node;
+  if (typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(extractText).join('');
+  if (node?.props?.children) return extractText(node.props.children);
+  return '';
+}
+
+const Headings = (element: any) => {
   const { children, node } = element;
-  // Access actual (string) value of heading
   if (children[0]) {
-    const heading = children[0];
     const type = node.tagName || 'h6';
 
-    // If we have a heading, make it lower case
-    let anchor = heading.toString().toLowerCase();
-
-    // Clean anchor (replace special characters whitespaces).
-    // Alternatively, use encodeURIComponent() if you don't care about
-    // pretty anchor links
+    let anchor = extractText(children).toLowerCase();
     anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, '');
     anchor = anchor.replace(/ /g, '-');
 
-    // Utility
     const container = (children: React.ReactNode): React.ReactNode => (
       <>
         {children}
-        <a id={anchor} href={`#${anchor}`} className="doc-link" onClick={(e) => console.log(e)}></a>
+        <a id={anchor} href={`#${anchor}`} className="doc-link"></a>
       </>
     );
 
@@ -69,22 +97,147 @@ const Headings = (element) => {
         return <h5 className="text-sm font-bold">{container(children)}</h5>;
       case 'h6':
         return <h6 className="text-xs font-bold">{container(children)}</h6>;
-
       default:
-        return (
-          <h6 className="text-xs font-bold">
-            {JSON.stringify(type)}: {container(children)}
-          </h6>
-        );
+        return <h6 className="text-xs font-bold">{container(children)}</h6>;
     }
   } else {
     return <h1>children</h1>;
   }
 };
 
+const LANGUAGE_ICONS: Record<string, React.FC<{ className?: string }>> = {
+  bash: Terminal,
+  sh: Terminal,
+  shell: Terminal,
+  zsh: Terminal,
+  js: FileCode2,
+  javascript: FileCode2,
+  ts: FileCode2,
+  typescript: FileCode2,
+  jsx: FileCode2,
+  tsx: FileCode2,
+  css: FileType,
+  scss: FileType,
+  sass: FileType,
+  html: FileCode2,
+  xml: FileCode2,
+  json: Braces,
+  yaml: FileText,
+  yml: FileText,
+  markdown: FileText,
+  md: FileText,
+  handlebars: Code,
+  hbs: Code,
+};
+
+const LANGUAGE_LABELS: Record<string, string> = {
+  bash: 'Bash',
+  sh: 'Shell',
+  shell: 'Shell',
+  zsh: 'Zsh',
+  js: 'JavaScript',
+  javascript: 'JavaScript',
+  ts: 'TypeScript',
+  typescript: 'TypeScript',
+  jsx: 'JSX',
+  tsx: 'TSX',
+  css: 'CSS',
+  scss: 'SCSS',
+  sass: 'SASS',
+  html: 'HTML',
+  xml: 'XML',
+  json: 'JSON',
+  yaml: 'YAML',
+  yml: 'YAML',
+  markdown: 'Markdown',
+  md: 'Markdown',
+  handlebars: 'Handlebars',
+  hbs: 'Handlebars',
+  text: 'Code',
+};
+
+function parseMeta(meta: string | undefined): Record<string, string> {
+  if (!meta) return {};
+  const result: Record<string, string> = {};
+  const regex = /(\w+)="([^"]+)"/g;
+  let match;
+  while ((match = regex.exec(meta)) !== null) {
+    result[match[1]] = match[2];
+  }
+  return result;
+}
+
+function MarkdownCodeBlock(props: any) {
+  const { className, children, node, 'data-meta': dataMeta, ...rest } = props;
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === 'dark';
+
+  const langMatch = /language-(\w+)/.exec(className || '');
+  const isBlock = String(children).includes('\n');
+
+  if (!langMatch && !isBlock) {
+    return <code className={className} {...rest}>{children}</code>;
+  }
+
+  const lang = langMatch ? langMatch[1] : 'text';
+  const meta = parseMeta(dataMeta);
+  const filename = meta.filename;
+  const codeString = String(children).replace(/\n$/, '');
+  const IconComponent = LANGUAGE_ICONS[lang] || Code;
+  const langLabel = LANGUAGE_LABELS[lang] || lang;
+
+  const theme = isDark ? { ...oneDark } : { ...oneLight };
+  theme['pre[class*="language-"]'] = {
+    ...theme['pre[class*="language-"]'],
+    overflow: 'auto',
+    margin: '0',
+    borderRadius: '0 0 0.5rem 0.5rem',
+    background: isDark ? '#1e1e1e' : '#fafafa',
+  };
+
+  return (
+    <div className="not-prose my-4 min-w-0 max-w-full overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
+      <div className="flex items-center justify-between bg-gray-50 px-4 py-2 dark:bg-gray-800">
+        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+          <IconComponent className="h-4 w-4" />
+          <span>{filename || langLabel}</span>
+        </div>
+        <CopyCode code={codeString} />
+      </div>
+      <SyntaxHighlighter
+        style={theme}
+        language={lang}
+        PreTag="div"
+        showLineNumbers={lang !== 'text'}
+        wrapLines={true}
+        useInlineStyles={true}
+      >
+        {codeString}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
+
 /**
- * Build custom renderers for markdown
+ * Remark plugin that preserves the code fence meta string
+ * (the text after the language identifier) as a hast data attribute.
  */
+export function remarkCodeMeta() {
+  return (tree: any) => {
+    const walk = (node: any) => {
+      if (node.type === 'code' && node.meta) {
+        node.data = node.data || {};
+        node.data.hProperties = node.data.hProperties || {};
+        node.data.hProperties['data-meta'] = node.meta;
+      }
+      if (node.children) {
+        node.children.forEach(walk);
+      }
+    };
+    walk(tree);
+  };
+}
+
 export const MarkdownComponents: CustomRenderers = {
   h1: Headings,
   h2: Headings,
@@ -93,28 +246,8 @@ export const MarkdownComponents: CustomRenderers = {
   h5: Headings,
   h6: Headings,
   paragraph: ({ children }) => <p>{children}</p>,
-  code(props) {
-    const { className } = props;
-    const match = /language-(\w+)/.exec(className || '');
-    // This was designed to flatten out children arrays, but I think its not needed
-    // if (props.children[0]) {
-    //   props.children[0] = props.children[0].toString().trim();
-    // }
-    return match ? (
-      <SyntaxHighlighter
-        // @ts-ignore
-        style={oneLight}
-        language={match[1]}
-        PreTag="div"
-        showLineNumbers={true}
-        wrapLines={true}
-        useInlineStyles={true}
-        {...props}
-      ></SyntaxHighlighter>
-    ) : (
-      <code {...props} />
-    );
-  },
+  pre: ({ children }) => <>{children}</>,
+  code: MarkdownCodeBlock,
 };
 
 export default Headings;

package/src/app/components/Navigation/AnchorNav.tsx

@@ -18,45 +18,45 @@ interface TOCProps {
 export function PageTOC({ body, title }: TOCProps) {
   const [headers, setHeaders] = React.useState<{ id: string; title: string | null; level: number }[]>([]);
   const router = useRouter();
-  const getHeaders = () => {
-    if (body.current) {
-      const headers = Array.from(body.current.querySelectorAll('h1, h2, h3, h4, h5, h6')).map((node) => {
-        const id = anchorSlugify(node?.textContent?.toString() ?? '');
-        return {
-          id,
-          title: node.textContent,
-          level: parseInt(node.tagName[1]),
-        };
-      });
-      setHeaders(headers);
-    }
-  };
-  const headersCallback = React.useCallback(getHeaders, [body]);
+
+  const scanHeaders = React.useCallback(() => {
+    if (!body.current) return;
+    const found = Array.from(body.current.querySelectorAll('h1, h2, h3, h4, h5, h6')).map((node) => ({
+      id: anchorSlugify(node?.textContent?.toString() ?? ''),
+      title: node.textContent,
+      level: parseInt(node.tagName[1]),
+    }));
+    setHeaders(found);
+  }, [body]);
 
   useEffect(() => {
-    router.events.on('routeChangeComplete', () => {
-      headersCallback();
-    });
-    return () => {
-      router.events.off('routeChangeComplete', () => {
-        headersCallback();
-      });
-    };
-  }, [router, headersCallback]);
+    // Scan after paint to catch SSR-hydrated content
+    requestAnimationFrame(scanHeaders);
+
+    // Watch for dynamically inserted headings (client-rendered markdown)
+    const el = body.current;
+    if (!el) return;
+    const observer = new MutationObserver(scanHeaders);
+    observer.observe(el, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [body, scanHeaders]);
+
   useEffect(() => {
-    headersCallback();
-  }, [body, headersCallback]);
+    const handler = () => requestAnimationFrame(scanHeaders);
+    router.events.on('routeChangeComplete', handler);
+    return () => router.events.off('routeChangeComplete', handler);
+  }, [router, scanHeaders]);
   return (
     <AnchorNav
       title={title}
       groups={headers.reduce((acc, header) => {
         if (header.level === 1) {
-          acc.push({ [`#${header.id}`]: header.title ?? '' });
+          acc.push({ [header.id]: header.title ?? '' });
         } else {
           if (acc.length === 0) {
-            acc.push({ [`#${header.id}`]: header.title ?? '' });
+            acc.push({ [header.id]: header.title ?? '' });
           } else {
-            acc[acc.length - 1][`#${header.id}`] = header.title ?? '';
+            acc[acc.length - 1][header.id] = header.title ?? '';
           }
         }
         return acc;

package/src/app/components/util/index.ts

@@ -7,13 +7,12 @@ import { Types as CoreTypes } from 'handoff-core';
 import { groupBy, startCase, uniq } from 'lodash';
 import path from 'path';
 import { ParsedUrlQuery } from 'querystring';
-import { SubPageType } from '../../pages/[level1]/[level2]';
-
 // Get the parsed url string type
 export interface IParams extends ParsedUrlQuery {
-  slug: string;
+  slug: string | string[];
 }
 
+
 // Type for the metadata from frontmatter
 export interface Metadata {
   title: string;
@@ -118,95 +117,99 @@ export const pluralizeComponent = (singular: string): string => {
 };
 
 /**
- * Build level 1 static path parameters
- * @returns
+ * Recursively collect all .md files from a directory, returning their
+ * path segments relative to the root (without the .md extension).
  */
-export const buildL1StaticPaths = () => {
-  const docRoot = path.resolve(process.env.HANDOFF_MODULE_PATH ?? '', 'config/docs');
-  const files = fs.readdirSync(docRoot);
-  const pageRoot = path.resolve(process.env.HANDOFF_WORKING_PATH ?? '', 'pages');
-  let list = files;
-  if (fs.existsSync(pageRoot)) {
-    const pages = fs.readdirSync(pageRoot);
-    list = files.concat(pages);
+const collectMarkdownPaths = (rootDir: string, relativeParts: string[] = []): string[][] => {
+  if (!fs.existsSync(rootDir)) return [];
+  const entries = fs.readdirSync(rootDir);
+  const results: string[][] = [];
+  for (const entry of entries) {
+    const fullPath = path.join(rootDir, entry);
+    if (fs.lstatSync(fullPath).isDirectory()) {
+      results.push(...collectMarkdownPaths(fullPath, [...relativeParts, entry]));
+    } else if (entry.endsWith('.md') && entry !== 'index.md') {
+      results.push([...relativeParts, entry.replace('.md', '')]);
+    }
   }
-  const paths = list
-    .filter((fileName) => {
-      if (fs.existsSync(path.join(docRoot, fileName))) return !fs.lstatSync(path.join(docRoot, fileName)).isDirectory();
-      if (fs.existsSync(path.join(pageRoot, fileName))) return !fs.lstatSync(path.join(pageRoot, fileName)).isDirectory();
-      return false;
-    })
-    .filter((fileName) => fileName.endsWith('.md'))
-    .map((fileName) => {
-      const path = fileName.replace('.md', '');
-      if (knownPaths.indexOf(path) < 0) {
-        return {
-          params: {
-            level1: path,
-          },
-        };
-      }
-    })
-    .filter(filterOutUndefined);
-  return paths;
+  return results;
 };
 
 /**
- * Build static paths for level 2
- * @returns SubPathType[]
+ * Build catch-all static paths for all markdown pages at any depth.
+ * Excludes paths in knownPaths (those have dedicated route files).
  */
-export const buildL2StaticPaths = () => {
+export const buildCatchAllStaticPaths = () => {
   const docRoot = path.resolve(process.env.HANDOFF_MODULE_PATH ?? '', 'config/docs');
-  const files = fs.readdirSync(docRoot);
   const pageRoot = path.resolve(process.env.HANDOFF_WORKING_PATH ?? '', 'pages');
-  let list = files;
-  if (fs.existsSync(pageRoot)) {
-    const pages = fs.readdirSync(pageRoot);
-    list = files.concat(pages);
+
+  const docPaths = collectMarkdownPaths(docRoot);
+  const pagePaths = collectMarkdownPaths(pageRoot);
+
+  const seen = new Set<string>();
+  const allPaths: string[][] = [];
+
+  // Pages override docs (working copy wins)
+  for (const segments of [...pagePaths, ...docPaths]) {
+    const key = segments.join('/');
+    if (!seen.has(key)) {
+      seen.add(key);
+      allPaths.push(segments);
+    }
   }
-  const paths: SubPageType[] = list
-    .flatMap((fileName) => {
-      let calculatePath;
-      if (fs.existsSync(path.join(pageRoot, fileName))) {
-        calculatePath = path.join(pageRoot, fileName);
-      } else if (fs.existsSync(path.join(docRoot, fileName))) {
-        calculatePath = path.join(docRoot, fileName);
-      } else {
-        return undefined;
-      }
-      if (fs.lstatSync(calculatePath).isDirectory()) {
-        const subFiles = fs.readdirSync(calculatePath);
-        return subFiles
-          .filter((subFile) => subFile.endsWith('.md'))
-          .flatMap((subFile) => {
-            const childPath = fileName.replace('.md', '');
-            if (knownPaths.indexOf(fileName + '/' + subFile.replace('.md', '')) < 0) {
-              return {
-                params: {
-                  level1: fileName,
-                  level2: subFile.replace('.md', ''),
-                },
-              };
-            } else {
-              console.log('file path already exists', fileName + '/' + subFile.replace('.md', ''));
-            }
-          })
-          .filter(filterOutUndefined);
+
+  return allPaths
+    .filter((segments) => knownPaths.indexOf(segments.join('/')) < 0)
+    .map((segments) => ({ params: { slug: segments } }));
+};
+
+/**
+ * Recursively build menu entries from .md files in a directory.
+ * Returns sub-section items with nested menu items for subdirectories.
+ */
+const buildMenuFromDirectory = (dirPath: string, urlPrefix: string): any[] => {
+  if (!fs.existsSync(dirPath)) return [];
+  const entries = fs.readdirSync(dirPath);
+  const items: any[] = [];
+
+  for (const entry of entries) {
+    const fullPath = path.join(dirPath, entry);
+    if (fs.lstatSync(fullPath).isDirectory()) {
+      const nestedItems = buildMenuFromDirectory(fullPath, `${urlPrefix}/${entry}`);
+      if (nestedItems.length > 0) {
+        items.push({
+          title: startCase(entry),
+          path: `${urlPrefix}/${entry}`,
+          menu: nestedItems,
+        });
       }
-    })
-    .filter(filterOutUndefined);
-  return paths;
+    } else if (entry.endsWith('.md') && entry !== 'index.md') {
+      const slug = entry.replace('.md', '');
+      const fullSlugPath = `${urlPrefix}/${slug}`.replace(/^\/+/, '');
+      if (knownPaths.indexOf(fullSlugPath) >= 0) continue;
+
+      const contents = fs.readFileSync(fullPath, 'utf-8');
+      const { data: metadata } = matter(contents);
+      if (metadata.enabled === false) continue;
+
+      items.push({
+        title: metadata.menuTitle ?? metadata.title ?? startCase(slug),
+        path: `/${fullSlugPath}`,
+        weight: metadata.weight ?? 0,
+      });
+    }
+  }
+
+  return items.sort((a, b) => (a.weight ?? 0) - (b.weight ?? 0));
 };
 
 /**
- * Build the static menu for rendeirng pages
+ * Build the static menu for rendering pages
  * @returns SectionLink[]
  */
 export const staticBuildMenu = () => {
-  // // Contents of docs
   const docRoot = path.join(process.env.HANDOFF_MODULE_PATH ?? '', 'config/docs');
-  // Get the file list
-  if(!fs.existsSync(docRoot)) {
+  if (!fs.existsSync(docRoot)) {
     return [];
   }
   const files = fs.readdirSync(docRoot);
@@ -218,7 +221,6 @@ export const staticBuildMenu = () => {
     list = list.concat(pages);
   }
   const sections: SectionLink[] = [];
-  // Build path tree
   const custom = uniq(list)
     .map((fileName: string) => {
       let search = '';
@@ -243,19 +245,16 @@ export const staticBuildMenu = () => {
         let subSections = [];
 
         if (metadata.menu) {
-          // Build the submenu
           subSections = Object.keys(metadata.menu)
             .map((key) => {
               const sub = metadata.menu[key];
               if (sub.components) {
-                // The user wants to inject the component menu here
                 return {
                   title: sub.title,
                   menu: staticBuildComponentMenu(sub.components),
                 };
               }
               if (sub.tokens) {
-                // The user wants to inject the component menu here
                 return {
                   title: 'Tokens',
                   menu: staticBuildTokensMenu(),
@@ -266,6 +265,21 @@ export const staticBuildMenu = () => {
               }
             })
             .filter(filterOutUndefined);
+        } else {
+          // Only auto-scan directories when no frontmatter menu is defined
+          const dirName = fileName.replace('.md', '');
+          const docDir = path.resolve(docRoot, dirName);
+          const pagesDir = path.resolve(workingPages, dirName);
+          const nestedFromDocs = buildMenuFromDirectory(docDir, `/${dirName}`);
+          const nestedFromPages = buildMenuFromDirectory(pagesDir, `/${dirName}`);
+
+          const seenPaths = new Set<string>();
+          for (const item of [...nestedFromPages, ...nestedFromDocs]) {
+            if (item.path && !seenPaths.has(item.path)) {
+              seenPaths.add(item.path);
+              subSections.push(item);
+            }
+          }
         }
 
         let external: string | boolean = false;

package/src/app/css/index.css

@@ -6,6 +6,10 @@
 @plugin '@tailwindcss/typography';
 @plugin '@tailwindcss/container-queries';
 
+.prose {
+	max-width: 100%;
+}
+
 @custom-variant dark (&:is(.dark *));
 
 @theme {

package/src/app/pages/{[level1] → [...slug]}/index.tsx

@@ -1,56 +1,46 @@
 import { GetStaticProps } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
+import { useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import Layout from '../../components/Layout/Main';
-import { MarkdownComponents } from '../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
+import { PageTOC } from '../../components/Navigation/AnchorNav';
 import HeadersType from '../../components/Typography/Headers';
 import {
-  buildL1StaticPaths,
+  buildCatchAllStaticPaths,
   DocumentationProps,
   fetchDocPageMarkdown,
   getClientRuntimeConfig,
-  IParams,
-  reduceSlugToString,
 } from '../../components/util';
 
-/**
- * Render all index pages
- * @returns
- */
 export async function getStaticPaths() {
   return {
-    paths: buildL1StaticPaths(),
+    paths: buildCatchAllStaticPaths(),
     fallback: false,
   };
 }
 
-/**
- * Get all the markdown data, build a menu tree, and then fetch the contents
- * of the current page for rendering
- *
- * This is all done statically at build time
- * @param context GetStaticProps
- * @returns
- */
 export const getStaticProps: GetStaticProps = (context) => {
-  // Read current slug
-  const { level1 } = context.params as IParams;
+  const { slug } = context.params as { slug: string[] };
+  const dirParts = slug.slice(0, -1);
+  const file = slug[slug.length - 1];
+  const docPath = dirParts.length > 0 ? `docs/${dirParts.join('/')}/` : 'docs/';
+  const sectionId = `/${slug[0]}`;
+
   return {
     props: {
-      ...fetchDocPageMarkdown('docs/', reduceSlugToString(level1), `/${level1}`).props,
+      ...fetchDocPageMarkdown(docPath, file, sectionId).props,
       config: getClientRuntimeConfig(),
     },
   };
 };
 
-/**
- * Render Docs page
- * @param param0
- * @returns
- */
-export default function DocPage({ content, menu, metadata, current, config }: DocumentationProps) {
+export default function DocCatchAllPage({ content, menu, metadata, current, config }: DocumentationProps) {
+  const bodyRef = useRef<HTMLDivElement>(null);
+
   if (content) {
     return (
       <Layout config={config} menu={menu} current={current} metadata={metadata}>
@@ -58,12 +48,15 @@ export default function DocPage({ content, menu, metadata, current, config }: Do
           <HeadersType.H1>{metadata.title}</HeadersType.H1>
           <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">{metadata.description}</p>
         </div>
-        <div>
-          <div className="prose mb-10">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
-              {content}
-            </ReactMarkdown>
+        <div className="lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
+          <div className="min-w-0">
+            <div className="prose mb-10" ref={bodyRef}>
+              <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
+                {content}
+              </ReactMarkdown>
+            </div>
           </div>
+          <PageTOC body={bodyRef} title="On This Page" />
         </div>
       </Layout>
     );

package/src/app/pages/assets/fonts.tsx

@@ -7,8 +7,9 @@ import path from 'path';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import Footer from '../../components/Footer';
-import { MarkdownComponents } from '../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
 import Header from '../../components/old/Header';
 import { fetchDocPageMarkdown, FontDocumentationProps, getClientRuntimeConfig, getTokens } from '../../components/util';
 
@@ -92,7 +93,7 @@ const FontsPage = ({ content, menu, metadata, current, customFonts, design, conf
           ))}
 
           <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
               {content}
             </ReactMarkdown>
           </div>

package/src/app/pages/assets/index.tsx

@@ -3,8 +3,9 @@ import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import Footer from '../../components/Footer';
-import { MarkdownComponents } from '../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
 import NavLink from '../../components/NavLink';
 import Header from '../../components/old/Header';
 import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from '../../components/util';
@@ -77,7 +78,7 @@ const AssetsPage = ({ content, menu, metadata, current, config }: DocumentationP
           </div>
 
           <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
               {content}
             </ReactMarkdown>
           </div>

package/src/app/pages/assets/logos.tsx

@@ -3,8 +3,9 @@ import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import Footer from '../../components/Footer';
-import { MarkdownComponents } from '../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
 import Header from '../../components/old/Header';
 import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from '../../components/util';
 
@@ -57,7 +58,7 @@ const AssetsLogosPage = ({ content, menu, metadata, current, config }: Documenta
             </div>
           </div>
           <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
               {content}
             </ReactMarkdown>
           </div>

package/src/app/pages/foundations/colors.tsx

@@ -3,10 +3,11 @@ import upperFirst from 'lodash/upperFirst';
 import type { GetStaticProps } from 'next';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import ColorGrid from '../..//components/Foundations/ColorGrid';
 import { DownloadTokens } from '../../components/DownloadTokens';
 import Layout from '../../components/Layout/Main';
-import { MarkdownComponents } from '../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
 import AnchorNav from '../../components/Navigation/AnchorNav';
 import PrevNextNav from '../../components/Navigation/PrevNextNav';
 import HeadersType from '../../components/Typography/Headers';
@@ -89,7 +90,7 @@ const ColorsPage = ({
         />
 
         <div className="prose">
-          <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+          <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
             {content}
           </ReactMarkdown>
         </div>

package/src/app/pages/foundations/effects.tsx

@@ -6,9 +6,10 @@ import type { GetStaticProps } from 'next';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import { DownloadTokens } from '../../components/DownloadTokens';
 import Layout from '../../components/Layout/Main';
-import { MarkdownComponents } from '../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
 import AnchorNav from '../../components/Navigation/AnchorNav';
 import HeadersType from '../../components/Typography/Headers';
 import * as util from '../../components/util';
@@ -128,7 +129,7 @@ const EffectsPage = ({
         />
 
         <div className="prose">
-          <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+          <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
             {content}
           </ReactMarkdown>
         </div>

package/src/app/pages/foundations/icons/index.tsx

@@ -5,9 +5,10 @@ import Link from 'next/link';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import Footer from '../../../components/Footer';
 import Layout from '../../../components/Layout/Main';
-import { MarkdownComponents } from '../../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../../components/Markdown/MarkdownComponents';
 import HeadersType from '../../../components/Typography/Headers';
 import { buttonVariants } from '../../../components/ui/button';
 import { Input } from '../../../components/ui/input';
@@ -99,7 +100,7 @@ const IconsPage = ({ content, menu, metadata, current, config, assets }: AssetDo
       </div>
       <hr className="mb-10" />
       <div className="prose">
-        <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+        <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
           {content}
         </ReactMarkdown>
       </div>

package/src/app/pages/foundations/index.tsx

@@ -2,9 +2,10 @@ import { Hexagon, LayoutPanelLeft, Palette, Shapes, Sun, TypeOutline } from 'luc
 import type { GetStaticProps } from 'next';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import CardsWithIcons from '../../components/cards/CardsWithIcons';
 import Layout from '../../components/Layout/Main';
-import { MarkdownComponents } from '../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
 import HeadersType from '../../components/Typography/Headers';
 import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from '../../components/util';
 
@@ -33,7 +34,7 @@ const DesignPage = ({ content, menu, metadata, current, config }: DocumentationP
         <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">{metadata.description}</p>
       </div>
       <div className="prose">
-        <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+        <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
           {content}
         </ReactMarkdown>
       </div>

package/src/app/pages/foundations/logo.tsx

@@ -6,9 +6,10 @@ import { AssetDocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig,
 import { Download } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import { DisplayLogo } from '../../components/Foundations/DisplayLogo';
 import Layout from '../../components/Layout/Main';
-import { MarkdownComponents } from '../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
 import HeadersType from '../../components/Typography/Headers';
 import { buttonVariants } from '../../components/ui/button';
 
@@ -73,7 +74,7 @@ const LogoPage = ({ content, menu, metadata, current, config, assets }: AssetDoc
       <hr />
       <hr />
       <div className="prose">
-        <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+        <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
           {content}
         </ReactMarkdown>
       </div>

package/src/app/pages/foundations/typography.tsx

@@ -3,10 +3,11 @@ import sortedUniq from 'lodash/sortedUniq';
 import type * as next from 'next';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import { DownloadTokens } from '../../components/DownloadTokens';
 import TypographyExamples from '../../components/Foundations/TypographyExample';
 import Layout from '../../components/Layout/Main';
-import { MarkdownComponents } from '../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
 import AnchorNav, { anchorSlugify } from '../../components/Navigation/AnchorNav';
 import HeadersType from '../../components/Typography/Headers';
 import { fetchFoundationDocPageMarkdown, FoundationDocumentationProps, getClientRuntimeConfig, getTokens } from '../../components/util';
@@ -124,7 +125,7 @@ const Typography = ({
         />
 
         <div className="prose">
-          <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+          <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
             {content}
           </ReactMarkdown>
         </div>

package/src/app/pages/index.tsx

@@ -5,9 +5,10 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import Footer from '../components/Footer';
 import Layout from '../components/Layout/Main';
-import { MarkdownComponents } from '../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../components/Markdown/MarkdownComponents';
 import HeadersType from '../components/Typography/Headers';
 import { Button } from '../components/ui/button';
 import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from '../components/util';
@@ -41,7 +42,7 @@ const Home = ({ content, menu, metadata, config, current }: DocumentationProps)
           </HeadersType.H1>
           {content && (
             <div className="text-lg max-w-4xl empty:hidden [&>*]:mt-6 [&>p]:font-light [&>h2:first-child]:mt-0 [&>h2:first-child]:font-normal sm:text-xl">
-              <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+              <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
                 {content}
               </ReactMarkdown>
             </div>

package/src/app/pages/system/component/[component]/index.tsx

@@ -6,11 +6,12 @@ import { startCase } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import { ComponentPreview } from '../../../../components/Component/Preview';
 import { HotReloadProvider } from '../../../../components/context/HotReloadProvider';
 import { PreviewContextProvider } from '../../../../components/context/PreviewContext';
 import Layout from '../../../../components/Layout/Main';
-import { MarkdownComponents } from '../../../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../../../components/Markdown/MarkdownComponents';
 import AnchorNav from '../../../../components/Navigation/AnchorNav';
 import PrevNextNav from '../../../../components/Navigation/PrevNextNav';
 import HeadersType from '../../../../components/Typography/Headers';
@@ -172,7 +173,7 @@ const GenericComponentPage = ({ menu, metadata, current, id, config, componentHo
         <HeadersType.H1>{metadata.title}</HeadersType.H1>
         <div className="flex flex-row justify-between gap-4 md:flex-col">
           <div className="prose max-w-[800px] text-xl  font-light leading-relaxed text-gray-600 dark:text-gray-300">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
               {metadata.description}
             </ReactMarkdown>
           </div>

package/src/app/pages/system/index.tsx

@@ -5,9 +5,10 @@ import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import { APIComponentList } from '../../components/Component/ComponentLists';
 import Layout from '../../components/Layout/Main';
-import { MarkdownComponents } from '../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
 import HeadersType from '../../components/Typography/Headers';
 import { Button } from '../../components/ui/button';
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '../../components/ui/drawer';
@@ -127,7 +128,7 @@ const ComponentsPage = ({ content, menu, metadata, current, config }: ComponentP
       </div>
       <div>
         <div className="prose mb-10">
-          <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+          <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
             {content}
           </ReactMarkdown>
         </div>

package/src/app/pages/system/tokens/foundations/colors.tsx

@@ -3,8 +3,9 @@ import { groupBy, upperFirst } from 'lodash';
 import type { GetStaticProps } from 'next';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import Layout from '../../../../components/Layout/Main';
-import { MarkdownComponents } from '../../../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../../../components/Markdown/MarkdownComponents';
 import AnchorNav from '../../../../components/Navigation/AnchorNav';
 import HeadersType from '../../../../components/Typography/Headers';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../../components/ui/table';
@@ -67,7 +68,7 @@ const ComponentsPage = ({ content, menu, metadata, current, config, design }: Fo
       <div className="mt-10 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
         <div>
           <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
               {content}
             </ReactMarkdown>
           </div>

package/src/app/pages/system/tokens/foundations/effects.tsx

@@ -3,8 +3,9 @@ import { groupBy, upperFirst } from 'lodash';
 import type { GetStaticProps } from 'next';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import Layout from '../../../../components/Layout/Main';
-import { MarkdownComponents } from '../../../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../../../components/Markdown/MarkdownComponents';
 import AnchorNav from '../../../../components/Navigation/AnchorNav';
 import HeadersType from '../../../../components/Typography/Headers';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../../components/ui/table';
@@ -61,7 +62,7 @@ const ComponentsPage = ({ content, menu, metadata, current, config, design }: Fo
       <div className="mt-10 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
         <div>
           <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
               {content}
             </ReactMarkdown>
           </div>

package/src/app/pages/system/tokens/foundations/typography.tsx

@@ -4,8 +4,9 @@ import type { GetStaticProps } from 'next';
 import React, { ReactElement } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import Layout from '../../../../components/Layout/Main';
-import { MarkdownComponents } from '../../../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../../../components/Markdown/MarkdownComponents';
 import AnchorNav from '../../../../components/Navigation/AnchorNav';
 import HeadersType from '../../../../components/Typography/Headers';
 import { Table, TableBody, TableCell, TableRow } from '../../../../components/ui/table';
@@ -53,7 +54,7 @@ const ComponentsPage = ({ content, menu, metadata, current, config, design }: Fo
       <div className="mt-10 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
         <div>
           <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
               {content}
             </ReactMarkdown>
           </div>

package/src/cli.ts

@@ -19,7 +19,7 @@ class HandoffCliError extends Error {
  * Show the help message
  */
 const showVersion = () => {
-  return 'Handoff App - 1.1.2';
+  return 'Handoff App - 1.1.3';
 };
 
 /**

package/src/app/pages/[level1]/[level2]/index.tsx

@@ -1,104 +0,0 @@
-import { GetStaticProps } from 'next';
-import Head from 'next/head';
-import Link from 'next/link';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import Layout from '../../../components/Layout/Main';
-import { MarkdownComponents } from '../../../components/Markdown/MarkdownComponents';
-import HeadersType from '../../../components/Typography/Headers';
-import {
-  buildL2StaticPaths,
-  DocumentationProps,
-  fetchDocPageMarkdown,
-  getClientRuntimeConfig,
-  IParams,
-  reduceSlugToString,
-} from '../../../components/util';
-
-export interface SubPageType {
-  params: {
-    level1: string;
-    level2: string;
-  };
-}
-/**
- * Render all index pages
- * @returns
- */
-export async function getStaticPaths() {
-  return {
-    paths: buildL2StaticPaths(),
-    fallback: false,
-  };
-}
-/**
- * Get all the markdown data, build a menu tree, and then fetch the contents
- * of the current page for rendering
- *
- * This is all done statically at build time
- * @param context GetStaticProps
- * @returns
- */
-export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
-  const { level1 } = context.params as IParams;
-  let { level2 } = context.params as IParams;
-  if (!level2) {
-    level2 = '404';
-  }
-  return {
-    props: {
-      ...fetchDocPageMarkdown(`docs/${level1}/`, reduceSlugToString(level2), `/${level1}`).props,
-      config: getClientRuntimeConfig(),
-    },
-  };
-};
-
-/**
- * Render Docs page
- * @param param0
- * @returns
- */
-export default function DocSubPage({ content, menu, metadata, current, config }: DocumentationProps) {
-  if (content) {
-    return (
-      <Layout config={config} menu={menu} current={current} metadata={metadata}>
-        <div className="flex flex-col gap-2 pb-7">
-          <HeadersType.H1>{metadata.title}</HeadersType.H1>
-          <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">{metadata.description}</p>
-        </div>
-        <div>
-          <div className="prose mb-10">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
-              {content}
-            </ReactMarkdown>
-          </div>
-        </div>
-      </Layout>
-    );
-  } else {
-    return (
-      <div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-gray-900">
-        <Head>
-          <title>404 - Page Not Found</title>
-          <meta name="description" content="Page Not Found" />
-        </Head>
-        <div className="flex flex-col items-center">
-          <div className="mb-2 text-7xl font-bold text-gray-800 dark:text-white">404</div>
-          <h1 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-300">Oops! Page not found.</h1>
-          <p className="mb-6 max-w-md text-center text-gray-500 dark:text-gray-400">
-            Sorry, the page you are looking for does not exist or has been moved.
-            <br />
-            Please check the URL or return to the homepage.
-          </p>
-          <Link
-            href="/"
-            className="rounded-md bg-blue-600 px-6 py-2 font-medium text-white shadow-md transition-colors duration-200 hover:bg-blue-700"
-          >
-            Go Home
-          </Link>
-        </div>
-      </div>
-    );
-  }
-}