Adding: Code hightligher & MarigoldProvider

docs/content/components/accordion/accordion-basic.demo.tsx

@@ -0,0 +1,22 @@
+import { Accordion, Headline, TextField } from '@marigold/components';
+
+export default () => (
+  <Accordion defaultExpandedKeys={['1']}>
+    <Accordion.Item key={1} title="Informations">
+      {/* just to test scroll */}
+      <Headline level="3">
+        Some Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem
+        voluptatem minima hic ex ullam, asperiores quaerat quas eveniet, magnam
+        quisquam dolores. Beatae eaque eveniet error ipsa veniam vero culpa
+        recusandae?
+      </Headline>
+      <TextField label="Name" />
+    </Accordion.Item>
+    <Accordion.Item key={2} title="Personal Settings">
+      two
+    </Accordion.Item>
+    <Accordion.Item key={3} title="Billing Adress">
+      <Headline level="3">Some Imformations</Headline>
+    </Accordion.Item>
+  </Accordion>
+);

docs/content/components/accordion/accordion.mdx

@@ -28,3 +28,5 @@ import { Accordion } from '@marigold/components';
 ### Props Accordion.Item
 
 ## Examples
+
+<ComponentDemo file="./accordion-basic.demo.tsx" />

docs/contentlayer.config.ts

@@ -6,9 +6,15 @@ import {
 
 import remarkGfm from 'remark-gfm';
 import rehypeSlug from 'rehype-slug';
+import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import { getHighlighter, loadTheme } from 'shiki';
+import { visit } from 'unist-util-visit';
+
+import path from 'node:path';
 
 import { rehypeComponentDemo } from './lib/mdx/rehype-component-demo';
+
 import { siteConfig } from './lib/config';
 
 // Helpers
@@ -88,6 +94,66 @@ export default makeSource({
     rehypePlugins: [
       [rehypeComponentDemo, { contentDirPath }],
       rehypeSlug,
+      // to inject the source code and other stuff inside `pre` element props
+      () => tree => {
+        visit(tree, node => {
+          if (node?.type === 'element' && node?.tagName === 'pre') {
+            const [codeEl] = node.children;
+            if (codeEl.tagName !== 'code') {
+              return;
+            }
+
+            if (codeEl.data?.meta) {
+              // Extract event from meta and pass it down the tree.
+              const regex = /event="([^"]*)"/;
+              const match = codeEl.data?.meta.match(regex);
+              if (match) {
+                node.__event__ = match ? match[1] : null;
+                codeEl.data.meta = codeEl.data.meta.replace(regex, '');
+              }
+            }
+            node.__rawString__ = codeEl.children?.[0].value;
+          }
+        });
+      },
+      [rehypeAutolinkHeadings, { behavior: 'wrap' }],
+      [
+        rehypePrettyCode,
+        {
+          getHighlighter: async () => {
+            const theme = await loadTheme(
+              // loading theme file
+              path.join(process.cwd(), './light.json')
+            );
+            return await getHighlighter({ theme });
+          },
+          onVisitLine(node: any) {
+            if (node.children.length === 0) {
+              node.children = [{ type: 'text', value: ' ' }];
+            }
+          },
+          onVisitHighlightedLine(node: any) {
+            node.properties.className.push('line--highlighted');
+          },
+          onVisitHighlightedWord(node: any) {
+            node.properties.className = ['word--highlighted'];
+          },
+        },
+      ],
+      () => tree => {
+        visit(tree, node => {
+          if (node?.type === 'element' && node?.tagName === 'div') {
+            if (!('data-rehype-pretty-code-fragment' in node.properties)) {
+              return;
+            }
+            const preElement = node.children.at(-1);
+            if (preElement.tagName !== 'pre') {
+              return;
+            }
+            preElement.properties['__rawString__'] = node.__rawString__;
+          }
+        });
+      },
       [
         rehypeAutolinkHeadings,
         {

docs/lib/registry.ts

@@ -0,0 +1,10 @@
+import dynamic from 'next/dynamic';
+
+export const registry: any = {
+  'button-variant': dynamic(
+    () => import('@/content/components/button/button-variant.demo')
+  ),
+  'accordion-basic': dynamic(
+    () => import('@/content/components/accordion/accordion-basic.demo')
+  ),
+};