docs: add rehype-components

adrian-ub · Oct 27, 2024 · 062239d · 062239d
1 parent 50d742e
commit 062239d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 31 deletions.
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -1,3 +1,6 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
 import angular from '@analogjs/astro-angular'
 import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
@@ -9,6 +12,8 @@ import { rehypePrettyCode } from 'rehype-pretty-code'
 import rehypeSlug from 'rehype-slug'
 import { codeImport } from 'remark-code-import'
 import { visit } from 'unist-util-visit'
+
+import { rehypeComponent } from './plugins/rehype-component'
 import { rehypeNpmCommand } from './plugins/rehype-npm-command'
 import { siteConfig } from './src/config/site'
 
@@ -35,6 +40,9 @@ const optionsRehypePrettyCode = {
   },
 }
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
 // https://astro.build/config
 export default defineConfig({
   site: siteConfig.url,
@@ -66,6 +74,7 @@ export default defineConfig({
     remarkPlugins: [codeImport],
     rehypePlugins: [
       rehypeSlug,
+      rehypeComponent,
       () => (tree) => {
         visit(tree, (node) => {
           if (node?.type === 'element' && node?.tagName === 'pre') {
@@ -159,5 +168,10 @@ export default defineConfig({
         '@ng-icons/lucide',
       ],
     },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+      },
+    },
   },
 })
diff --git a/docs/plugins/rehype-component.ts b/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,20 +37,14 @@ export function rehypeComponent() {
               src = srcPath
             }
             else {
-              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]
+              const component = Index[style.name][name]
+              src = fileName
+                ? component.files.find((file: string) => file.endsWith(`${fileName}.ts`)) || component.files[0]
+                : component.files[0]
             }
 
             // Read the source file.
-            const filePath = path.join(process.cwd(), src)
+            const filePath = path.join(process.cwd(), 'src', src)
             let source = fs.readFileSync(filePath, 'utf8')
 
             // Replace imports.
@@ -81,7 +75,7 @@ export function rehypeComponent() {
                   u('element', {
                     tagName: 'code',
                     properties: {
-                      className: ['language-tsx'],
+                      className: ['language-angular-ts'],
                     },
                     children: [
                       {
@@ -109,12 +103,11 @@ export function rehypeComponent() {
 
         try {
           for (const style of styles) {
-            // const component = Index[style.name][name]
-            // const src = component.files[0]
-            const src = ''
+            const component = Index[style.name][name]
+            const src = component.files[0]
 
             // Read the source file.
-            const filePath = path.join(process.cwd(), src)
+            const filePath = path.join(process.cwd(), 'src', src)
             let source = fs.readFileSync(filePath, 'utf8')
 
             // Replace imports.
@@ -135,7 +128,7 @@ export function rehypeComponent() {
                   u('element', {
                     tagName: 'code',
                     properties: {
-                      className: ['language-tsx'],
+                      className: ['language-angular-ts'],
                     },
                     children: [
                       {

diff --git a/docs/src/__registry__/index.ts b/docs/src/__registry__/index.ts
@@ -1,7 +1,7 @@
 import process from 'node:process'
-import { registry } from '@/registry'
-import { type Style, styles } from '@/registry/registry-styles'
-import { type Registry, registrySchema } from '@/registry/schema'
+import { registry } from '../registry'
+import { type Style, styles } from '../registry/registry-styles'
+import { type Registry, registrySchema } from '../registry/schema'
 
 export const Index: Record<Style['name'], any> = {
   'default': {},

diff --git a/docs/src/registry/index.ts b/docs/src/registry/index.ts
@@ -1,10 +1,10 @@
-import { blocks } from '@/registry/registry-blocks'
-import { charts } from '@/registry/registry-charts'
-import { examples } from '@/registry/registry-examples'
-import { lib } from '@/registry/registry-lib'
-import { themes } from '@/registry/registry-themes'
-import { ui } from '@/registry/registry-ui'
-import type { Registry } from '@/registry/schema'
+import { blocks } from './registry-blocks'
+import { charts } from './registry-charts'
+import { examples } from './registry-examples'
+import { lib } from './registry-lib'
+import { themes } from './registry-themes'
+import { ui } from './registry-ui'
+import type { Registry } from './schema'
 
 export const registry: Registry = [
   ...ui,