@brillout/docpress 0.16.43 → 0.16.45

package/code-blocks/components/ChoiceGroup.tsx

@@ -5,6 +5,7 @@ import React, { useId, useState } from 'react'
 import { usePageContext } from '../../renderer/usePageContext.js'
 import { useCurrentSelection } from '../hooks/useCurrentSelection.js'
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js'
+import { getAvailableChoice } from '../utils/getAvailableChoice.js'
 import { cls } from '../../utils/cls.js'
 import './ChoiceGroup.css'
 
@@ -12,7 +13,7 @@ function ChoiceGroupContainer({
   children,
   choiceGroupAll,
 }: { children: React.ReactNode; choiceGroupAll: ChoiceGroupWithParent[] }) {
-  const renderCustomSelect = choiceGroupAll.some((choiceGroup) => choiceGroup.lvl === 0 && !choiceGroup.hidden)
+  const renderCustomSelect = (choiceGroupAll ?? []).some((choiceGroup) => choiceGroup.lvl === 0 && !choiceGroup.hidden)
   return (
     <div className="choice-group-container">
       {children}
@@ -28,15 +29,17 @@ function ChoiceGroupContainer({
 }
 
 function ChoiceGroup({ children, choiceGroup }: { children: React.ReactNode; choiceGroup: TChoiceGroup }) {
-  const { name: groupName, choices, default: defaultChoice } = choiceGroup
-  const [selectedChoice] = useCurrentSelection(groupName, defaultChoice)
+  const { name: groupName, choices, default: defaultChoice, emptyChoices } = choiceGroup
+  const [selectedChoiceStored] = useCurrentSelection(groupName, defaultChoice)
+  const selectedChoice = getAvailableChoice(selectedChoiceStored, choices, emptyChoices, defaultChoice)
 
   return (
     <div className="choice-group">
       {/* Hidden select used to control choice visibility via CSS */}
       <select data-choice-group={groupName} name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
         {choices.map(({ name: choice }) => (
-          <option key={choice} value={choice}>
+          // data-empty is read by the initializeChoiceGroup SSR script (useCurrentSelection.ts)
+          <option key={choice} value={choice} data-empty={emptyChoices.includes(choice) ? '' : undefined}>
             {choice}
           </option>
         ))}
@@ -49,16 +52,22 @@ function ChoiceGroup({ children, choiceGroup }: { children: React.ReactNode; cho
 const OPTION_HEIGHT = 25
 function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
   const radioId = useId()
-  const choicesAll = usePageContext().config.docpress.choices
+  const choicesAll = usePageContext().resolved.choices
   const { name: groupName, emptyChoices, default: defaultChoice, hidden, parentChoiceGroup, isBuiltIn } = choiceGroup
-  const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
+  const choices = (isBuiltIn ? choiceGroup : choicesAll![groupName]!).choices
+  const [selectedChoiceStored, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
+  const selectedChoice = getAvailableChoice(selectedChoiceStored, choices, emptyChoices, defaultChoice)
   const [expanded, setExpanded] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
-  const [parentSelectedChoice] = useCurrentSelection(parentChoiceGroup?.name || '', parentChoiceGroup?.default || '')
+  let [parentSelectedChoice] = useCurrentSelection(parentChoiceGroup?.name || '', parentChoiceGroup?.default || '')
+  let isHidden = hidden
   const setPrevPosition = useRestoreScroll([selectedChoice])
 
-  const { choices } = isBuiltIn ? choiceGroup : choicesAll![groupName]!
-  const isHidden = parentChoiceGroup ? !parentChoiceGroup.choices.includes(parentSelectedChoice) : hidden
+  if (parentChoiceGroup) {
+    const { choices, emptyChoices, default: defaultChoice } = parentChoiceGroup
+    parentSelectedChoice = getAvailableChoice(parentSelectedChoice, choices, emptyChoices, defaultChoice)
+    isHidden = !parentChoiceGroup.choices.includes(parentSelectedChoice)
+  }
   const isEmptyChoice = (choice: string) => emptyChoices.includes(choice)
   const filteredChoices = choices.filter((choice) => !isEmptyChoice(choice.name))
   const selectedIndex = filteredChoices.findIndex((choice) => choice.name === selectedChoice)
@@ -104,7 +113,7 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
             readOnly
           />
           <span className="choice-select__option-content">
-            <img src={icon} alt="" aria-hidden="true" style={iconStyle} />
+            {icon && <img src={icon} alt="" aria-hidden="true" style={iconStyle} />}
             {choice}
           </span>
         </label>

package/code-blocks/components/Tabs.tsx

@@ -3,6 +3,7 @@ export { Tabs }
 import React, { useId } from 'react'
 import { useCurrentSelection } from '../hooks/useCurrentSelection.js'
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js'
+import { getAvailableChoice } from '../utils/getAvailableChoice.js'
 import { usePageContext } from '../../renderer/usePageContext.js'
 import { assertUsage } from '../../utils/assert.js'
 import './Tabs.css'
@@ -11,10 +12,12 @@ function Tabs({ choice, hide = [] }: { choice: string; hide: string[] }) {
   const radioId = useId()
   const groupName = choice
   const pageContext = usePageContext()
-  const choicesAll = pageContext.config.docpress.choices
+  const choicesAll = pageContext.resolved.choices
   assertUsage(choicesAll && choicesAll[groupName], `${groupName} is unknown`)
   const { choices, default: defaultChoice } = choicesAll[groupName]
-  const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
+  const [selectedChoiceStored, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
+  // A hidden tab can't be shown, so treat `hide` as the unavailable choices (#169)
+  const selectedChoice = getAvailableChoice(selectedChoiceStored, choices, hide, defaultChoice)
   const setPrevPosition = useRestoreScroll([selectedChoice])
   const isHidden = (choice: string) => hide.includes(choice)
 
@@ -40,7 +43,7 @@ function Tabs({ choice, hide = [] }: { choice: string; hide: string[] }) {
               }}
             />
             <span className="choice-tabs__tab-content">
-              <img src={icon} alt="" aria-hidden="true" style={iconStyle} />
+              {icon && <img src={icon} alt="" aria-hidden="true" style={iconStyle} />}
               {choice}
             </span>
           </label>

package/code-blocks/hooks/useCurrentSelection.ts

@@ -32,13 +32,17 @@ function initializeChoiceGroup() {
     switch (groupEl.tagName) {
       case 'SELECT':
         const selectEl = groupEl as HTMLSelectElement
-        const optionExists = [...selectEl.options].some((opt) => opt.value === selectedChoice)
-        if (!optionExists) localStorage.removeItem(storageKey)
-        else selectEl.value = selectedChoice
+        const option = [...selectEl.options].find((opt) => opt.value === selectedChoice)
+        // No option: stale choice removed from the config → forget it.
+        // data-empty: choice exists in the group but has no content on this page → keep the
+        // server-rendered fallback rather than selecting a blank choice (#169).
+        if (!option) localStorage.removeItem(storageKey)
+        else if (!option.hasAttribute('data-empty')) selectEl.value = selectedChoice
         break
       case 'DIV':
         const radioEl = groupEl.querySelector<HTMLInputElement>(`input[type="radio"][value="${selectedChoice}"]`)
         if (radioEl) radioEl.checked = true
+        break
       default:
         break
     }

package/code-blocks/remarkChoiceGroup.ts

@@ -109,6 +109,7 @@ const remarkChoiceGroup: Plugin<[], Root> = (): Transformer<Root> => {
                 name: parentChoiceGroup.name,
                 default: parentChoiceGroup.default,
                 choices: !choiceGroup.hidden ? [parentChoiceGroup.choice] : [],
+                emptyChoices: parentChoiceGroup.emptyChoices,
               },
             }),
           })

package/code-blocks/types.ts

@@ -1,13 +1,14 @@
 export type { ChoiceGroup, ChoiceGroupWithParent, ParentChoiceGroup }
 
-import type { Config } from '../types/Config.js'
+import type { Config, ChoiceItem } from '../types/Config.js'
 
-type ChoiceGroup = NonNullable<Config['choices']>[string] & {
+type ChoiceGroup = Omit<NonNullable<Config['choices']>[string], 'choices'> & {
   name: string
+  choices: ChoiceItem[]
   emptyChoices: string[]
   hidden: boolean
   lvl: number
   isBuiltIn?: boolean
 }
-type ParentChoiceGroup = { name: string; default: string }
+type ParentChoiceGroup = { name: string; default: string; emptyChoices: string[] }
 type ChoiceGroupWithParent = ChoiceGroup & { parentChoiceGroup?: ParentChoiceGroup & { choices: string[] } }

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -8,6 +8,7 @@ import type { MdxJsxAttribute, MdxJsxFlowElement, MdxJsxFlowElementData } from '
 import { getVikeConfig } from 'vike/plugin'
 import { assertUsage } from '../../utils/assert.js'
 import { valueToEstree } from 'estree-util-value-to-estree'
+import { resolveChoices } from './resolveChoices.js'
 
 type ChoiceNode = {
   choiceValue: string
@@ -100,6 +101,7 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent: Parent, hide
             name: choiceGroup.name,
             choice: choiceNode.choiceValue,
             default: choiceGroup.default,
+            emptyChoices: choiceGroup.emptyChoices,
             lvl,
           },
         }),
@@ -143,7 +145,7 @@ function resolveChoiceGroupNodes(choiceNodes: ChoiceNode[]) {
   const vikeConfig = getVikeConfig()
   const choices = choiceNodes.map((choiceNode) => choiceNode.choiceValue)
   const { choices: choicesConfig } = vikeConfig.config.docpress
-  const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig }
+  const choicesAll = resolveChoices({ ...CHOICES_BUILT_IN, ...choicesConfig })
 
   // Resolve to the group that defines ALL of the block's values. Matching a group that merely
   // shares ANY value would mis-resolve a custom group that collides with a built-in on a single
@@ -153,13 +155,12 @@ function resolveChoiceGroupNodes(choiceNodes: ChoiceNode[]) {
   )
   assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`)
 
-  const emptyChoices = choicesAll[groupName]!.choices.filter((choice) => !choices.includes(choice.name)).map(
-    (choice) => choice.name,
-  )
+  const group = choicesAll[groupName]!
+  const emptyChoices = group.choices.filter((choice) => !choices.includes(choice.name)).map((choice) => choice.name)
 
   const choiceGroup = {
     name: groupName,
-    ...choicesAll[groupName]!,
+    ...group,
     emptyChoices,
   }
 

package/code-blocks/utils/getAvailableChoice.ts

@@ -0,0 +1,20 @@
+export { getAvailableChoice }
+
+import type { ChoiceItem } from '../../types/Config.js'
+import { resolveChoice } from './resolveChoices.js'
+
+// A page may include only some of a group's choices, so a choice selected elsewhere (and persisted in
+// localStorage) can be absent here — which would otherwise render nothing (#169). Resolve to a choice
+// that exists on the current page.
+function getAvailableChoice(
+  selectedChoice: string,
+  choices: (string | ChoiceItem)[],
+  emptyChoices: string[],
+  defaultChoice: string,
+): string {
+  const isAvailable = (choiceName: string) => !emptyChoices.includes(choiceName)
+  if (isAvailable(selectedChoice)) return selectedChoice
+  if (isAvailable(defaultChoice)) return defaultChoice
+  const choicesResolved = choices.map(resolveChoice)
+  return choicesResolved.find((choice) => isAvailable(choice.name))?.name ?? selectedChoice
+}

package/code-blocks/utils/resolveChoices.ts

@@ -0,0 +1,18 @@
+export { resolveChoices, resolveChoice }
+export type { ResolvedChoices }
+
+import type { Choice, ChoiceItem } from '../../types/Config.js'
+
+type ResolvedChoices = Record<string, Omit<Choice, 'choices'> & { choices: ChoiceItem[] }>
+
+function resolveChoices(choicesConfig: Record<string, Choice>): ResolvedChoices {
+  return Object.fromEntries(
+    Object.entries(choicesConfig).map(([name, group]) => [
+      name,
+      { ...group, choices: group.choices.map(resolveChoice) },
+    ]),
+  )
+}
+function resolveChoice(choice: string | ChoiceItem): ChoiceItem {
+  return typeof choice === 'string' ? { name: choice } : choice
+}

package/dist/code-blocks/components/Tabs.js

@@ -2,6 +2,7 @@ export { Tabs };
 import React, { useId } from 'react';
 import { useCurrentSelection } from '../hooks/useCurrentSelection.js';
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js';
+import { getAvailableChoice } from '../utils/getAvailableChoice.js';
 import { usePageContext } from '../../renderer/usePageContext.js';
 import { assertUsage } from '../../utils/assert.js';
 import './Tabs.css';
@@ -9,10 +10,12 @@ function Tabs({ choice, hide = [] }) {
     const radioId = useId();
     const groupName = choice;
     const pageContext = usePageContext();
-    const choicesAll = pageContext.config.docpress.choices;
+    const choicesAll = pageContext.resolved.choices;
     assertUsage(choicesAll && choicesAll[groupName], `${groupName} is unknown`);
     const { choices, default: defaultChoice } = choicesAll[groupName];
-    const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice);
+    const [selectedChoiceStored, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice);
+    // A hidden tab can't be shown, so treat `hide` as the unavailable choices (#169)
+    const selectedChoice = getAvailableChoice(selectedChoiceStored, choices, hide, defaultChoice);
     const setPrevPosition = useRestoreScroll([selectedChoice]);
     const isHidden = (choice) => hide.includes(choice);
     return (React.createElement("div", { className: "choice-tabs" },
@@ -22,6 +25,6 @@ function Tabs({ choice, hide = [] }) {
                     setSelectedChoice(choice);
                 } }),
             React.createElement("span", { className: "choice-tabs__tab-content" },
-                React.createElement("img", { src: icon, alt: "", "aria-hidden": "true", style: iconStyle }),
+                icon && React.createElement("img", { src: icon, alt: "", "aria-hidden": "true", style: iconStyle }),
                 choice)))))));
 }

package/dist/code-blocks/hooks/useCurrentSelection.js

@@ -30,16 +30,20 @@ function initializeChoiceGroup() {
         switch (groupEl.tagName) {
             case 'SELECT':
                 const selectEl = groupEl;
-                const optionExists = [...selectEl.options].some((opt) => opt.value === selectedChoice);
-                if (!optionExists)
+                const option = [...selectEl.options].find((opt) => opt.value === selectedChoice);
+                // No option: stale choice removed from the config → forget it.
+                // data-empty: choice exists in the group but has no content on this page → keep the
+                // server-rendered fallback rather than selecting a blank choice (#169).
+                if (!option)
                     localStorage.removeItem(storageKey);
-                else
+                else if (!option.hasAttribute('data-empty'))
                     selectEl.value = selectedChoice;
                 break;
             case 'DIV':
                 const radioEl = groupEl.querySelector(`input[type="radio"][value="${selectedChoice}"]`);
                 if (radioEl)
                     radioEl.checked = true;
+                break;
             default:
                 break;
         }

package/dist/code-blocks/remarkChoiceGroup.js

@@ -90,6 +90,7 @@ const remarkChoiceGroup = () => {
                                 name: parentChoiceGroup.name,
                                 default: parentChoiceGroup.default,
                                 choices: !choiceGroup.hidden ? [parentChoiceGroup.choice] : [],
+                                emptyChoices: parentChoiceGroup.emptyChoices,
                             },
                         }),
                     });

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

@@ -1,7 +1,8 @@
 export type { ChoiceGroup, ChoiceGroupWithParent, ParentChoiceGroup };
-import type { Config } from '../types/Config.js';
-type ChoiceGroup = NonNullable<Config['choices']>[string] & {
+import type { Config, ChoiceItem } from '../types/Config.js';
+type ChoiceGroup = Omit<NonNullable<Config['choices']>[string], 'choices'> & {
     name: string;
+    choices: ChoiceItem[];
     emptyChoices: string[];
     hidden: boolean;
     lvl: number;
@@ -10,6 +11,7 @@ type ChoiceGroup = NonNullable<Config['choices']>[string] & {
 type ParentChoiceGroup = {
     name: string;
     default: string;
+    emptyChoices: string[];
 };
 type ChoiceGroupWithParent = ChoiceGroup & {
     parentChoiceGroup?: ParentChoiceGroup & {

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

@@ -2,6 +2,7 @@ export { generateChoiceGroupCode, expressionToAttribute };
 import { getVikeConfig } from 'vike/plugin';
 import { assertUsage } from '../../utils/assert.js';
 import { valueToEstree } from 'estree-util-value-to-estree';
+import { resolveChoices } from './resolveChoices.js';
 // TODO: determine icon representation for CHOICES_BUILT_IN given lack of SVG/file import support
 // use SVG URLs for now
 const CHOICES_BUILT_IN = {
@@ -81,6 +82,7 @@ function generateChoiceGroupCode(choiceNodes, parent, hide = false) {
                         name: choiceGroup.name,
                         choice: choiceNode.choiceValue,
                         default: choiceGroup.default,
+                        emptyChoices: choiceGroup.emptyChoices,
                         lvl,
                     },
                 }),
@@ -118,16 +120,17 @@ function resolveChoiceGroupNodes(choiceNodes) {
     const vikeConfig = getVikeConfig();
     const choices = choiceNodes.map((choiceNode) => choiceNode.choiceValue);
     const { choices: choicesConfig } = vikeConfig.config.docpress;
-    const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig };
+    const choicesAll = resolveChoices({ ...CHOICES_BUILT_IN, ...choicesConfig });
     // Resolve to the group that defines ALL of the block's values. Matching a group that merely
     // shares ANY value would mis-resolve a custom group that collides with a built-in on a single
     // value — e.g. a `runtime` group [Node, Bun, Deno, Cloudflare] sharing `Bun` with `pkgManager`.
     const groupName = Object.keys(choicesAll).find((key) => choices.every((choice) => choicesAll[key].choices.some(({ name }) => name === choice)));
     assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`);
-    const emptyChoices = choicesAll[groupName].choices.filter((choice) => !choices.includes(choice.name)).map((choice) => choice.name);
+    const group = choicesAll[groupName];
+    const emptyChoices = group.choices.filter((choice) => !choices.includes(choice.name)).map((choice) => choice.name);
     const choiceGroup = {
         name: groupName,
-        ...choicesAll[groupName],
+        ...group,
         emptyChoices,
     };
     const mergedChoiceNodes = choiceGroup.choices.map((choice) => {

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

@@ -0,0 +1,3 @@
+export { getAvailableChoice };
+import type { ChoiceItem } from '../../types/Config.js';
+declare function getAvailableChoice(selectedChoice: string, choices: (string | ChoiceItem)[], emptyChoices: string[], defaultChoice: string): string;

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

@@ -0,0 +1,14 @@
+export { getAvailableChoice };
+import { resolveChoice } from './resolveChoices.js';
+// A page may include only some of a group's choices, so a choice selected elsewhere (and persisted in
+// localStorage) can be absent here — which would otherwise render nothing (#169). Resolve to a choice
+// that exists on the current page.
+function getAvailableChoice(selectedChoice, choices, emptyChoices, defaultChoice) {
+    const isAvailable = (choiceName) => !emptyChoices.includes(choiceName);
+    if (isAvailable(selectedChoice))
+        return selectedChoice;
+    if (isAvailable(defaultChoice))
+        return defaultChoice;
+    const choicesResolved = choices.map(resolveChoice);
+    return choicesResolved.find((choice) => isAvailable(choice.name))?.name ?? selectedChoice;
+}

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

@@ -0,0 +1,8 @@
+export { resolveChoices, resolveChoice };
+export type { ResolvedChoices };
+import type { Choice, ChoiceItem } from '../../types/Config.js';
+type ResolvedChoices = Record<string, Omit<Choice, 'choices'> & {
+    choices: ChoiceItem[];
+}>;
+declare function resolveChoices(choicesConfig: Record<string, Choice>): ResolvedChoices;
+declare function resolveChoice(choice: string | ChoiceItem): ChoiceItem;

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

@@ -0,0 +1,10 @@
+export { resolveChoices, resolveChoice };
+function resolveChoices(choicesConfig) {
+    return Object.fromEntries(Object.entries(choicesConfig).map(([name, group]) => [
+        name,
+        { ...group, choices: group.choices.map(resolveChoice) },
+    ]));
+}
+function resolveChoice(choice) {
+    return typeof choice === 'string' ? { name: choice } : choice;
+}

package/dist/renderer/usePageContext.d.ts

@@ -16,6 +16,7 @@ declare function usePageContextLegacy(): {
     pageTitle: string | null;
     documentTitle: string;
     activeCategoryName: string;
+    choices: import("../code-blocks/utils/resolveChoices.js").ResolvedChoices | undefined;
 };
 declare function usePageContext(): PageContext;
 declare function PageContextProvider({ pageContext, children, }: {

package/dist/resolvePageContext.d.ts

@@ -16,4 +16,5 @@ declare function resolvePageContext(pageContext: PageContextServer): {
     pageTitle: string | null;
     documentTitle: string;
     activeCategoryName: string;
+    choices: import("./code-blocks/utils/resolveChoices.js").ResolvedChoices | undefined;
 };

package/dist/resolvePageContext.js

@@ -4,6 +4,7 @@ import { jsxToTextContent } from './utils/jsxToTextContent.js';
 import pc from '@brillout/picocolors';
 import { parseMarkdownMini } from './parseMarkdownMini.js';
 import { determineNavItemsColumnLayout } from './determineNavItemsColumnLayout.js';
+import { resolveChoices } from './code-blocks/utils/resolveChoices.js';
 function resolvePageContext(pageContext) {
     const config = pageContext.globalContext.config.docpress;
     const { urlPathname } = pageContext;
@@ -45,6 +46,7 @@ function resolvePageContext(pageContext) {
     }
     // Don't show landing page in navigation
     navItemsAll = navItemsAll.filter((navItem) => navItem.url !== '/');
+    const choices = config.choices && resolveChoices(config.choices);
     const resolved = {
         navItemsAll,
         navItemsDetached,
@@ -54,6 +56,7 @@ function resolvePageContext(pageContext) {
         pageTitle,
         documentTitle,
         activeCategoryName,
+        choices,
     };
     return resolved;
 }

package/dist/types/Config.d.ts

@@ -1,4 +1,4 @@
-export type { Config };
+export type { Config, Choice, ChoiceItem };
 import type { HeadingDefinition, HeadingDetachedDefinition } from './Heading.js';
 import type React from 'react';
 type Config = {
@@ -47,11 +47,13 @@ type Category = string | {
     /** Hide from Algolia search */
     hide?: boolean;
 };
+/** A choice. A plain `string` is shorthand for `{ name: string }` (no icon). */
+type ChoiceItem = {
+    name: string;
+    icon?: string;
+    iconStyle?: React.CSSProperties;
+};
 type Choice = {
-    choices: {
-        name: string;
-        icon: string;
-        iconStyle?: React.CSSProperties;
-    }[];
+    choices: (string | ChoiceItem)[];
     default: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.43",
+  "version": "0.16.45",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/resolvePageContext.ts

@@ -18,6 +18,7 @@ import { jsxToTextContent } from './utils/jsxToTextContent.js'
 import pc from '@brillout/picocolors'
 import { parseMarkdownMini } from './parseMarkdownMini.js'
 import { determineNavItemsColumnLayout } from './determineNavItemsColumnLayout.js'
+import { resolveChoices } from './code-blocks/utils/resolveChoices.js'
 
 type PageSectionResolved = {
   url: string | null
@@ -80,6 +81,8 @@ function resolvePageContext(pageContext: PageContextServer) {
   // Don't show landing page in navigation
   navItemsAll = navItemsAll.filter((navItem) => navItem.url !== '/')
 
+  const choices = config.choices && resolveChoices(config.choices)
+
   const resolved = {
     navItemsAll,
     navItemsDetached,
@@ -89,6 +92,7 @@ function resolvePageContext(pageContext: PageContextServer) {
     pageTitle,
     documentTitle,
     activeCategoryName,
+    choices,
   }
   return resolved
 }

package/types/Config.ts

@@ -1,4 +1,4 @@
-export type { Config }
+export type { Config, Choice, ChoiceItem }
 
 import type { HeadingDefinition, HeadingDetachedDefinition } from './Heading.js'
 import type React from 'react'
@@ -62,7 +62,9 @@ type Category =
       hide?: boolean
     }
 
+/** A choice. A plain `string` is shorthand for `{ name: string }` (no icon). */
+type ChoiceItem = { name: string; icon?: string; iconStyle?: React.CSSProperties }
 type Choice = {
-  choices: { name: string; icon: string; iconStyle?: React.CSSProperties }[]
+  choices: (string | ChoiceItem)[]
   default: string
 }