@brillout/docpress 0.15.11 → 0.15.12

package/Layout.tsx

@@ -15,6 +15,7 @@ import { ExternalLinks } from './ExternalLinks'
 import { coseMenuModalOnMouseLeave, openMenuModal, toggleMenuModal } from './MenuModal/toggleMenuModal'
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
+import { initializeJsToggle_SSR } from './code-blocks/hooks/useSelectCodeLang'
 import { SearchLink } from './docsearch/SearchLink'
 import { navigate } from 'vike/client/router'
 import { css } from './utils/css'
@@ -78,6 +79,8 @@ function Layout({ children }: { children: React.ReactNode }) {
         <NavHead />
         {content}
       </div>
+      {/* Early toggling, to avoid layout jumps */}
+      <script dangerouslySetInnerHTML={{ __html: initializeJsToggle_SSR }}></script>
     </div>
   )
 }

package/autoScrollNav.ts

@@ -1,7 +1,7 @@
 export { autoScrollNav }
-export const autoScrollNav_SSR = `autoScrollNav();${autoScrollNav.toString()}`
+export { autoScrollNav_SSR }
 
-// - We cannot use TypeScript syntax because of autoScrollNav_SSR
+// - WARNING: We cannot use TypeScript here because we serialize the function.
 // - We have to save & restore `document.documentElement.scrollTop` because scrollIntoView() scrolls the main view. (I don't know why).
 //   - Failed alternatives:
 //     - scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) would work (it doesn't scroll the main view) but Firefox doesn't support it.
@@ -17,7 +17,7 @@ export const autoScrollNav_SSR = `autoScrollNav();${autoScrollNav.toString()}`
 //       // ...
 //       document.documentElement.style.overflow = overflowOriginal
 //       ```
-
+const autoScrollNav_SSR = `autoScrollNav();${autoScrollNav.toString()}`
 function autoScrollNav() {
   const nav = document.querySelector('#nav-left .navigation-content')
   if (!nav) return

package/{components → code-blocks/components}/CodeSnippets.css

@@ -8,11 +8,6 @@
     }
   }
 
-  /* Hide language toggle for YAML */
-  &:has(code[data-language='yaml']) .code-lang-toggle {
-    display: none !important;
-  }
-
   /* Language toggle styles */
   .code-lang-toggle {
     position: absolute !important;
@@ -28,6 +23,7 @@
     margin: 0;
     padding: 0 4px;
     height: 25px;
+    width: 59px;
     display: flex;
     background-color: #f7f7f7;
     opacity: 0;

package/{components → code-blocks/components}/CodeSnippets.tsx

@@ -5,7 +5,7 @@ export { TypescriptOnly }
 export { CodeSnippets }
 
 import React, { useEffect, useRef } from 'react'
-import { useSelectCodeLang } from './CodeSnippets/useSelectCodeLang'
+import { useSelectCodeLang } from '../hooks/useSelectCodeLang'
 import './CodeSnippets.css'
 
 /** Only show if TypeScript is selected */
@@ -14,7 +14,7 @@ function TypescriptOnly({ children }: { children: React.ReactNode }) {
   return <div style={{ display: codeLangSelected === 'ts' ? 'block' : 'none' }}>{children}</div>
 }
 
-function CodeSnippets({ children }: { children: React.ReactNode }) {
+function CodeSnippets({ children, hideToggle = false }: { children: React.ReactNode; hideToggle: boolean }) {
   const [codeLangSelected, selectCodeLang] = useSelectCodeLang()
   const prevPositionRef = useRef<null | { top: number; el: Element }>(null)
 
@@ -35,6 +35,7 @@ function CodeSnippets({ children }: { children: React.ReactNode }) {
         type="checkbox"
         name="code-lang-toggle"
         className="code-lang-toggle raised"
+        style={{ display: hideToggle ? 'none' : undefined }}
         checked={codeLangSelected === 'ts'}
         onChange={onChange}
         title="Toggle language"

package/{components → code-blocks/components}/Pre.tsx

@@ -1,9 +1,7 @@
 export { Pre }
 
 import React, { ComponentPropsWithoutRef, useState } from 'react'
-/* Importing it here chokes the tests. I don't know why.
 import './Pre.css'
-//*/
 
 function Pre({ children, ...props }: ComponentPropsWithoutRef<'pre'> & { 'hide-menu'?: string }) {
   return (
@@ -26,7 +24,7 @@ function CopyButton() {
   const icon =
     isSuccess === null ? (
       // Copy icon
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="black" strokeWidth="2">
         <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
         <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
       </svg>

package/{components → code-blocks/hooks}/useMDXComponents.tsx

@@ -2,8 +2,8 @@ export { useMDXComponents }
 
 import React from 'react'
 import type { UseMdxComponents } from '@mdx-js/mdx'
-import { Pre } from './Pre.js'
-import { CodeSnippets } from './CodeSnippets.js'
+import { Pre } from '../components/Pre.js'
+import { CodeSnippets } from '../components/CodeSnippets.js'
 
 const useMDXComponents: UseMdxComponents = () => {
   return {

package/{components/CodeSnippets → code-blocks/hooks}/useSelectCodeLang.ts

@@ -1,4 +1,5 @@
 export { useSelectCodeLang }
+export { initializeJsToggle_SSR }
 
 import { useState, useEffect, useCallback } from 'react'
 import { assertWarning } from '../../utils/assert'
@@ -53,6 +54,19 @@ function useSelectCodeLang() {
   return [codeLangSelected, selectCodeLang] as const
 }
 
+// WARNING: We cannot use the variables storageKey nor codeLangDefaultClient here: closures
+// don't work because we serialize the function.
+// WARNING: We cannot use TypeScript here, for the same reason.
+const initializeJsToggle_SSR = `initializeJsToggle();${initializeJsToggle.toString()};`
+function initializeJsToggle() {
+  const codeLangSelected = localStorage.getItem('docpress:code-lang') ?? 'js'
+  if (codeLangSelected === 'js') {
+    const inputs = document.querySelectorAll('.code-lang-toggle')
+    // @ts-ignore
+    for (const input of inputs) input.checked = false
+  }
+}
+
 declare global {
   interface WindowEventMap {
     'code-lang-storage': CustomEvent

package/{rehypeMetaToProps.ts → code-blocks/rehypeMetaToProps.ts}

@@ -1,4 +1,4 @@
-export { rehypeMetaToProps }
+export { rehypeMetaToProps, parseMetaString }
 
 import { visit } from 'unist-util-visit'
 import type { ElementData, Root } from 'hast'
@@ -51,7 +51,7 @@ function parseMetaString(metaString: ElementData['meta']): Record<string, string
 
   const props: Record<string, string> = {}
 
-  const keyValuePairRE = /([a-zA-Z_-]+)(?:="([^"]*)")?(?=\s|$)/g
+  const keyValuePairRE = /([a-zA-Z_-]+)(?:=([^"'\s]+))?(?=\s|$)/g
   for (const match of metaString.matchAll(keyValuePairRE)) {
     let [_, key, value] = match
     props[kebabCase(key)] = value || 'true'

package/{remarkDetype.ts → code-blocks/remarkDetype.ts}

@@ -1,9 +1,11 @@
 export { remarkDetype }
 
 import type { Root, Parent, Code } from 'mdast'
+import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
 import type { VFile } from '@mdx-js/mdx/internal-create-format-aware-processors'
 import { visit } from 'unist-util-visit'
-import { assertUsage } from './utils/assert.js'
+import { assertUsage } from '../utils/assert.js'
+import { parseMetaString } from './rehypeMetaToProps.js'
 import pc from '@brillout/picocolors'
 import module from 'node:module'
 // Cannot use `import { transform } from 'detype'` as it results in errors,
@@ -13,7 +15,6 @@ const { transform: detype } = module.createRequire(import.meta.url)('detype') as
 const prettierOptions: NonNullable<Parameters<typeof detype>[2]>['prettierOptions'] = {
   semi: false,
   singleQuote: true,
-  printWidth: 100,
   trailingComma: 'none',
 }
 
@@ -65,22 +66,29 @@ function transformYaml(node: CodeNode) {
   }
 
   // Wrap both the original YAML and `yamlJsCode` with <CodeSnippets>
-  const yamlContainer = {
-    type: 'mdxJsxFlowElement' as const,
+  const yamlContainer: MdxJsxFlowElement = {
+    type: 'mdxJsxFlowElement',
     name: 'CodeSnippets',
     children: [yamlJsCode, codeBlock],
-    attributes: [],
+    attributes: [
+      {
+        name: 'hideToggle',
+        type: 'mdxJsxAttribute',
+      },
+    ],
   }
   parent.children.splice(index, 1, yamlContainer)
 }
 
 async function transformTsToJs(node: CodeNode, file: VFile) {
   const { codeBlock, index, parent } = node
-  let codeBlockContentJs = replaceFileNameSuffixes(codeBlock.value)
+  const maxWidth = Number(parseMetaString(codeBlock.meta)['max-width'])
+  let codeBlockReplacedJs = replaceFileNameSuffixes(codeBlock.value)
+  let codeBlockContentJs = ''
 
   // Remove TypeScript from the TS/TSX/Vue code node
   try {
-    codeBlockContentJs = await detype(codeBlockContentJs, `some-dummy-filename.${codeBlock.lang}`, {
+    codeBlockContentJs = await detype(codeBlockReplacedJs, `some-dummy-filename.${codeBlock.lang}`, {
       customizeBabelConfig(config) {
         // Add `onlyRemoveTypeImports: true` to the internal `@babel/preset-typescript` config
         // https://github.com/cyco130/detype/blob/46ec867e9efd31d31a312a215ca169bd6bff4726/src/transform.ts#L206
@@ -88,7 +96,10 @@ async function transformTsToJs(node: CodeNode, file: VFile) {
         config.presets = [[config.presets[0], { onlyRemoveTypeImports: true }]]
       },
       removeTsComments: true,
-      prettierOptions,
+      prettierOptions: {
+        ...prettierOptions,
+        printWidth: maxWidth ? maxWidth : 99,
+      },
     })
   } catch (error) {
     // Log errors and return original content instead of throwing
@@ -113,6 +124,7 @@ async function transformTsToJs(node: CodeNode, file: VFile) {
   if (codeBlockContentJs === codeBlock.value) return
 
   const { position, lang, ...rest } = codeBlock
+  const attributes: MdxJsxFlowElement['attributes'] = []
 
   const jsCode: Code = {
     ...rest,
@@ -121,12 +133,20 @@ async function transformTsToJs(node: CodeNode, file: VFile) {
     value: codeBlockContentJs,
   }
 
+  // Add `hideToggle` attribute (prop) to `CodeSnippets` if the only change was replacing `.ts` with `.js`
+  if (codeBlockReplacedJs === codeBlockContentJs) {
+    attributes.push({
+      name: 'hideToggle',
+      type: 'mdxJsxAttribute',
+    })
+  }
+
   // Wrap both the original `codeBlock` and `jsCode` with <CodeSnippets>
-  const container = {
-    type: 'mdxJsxFlowElement' as const,
+  const container: MdxJsxFlowElement = {
+    type: 'mdxJsxFlowElement',
     name: 'CodeSnippets',
     children: [jsCode, codeBlock],
-    attributes: [],
+    attributes,
   }
   parent.children.splice(index, 1, container)
 }

package/code-blocks/shikiTransformerAutoLinks.ts

@@ -0,0 +1,61 @@
+export { shikiTransformerAutoLinks }
+
+import type { ShikiTransformer } from 'shiki'
+
+const linkRE = /https:\/\/[^\s]*[^.,\s"'`]/g
+
+/**
+ * A Shiki transformer that converts plain HTTPS URLs in code blocks into clickable `<a>` links.
+ *
+ * Inspired by `@jcayzac/shiki-transformer-autolinks`, but tailored for a narrower use case.
+ */
+function shikiTransformerAutoLinks(): ShikiTransformer {
+  return {
+    name: 'docpress-shiki-autolinks',
+    span(span) {
+      if (span.children.length !== 1) return
+      let child = span.children[0]
+      if (child.type !== 'text') return
+
+      const links: { href: string; index: number }[] = []
+      const matches = Array.from(child.value.matchAll(linkRE))
+
+      // Filter out URLs that contain `${...}`. e.g. `https://star-wars.brillout.com/api/films/${id}.json`.
+      const filtered = matches.filter(([href]) => !href.includes('${'))
+      if (filtered.length === 0) return
+
+      for (const match of filtered) {
+        const [href] = match
+        links.unshift({ href, index: match.index })
+      }
+
+      const newChildren: typeof span.children = []
+      for (const { href, index } of links) {
+        const postIndex = index + href.length
+        const postValue = child.value.slice(postIndex)
+
+        if (postValue.length > 0) {
+          newChildren.unshift({ type: 'text', value: postValue })
+        }
+
+        newChildren.unshift({
+          type: 'element',
+          tagName: 'a',
+          properties: { href },
+          children: [{ type: 'text', value: href }],
+        })
+
+        child = {
+          type: 'text',
+          value: child.value.slice(0, index),
+        }
+      }
+
+      if (child.value.length > 0) {
+        newChildren.unshift(child)
+      }
+
+      span.children = newChildren
+    },
+  }
+}

package/components/index.ts

@@ -8,4 +8,3 @@ export * from './HorizontalLine'
 export * from './CodeBlockTransformer'
 export * from './Comment'
 export * from './FileRemoved'
-export * from './CodeSnippets'

package/css/index.css

@@ -7,5 +7,4 @@
 @import './code.css';
 @import './table.css';
 @import './tooltip.css';
-@import '../components/Pre.css';
 @import '@docsearch/css';

package/dist/code-blocks/rehypeMetaToProps.d.ts

@@ -0,0 +1,35 @@
+export { rehypeMetaToProps, parseMetaString };
+import type { ElementData, Root } from 'hast';
+/**
+ * Rehype plugin to extract metadata from `<code>` blocks in markdown
+ * and attach them as props to the parent `<pre>` element.
+ *
+ * This allows using those props inside a custom `<Pre>` component.
+ *
+ * Example:
+ * ~~~mdx
+ * ```js foo="bar" hide_copy='true'
+ * export function add(a, b) {
+ *   return a + b
+ * }
+ * ```
+ * ~~~
+ * These props are then added to the `<pre>` element
+ */
+declare function rehypeMetaToProps(): (tree: Root) => void;
+/**
+ * Minimal parser for a metadata string into key-value pairs.
+ *
+ * Supports simple patterns: key or key="value".
+ *
+ * Keys must contain only letters, dashes, or underscores (no digits).
+ * Keys are converted to kebab-case. Values default to "true" if missing.
+ *
+ * Example:
+ *   parseMetaString('foo fooBar="value"')
+ *   => { foo: 'true', foo_bar: 'value' }
+ *
+ * @param metaString - The input metadata string.
+ * @returns A plain object of parsed key-value pairs.
+ */
+declare function parseMetaString(metaString: ElementData['meta']): Record<string, string>;

package/dist/{rehypeMetaToProps.js → code-blocks/rehypeMetaToProps.js}

@@ -1,4 +1,4 @@
-export { rehypeMetaToProps };
+export { rehypeMetaToProps, parseMetaString };
 import { visit } from 'unist-util-visit';
 /**
  * Rehype plugin to extract metadata from `<code>` blocks in markdown
@@ -46,7 +46,7 @@ function parseMetaString(metaString) {
     if (!metaString)
         return {};
     const props = {};
-    const keyValuePairRE = /([a-zA-Z_-]+)(?:="([^"]*)")?(?=\s|$)/g;
+    const keyValuePairRE = /([a-zA-Z_-]+)(?:=([^"'\s]+))?(?=\s|$)/g;
     for (const match of metaString.matchAll(keyValuePairRE)) {
         let [_, key, value] = match;
         props[kebabCase(key)] = value || 'true';

package/dist/{remarkDetype.js → code-blocks/remarkDetype.js}

@@ -1,6 +1,7 @@
 export { remarkDetype };
 import { visit } from 'unist-util-visit';
-import { assertUsage } from './utils/assert.js';
+import { assertUsage } from '../utils/assert.js';
+import { parseMetaString } from './rehypeMetaToProps.js';
 import pc from '@brillout/picocolors';
 import module from 'node:module';
 // Cannot use `import { transform } from 'detype'` as it results in errors,
@@ -9,7 +10,6 @@ const { transform: detype } = module.createRequire(import.meta.url)('detype');
 const prettierOptions = {
     semi: false,
     singleQuote: true,
-    printWidth: 100,
     trailingComma: 'none',
 };
 function remarkDetype() {
@@ -54,16 +54,23 @@ function transformYaml(node) {
         type: 'mdxJsxFlowElement',
         name: 'CodeSnippets',
         children: [yamlJsCode, codeBlock],
-        attributes: [],
+        attributes: [
+            {
+                name: 'hideToggle',
+                type: 'mdxJsxAttribute',
+            },
+        ],
     };
     parent.children.splice(index, 1, yamlContainer);
 }
 async function transformTsToJs(node, file) {
     const { codeBlock, index, parent } = node;
-    let codeBlockContentJs = replaceFileNameSuffixes(codeBlock.value);
+    const maxWidth = Number(parseMetaString(codeBlock.meta)['max-width']);
+    let codeBlockReplacedJs = replaceFileNameSuffixes(codeBlock.value);
+    let codeBlockContentJs = '';
     // Remove TypeScript from the TS/TSX/Vue code node
     try {
-        codeBlockContentJs = await detype(codeBlockContentJs, `some-dummy-filename.${codeBlock.lang}`, {
+        codeBlockContentJs = await detype(codeBlockReplacedJs, `some-dummy-filename.${codeBlock.lang}`, {
             customizeBabelConfig(config) {
                 // Add `onlyRemoveTypeImports: true` to the internal `@babel/preset-typescript` config
                 // https://github.com/cyco130/detype/blob/46ec867e9efd31d31a312a215ca169bd6bff4726/src/transform.ts#L206
@@ -71,7 +78,10 @@ async function transformTsToJs(node, file) {
                 config.presets = [[config.presets[0], { onlyRemoveTypeImports: true }]];
             },
             removeTsComments: true,
-            prettierOptions,
+            prettierOptions: {
+                ...prettierOptions,
+                printWidth: maxWidth ? maxWidth : 99,
+            },
         });
     }
     catch (error) {
@@ -93,18 +103,26 @@ async function transformTsToJs(node, file) {
     if (codeBlockContentJs === codeBlock.value)
         return;
     const { position, lang, ...rest } = codeBlock;
+    const attributes = [];
     const jsCode = {
         ...rest,
         // The jsCode lang should be js|jsx|vue
         lang: lang.replace('t', 'j'),
         value: codeBlockContentJs,
     };
+    // Add `hideToggle` attribute (prop) to `CodeSnippets` if the only change was replacing `.ts` with `.js`
+    if (codeBlockReplacedJs === codeBlockContentJs) {
+        attributes.push({
+            name: 'hideToggle',
+            type: 'mdxJsxAttribute',
+        });
+    }
     // Wrap both the original `codeBlock` and `jsCode` with <CodeSnippets>
     const container = {
         type: 'mdxJsxFlowElement',
         name: 'CodeSnippets',
         children: [jsCode, codeBlock],
-        attributes: [],
+        attributes,
     };
     parent.children.splice(index, 1, container);
 }

package/dist/code-blocks/shikiTransformerAutoLinks.d.ts

@@ -0,0 +1,8 @@
+export { shikiTransformerAutoLinks };
+import type { ShikiTransformer } from 'shiki';
+/**
+ * A Shiki transformer that converts plain HTTPS URLs in code blocks into clickable `<a>` links.
+ *
+ * Inspired by `@jcayzac/shiki-transformer-autolinks`, but tailored for a narrower use case.
+ */
+declare function shikiTransformerAutoLinks(): ShikiTransformer;

package/dist/code-blocks/shikiTransformerAutoLinks.js

@@ -0,0 +1,51 @@
+export { shikiTransformerAutoLinks };
+const linkRE = /https:\/\/[^\s]*[^.,\s"'`]/g;
+/**
+ * A Shiki transformer that converts plain HTTPS URLs in code blocks into clickable `<a>` links.
+ *
+ * Inspired by `@jcayzac/shiki-transformer-autolinks`, but tailored for a narrower use case.
+ */
+function shikiTransformerAutoLinks() {
+    return {
+        name: 'docpress-shiki-autolinks',
+        span(span) {
+            if (span.children.length !== 1)
+                return;
+            let child = span.children[0];
+            if (child.type !== 'text')
+                return;
+            const links = [];
+            const matches = Array.from(child.value.matchAll(linkRE));
+            // Filter out URLs that contain `${...}`. e.g. `https://star-wars.brillout.com/api/films/${id}.json`.
+            const filtered = matches.filter(([href]) => !href.includes('${'));
+            if (filtered.length === 0)
+                return;
+            for (const match of filtered) {
+                const [href] = match;
+                links.unshift({ href, index: match.index });
+            }
+            const newChildren = [];
+            for (const { href, index } of links) {
+                const postIndex = index + href.length;
+                const postValue = child.value.slice(postIndex);
+                if (postValue.length > 0) {
+                    newChildren.unshift({ type: 'text', value: postValue });
+                }
+                newChildren.unshift({
+                    type: 'element',
+                    tagName: 'a',
+                    properties: { href },
+                    children: [{ type: 'text', value: href }],
+                });
+                child = {
+                    type: 'text',
+                    value: child.value.slice(0, index),
+                };
+            }
+            if (child.value.length > 0) {
+                newChildren.unshift(child);
+            }
+            span.children = newChildren;
+        },
+    };
+}

package/dist/components/index.d.ts

@@ -8,4 +8,3 @@ export * from './HorizontalLine';
 export * from './CodeBlockTransformer';
 export * from './Comment';
 export * from './FileRemoved';
-export * from './CodeSnippets';

package/dist/components/index.js

@@ -8,4 +8,3 @@ export * from './HorizontalLine';
 export * from './CodeBlockTransformer';
 export * from './Comment';
 export * from './FileRemoved';
-export * from './CodeSnippets';

package/dist/vite.config.js

@@ -5,12 +5,17 @@ import { parsePageSections } from './parsePageSections.js';
 import rehypePrettyCode from 'rehype-pretty-code';
 import remarkGfm from 'remark-gfm';
 import { transformerNotationDiff } from '@shikijs/transformers';
-import { remarkDetype } from './remarkDetype.js';
-import { rehypeMetaToProps } from './rehypeMetaToProps.js';
+import { rehypeMetaToProps } from './code-blocks/rehypeMetaToProps.js';
+import { remarkDetype } from './code-blocks/remarkDetype.js';
+import { shikiTransformerAutoLinks } from './code-blocks/shikiTransformerAutoLinks.js';
 const root = process.cwd();
 const prettyCode = [
     rehypePrettyCode,
-    { theme: 'github-light', keepBackground: false, transformers: [transformerNotationDiff()] },
+    {
+        theme: 'github-light',
+        keepBackground: false,
+        transformers: [transformerNotationDiff(), shikiTransformerAutoLinks()],
+    },
 ];
 const rehypePlugins = [prettyCode, [rehypeMetaToProps]];
 const remarkPlugins = [remarkGfm, remarkDetype];

package/index.ts

@@ -1,16 +1,8 @@
 /**********/
 /* PUBLIC */
 /**********/
-export {
-  CodeBlockTransformer,
-  Link,
-  RepoLink,
-  FileAdded,
-  FileRemoved,
-  ImportMeta,
-  Emoji,
-  TypescriptOnly,
-} from './components'
+export { CodeBlockTransformer, Link, RepoLink, FileAdded, FileRemoved, ImportMeta, Emoji } from './components'
+export { TypescriptOnly } from './code-blocks/components/CodeSnippets'
 export { MenuToggle } from './Layout'
 export * from './components/Note'
 export * from './icons/index'
@@ -28,4 +20,4 @@ export { usePageContext } from './renderer/usePageContext'
 /************/
 // We provide our own `useMDXComponents()` to enable MDX component injection by setting `providerImportSource` to '@brillout/docpress'.
 // https://mdxjs.com/guides/injecting-components/
-export { useMDXComponents } from './components/useMDXComponents'
+export { useMDXComponents } from './code-blocks/hooks/useMDXComponents'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.15.11",
+  "version": "0.15.12",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -64,7 +64,8 @@
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0"
+    "@types/react-dom": "^18.3.0",
+    "mdast-util-mdx-jsx": "^3.2.0"
   },
   "repository": "https://github.com/brillout/docpress",
   "license": "MIT",

package/vite.config.ts

@@ -7,13 +7,18 @@ import { parsePageSections } from './parsePageSections.js'
 import rehypePrettyCode from 'rehype-pretty-code'
 import remarkGfm from 'remark-gfm'
 import { transformerNotationDiff } from '@shikijs/transformers'
-import { remarkDetype } from './remarkDetype.js'
-import { rehypeMetaToProps } from './rehypeMetaToProps.js'
+import { rehypeMetaToProps } from './code-blocks/rehypeMetaToProps.js'
+import { remarkDetype } from './code-blocks/remarkDetype.js'
+import { shikiTransformerAutoLinks } from './code-blocks/shikiTransformerAutoLinks.js'
 
 const root = process.cwd()
 const prettyCode = [
   rehypePrettyCode,
-  { theme: 'github-light', keepBackground: false, transformers: [transformerNotationDiff()] },
+  {
+    theme: 'github-light',
+    keepBackground: false,
+    transformers: [transformerNotationDiff(), shikiTransformerAutoLinks()],
+  },
 ]
 const rehypePlugins: any = [prettyCode, [rehypeMetaToProps]]
 const remarkPlugins = [remarkGfm, remarkDetype]

package/dist/components/CodeSnippets/useSelectCodeLang.d.ts

@@ -1,7 +0,0 @@
-export { useSelectCodeLang };
-declare function useSelectCodeLang(): readonly [string, (value: string) => void];
-declare global {
-    interface WindowEventMap {
-        'code-lang-storage': CustomEvent;
-    }
-}

package/dist/components/CodeSnippets/useSelectCodeLang.js

@@ -1,50 +0,0 @@
-export { useSelectCodeLang };
-import { useState, useEffect, useCallback } from 'react';
-import { assertWarning } from '../../utils/assert';
-const storageKey = 'docpress:code-lang';
-const codeLangDefaultSsr = 'ts';
-const codeLangDefaultClient = 'js';
-function useSelectCodeLang() {
-    const [codeLangSelected, setCodeLangSelected] = useState(codeLangDefaultSsr);
-    const updateState = () => {
-        setCodeLangSelected(getCodeLangStorage());
-    };
-    const updateStateOnStorageEvent = (event) => {
-        if (event.key === storageKey)
-            updateState();
-    };
-    const getCodeLangStorage = () => {
-        try {
-            return window.localStorage.getItem(storageKey) ?? codeLangDefaultClient;
-        }
-        catch (error) {
-            console.error(error);
-            assertWarning(false, 'Error reading from localStorage');
-            return codeLangDefaultClient;
-        }
-    };
-    const selectCodeLang = useCallback((value) => {
-        try {
-            window.localStorage.setItem(storageKey, value);
-            setCodeLangSelected(value);
-            window.dispatchEvent(new CustomEvent('code-lang-storage'));
-        }
-        catch (error) {
-            console.error(error);
-            assertWarning(false, 'Error setting localStorage');
-        }
-    }, []);
-    useEffect(() => {
-        // Initial load from localStorage
-        updateState();
-        // Update code lang in current tab
-        window.addEventListener('code-lang-storage', updateState);
-        // Update code lang if changed in another tab
-        window.addEventListener('storage', updateStateOnStorageEvent);
-        return () => {
-            window.removeEventListener('code-lang-storage', updateState);
-            window.removeEventListener('storage', updateStateOnStorageEvent);
-        };
-    }, []);
-    return [codeLangSelected, selectCodeLang];
-}

package/dist/components/CodeSnippets.d.ts

@@ -1,11 +0,0 @@
-export { TypescriptOnly };
-export { CodeSnippets };
-import React from 'react';
-import './CodeSnippets.css';
-/** Only show if TypeScript is selected */
-declare function TypescriptOnly({ children }: {
-    children: React.ReactNode;
-}): React.JSX.Element;
-declare function CodeSnippets({ children }: {
-    children: React.ReactNode;
-}): React.JSX.Element;

package/dist/components/CodeSnippets.js

@@ -1,35 +0,0 @@
-// Public
-export { TypescriptOnly };
-// Internal
-export { CodeSnippets };
-import React, { useEffect, useRef } from 'react';
-import { useSelectCodeLang } from './CodeSnippets/useSelectCodeLang';
-import './CodeSnippets.css';
-/** Only show if TypeScript is selected */
-function TypescriptOnly({ children }) {
-    const [codeLangSelected] = useSelectCodeLang();
-    return React.createElement("div", { style: { display: codeLangSelected === 'ts' ? 'block' : 'none' } }, children);
-}
-function CodeSnippets({ children }) {
-    const [codeLangSelected, selectCodeLang] = useSelectCodeLang();
-    const prevPositionRef = useRef(null);
-    // Restores the scroll position of the toggle element after toggling languages.
-    useEffect(() => {
-        if (!prevPositionRef.current)
-            return;
-        const { top, el } = prevPositionRef.current;
-        const delta = el.getBoundingClientRect().top - top;
-        if (delta !== 0) {
-            window.scrollBy(0, delta);
-        }
-        prevPositionRef.current = null;
-    }, [codeLangSelected]);
-    return (React.createElement("div", { className: "code-snippets" },
-        React.createElement("input", { type: "checkbox", name: "code-lang-toggle", className: "code-lang-toggle raised", checked: codeLangSelected === 'ts', onChange: onChange, title: "Toggle language" }),
-        children));
-    function onChange(e) {
-        const element = e.target;
-        prevPositionRef.current = { top: element.getBoundingClientRect().top, el: element };
-        selectCodeLang(element.checked ? 'ts' : 'js');
-    }
-}

package/dist/rehypeMetaToProps.d.ts

@@ -1,19 +0,0 @@
-export { rehypeMetaToProps };
-import type { Root } from 'hast';
-/**
- * Rehype plugin to extract metadata from `<code>` blocks in markdown
- * and attach them as props to the parent `<pre>` element.
- *
- * This allows using those props inside a custom `<Pre>` component.
- *
- * Example:
- * ~~~mdx
- * ```js foo="bar" hide_copy='true'
- * export function add(a, b) {
- *   return a + b
- * }
- * ```
- * ~~~
- * These props are then added to the `<pre>` element
- */
-declare function rehypeMetaToProps(): (tree: Root) => void;