From 062239d4596d04472f39412a5e62b3b6b69bbf95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20UB?= <22903142+adrian-ub@users.noreply.github.com> Date: Sun, 27 Oct 2024 14:11:54 -0500 Subject: [PATCH] docs: add rehype-components --- docs/astro.config.mjs | 14 +++++++++++++ docs/plugins/rehype-component.ts | 35 +++++++++++++------------------- docs/src/__registry__/index.ts | 6 +++--- docs/src/registry/index.ts | 14 ++++++------- 4 files changed, 38 insertions(+), 31 deletions(-) diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index c229ffc..fe34328 100644 --- 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 index d486e05..36850d4 100644 --- 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 index 43db848..d597e24 100644 --- 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 = { 'default': {}, diff --git a/docs/src/registry/index.ts b/docs/src/registry/index.ts index dea4d24..a6293e7 100644 --- 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,