fix: frontmatter prose do not work on mdx

gerardnico · gerardnico · commit 16f6df831164 · 2026-05-21T13:33:07.000+02:00
diff --git a/apps/site/pages/howto/add-a-layout.md b/apps/site/pages/howto/add-a-layout.md
@@ -27,7 +27,7 @@ export function MinimalLayout(layoutProps: LayoutProps) {
         <Html {...layoutProps}>
             <Head {...layoutProps} />
             <Body {...layoutProps}>
-                <main className={layoutProps.page.frontmatter?.prose && "prose"}>
+                <main className={layoutProps.context.meta.isProsePage ? "prose" : ""}>
                     {layoutProps.page.contentElement}
                 </main>
             </Body>
diff --git a/apps/site/pages/reference/markdown-component.md b/apps/site/pages/reference/markdown-component.md
@@ -2,7 +2,7 @@
 title: Markdown Component
 ---
 
-Markdown component are [components](component.md#type) that can be used:
+Markdown components are [components](component.md#type) that can be used:
 
 * in [mdx pages](mdx.md)
 * in [md pages](md-page.md) if the chosen format is `mdc` or `mdx`
diff --git a/apps/site/pages/reference/tailwind.md b/apps/site/pages/reference/tailwind.md
@@ -9,36 +9,41 @@ So you can:
 
 * apply any [Tailwind class](https://tailwindcss.com/docs/styling-with-utility-classes)
 * configure it and add [custom styles](https://tailwindcss.com/docs/adding-custom-styles) in
-  the [global CSS file](#global-css-file)
+  the [global CSS file](#configuration)
 
-## Global CSS File
+## Configuration
 
 The [global CSS file](styling.md#global-css-file) is the tailwind entry point.
 
-### Default
+We follow the [shadcn convention with CSS Variable](https://ui.shadcn.com/docs/theming).
+
 
-The default global CSS file import:
+### Imports and plugins
 
-* tailwind source (ie)
+The default global CSS file import
 
 ```css
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
+
+@plugin "@tailwindcss/typography";
 ```
 
-* and our utilities classes:
-  * for the [grid system](../components/grid.md)
-  * `icon`
-* and default publishing style for headings, list, ...
+where `@tailwindcss/typography` is used for [Prose content](styling.md#prose-content)
+that sets the default publishing style for headings, list, ...
+
+### Utilities class
+
+* for the [grid system](../components/grid.md)
+* `icon`
 
-We follow the [shadcn convention with CSS Variable](https://ui.shadcn.com/docs/theming).
 
-### Custom
+## Custom Implementation
 
 A custom default minimal implementation of the [global CSS file](styling.md#global-css-file) would
 
-* import the [default interact configuration](#default)
+* import the [default interact configuration](#configuration)
 * and add
   * the custom `components` directory
   * and the [pages directory](directory-layout.md)
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "@svgr/core": "8.1.0",
     "@svgr/plugin-jsx": "8.1.0",
     "@svgr/plugin-svgo": "8.1.0",
+    "@tailwindcss/typography": "0.5.19",
     "@tailwindcss/vite": "4.2.2",
     "@vitejs/plugin-react": "5.1.4",
     "@vitejs/plugin-rsc": "0.5.21",
diff --git a/src/interact/componentsProvider/contextProps.d.ts b/src/interact/componentsProvider/contextProps.d.ts
@@ -19,7 +19,8 @@ export type ContextProps = {
         isRscActionRequest: boolean // true if this is a server action call (POST request)
         rscActionId?: string // server action ID from x-rsc-action header
         isMarkdownRequest: boolean // true if this is a Markdown request
-        lastModified?: string; // last time modified (iso string)
+        lastModifiedPage?: string; // last modified time of the page (iso string)
+        isProsePage?: boolean // treats the page has prose content and add a prose class
     } & Record<string, string | boolean | undefined>
     response: {
         status?: number
diff --git a/src/resources/components/interact/AnchorSkinnable.tsx b/src/resources/components/interact/AnchorSkinnable.tsx
@@ -51,9 +51,9 @@ export default function AnchorSkinnable({
             }
             {variant === 'link' && children}
             {variant === 'button' && (
-                <div className={"flex flex-row items-center justify-between w-full"}>
+                <div className={"flex flex-row items-center justify-between w-full text-primary"}>
                     <span>{children}</span>
-                    <Arrow className={"text-primary align-bottom"} width="14"/>
+                    <Arrow className={"align-bottom"} width="14"/>
                 </div>
             )}
         </Anchor>
diff --git a/src/resources/components/layouts/Hamburger.tsx b/src/resources/components/layouts/Hamburger.tsx
@@ -23,7 +23,7 @@ export default function Hamburger(layoutProps: LayoutProps) {
                     cn(
                         interactConfig.template.container.containerClass,
                         "position-relative",
-                        layoutProps.page.frontmatter?.prose && "prose"
+                        layoutProps.context.meta.isProsePage && "prose"
                     )}>
                     <main>
                         {layoutProps.page.contentElement}
diff --git a/src/resources/components/layouts/Holy.tsx b/src/resources/components/layouts/Holy.tsx
@@ -38,7 +38,7 @@ export default function Holy(layoutProps: LayoutProps) {
                             <Toc {...layoutProps} />
                         </div>
                         <div id="main-content"
-                             className={cn(styles['mainContent'], layoutProps.page.frontmatter?.prose && "prose" )}>
+                             className={cn(styles['mainContent'], layoutProps.context.meta.isProsePage && "prose" )}>
                             {layoutProps.page.contentElement}
                         </div>
                         <div id="main-side" className={
diff --git a/src/resources/components/layouts/HolyProse.tsx b/src/resources/components/layouts/HolyProse.tsx
@@ -28,7 +28,7 @@ export default function HolyProse(layoutProps: LayoutProps) {
                         "position-relative mt-3"
                     )}>
                     <main id="page-main"
-                          className={cn(styles["pageMain"], layoutProps.page.frontmatter?.prose && "prose")}>
+                          className={cn(styles["pageMain"], layoutProps.context.meta.isProsePage && "prose")}>
                         <div id="main-header" className={styles['mainHeader']}>
                             {layoutProps.page?.frontmatter?.hero != "false" && <Hero {...layoutProps} />}
                         </div>
diff --git a/src/resources/components/layouts/Landing.tsx b/src/resources/components/layouts/Landing.tsx
@@ -16,7 +16,7 @@ export default function Landing(layoutProps: LayoutProps) {
             <Head {...layoutProps}/>
             <Body  {...layoutProps}>
                 <Header {...layoutProps} />
-                <main className={layoutProps.page.frontmatter?.prose ? "prose" : ""}>
+                <main className={layoutProps.context.meta.isProsePage ? "prose" : ""}>
                     {layoutProps.page.contentElement}
                 </main>
                 <Footer {...layoutProps} />
diff --git a/src/resources/lib/page-utils.ts b/src/resources/lib/page-utils.ts
@@ -1,10 +1,29 @@
 import type {Page} from "../../interact/pages/interactPage";
+import type {ContextProps} from "../../interact/componentsProvider/contextProps.js";
 
-export function addProseIfNotDefined(page: Page) {
-    if (page.frontmatter?.prose == null) {
-        page.frontmatter = {
-            prose: true,
-            ...(page.frontmatter != null ? page.frontmatter : {}),
-        };
+/**
+ * Set the isProsePage meta property
+ * @param page - the page
+ * @param context - the context
+ */
+export function addProseIfNotDefined(page: Page, context: ContextProps) {
+
+    // Note: the isProsePage property cannot be on the frontmatter because programmatic page
+    // are module, and they are sealed (ie we can't modify any exported data)
+    // Trying to modify the frontmatter props would get you TypeError: Cannot set property frontmatter of [object Module] which has only a getter
+
+    if (page.frontmatter?.prose != null) {
+        // content takes precedence
+        context.meta.isProsePage = page.frontmatter.prose;
+        return;
+    }
+
+    // May have been modified by a plugin
+    if (context.meta.isProsePage != null) {
+        return;
     }
+
+    // Default
+    context.meta.isProsePage = true;
+
 }
diff --git a/src/resources/middlewares/01-page-modules.tsx b/src/resources/middlewares/01-page-modules.tsx
@@ -5,7 +5,7 @@ import getModuleFromPageProvider from 'interact:page-modules';
 import {addProseIfNotDefined} from "@/lib/page-utils";
 
 function isMdxModule(mod: any) {
-    return typeof mod.default === 'function' && mod.default.isMDXComponent === true;
+    return typeof mod.default === 'function' && mod.default.name === "MDXContent";
 }
 
 /**
@@ -22,7 +22,7 @@ export async function handler(): Promise<MiddlewareHandler> {
             return module;
         }
         if (isMdxModule(module)) {
-            addProseIfNotDefined(module);
+            addProseIfNotDefined(module,context);
         }
         return module
 
diff --git a/src/resources/middlewares/02-local-markdown-pages.tsx b/src/resources/middlewares/02-local-markdown-pages.tsx
@@ -53,10 +53,10 @@ export async function handler(): Promise<MiddlewareHandler> {
 
 
         const stat = statSync(page);
-        context.meta.lastModified = stat.mtime.toISOString()
+        context.meta.lastModifiedPage = stat.mtime.toISOString()
 
         let pageModule = markdownToPageSync(file);
-        addProseIfNotDefined(pageModule);
+        addProseIfNotDefined(pageModule, context);
         return pageModule
 
     }
diff --git a/src/resources/styles/global.css b/src/resources/styles/global.css
@@ -12,6 +12,9 @@
 @import "./headings.css";
 @import "./components.css";
 
+/* https://github.com/tailwindlabs/tailwindcss-typography */
+@plugin "@tailwindcss/typography";
+
 /* Transform a button as link */
 /* ie btn-to-link same name as bootstrap */
 @utility btn-link {
@@ -182,10 +185,15 @@
         @apply bg-background text-foreground;
     }
 
-    .prose a {
+    /* All link, also the link the page menu */
+    a {
         @apply underline text-primary;
     }
 
+}
+
+/* Not sure it works this way */
+@layer base {
     /* Ul are not styled by default */
     .prose ul {
         @apply list-disc mb-3 mt-0;
diff --git a/yarn.lock b/yarn.lock
@@ -412,6 +412,7 @@ __metadata:
     "@svgr/core": "npm:8.1.0"
     "@svgr/plugin-jsx": "npm:8.1.0"
     "@svgr/plugin-svgo": "npm:8.1.0"
+    "@tailwindcss/typography": "npm:^0.5.19"
     "@tailwindcss/vite": "npm:4.2.2"
     "@types/debug": "npm:^4"
     "@types/etag": "npm:1"
@@ -2228,6 +2229,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/typography@npm:^0.5.19":
+  version: 0.5.19
+  resolution: "@tailwindcss/typography@npm:0.5.19"
+  dependencies:
+    postcss-selector-parser: "npm:6.0.10"
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: 10/f7fbbad3c863f07e7c2c2ededc1cb4efc540ad5a3b8d2d99185afad31074baba90d54cddc7e2c25b39e3f2a77cccd6fd8623477577ede53dadc0fff80802a2ca
+  languageName: node
+  linkType: hard
+
 "@tailwindcss/vite@npm:4.2.2":
   version: 4.2.2
   resolution: "@tailwindcss/vite@npm:4.2.2"
@@ -6767,6 +6779,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-selector-parser@npm:6.0.10":
+  version: 6.0.10
+  resolution: "postcss-selector-parser@npm:6.0.10"
+  dependencies:
+    cssesc: "npm:^3.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10/f8ad9beb764a64b51a8027650e745a44ed7198f0b968b823db9563a54990924bcf9eb6fb59fbbb7eb05a89b2b6a24b81b2b7d60ecadda15b04a0024c7663f436
+  languageName: node
+  linkType: hard
+
 "postcss-selector-parser@npm:^7.1.0":
   version: 7.1.1
   resolution: "postcss-selector-parser@npm:7.1.1"
