fix + feedback

Author: AugustinMauroy

apps/site/components/__design__/mermaid.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import dedent from 'dedent';
 import { VFile } from 'vfile';
 
 import { compile } from '@/next.mdx.compiler.mjs';
@@ -8,9 +9,9 @@ type Props = { children: string };
 type Story = StoryObj<Props>;
 type Meta = MetaObj<Props>;
 
-export const Default: Story = {
+export const Mermaid: Story = {
   args: {
-    children: `\`\`\`mermaid
+    children: dedent`\`\`\`mermaid
 graph LR
 A[Client] --> B(Load Balancer)
 B --> C{Server 1}
@@ -20,7 +21,7 @@ B --> D{Server 2}
 };
 
 export default {
-  title: 'Design System/Mermaid',
+  title: 'Design System',
   render: (_, { loaded: { Content } }) => Content,
   loaders: [
     async ({ args }) => {

apps/site/next.mdx.plugins.mjs

@@ -16,7 +16,7 @@ import rehypeShikiji from './next.mdx.shiki.mjs';
  */
 export const REHYPE_PLUGINS = [
   // Transforms Mermaid code blocks into SVGs
-  // !!! This plugin must be before `rehypeShikiji` !!!
+  // note: needs to be imported before rehype-shiki to prevent transforming into code-blocks
   rehypeMermaid,
   // Generates `id` attributes for headings (H1, ...)
   rehypeSlug,

apps/site/package.json

@@ -56,6 +56,7 @@
     "next": "15.2.0",
     "next-intl": "~3.26.5",
     "next-themes": "~0.4.4",
+    "playwright": "^1.51.0",
     "postcss": "~8.5.3",
     "postcss-calc": "~10.1.1",
     "postcss-import": "~16.1.0",