boltdocs 2.5.4 → 2.5.6

package/src/node/mdx/rehype-shiki.ts

@@ -1,62 +0,0 @@
-import { visit } from 'unist-util-visit'
-import type { BoltdocsConfig } from '../config'
-import { getShikiHighlighter } from './highlighter'
-
-/**
- * Custom rehype plugin to perform syntax highlighting at build time for
- * standard Markdown code blocks.
- *
- * Injects 'data-highlighted="true"' and 'highlightedHtml' into the 'pre' tag properties,
- * which are then consumed by the client-side CodeBlock component.
- *
- * @param config - The Boltdocs configuration
- * @returns A rehype plugin function
- */
-export function rehypeShiki(config?: BoltdocsConfig) {
-  return async (tree: any) => {
-    const codeTheme = config?.theme?.codeTheme || {
-      light: 'github-light',
-      dark: 'github-dark',
-    }
-    const highlighter = await getShikiHighlighter(codeTheme)
-
-    visit(tree, 'element', (node: any) => {
-      // Handle standard Markdown code blocks
-      if (node.tagName === 'pre' && node.children?.[0]?.tagName === 'code') {
-        const codeNode = node.children[0]
-        const className = codeNode.properties?.className || []
-        const langMatch = className.find((c: string) =>
-          c.startsWith('language-'),
-        )
-        const lang = langMatch ? langMatch.slice(9) : 'text'
-        const code = codeNode.children[0]?.value || ''
-
-        // Extract title from meta string (e.g., ```ts title="app.ts")
-        const meta: string = codeNode.data?.meta || codeNode.properties?.metastring || ''
-        const titleMatch = meta.match(/title\s*=\s*"([^"]*)"/)
-        const title = titleMatch ? titleMatch[1] : undefined
-
-        const options: any = { lang }
-        if (typeof codeTheme === 'object') {
-          options.themes = {
-            light: codeTheme.light,
-            dark: codeTheme.dark,
-          }
-        } else {
-          options.theme = codeTheme
-        }
-
-        const html = highlighter.codeToHtml(code, options)
-
-        // Inject highlighted HTML and mark as highlighted for CodeBlock component
-        node.properties['data-highlighted'] = 'true'
-        node.properties['data-highlighted-html'] = html
-        node.properties['data-lang'] = lang
-        if (title) {
-          node.properties.title = title
-        }
-        node.children = []
-      }
-    })
-  }
-}

package/src/node/mdx/remark-code-meta.ts

@@ -1,35 +0,0 @@
-import { visit } from 'unist-util-visit'
-
-/**
- * Remark plugin that preserves code fence meta strings (e.g., title="file.ts")
- * and the language identifier by copying them to hProperties so they survive
- * the remark → rehype conversion and are accessible as props on the `<pre>` element.
- *
- * Usage in MDX: ```ts title="app.ts"
- */
-export function remarkCodeMeta() {
-  return (tree: any) => {
-    visit(tree, 'code', (node: any) => {
-      node.data = node.data || {}
-      node.data.hProperties = node.data.hProperties || {}
-
-      // Always pass the lang through
-      if (node.lang) {
-        node.data.hProperties['data-lang'] = node.lang
-      }
-
-      if (!node.meta) return
-
-      const meta: string = node.meta
-
-      // Extract title="..." from the meta string
-      const titleMatch = meta.match(/title\s*=\s*"([^"]*)"/)
-      if (titleMatch) {
-        node.data.hProperties.title = titleMatch[1]
-      }
-
-      // Preserve the full meta string for other plugins
-      node.data.hProperties.metastring = meta
-    })
-  }
-}

package/src/node/mdx/remark-shiki.ts

@@ -1,61 +0,0 @@
-import { visit } from 'unist-util-visit'
-import type { BoltdocsConfig } from '../config'
-import { getShikiHighlighter } from './highlighter'
-
-/**
- * Custom remark plugin to highlight code in ComponentPreview components.
- * This runs before rehype, ensuring that the 'highlightedHtml' prop is correctly
- * attached to the MDX component as a JSX attribute.
- *
- * Supports both string literals and MDX expression values (template literals)
- * for the 'code' attribute.
- *
- * @param config - The Boltdocs configuration
- * @returns A remark plugin function
- */
-export function remarkShiki(config?: BoltdocsConfig) {
-  return async (tree: any) => {
-    const codeTheme = config?.theme?.codeTheme ?? {
-      light: 'github-light',
-      dark: 'github-dark',
-    }
-    const highlighter = await getShikiHighlighter(codeTheme)
-
-    visit(tree, ['mdxJsxFlowElement', 'mdxJsxTextElement'], (node: any) => {
-      if (node.name !== 'ComponentPreview') return
-
-      const codeAttr = node.attributes?.find((a: any) => a.name === 'code')
-      let code = ''
-
-      if (codeAttr) {
-        if (typeof codeAttr.value === 'string') {
-          code = codeAttr.value
-        } else if (codeAttr.value?.type === 'mdxJsxAttributeValueExpression') {
-          const expr = codeAttr.value.value ?? ''
-          code = expr.match(/^[`'"]([\s\S]+)[`'"]$/)?.[1] ?? expr
-        }
-      }
-
-      if (!code) return
-
-      const options: any =
-        typeof codeTheme === 'object'
-          ? {
-              themes: { light: codeTheme.light, dark: codeTheme.dark },
-              lang: 'tsx',
-            }
-          : { theme: codeTheme, lang: 'tsx' }
-
-      const html = highlighter.codeToHtml(code, options)
-
-      node.attributes = (node.attributes ?? []).filter(
-        (a: any) => a.name !== 'highlightedHtml',
-      )
-      node.attributes.push({
-        type: 'mdxJsxAttribute',
-        name: 'highlightedHtml',
-        value: html,
-      })
-    })
-  }
-}

package/src/node/plugin/entry.ts

@@ -1,87 +0,0 @@
-import { normalizePath } from '../utils'
-import type { BoltdocsConfig } from '../config'
-import type { BoltdocsPluginOptions } from './types'
-import path from 'path'
-import fs from 'fs'
-
-/**
- * Generates the raw source code for the virtual entry file (`\0virtual:boltdocs-entry`).
- * This code initializes the client-side React application.
- *
- * @param options - Plugin options containing potential custom overrides (like `homePage` or `customCss`)
- * @param config - The resolved Boltdocs configuration containing custom plugins and components
- * @returns A string of JavaScript code to be evaluated by the browser
- */
-export function generateEntryCode(
-  options: BoltdocsPluginOptions,
-  config?: BoltdocsConfig,
-): string {
-  const homeImport = options.homePage
-    ? `import HomePage from '${normalizePath(options.homePage)}';`
-    : ''
-
-  // Auto-import index.css if it exists
-  const cssPath = path.resolve(process.cwd(), 'index.css')
-  const cssImport = fs.existsSync(cssPath) ? "import './index.css';" : ''
-
-  let homeOption = options.homePage ? 'homePage: HomePage,' : ''
-  const pluginComponents =
-    config?.plugins?.flatMap((p) => Object.entries(p.components || {})) || []
-
-  const componentImports = pluginComponents
-    .map(
-      ([
-        name,
-        path,
-      ]) => `import * as _comp_${name} from '${normalizePath(path)}';
-const ${name} = _comp_${name}.default || _comp_${name}['${name}'] || _comp_${name};`,
-    )
-    .join('\n')
-  const componentMap = pluginComponents.map(([name]) => name).join(', ')
-
-  const docsDirName = path.basename(options.docsDir || 'docs')
-  const docsDir = path.resolve(process.cwd(), options.docsDir || 'docs')
-
-  // Detect external pages module
-  const externalModulePath = ['tsx', 'ts', 'jsx', 'js']
-    .map((ext) => path.resolve(docsDir, `pages-external/index.${ext}`))
-    .find((p) => fs.existsSync(p))
-
-  const externalModuleImport = externalModulePath
-    ? `import * as _external_module from '${normalizePath(externalModulePath)}';`
-    : ''
-
-  // Prioritize homePage from external module if it exists
-  homeOption = externalModulePath
-    ? 'homePage: _external_module.homePage || HomePage,'
-    : options.homePage
-      ? 'homePage: HomePage,'
-      : ''
-
-  const externalOption = externalModulePath
-    ? 'externalPages: _external_module.pages, externalLayout: _external_module.layout,'
-    : ''
-
-  return `
-import { createBoltdocsApp as _createApp } from 'boltdocs/client';
-import _routes from 'virtual:boltdocs-routes';
-import _config from 'virtual:boltdocs-config';
-import _user_mdx_components from 'virtual:boltdocs-mdx-components';
-${cssImport}
-${homeImport}
-${componentImports}
-${externalModuleImport}
-
-_createApp({
-  target: '#root',
-  routes: _routes,
-  docsDirName: '${docsDirName}',
-  config: _config,
-  modules: import.meta.glob('/${docsDirName}/**/*.{md,mdx}'),
-  hot: import.meta.hot,
-  ${homeOption}
-  ${externalOption}
-  components: { ${componentMap}${componentMap ? ', ' : ''} ...(_user_mdx_components || {}) },
-});
-`
-}

package/src/node/plugin/html.ts

@@ -1,99 +0,0 @@
-import type { BoltdocsConfig } from '../config'
-
-/**
- * Provides a default HTML template if none is found in the project root.
- */
-export function getHtmlTemplate(config: BoltdocsConfig): string {
-  const title = config.theme?.title || 'Boltdocs'
-  return `<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>${title}</title>
-</head>
-<body>
-  <div id="root"></div>
-</body>
-</html>`
-}
-
-/**
- * Injects OpenGraph, Twitter, and generic SEO meta tags into the final HTML output.
- * Also ensures the virtual entry file is injected if it's missing (e.g., standard Vite index.html).
- *
- * @param html - {string} The original HTML string
- * @param config - {BoltdocsConfig} The resolved Boltdocs configuration containing site metadata
- * @returns {string} The modified HTML string with injected tags
- */
-export function injectHtmlMeta(html: string, config: BoltdocsConfig): string {
-  const theme = config.theme
-  const title = theme?.title || 'Boltdocs'
-  const description = theme?.description || ''
-
-  // Determine favicon
-  let favicon = theme?.favicon
-  if (!favicon && theme?.logo) {
-    if (typeof theme.logo === 'string') {
-      favicon = theme.logo
-    } else {
-      favicon = theme.logo.light || theme.logo.dark
-    }
-  }
-
-  const seoTags = [
-    favicon ? `<link rel="icon" href="${favicon}">` : '',
-    `<meta name="description" content="${description}">`,
-    `<meta property="og:title" content="${title}">`,
-    `<meta property="og:description" content="${description}">`,
-    theme?.ogImage
-      ? `<meta property="og:image" content="${theme.ogImage}">`
-      : '',
-    `<meta property="og:type" content="website">`,
-    `<meta name="twitter:card" content="summary_large_image">`,
-    `<meta name="twitter:title" content="${title}">`,
-    `<meta name="twitter:description" content="${description}">`,
-    theme?.ogImage
-      ? `<meta name="twitter:image" content="${theme.ogImage}">`
-      : '',
-    `<meta name="generator" content="Boltdocs">`,
-  ]
-    .filter(Boolean)
-    .join('\n    ')
-
-  const themeScript = `
-    <script>
-      (function() {
-        try {
-          var stored = localStorage.getItem("boltdocs-theme");
-          var theme = stored || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-          if (theme === "light") {
-            document.documentElement.classList.add("theme-light");
-            document.documentElement.dataset.theme = "light";
-          } else {
-            document.documentElement.classList.remove("theme-light");
-            document.documentElement.dataset.theme = "dark";
-          }
-        } catch (e) {}
-      })();
-    </script>
-  `
-
-  // Use regex to replace title or inject it if missing
-  if (html.includes('<title>')) {
-    html = html.replace(/<title>.*?<\/title>/, `<title>${title}</title>`)
-  } else {
-    html = html.replace('</head>', `  <title>${title}</title>\n  </head>`)
-  }
-
-  html = html.replace('</head>', `    ${seoTags}\n${themeScript}  </head>`)
-
-  if (!html.includes('src/main') && !html.includes('virtual:boltdocs-entry')) {
-    html = html.replace(
-      '</body>',
-      '  <script type="module">import "virtual:boltdocs-entry";</script>\n  </body>',
-    )
-  }
-
-  return html
-}