@brillout/docpress 0.16.44 → 0.16.46

package/EditLink.tsx

@@ -28,11 +28,11 @@ function EditLink({
         paddingBottom: 7,
         paddingLeft: 8,
         paddingRight: 7,
-        border: '1px solid #e0e0e0',
+        border: '1px solid var(--color-border, #e0e0e0)',
         borderRadius: 7,
         fontSize: '0.91em',
-        color: '#6c6c6c',
-        background: '#f8f8f8',
+        color: 'var(--color-muted, #6c6c6c)',
+        background: 'var(--color-surface, #f8f8f8)',
         letterSpacing: 0.4,
         lineHeight: 0,
         ...style,

package/Layout.css

@@ -1,4 +1,3 @@
 body {
   background: var(--color-bg-white);
-  --color-bg-white: #fdfdfd;
 }

package/Layout.tsx

@@ -82,7 +82,7 @@ function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div
       style={{
-        ['--color-bg-gray']: '#f5f5f5',
+        ['--color-bg-gray']: 'var(--color-surface, #f5f5f5)',
         ['--block-margin']: `${blockMargin}px`,
         // ['--nav-head-height']: `${isLandingPage ? 70 : 63}px`,
         ['--nav-head-height']: `63px`,
@@ -359,7 +359,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
             margin: 'auto',
             height: 'var(--nav-head-height)',
             fontSize: `min(14.2px, ${isProjectNameShort(name) ? '4.8cqw' : '4.5cqw'})`,
-            color: '#666',
+            color: 'var(--color-muted, #666)',
             display: 'flex',
             justifyContent: 'center',
           }}
@@ -670,7 +670,7 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
           width: 11,
           marginLeft: 'calc(var(--icon-text-padding) - 1px)',
           flexShrink: 0,
-          color: '#888',
+          color: 'var(--color-muted, #888)',
           position: 'relative',
           top: 1,
         }}

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -138,7 +138,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
 ${/* Button style */ ''}
 .menu-toggle-${i} {
   html.menu-modal-show.menu-modal-show-${i} & {
-    color: black !important;
+    color: var(--color-text, black) !important;
     [class^='decolorize-'],
     [class*=' decolorize-'] {
       filter: grayscale(0) opacity(1) !important;

package/MenuModal.tsx

@@ -26,7 +26,7 @@ function MenuModal({ isTopNav, isNavLeftAlwaysHidden_ }: { isTopNav: boolean; is
           width: '100%',
           top: 'var(--nav-head-height)',
           zIndex: 199, // maximum value, because docsearch's modal has `z-index: 200`
-          background: '#ededef',
+          background: 'var(--color-surface, #ededef)',
           transitionProperty: 'opacity',
           transitionTimingFunction: 'ease',
           maxWidth: isNavLeftAlwaysHidden_ ? undefined : bodyMaxWidth,
@@ -169,8 +169,8 @@ function CloseButton({ className }: { className: string }) {
           cx="11.45"
           cy="11.45"
           r="10.607"
-          fill="#ececec"
-          stroke="#666"
+          fill="var(--color-surface, #ececec)"
+          stroke="var(--color-muted, #666)"
           strokeDashoffset="251.44"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -179,8 +179,8 @@ function CloseButton({ className }: { className: string }) {
         />
         <path
           d="m7.5904 6.2204 3.86 3.86 3.84-3.84a0.92 0.92 0 0 1 0.66-0.29 1 1 0 0 1 1 1 0.9 0.9 0 0 1-0.27 0.66l-3.89 3.84 3.89 3.89a0.9 0.9 0 0 1 0.27 0.61 1 1 0 0 1-1 1 0.92 0.92 0 0 1-0.69-0.27l-3.81-3.86-3.85 3.85a0.92 0.92 0 0 1-0.65 0.28 1 1 0 0 1-1-1 0.9 0.9 0 0 1 0.27-0.66l3.89-3.84-3.89-3.89a0.9 0.9 0 0 1-0.27-0.61 1 1 0 0 1 1-1c0.24 3e-3 0.47 0.1 0.64 0.27z"
-          fill="#666"
-          stroke="#666"
+          fill="var(--color-muted, #666)"
+          stroke="var(--color-muted, #666)"
           strokeWidth=".11719"
         />
       </svg>

package/NavItemComponent.css

@@ -13,7 +13,7 @@
 .nav-item-level-4 {
   padding-top: 14px;
   margin-bottom: -1px;
-  color: #999;
+  color: var(--color-muted, #999);
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0.15ch;
@@ -82,7 +82,7 @@
 }
 .nav-item-level-3 {
   --shadow-size: 9px;
-  --shadow-color: rgba(0, 0, 0, 0.11);
+  --shadow-color: var(--color-shadow, rgba(0, 0, 0, 0.11));
   --shadow-size-minus: calc(-1 * var(--shadow-size));
   --shadow-top: inset 0px var(--shadow-size) var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
   --shadow-bottom: inset 0px var(--shadow-size-minus) var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);

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'
 
@@ -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>
         ))}
@@ -51,14 +54,20 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
   const radioId = useId()
   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]!).choices
-  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)

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'
@@ -14,7 +15,9 @@ function Tabs({ choice, hide = [] }: { choice: string; hide: string[] }) {
   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)
 

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

@@ -10,5 +10,5 @@ type ChoiceGroup = Omit<NonNullable<Config['choices']>[string], 'choices'> & {
   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

@@ -101,6 +101,7 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent: Parent, hide
             name: choiceGroup.name,
             choice: choiceNode.choiceValue,
             default: choiceGroup.default,
+            emptyChoices: choiceGroup.emptyChoices,
             lvl,
           },
         }),

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

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

package/components/HorizontalLine.tsx

@@ -12,7 +12,7 @@ function HorizontalLine({ primary }: { primary?: true }) {
           margin: 0,
           border: 0,
           // Same as `.doc-page h2::after`
-          borderTop: '1px solid rgba(0, 0, 0, 0.1)',
+          borderTop: '1px solid var(--color-border, rgba(0, 0, 0, 0.1))',
           maxWidth: 500,
           width: '80%',
         }}

package/css/colorize-on-hover.css

@@ -51,7 +51,11 @@
 }
 
 body {
-  --color-active-value: 0.03;
-  --color-active: rgba(0, 0, 0, var(--color-active-value));
-  --color-active-double: rgba(0, 0, 0, calc(2 * var(--color-active-value)));
+  /* Hover/active tint mixed from the text color so it tracks the active
+     appearance (light text -> light tint on dark). The `#000` fallback makes an
+     unthemed site identical to the original `rgba(0, 0, 0, value)`:
+     color-mix(in srgb, #000 3%, transparent) === rgba(0, 0, 0, 0.03). */
+  --color-active-value: 3%;
+  --color-active: color-mix(in srgb, var(--color-text, #000) var(--color-active-value), transparent);
+  --color-active-double: color-mix(in srgb, var(--color-text, #000) calc(2 * var(--color-active-value)), transparent);
 }

package/css/font.css

@@ -7,7 +7,6 @@ button {
   font-family: inherit;
 }
 body {
-  --color-text: #323d48;
-  color: var(--color-text);
+  color: var(--color-text, #323d48);
   line-height: 1.5;
 }

package/css/heading.css

@@ -27,7 +27,7 @@ h3 {
   height: 1px;
   top: -45px;
   /* Same as <HorizontalLine> */
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--color-border, rgba(0, 0, 0, 0.1));
   --width: min(80%, 500px);
   width: var(--width);
   left: calc((100% - var(--width)) / 2);
@@ -54,7 +54,7 @@ h3 {
 
 .doc-page h5 {
   font-size: 0.94em;
-  color: #777;
+  color: var(--color-muted, #777);
   margin-bottom: 10px;
 }
 
@@ -82,7 +82,7 @@ h3 {
     font-size: 23px;
     top: 1px;
     left: calc(-1 * (0.75em - var(--hash-offset)));
-    color: #aaa;
+    color: var(--color-muted, #aaa);
     display: flex;
     align-items: center;
   }

package/css/index.css

@@ -1,3 +1,4 @@
+@import './tokens.css';
 @import './reset.css';
 @import './colorize-on-hover.css';
 @import './heading.css';

package/css/link.css

@@ -2,5 +2,5 @@ a {
   text-decoration: none;
 }
 .doc-page a[href]:not(.nav-item) {
-  color: #4747ff;
+  color: var(--color-primary, #4747ff);
 }

package/css/table.css

@@ -1,5 +1,5 @@
 table th {
-  background-color: #f7f7f7;
+  background-color: var(--color-surface, #f7f7f7);
 }
 table {
   border-collapse: collapse;
@@ -7,7 +7,7 @@ table {
 table td,
 table th {
   padding: 8px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--color-border, #ccc);
 }
 table th {
   text-align: left;

package/css/tokens.css

@@ -0,0 +1,34 @@
+/*
+ * Color tokens (opt-in, zero default change).
+ *
+ * No light palette is defined here on purpose: every consumer reads
+ * `var(--color-x, <literal>)` and falls back to its original literal, so an
+ * unthemed DocPress site renders exactly as before. A site re-themes by setting
+ * the `--color-*` variables (on :root or body), and turns on a dark appearance
+ * by adding the `dark` class or `[data-theme="dark"]`. There is no
+ * `prefers-color-scheme` switch, so the OS setting never changes a site that
+ * has not opted in.
+ */
+:root {
+  /* --color-text has a single original value and pre-existing consumers that
+     read it bare (nav items, tabs), so it is defined here (was `body {}`). It
+     stays overridable (a `body`/`:root` override or the dark block below wins).
+     The ambiguous greys are intentionally NOT defined here: their consumers fall
+     back to their own original literal, so light rendering is unchanged. */
+  --color-text: #323d48;
+
+  /* Long-standing internal aliases, kept resolving to their original defaults. */
+  --color-bg-white: var(--color-bg, #fdfdfd);
+  --color-bg-gray: var(--color-surface, #f5f5f5);
+}
+
+:root.dark,
+:root[data-theme='dark'] {
+  --color-bg: #0d0f14;
+  --color-surface: #161922;
+  --color-text: #d7dce5;
+  --color-muted: #8b95a5;
+  --color-border: #2b313c;
+  --color-primary: #8aa0ff;
+  --color-shadow: rgba(0, 0, 0, 0.45);
+}

package/css/tooltip.css

@@ -19,13 +19,13 @@
     position: absolute;
     left: 50%;
     transform: translate(-50%, 0);
-    background: #fdfdfd;
+    background: var(--color-bg, #fdfdfd);
     padding: 3px 10px;
-    box-shadow: rgb(0 0 0 / 8%) 2px 4px 7px 0px;
+    box-shadow: var(--color-shadow, rgb(0 0 0 / 8%)) 2px 4px 7px 0px;
     border-radius: 5px;
-    color: #333;
+    color: var(--color-text, #333);
     letter-spacing: -0.02em;
-    border: 1px solid #e3e3e3;
+    border: 1px solid var(--color-border, #e3e3e3);
     z-index: 1;
     /* Atlernative: https://stackoverflow.com/questions/30086913/css-positioned-absolute-element-automatic-width-outside-of-parents-bounds/57379329#57379329
     width: max-content;

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';
@@ -12,7 +13,9 @@ function Tabs({ choice, hide = [] }) {
     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" },

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

@@ -11,6 +11,7 @@ type ChoiceGroup = Omit<NonNullable<Config['choices']>[string], 'choices'> & {
 type ParentChoiceGroup = {
     name: string;
     default: string;
+    emptyChoices: string[];
 };
 type ChoiceGroupWithParent = ChoiceGroup & {
     parentChoiceGroup?: ParentChoiceGroup & {

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

@@ -82,6 +82,7 @@ function generateChoiceGroupCode(choiceNodes, parent, hide = false) {
                         name: choiceGroup.name,
                         choice: choiceNode.choiceValue,
                         default: choiceGroup.default,
+                        emptyChoices: choiceGroup.emptyChoices,
                         lvl,
                     },
                 }),

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

@@ -1,7 +1,8 @@
-export { resolveChoices };
+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

@@ -1,6 +1,9 @@
-export { resolveChoices };
+export { resolveChoices, resolveChoice };
 function resolveChoices(choicesConfig) {
-    return Object.fromEntries(Object.entries(choicesConfig).map(([name, group]) => [name, { ...group, choices: group.choices.map(resolveChoice) }]));
+    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/components/HorizontalLine.js

@@ -8,7 +8,7 @@ function HorizontalLine({ primary }) {
                 margin: 0,
                 border: 0,
                 // Same as `.doc-page h2::after`
-                borderTop: '1px solid rgba(0, 0, 0, 0.1)',
+                borderTop: '1px solid var(--color-border, rgba(0, 0, 0, 0.1))',
                 maxWidth: 500,
                 width: '80%',
             } })));

package/dist/types/Config.d.ts

@@ -13,6 +13,17 @@ type Config = {
         google: string;
     };
     banner?: string;
+    /**
+     * Raw HTML injected at the end of `<head>` on every page.
+     *
+     * Use for a small inline `<script>`/`<style>` that must run before first
+     * paint — e.g. a no-flash theme script that reads a cookie and applies the
+     * palette before the page renders (relevant for prerendered/static pages,
+     * where there is no request to read the cookie from at render time).
+     *
+     * Emitted verbatim (not escaped), so only pass trusted, self-authored markup.
+     */
+    headHtml?: string;
     github: string;
     discord?: string;
     twitter?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.44",
+  "version": "0.16.46",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -66,7 +66,10 @@
     "vike": "^0.4.255",
     "vite": "^8.0.8"
   },
-  "repository": "https://github.com/brillout/docpress",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brillout/docpress"
+  },
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/renderer/onRenderHtml.tsx

@@ -30,6 +30,7 @@ async function onRenderHtml(pageContext: PageContextServer): Promise<any> {
         <meta name="viewport" content="width=device-width,initial-scale=1">
         ${getOpenGraphTags(pageContext.urlPathname, documentTitle, pageContext.globalContext.config.docpress)}
         ${getAlgoliaTags(pageContext)}
+        ${getHeadHtml(pageContext.globalContext.config.docpress)}
       </head>
       <body>
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
@@ -37,6 +38,10 @@ async function onRenderHtml(pageContext: PageContextServer): Promise<any> {
     </html>`
 }
 
+function getHeadHtml(config: Config) {
+  return config.headHtml ? dangerouslySkipEscape(config.headHtml) : ''
+}
+
 function getAlgoliaTags(pageContext: PageContextServer) {
   const activeCategory = getActiveCategory(pageContext)
   const categoryNameTag = escapeInject`<meta name="algolia:category" content="${activeCategory.name}">`

package/types/Config.ts

@@ -18,6 +18,18 @@ type Config = {
       }
   banner?: string
 
+  /**
+   * Raw HTML injected at the end of `<head>` on every page.
+   *
+   * Use for a small inline `<script>`/`<style>` that must run before first
+   * paint — e.g. a no-flash theme script that reads a cookie and applies the
+   * palette before the page renders (relevant for prerendered/static pages,
+   * where there is no request to read the cookie from at render time).
+   *
+   * Emitted verbatim (not escaped), so only pass trusted, self-authored markup.
+   */
+  headHtml?: string
+
   github: string
   discord?: string
   twitter?: string