handoff-app 1.1.2 → 1.1.3-1

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;
@@ -93,6 +92,12 @@ export const knownPaths = [
   'foundations/typography',
   'system',
   'system/component',
+  'system/tokens',
+  'system/tokens/foundations',
+  'system/tokens/foundations/colors',
+  'system/tokens/foundations/effects',
+  'system/tokens/foundations/typography',
+  'system/tokens/components',
 ];
 
 /**
@@ -118,95 +123,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 +227,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 +251,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 +271,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>