@brillout/docpress 0.16.5 → 0.16.7-commit-fc2ed19

package/code-blocks/remarkPkgManager.ts

@@ -0,0 +1,45 @@
+export { remarkPkgManager }
+
+import type { Code, Root } from 'mdast'
+import { visit } from 'unist-util-visit'
+import convert from 'npm-to-yarn'
+import { parseMetaString } from './rehypeMetaToProps.js'
+import { generateChoiceGroup } from './utils/generateChoiceGroup.js'
+
+const PKG_MANAGERS = ['pnpm', 'yarn', 'bun'] as const
+
+function remarkPkgManager() {
+  return function (tree: Root) {
+    visit(tree, 'code', (node, index, parent) => {
+      if (!parent || typeof index === 'undefined') return
+      if (!['sh', 'shell'].includes(node.lang || '')) return
+      if (node.value.indexOf('npm') === -1 && node.value.indexOf('npx') === -1) return
+
+      let choice: string | undefined = undefined
+      const nodes = new Map<string, Code>()
+
+      if (node.meta) {
+        const meta = parseMetaString(node.meta, ['choice'])
+        choice = meta.props['choice']
+        node.meta = meta.rest
+      }
+
+      nodes.set('npm', node)
+
+      for (const pm of PKG_MANAGERS) {
+        nodes.set(pm, {
+          type: node.type,
+          lang: node.lang,
+          meta: node.meta,
+          value: convert(node.value, pm),
+        })
+      }
+
+      const groupedNodes = [...nodes].map(([name, node]) => ({ value: name, children: [node] }))
+      const replacement = generateChoiceGroup(groupedNodes)
+
+      replacement.data ??= { choice }
+      parent.children.splice(index, 1, replacement)
+    })
+  }
+}

package/code-blocks/utils/generateChoiceGroup.ts

@@ -0,0 +1,87 @@
+export { generateChoiceGroup }
+export type { CodeChoice }
+
+import type { BlockContent, DefinitionContent } from 'mdast'
+import type { MdxJsxAttribute, MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
+
+type CodeChoice = {
+  value: string
+  children: (BlockContent | DefinitionContent)[]
+}
+
+function generateChoiceGroup(codeChoices: CodeChoice[]): MdxJsxFlowElement {
+  const attributes: MdxJsxAttribute[] = []
+  const children: MdxJsxFlowElement[] = []
+
+  attributes.push({
+    type: 'mdxJsxAttribute',
+    name: 'choices',
+    value: {
+      type: 'mdxJsxAttributeValueExpression',
+      value: '',
+      data: {
+        estree: {
+          type: 'Program',
+          sourceType: 'module',
+          comments: [],
+          body: [
+            {
+              type: 'ExpressionStatement',
+              expression: {
+                type: 'ArrayExpression',
+                // @ts-ignore: Missing properties in type definition
+                elements: codeChoices.map((choice) => ({
+                  type: 'Literal',
+                  value: choice.value,
+                })),
+              },
+            },
+          ],
+        },
+      },
+    },
+  })
+
+  for (const codeChoice of codeChoices) {
+    const classNames = ['choice']
+    if (findHasJsToggle(codeChoice.children[0])) {
+      classNames.push('has-toggle')
+    }
+
+    children.push({
+      type: 'mdxJsxFlowElement',
+      name: 'div',
+      attributes: [
+        { type: 'mdxJsxAttribute', name: 'id', value: codeChoice.value },
+        { type: 'mdxJsxAttribute', name: 'className', value: classNames.join(' ') },
+      ],
+      children: codeChoice.children.every((node) => node.type === 'containerDirective')
+        ? codeChoice.children.flatMap((node) => [...node.children])
+        : codeChoice.children,
+    })
+  }
+
+  return {
+    type: 'mdxJsxFlowElement',
+    name: 'ChoiceGroup',
+    attributes,
+    children,
+  }
+}
+
+function findHasJsToggle(node: BlockContent | DefinitionContent) {
+  if (node.type === 'containerDirective' && node.name === 'Choice') {
+    return (
+      node.children[0].type === 'mdxJsxFlowElement' &&
+      node.children[0].name === 'CodeSnippets' &&
+      node.children[0].attributes.every(
+        (attribute) => attribute.type !== 'mdxJsxAttribute' || attribute.name !== 'hideToggle',
+      )
+    )
+  }
+  return (
+    node.type === 'mdxJsxFlowElement' &&
+    node.name === 'CodeSnippets' &&
+    node.attributes.every((attribute) => attribute.type !== 'mdxJsxAttribute' || attribute.name !== 'hideToggle')
+  )
+}

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

@@ -18,18 +18,24 @@ import type { ElementData, Root } from 'hast';
  */
 declare function rehypeMetaToProps(): (tree: Root) => void;
 /**
- * Minimal parser for a metadata string into key-value pairs.
+ * Simple parser for a metadata string into key-value pairs and a remaining unparsed string.
  *
- * Supports simple patterns: key or key="value".
+ * 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.
+ * - Keys must contain only letters, dashes, or underscores (no digits).
+ * - Keys are converted to kebab-case. Values default to "true" if missing.
+ * - Keys and values are stored in `props`.
+ * - If `propNames` is provided, only keys included in that list are extracted.
+ * - Unextracted tokens remain in `rest`.
  *
- * 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.
+ * @param meta - The input metadata string.
+ * @param propNames - Optional whitelist of property names to extract.
+ * @returns An object containing:
+ *   - `props`: a map of extracted properties
+ *   - `rest`: the remaining metadata string after extraction
  */
-declare function parseMetaString(metaString: ElementData['meta']): Record<string, string>;
+declare function parseMetaString<Name extends string = string>(meta: ElementData['meta'], propNames?: Name[]): PropsType<Name>;
+interface PropsType<Name extends string = string> {
+    props: Partial<Record<Name, string>>;
+    rest: string;
+}

package/dist/code-blocks/rehypeMetaToProps.js

@@ -20,38 +20,43 @@ function rehypeMetaToProps() {
     return (tree) => {
         visit(tree, 'element', (node, _index, parent) => {
             if (node.tagName === 'code' && parent?.type === 'element' && parent.tagName === 'pre') {
-                const props = parseMetaString(node.data?.meta);
+                const meta = parseMetaString(node.data?.meta);
                 parent.properties ??= {};
-                parent.properties = { ...parent.properties, ...props };
+                parent.properties = { ...parent.properties, ...meta.props };
             }
         });
     };
 }
 /**
- * Minimal parser for a metadata string into key-value pairs.
+ * Simple parser for a metadata string into key-value pairs and a remaining unparsed string.
  *
- * Supports simple patterns: key or key="value".
+ * 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.
+ * - Keys must contain only letters, dashes, or underscores (no digits).
+ * - Keys are converted to kebab-case. Values default to "true" if missing.
+ * - Keys and values are stored in `props`.
+ * - If `propNames` is provided, only keys included in that list are extracted.
+ * - Unextracted tokens remain in `rest`.
  *
- * 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.
+ * @param meta - The input metadata string.
+ * @param propNames - Optional whitelist of property names to extract.
+ * @returns An object containing:
+ *   - `props`: a map of extracted properties
+ *   - `rest`: the remaining metadata string after extraction
  */
-function parseMetaString(metaString) {
-    if (!metaString)
-        return {};
+function parseMetaString(meta, propNames) {
+    if (!meta)
+        return { props: {}, rest: '' };
+    let str = meta;
+    const keyValuePairRE = /(?<name>[a-zA-Z_-]+)(?:=([^"'\s]+))?/g;
     const props = {};
-    const keyValuePairRE = /([a-zA-Z_-]+)(?:=([^"'\s]+))?(?=\s|$)/g;
-    for (const match of metaString.matchAll(keyValuePairRE)) {
-        let [_, key, value] = match;
-        props[kebabCase(key)] = value || 'true';
-    }
-    return props;
+    str = str.replaceAll(keyValuePairRE, (match, name, value) => {
+        if (propNames && !propNames.includes(name))
+            return match;
+        props[kebabCase(name)] = value || 'true';
+        return '';
+    });
+    return { props, rest: str.trim() };
 }
 // Simple function to convert a camelCase or PascalCase string to kebab-case.
 function kebabCase(str) {

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

@@ -0,0 +1,8 @@
+export { remarkChoiceGroup };
+import type { Root } from 'mdast';
+declare function remarkChoiceGroup(): (tree: Root) => void;
+declare module 'mdast' {
+    interface Data {
+        choice?: string;
+    }
+}

package/dist/code-blocks/remarkChoiceGroup.js

@@ -0,0 +1,84 @@
+export { remarkChoiceGroup };
+import { visit } from 'unist-util-visit';
+import { parseMetaString } from './rehypeMetaToProps.js';
+import { generateChoiceGroup } from './utils/generateChoiceGroup.js';
+function remarkChoiceGroup() {
+    return function (tree) {
+        visit(tree, (node) => {
+            if (node.type === 'code') {
+                if (!node.meta)
+                    return;
+                const meta = parseMetaString(node.meta, ['choice']);
+                const { choice } = meta.props;
+                node.meta = meta.rest;
+                if (choice)
+                    node.data ??= { choice };
+            }
+            if (node.type === 'containerDirective' && node.name === 'Choice') {
+                if (!node.attributes)
+                    return;
+                const { id: choice } = node.attributes;
+                if (choice) {
+                    node.data ??= { choice };
+                    node.attributes = {};
+                }
+            }
+        });
+        const replaced = new WeakSet();
+        visit(tree, (node) => {
+            if (!('children' in node) || replaced.has(node))
+                return 'skip';
+            if (node.type === 'mdxJsxFlowElement')
+                return 'skip';
+            let start = -1;
+            let end = 0;
+            const process = () => {
+                if (start === -1 || start === end)
+                    return;
+                const nodes = node.children.slice(start, end);
+                const groupedNodes = groupByNodeType(nodes);
+                const replacements = [];
+                for (const groupedNode of groupedNodes) {
+                    const replacement = generateChoiceGroup(groupedNode);
+                    replacements.push(replacement);
+                    replaced.add(replacement);
+                }
+                node.children.splice(start, end - start, ...replacements);
+                end = start;
+                start = -1;
+            };
+            for (; end < node.children.length; end++) {
+                const child = node.children[end];
+                if (!['code', 'mdxJsxFlowElement', 'containerDirective'].includes(child.type)) {
+                    process();
+                    continue;
+                }
+                if (!child.data?.choice) {
+                    process();
+                    continue;
+                }
+                if (start === -1)
+                    start = end;
+            }
+            process();
+        });
+    };
+}
+function groupByNodeType(nodes) {
+    const groupedNodes = new Set();
+    const filters = [...new Set(nodes.flat().map((node) => (node.type === 'code' ? node.lang : node.name)))];
+    filters.map((filter) => {
+        const nodesByChoice = new Map();
+        nodes
+            .filter((node) => (node.type === 'code' ? node.lang : node.name) === filter)
+            .map((node) => {
+            const choice = node.data.choice;
+            const nodes = nodesByChoice.get(choice) ?? [];
+            nodes.push(node);
+            node.data = {};
+            nodesByChoice.set(choice, nodes);
+        });
+        groupedNodes.add([...nodesByChoice].map(([name, nodes]) => ({ value: name, children: nodes })));
+    });
+    return [...groupedNodes];
+}

package/dist/code-blocks/remarkDetype.js

@@ -65,7 +65,10 @@ function transformYaml(node) {
 }
 async function transformTsToJs(node, file) {
     const { codeBlock, index, parent } = node;
-    const maxWidth = Number(parseMetaString(codeBlock.meta)['max-width']);
+    const meta = parseMetaString(codeBlock.meta, ['max-width', 'choice']);
+    const maxWidth = Number(meta.props['max-width']);
+    const { choice } = meta.props;
+    codeBlock.meta = meta.rest;
     let codeBlockReplacedJs = replaceFileNameSuffixes(codeBlock.value);
     let codeBlockContentJs = '';
     // Remove TypeScript from the TS/TSX/Vue code node
@@ -113,8 +116,8 @@ async function transformTsToJs(node, file) {
     // Add `hideToggle` attribute (prop) to `CodeSnippets` if the only change was replacing `.ts` with `.js`
     if (codeBlockReplacedJs === codeBlockContentJs) {
         attributes.push({
-            name: 'hideToggle',
             type: 'mdxJsxAttribute',
+            name: 'hideToggle',
         });
     }
     // Wrap both the original `codeBlock` and `jsCode` with <CodeSnippets>
@@ -124,6 +127,8 @@ async function transformTsToJs(node, file) {
         children: [jsCode, codeBlock],
         attributes,
     };
+    if (choice)
+        container.data ??= { choice };
     parent.children.splice(index, 1, container);
 }
 // Replace all '.ts' extensions with '.js'
@@ -138,7 +143,7 @@ function cleanUpCode(code, isJsCode = false) {
 }
 function processMagicComments(code) {
     // @detype-replace DummyLayout Layout
-    const renameCommentRE = /^\/\/\s@detype-replace\s([^ ]+) ([^ ]+)\n/gm;
+    const renameCommentRE = /^\s*\/\/\s@detype-replace\s([^ ]+) ([^ ]+)\n/gm;
     const matches = Array.from(code.matchAll(renameCommentRE));
     if (matches.length) {
         for (let i = matches.length - 1; i >= 0; i--) {

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

@@ -0,0 +1,3 @@
+export { remarkPkgManager };
+import type { Root } from 'mdast';
+declare function remarkPkgManager(): (tree: Root) => void;

package/dist/code-blocks/remarkPkgManager.js

@@ -0,0 +1,38 @@
+export { remarkPkgManager };
+import { visit } from 'unist-util-visit';
+import convert from 'npm-to-yarn';
+import { parseMetaString } from './rehypeMetaToProps.js';
+import { generateChoiceGroup } from './utils/generateChoiceGroup.js';
+const PKG_MANAGERS = ['pnpm', 'yarn', 'bun'];
+function remarkPkgManager() {
+    return function (tree) {
+        visit(tree, 'code', (node, index, parent) => {
+            if (!parent || typeof index === 'undefined')
+                return;
+            if (!['sh', 'shell'].includes(node.lang || ''))
+                return;
+            if (node.value.indexOf('npm') === -1 && node.value.indexOf('npx') === -1)
+                return;
+            let choice = undefined;
+            const nodes = new Map();
+            if (node.meta) {
+                const meta = parseMetaString(node.meta, ['choice']);
+                choice = meta.props['choice'];
+                node.meta = meta.rest;
+            }
+            nodes.set('npm', node);
+            for (const pm of PKG_MANAGERS) {
+                nodes.set(pm, {
+                    type: node.type,
+                    lang: node.lang,
+                    meta: node.meta,
+                    value: convert(node.value, pm),
+                });
+            }
+            const groupedNodes = [...nodes].map(([name, node]) => ({ value: name, children: [node] }));
+            const replacement = generateChoiceGroup(groupedNodes);
+            replacement.data ??= { choice };
+            parent.children.splice(index, 1, replacement);
+        });
+    };
+}

package/dist/code-blocks/utils/generateChoiceGroup.d.ts

@@ -0,0 +1,9 @@
+export { generateChoiceGroup };
+export type { CodeChoice };
+import type { BlockContent, DefinitionContent } from 'mdast';
+import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
+type CodeChoice = {
+    value: string;
+    children: (BlockContent | DefinitionContent)[];
+};
+declare function generateChoiceGroup(codeChoices: CodeChoice[]): MdxJsxFlowElement;

package/dist/code-blocks/utils/generateChoiceGroup.js

@@ -0,0 +1,66 @@
+export { generateChoiceGroup };
+function generateChoiceGroup(codeChoices) {
+    const attributes = [];
+    const children = [];
+    attributes.push({
+        type: 'mdxJsxAttribute',
+        name: 'choices',
+        value: {
+            type: 'mdxJsxAttributeValueExpression',
+            value: '',
+            data: {
+                estree: {
+                    type: 'Program',
+                    sourceType: 'module',
+                    comments: [],
+                    body: [
+                        {
+                            type: 'ExpressionStatement',
+                            expression: {
+                                type: 'ArrayExpression',
+                                // @ts-ignore: Missing properties in type definition
+                                elements: codeChoices.map((choice) => ({
+                                    type: 'Literal',
+                                    value: choice.value,
+                                })),
+                            },
+                        },
+                    ],
+                },
+            },
+        },
+    });
+    for (const codeChoice of codeChoices) {
+        const classNames = ['choice'];
+        if (findHasJsToggle(codeChoice.children[0])) {
+            classNames.push('has-toggle');
+        }
+        children.push({
+            type: 'mdxJsxFlowElement',
+            name: 'div',
+            attributes: [
+                { type: 'mdxJsxAttribute', name: 'id', value: codeChoice.value },
+                { type: 'mdxJsxAttribute', name: 'className', value: classNames.join(' ') },
+            ],
+            children: codeChoice.children.every((node) => node.type === 'containerDirective')
+                ? codeChoice.children.flatMap((node) => [...node.children])
+                : codeChoice.children,
+        });
+    }
+    return {
+        type: 'mdxJsxFlowElement',
+        name: 'ChoiceGroup',
+        attributes,
+        children,
+    };
+}
+function findHasJsToggle(node) {
+    if (node.type === 'containerDirective' && node.name === 'Choice') {
+        return (node.children[0].type === 'mdxJsxFlowElement' &&
+            node.children[0].name === 'CodeSnippets' &&
+            node.children[0].attributes.every((attribute) => attribute.type !== 'mdxJsxAttribute' || attribute.name !== 'hideToggle'));
+    }
+    return (node.type === 'mdxJsxFlowElement' &&
+        node.name === 'CodeSnippets' &&
+        node.attributes.every((attribute) => attribute.type !== 'mdxJsxAttribute' || attribute.name !== 'hideToggle'));
+}

package/dist/types/Config.d.ts

@@ -7,7 +7,10 @@ type Config = {
     /** Sets `<meta name="description" content="${tagline}" />` */
     tagline: string;
     logo: string;
-    favicon?: string;
+    favicon?: string | {
+        browser: string;
+        google: string;
+    };
     banner?: string;
     github: string;
     discord?: string;
@@ -34,6 +37,7 @@ type Config = {
     navLogoStyle?: React.CSSProperties;
     navLogoTextStyle?: React.CSSProperties;
     globalNote?: React.ReactNode;
+    choices?: Record<string, Choice>;
 };
 /** Order in Algolia search results */
 type Category = string | {
@@ -41,3 +45,7 @@ type Category = string | {
     /** Hide from Algolia search */
     hide?: boolean;
 };
+type Choice = {
+    choices: string[];
+    default: string;
+};

package/dist/vite.config.js

@@ -4,10 +4,13 @@ import react from '@vitejs/plugin-react-swc';
 import { parsePageSections } from './parsePageSections.js';
 import rehypePrettyCode from 'rehype-pretty-code';
 import remarkGfm from 'remark-gfm';
+import remarkDirective from 'remark-directive';
 import { transformerNotationDiff } from '@shikijs/transformers';
 import { rehypeMetaToProps } from './code-blocks/rehypeMetaToProps.js';
 import { remarkDetype } from './code-blocks/remarkDetype.js';
 import { shikiTransformerAutoLinks } from './code-blocks/shikiTransformerAutoLinks.js';
+import { remarkPkgManager } from './code-blocks/remarkPkgManager.js';
+import { remarkChoiceGroup } from './code-blocks/remarkChoiceGroup.js';
 const root = process.cwd();
 const prettyCode = [
     rehypePrettyCode,
@@ -18,7 +21,7 @@ const prettyCode = [
     },
 ];
 const rehypePlugins = [prettyCode, [rehypeMetaToProps]];
-const remarkPlugins = [remarkGfm, remarkDetype];
+const remarkPlugins = [remarkGfm, remarkDirective, remarkDetype, remarkPkgManager, remarkChoiceGroup];
 const config = {
     root,
     plugins: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.5",
+  "version": "0.16.7-commit-fc2ed19",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -12,7 +12,9 @@
     "@shikijs/transformers": "1.2.0",
     "@vitejs/plugin-react-swc": "^3.10.2",
     "detype": "^1.1.3",
+    "npm-to-yarn": "^3.0.1",
     "rehype-pretty-code": "0.13.0",
+    "remark-directive": "^4.0.0",
     "remark-gfm": "4.0.0",
     "shiki": "1.2.0",
     "unist-util-visit": "^5.0.0",
@@ -65,6 +67,7 @@
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
+    "mdast-util-directive": "^3.1.0",
     "mdast-util-mdx-jsx": "^3.2.0"
   },
   "repository": "https://github.com/brillout/docpress",

package/renderer/onRenderHtml.tsx

@@ -18,16 +18,13 @@ async function onRenderHtml(pageContext: PageContextServer): Promise<any> {
 
   const pageHtml = ReactDOMServer.renderToString(page)
 
-  const faviconUrl = pageContext.globalContext.config.docpress.favicon ?? pageContext.globalContext.config.docpress.logo
-  assert(faviconUrl)
-
   const { documentTitle } = pageContext.resolved
   assert(documentTitle)
   return escapeInject`<!DOCTYPE html>
     <html>
       <head>
         <meta charset="UTF-8" />
-        <link rel="icon" href="${faviconUrl ?? ''}" />
+        ${getFaviconTags(pageContext.globalContext.config.docpress)}
         <title>${documentTitle}</title>
         ${descriptionTag}
         <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -98,3 +95,44 @@ function getOpenGraphTags(url: string, documentTitle: string, config: Config) {
     ${metaTwitter}
   `
 }
+
+// Resources:
+// - https://www.google.com/s2/favicons?domain=vike.dev
+// - https://stackoverflow.com/questions/59568586/favicon-don%c2%b4t-show-up-in-google-search-result/59577456#59577456
+// - https://developers.google.com/search/docs/appearance/favicon-in-search
+//
+// Examples:
+// - Nice looking on Goolge Search Results:
+//   https://www.wikipedia.org
+// - Single PNG:
+//   https://rubyonrails.org
+// - Favicon shown in browser is different than favicon shown in Google:
+//   https://evilmartians.com
+//   Shown in Google: <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+//   Shown in Browser: <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+function getFaviconTags(config: Config) {
+  const { faviconBrowser, faviconGoogle } = getFavicons(config)
+  assert(faviconBrowser)
+  const faviconTagGoogle = !faviconGoogle
+    ? ''
+    : escapeInject`
+    <link rel="apple-touch-icon" href="${faviconGoogle}" />
+  `
+  return escapeInject`
+    <link rel="icon" href="${faviconBrowser}" type="image/svg+xml" />
+    ${faviconTagGoogle}
+  `
+}
+function getFavicons(config: Config) {
+  let faviconBrowser: string
+  let faviconGoogle: null | string = null
+  if (!config.favicon) {
+    faviconBrowser = config.logo
+  } else if (typeof config.favicon === 'string') {
+    faviconBrowser = config.favicon
+  } else {
+    faviconBrowser = config.favicon.browser
+    faviconGoogle = config.favicon.google
+  }
+  return { faviconBrowser, faviconGoogle }
+}

package/types/Config.ts

@@ -9,7 +9,12 @@ type Config = {
   /** Sets `<meta name="description" content="${tagline}" />` */
   tagline: string
   logo: string
-  favicon?: string
+  favicon?:
+    | string
+    | {
+        browser: string
+        google: string
+      }
   banner?: string
 
   github: string
@@ -43,6 +48,7 @@ type Config = {
   navLogoTextStyle?: React.CSSProperties
 
   globalNote?: React.ReactNode
+  choices?: Record<string, Choice>
 }
 
 /** Order in Algolia search results */
@@ -53,3 +59,8 @@ type Category =
       /** Hide from Algolia search */
       hide?: boolean
     }
+
+type Choice = {
+  choices: string[]
+  default: string
+}