docs: fix layout

docs/astro.config.mjs

@@ -12,14 +12,27 @@ import { visit } from 'unist-util-visit'
 import { rehypeNpmCommand } from './plugins/rehype-npm-command'
 import { siteConfig } from './src/config/site'
 
-function extractText(node) {
-  if (node.type === 'text') {
-    return node.value
-  }
-  if (node.children) {
-    return node.children.map(extractText).join('')
-  }
-  return ''
+/** @type {import('rehype-pretty-code').Options} */
+const optionsRehypePrettyCode = {
+  theme: 'github-dark',
+  getHighlighter,
+  onVisitLine(node) {
+    // Prevent lines from collapsing in `display: grid` mode, and allow empty
+    // lines to be copy/pasted
+    if (node.children.length === 0) {
+      node.children = [{ type: 'text', value: ' ' }]
+    }
+  },
+  onVisitHighlightedLine(node) {
+    node.properties.className = [
+      ...(node.properties.className ?? []),
+      'line--highlighted',
+    ]
+  },
+  onVisitHighlightedChars(node) {
+    node.properties.className = ['word--highlighted']
+    node.tagName = 'span'
+  },
 }
 
 // https://astro.build/config
@@ -53,29 +66,6 @@ export default defineConfig({
     remarkPlugins: [codeImport],
     rehypePlugins: [
       rehypeSlug,
-      [
-        rehypePrettyCode,
-        {
-          theme: 'github-dark',
-          getHighlighter,
-          onVisitLine(node) {
-            // Prevent lines from collapsing in `display: grid` mode, and allow empty
-            // lines to be copy/pasted
-            if (node.children.length === 0) {
-              node.children = [{ type: 'text', value: ' ' }]
-            }
-          },
-          onVisitHighlightedLine(node) {
-            node.properties.className = [
-              ...(node.properties.className ?? []),
-              'line--highlighted',
-            ]
-          },
-          onVisitHighlightedWord(node) {
-            node.properties.className = ['word--highlighted']
-          },
-        },
-      ],
       () => (tree) => {
         visit(tree, (node) => {
           if (node?.type === 'element' && node?.tagName === 'pre') {
@@ -94,16 +84,20 @@ export default defineConfig({
               }
             }
 
-            const rawString = extractText(codeEl)
-            node.properties = node.properties || {}
-            node.properties.__rawString__ = rawString
+            node.__rawString__ = codeEl.children?.[0].value
+            node.__src__ = node.properties?.__src__
+            node.__style__ = node.properties?.__style__
           }
         })
       },
+      [
+        rehypePrettyCode,
+        optionsRehypePrettyCode,
+      ],
       () => (tree) => {
         visit(tree, (node) => {
-          if (node?.type === 'element' && node?.tagName === 'div') {
-            if (!('data-rehype-pretty-code-fragment' in node.properties)) {
+          if (node?.type === 'element' && node?.tagName === 'figure') {
+            if (!('data-rehype-pretty-code-figure' in node.properties)) {
               return
             }
 
@@ -113,7 +107,8 @@ export default defineConfig({
             }
 
             preElement.properties.__withMeta__
-              = node.children.at(0).tagName === 'div'
+              = node.children.at(0).tagName === 'figcaption'
+
             preElement.properties.__rawString__ = node.__rawString__
 
             if (node.__src__) {

docs/plugins/rehype-component.ts

@@ -4,7 +4,7 @@ import process from 'node:process'
 import { u } from 'unist-builder'
 import { visit } from 'unist-util-visit'
 
-import { Index } from '../src/__registry__'
+// import { Index } from '../src/__registry__'
 import { styles } from '../src/registry/registry-styles'
 import type { UnistNode, UnistTree } from '../types/unist'
 
@@ -21,9 +21,9 @@ export function rehypeComponent() {
 
       if (node.name === 'ComponentSource') {
         const name = getNodeAttributeByName(node, 'name')?.value as string
-        const fileName = getNodeAttributeByName(node, 'fileName')?.value as
-          | string
-          | undefined
+        // const fileName = getNodeAttributeByName(node, 'fileName')?.value as
+        //   | string
+        //   | undefined
 
         if (!name && !srcPath) {
           return null
@@ -37,15 +37,16 @@ export function rehypeComponent() {
               src = srcPath
             }
             else {
-              const component = Index[style.name][name]
-              src = fileName
-                ? component.files.find((file: string) => {
-                  return (
-                    file.endsWith(`${fileName}.tsx`)
-                    || file.endsWith(`${fileName}.ts`)
-                  )
-                }) || component.files[0]
-                : component.files[0]
+              src = ''
+              // const component = Index[style.name][name]
+              // src = fileName
+              //   ? component.files.find((file: string) => {
+              //     return (
+              //       file.endsWith(`${fileName}.tsx`)
+              //       || file.endsWith(`${fileName}.ts`)
+              //     )
+              //   }) || component.files[0]
+              //   : component.files[0]
             }
 
             // Read the source file.
@@ -108,8 +109,9 @@ export function rehypeComponent() {
 
         try {
           for (const style of styles) {
-            const component = Index[style.name][name]
-            const src = component.files[0]
+            // const component = Index[style.name][name]
+            // const src = component.files[0]
+            const src = ''
 
             // Read the source file.
             const filePath = path.join(process.cwd(), src)

docs/src/components/mdx/a.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <a class={cn('font-medium underline underline-offset-4', className)} {...props}><slot /></a>

docs/src/components/mdx/blockquote.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <blockquote class={cn('mt-6 border-l-2 pl-6 italic', className)} {...props}>

docs/src/components/mdx/code.astro

@@ -0,0 +1,9 @@
+---
+import { cn } from '@/lib/utils'
+
+const { className, ...props } = Astro.props
+---
+
+<code class={cn('relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm', className)} {...props}
+  ><slot /></code
+>

docs/src/components/mdx/h1.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <h1 class={cn('font-heading mt-2 scroll-m-20 text-4xl font-bold', className)} {...props}>

docs/src/components/mdx/h2.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <h2

docs/src/components/mdx/h3.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <h3 class={cn('font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight', className)} {...props}>

docs/src/components/mdx/h4.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <h4 class={cn('font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight', className)} {...props}>

docs/src/components/mdx/h5.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <h5 class={cn('mt-8 scroll-m-20 text-lg font-semibold tracking-tight', className)} {...props}>

docs/src/components/mdx/h6.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <h6 class={cn('mt-8 scroll-m-20 text-base font-semibold tracking-tight', className)} {...props}>

docs/src/components/mdx/img.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, alt, ...props } = Astro.props
+const { className, alt, ...props } = Astro.props
 ---
 
 <img class={cn('rounded-md', className)} alt={alt} {...props} />

docs/src/components/mdx/index.ts

@@ -4,6 +4,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '../tabs'
 import a from './a.astro'
 import blockquote from './blockquote.astro'
 import Callout from './Callout.astro'
+import code from './code.astro'
 import h1 from './h1.astro'
 import h2 from './h2.astro'
 import h3 from './h3.astro'
@@ -23,6 +24,7 @@ import ul from './ul.astro'
 
 export const components = {
   a,
+  code,
   h1,
   h2,
   h3,

docs/src/components/mdx/li.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <li class={cn('mt-2', className)} {...props}>

docs/src/components/mdx/linked-card.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <a

docs/src/components/mdx/ol.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <ol class={cn('my-6 ml-6 list-decimal', className)} {...props}>

docs/src/components/mdx/p.astro

@@ -1,7 +1,7 @@
 ---
 import { cn } from '@/lib/utils'
 
-const { class: className, ...props } = Astro.props
+const { className, ...props } = Astro.props
 ---
 
 <p class={cn('leading-7 [&:not(:first-child)]:mt-6', className)} {...props}>