starlight-theme-nova 0.2.1 → 0.4.0

package/lib/styles.gen.css

@@ -99,7 +99,8 @@
 .nova-pagination-link-icon-right{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18l6-6l-6-6'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;display:block;min-width:1.25rem;min-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .nova-theme-select-icon-dark{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 1.992a10 10 0 1 0 9.236 13.838c.341-.82-.476-1.644-1.298-1.31a6.5 6.5 0 0 1-6.864-10.787l.077-.08c.551-.63.113-1.653-.758-1.653h-.266l-.068-.006z'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
 .nova-theme-select-icon-light{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 19a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1m-4.95-2.05a1 1 0 0 1 0 1.414l-1.414 1.414a1 1 0 1 1-1.414-1.414l1.414-1.414a1 1 0 0 1 1.414 0m11.314 0l1.414 1.414a1 1 0 0 1-1.414 1.414l-1.414-1.414a1 1 0 0 1 1.414-1.414m-5.049-9.836a5 5 0 1 1-2.532 9.674a5 5 0 0 1 2.532-9.674M4 11a1 1 0 0 1 0 2H2a1 1 0 0 1 0-2zm18 0a1 1 0 0 1 0 2h-2a1 1 0 0 1 0-2zM5.636 4.222L7.05 5.636A1 1 0 0 1 5.636 7.05L4.222 5.636a1 1 0 0 1 1.414-1.414m14.142 0a1 1 0 0 1 0 1.414L18.364 7.05a1 1 0 0 1-1.414-1.414l1.414-1.414a1 1 0 0 1 1.414 0M12 1a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V2a1 1 0 0 1 1-1'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
-.nova-code-container{position:relative;}
+.nova-code-container{position:relative;overflow:hidden;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.375rem;border-style:solid;}
+.nova-code-container pre{position:relative;}
 .nova-code-copy-button{position:absolute;right:0.5rem;top:0.5rem;margin:0;width:1.5rem;height:1.5rem;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.25rem;border-style:solid;background-color:rgb(243 244 246 / 0.3) /* #f3f4f6 */;padding:0.25rem;--nova-text-opacity:1;color:rgb(0 0 0 / var(--nova-text-opacity)) /* #000 */;--nova-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .nova-link-card{position:relative;display:flex;flex-direction:column;gap:0.5rem;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.75rem;border-style:solid;--nova-bg-opacity:1;background-color:rgb(255 255 255 / var(--nova-bg-opacity)) /* #fff */;padding-left:1.25rem;padding-right:1.25rem;padding-top:1rem;padding-bottom:1rem;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;--nova-shadow:var(--nova-shadow-inset) 0 1px 2px 0 var(--nova-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:200ms;}
 .nova-page-frame-header{position:fixed;inset:0;z-index:var(--sl-z-index-navbar);box-sizing:border-box;width:100%;height:var(--sl-nav-height);border-width:0px;border-bottom-width:1px;border-color:var(--sl-color-hairline);border-style:solid;background-color:var(--sl-color-bg-nav) /* var(--sl-color-bg-nav) */;padding-top:var(--sl-nav-pad-y);padding-bottom:var(--sl-nav-pad-y);padding-left:var(--sl-nav-pad-x);padding-right:var(--sl-nav-pad-x);--nova-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);}
@@ -108,6 +109,8 @@
 .nova-pagination-link{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;border-radius:0.75rem;padding:0.5rem;color:var(--sl-color-gray-2) /* var(--sl-color-gray-2) */;font-weight:500;text-decoration:none;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:100ms;}
 .nova-link-button{margin-inline-end:0.5rem;margin-top:0.5rem;margin-bottom:0.5rem;display:inline-flex;align-items:center;justify-content:space-between;gap:0.5rem;border-width:1px;border-color:transparent;border-radius:0.75rem;border-style:solid;padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem;font-weight:500;text-decoration:none;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:200ms;}
 .nova-header{box-sizing:border-box;height:100%;display:flex;align-items:center;gap:0.5rem;}
+div[data-nova-code-container][data-nova-code-title] .nova-code-title{display:block;}
+.nova-code-title{display:none;border-bottom-width:1px;border-bottom-color:var(--sl-color-gray-5);border-bottom-style:solid;background-color:var(--sl-color-bg) /* var(--sl-color-bg) */;padding-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.875rem;line-height:1.25rem;color:var(--sl-color-gray-3) /* var(--sl-color-gray-3) */;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
 .nova-header-actions{display:none;align-items:center;gap:0.5rem;}
 .nova-social-icons-link{width:2rem;height:2rem;display:flex;border-radius:0.375rem;padding:0.5rem;color:var(--sl-color-text) /* var(--sl-color-text) */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .nova-theme-select{width:2rem;height:2rem;border-radius:0.375rem;padding:0.5rem;color:var(--sl-color-text) /* var(--sl-color-text) */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
@@ -126,6 +129,7 @@
 .nova-pagination-link:active[data-side="left"]{--nova-translate-x:-0.25rem;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
 .nova-pagination-link:active[data-side="right"]{--nova-translate-x:0.25rem;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
 .nova-code-copy-button:active{--nova-scale-x:0.9;--nova-scale-y:0.9;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
+.sl-markdown-content .nova-code-container pre.astro-code{border-width:0px;border-color:transparent;border-radius:0;}
 .nova-page-frame-sidebar-pane{border-width:0px;border-color:var(--sl-color-hairline);border-style:solid;}
 .nova-link-button-secondary{border-color:var(--sl-color-gray-5);--nova-bg-opacity:1;background-color:rgb(255 255 255 / var(--nova-bg-opacity)) /* #fff */;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;--nova-shadow:var(--nova-shadow-inset) 0 1px 2px 0 var(--nova-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
 .nova-mobile-table-of-contents summary{border-bottom-color:var(--sl-color-hairline);}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-theme-nova",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
@@ -29,8 +29,10 @@
     "@shikijs/transformers": "^3.2.1",
     "@shikijs/twoslash": "^3.2.1",
     "@shikijs/types": "^3.2.1",
+    "@types/hast": "^3.0.4",
     "astro-theme-toggle": "^0.6.0",
     "hast-util-is-element": "^3.0.0",
+    "rehype": "^13.0.2",
     "shiki-twoslash-renderer": "0.0.2"
   },
   "devDependencies": {

package/src/components/CodeFile.astro

@@ -0,0 +1,64 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { existsSync } from 'node:fs'
+import fs from 'node:fs/promises'
+import { basename } from 'node:path'
+import Code from './Code.astro'
+import config from 'virtual:starlight-theme-nova/user-config'
+import { fileURLToPath } from 'node:url'
+
+type CodeProps = ComponentProps<typeof Code>
+
+interface Props extends Omit<CodeProps, 'code' | 'lang'> {
+  /**
+   * The file path relative to the project root.
+   */
+  path: string
+
+  /**
+   * The title of the file. If not provided, the file name will be used.
+   */
+  title?: string
+
+  /**
+   * The language of the file. If not provided, the file extension will be used.
+   */
+  lang?: CodeProps['lang']
+}
+
+const { path, title, lang, meta, ...rest } = Astro.props
+
+if (!path) {
+  throw new Error('path is required for <CodeFile> component')
+}
+
+const root = new URL(config.rootHref)
+const url = new URL(path, root)
+const absolutePath = fileURLToPath(url)
+if (!existsSync(absolutePath)) {
+  throw new Error(`Unable to find file ${absolutePath}`)
+}
+
+let code: string
+try {
+  code = await fs.readFile(absolutePath, 'utf-8')
+} catch (error) {
+  throw new Error(`Unable to read file ${absolutePath}: ${error}`, {
+    cause: error,
+  })
+}
+
+let fileName = basename(path)
+let defaultLang = (fileName.split('.').pop() || 'plaintext') as 'plaintext'
+let defaultTitle = fileName
+let titleMeta = `title="${title || defaultTitle}"`
+
+const codeProps: CodeProps = {
+  ...rest,
+  lang: lang ?? defaultLang,
+  meta: meta ? `${meta} ${titleMeta}` : titleMeta,
+  code,
+}
+---
+
+<Code {...codeProps} />

package/src/components/CodeTabs.astro

@@ -1,5 +1,6 @@
 ---
 import { Tabs } from '@astrojs/starlight/components'
+import { processCodeTabs } from './rehype-code-tabs'
 
 interface Props {
   border?: boolean
@@ -7,11 +8,14 @@ interface Props {
 }
 
 const { border = true, syncKey } = Astro.props
+
+const originalHtml = await Astro.slots.render('default')
+const processedHtml = processCodeTabs(originalHtml)
 ---
 
 <div class:list={['code-tabs', border ? 'code-tabs-border' : undefined]}>
   <Tabs syncKey={syncKey}>
-    <slot />
+    <Fragment set:html={processedHtml} />
   </Tabs>
 </div>
 
@@ -59,12 +63,14 @@ const { border = true, syncKey } = Astro.props
       margin: 0;
     }
 
-    div[role='tabpanel'] pre {
-      border-color: transparent;
+    .astro-code {
+      border-radius: 0;
     }
 
-    .astro-code {
+    .nova-code-container {
       border-radius: 0;
+      border-width: 0;
+      border-color: transparent;
     }
   }
 </style>

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as Code } from './Code.astro'
+export { default as CodeFile } from './CodeFile.astro'
 export { default as CodePackageManagers } from './CodePackageManagers.astro'
-export { default as CodeTabs } from './CodeTabs.astro'
 export { default as CodeTabItem } from './CodeTabItem.astro'
+export { default as CodeTabs } from './CodeTabs.astro'
 export { default as LinkButton } from './LinkButton.astro'
 export { default as LinkCard } from './LinkCard.astro'

package/src/components/rehype-code-tabs.ts

@@ -0,0 +1,56 @@
+import type { Element, ElementContent } from 'hast'
+import { rehype } from 'rehype'
+
+import { CODE_PROPERTY_CONTAINER, CODE_PROPERTY_TITLE } from '../constants'
+
+// https://github.com/withastro/starlight/blob/bdb05e704a6cf06a029367f99b6bf2f575e5a5f3/packages/starlight/user-components/rehype-tabs.ts#L20
+export const TabItemTagname = 'starlight-tab-item'
+
+/**
+ * Rehype processor to extract tab panel data and turn each
+ * `<starlight-tab-item>` into a `<div>` with the necessary
+ * attributes.
+ */
+const tabsProcessor = rehype()
+  .data('settings', { fragment: true })
+  .use(() => {
+    return (tree: Element) => {
+      return {
+        ...tree,
+        children: tree.children.map(replacePre),
+      }
+    }
+  })
+
+function replacePre(node: ElementContent): ElementContent {
+  if (
+    node.type === 'element' &&
+    node.tagName === 'div' &&
+    node.properties[CODE_PROPERTY_CONTAINER] != null
+  ) {
+    const title = node.properties[CODE_PROPERTY_TITLE]
+
+    if (title) {
+      node.properties[CODE_PROPERTY_TITLE] = undefined
+      return {
+        type: 'element',
+        tagName: TabItemTagname,
+        properties: {
+          dataLabel: title,
+        },
+        children: [node],
+      }
+    }
+  }
+
+  return node
+}
+
+/**
+ * Processes the children of the `<CodeTabs>` component to transform
+ * any code blocks with "title" meta information into a <TabItem> component.
+ */
+export function processCodeTabs(html: string): string {
+  const file = tabsProcessor.processSync({ value: html })
+  return file.toString()
+}

package/src/constants.ts

@@ -1 +1,5 @@
 export const PAGE_TITLE_ID = '_top'
+
+export const CODE_PROPERTY_CONTAINER = 'dataNovaCodeContainer'
+
+export const CODE_PROPERTY_TITLE = 'dataNovaCodeTitle'

package/src/index.ts

@@ -32,7 +32,7 @@ export default function starlightThemeNova(
   return {
     name: 'starlight-theme-nova',
     hooks: {
-      setup({ config, updateConfig, addIntegration }) {
+      setup({ config, updateConfig, addIntegration, astroConfig }) {
         const newConfig = {
           customCss: [
             // Including any user CSS *after* our own.
@@ -58,7 +58,12 @@ export default function starlightThemeNova(
                   shikiConfig: createShikiConfig({ twoslash: true }),
                 },
                 vite: {
-                  plugins: [vitePluginUserConfig(options)],
+                  plugins: [
+                    vitePluginUserConfig({
+                      nav: options.nav,
+                      rootHref: astroConfig.root.toString(),
+                    }),
+                  ],
                 },
               })
             },

package/src/shiki-config.ts

@@ -1,7 +1,7 @@
 import {
   transformerMetaHighlight,
   transformerMetaWordHighlight,
-  transformerNotationDiff,
+  transformerNotationDiff,transformerRemoveNotationEscape,
   transformerNotationHighlight,
   transformerNotationWordHighlight,
 } from '@shikijs/transformers'
@@ -10,6 +10,7 @@ import type { ShikiTransformer } from '@shikijs/types'
 import type { ShikiConfig } from 'astro'
 import { createRenderer } from 'shiki-twoslash-renderer'
 
+import { transformerContainer } from './shiki-transformer-container'
 import { transformerCopyButton } from './shiki-transformer-copy-button'
 
 export function createShikiConfig(options: { twoslash: boolean }): ShikiConfig {
@@ -19,8 +20,10 @@ export function createShikiConfig(options: { twoslash: boolean }): ShikiConfig {
     transformerNotationDiff(),
     transformerNotationHighlight(),
     transformerNotationWordHighlight(),
+    transformerRemoveNotationEscape(),
 
     transformerCopyButton(),
+    transformerContainer(),
     options.twoslash
       ? transformerTwoslash({
           renderer: createRenderer(),

package/src/shiki-meta-title.ts

@@ -0,0 +1,6 @@
+export function parseTitleString(meta: string): string | null {
+  if (!meta) return null
+  const match = meta.match(/title="([^"]+)"/)
+  if (!match) return null
+  return match[1]
+}

package/src/shiki-transformer-container.ts

@@ -0,0 +1,70 @@
+import type { ShikiTransformer } from '@shikijs/types'
+import type { ElementContent, RootContent } from 'hast'
+import { isElement } from 'hast-util-is-element'
+
+import { CODE_PROPERTY_CONTAINER, CODE_PROPERTY_TITLE } from './constants'
+import { parseTitleString } from './shiki-meta-title'
+
+const name = 'starlight-theme-nova-shiki-transformer-container'
+
+/**
+ * A transformer to wrap code blocks in a container.
+ */
+export function transformerContainer(): ShikiTransformer {
+  return {
+    name: name,
+    root(node) {
+      if (node.children.length === 0) {
+        throw new Error(`[${name}] Expected at least one child`)
+      }
+
+      const pre = node.children.find((child) => isElement(child, 'pre'))
+
+      if (!pre) {
+        throw new Error(
+          `[${name}] Expected a <pre> element in the root node but got ${JSON.stringify(node)}`,
+        )
+      }
+
+      const title = parseTitleString(this.options.meta?.__raw || '')
+
+      const children: ElementContent[] = normalizeContent(node.children)
+
+      if (title) {
+        children.unshift({
+          type: 'element',
+          tagName: 'div',
+          properties: {
+            class: 'nova-code-title',
+          },
+          children: [
+            {
+              type: 'text',
+              value: title,
+            },
+          ],
+        })
+      }
+
+      node.children = [
+        {
+          type: 'element',
+          tagName: 'div',
+          properties: {
+            [CODE_PROPERTY_CONTAINER]: '',
+            [CODE_PROPERTY_TITLE]: title || undefined,
+            class: 'nova-code-container not-content',
+          },
+          children,
+        },
+      ]
+
+      return node
+    },
+  }
+}
+
+// A simple function to make typescript happy
+function normalizeContent(children: RootContent[]): ElementContent[] {
+  return children.filter((child) => child.type !== 'doctype')
+}

package/src/shiki-transformer-copy-button.ts

@@ -1,5 +1,4 @@
 import type { ShikiTransformer } from '@shikijs/types'
-import { isElement } from 'hast-util-is-element'
 
 const name = 'starlight-theme-nova-shiki-transformer-copy-button'
 
@@ -9,42 +8,25 @@ const name = 'starlight-theme-nova-shiki-transformer-copy-button'
 export function transformerCopyButton(): ShikiTransformer {
   return {
     name: name,
-    root(node) {
-      if (node.children.length !== 1) {
-        throw new Error(`[${name}] Expected exactly one child`)
-      }
-
-      const pre = node.children[0]
-      if (!isElement(pre, 'pre')) {
-        throw new Error(
-          `[${name}] Expected a <pre> element but got ${JSON.stringify({ ...pre, children: '...' })}`,
-        )
-      }
-
-      node.children = [
-        {
-          type: 'element',
-          tagName: 'div',
-          properties: {
-            class: 'nova-code-container not-content',
-          },
-          children: [
-            pre,
-            {
-              type: 'element',
-              tagName: 'nova-code-copy-button',
-              properties: {
-                type: 'button',
-                'data-code': this.source,
-                title: 'Copy code',
-                'aria-label': 'Copy code',
-                class: 'nova-code-copy-button',
-              },
-              children: [],
+    pre(node) {
+      return {
+        ...node,
+        children: [
+          ...node.children,
+          {
+            type: 'element',
+            tagName: 'nova-code-copy-button',
+            properties: {
+              type: 'button',
+              'data-code': this.source,
+              title: 'Copy code',
+              'aria-label': 'Copy code',
+              class: 'nova-code-copy-button',
             },
-          ],
-        },
-      ]
+            children: [],
+          },
+        ],
+      }
     },
   }
 }

package/src/user-options.ts

@@ -6,3 +6,11 @@ export interface NavItem {
 export interface ThemeNovaOptions {
   nav?: NavItem[]
 }
+
+/**
+ * @internal
+ */
+export interface ConfigSerialized {
+  nav?: NavItem[]
+  rootHref: string
+}

package/src/virtual-internal.d.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/consistent-type-imports */
 
 declare module 'virtual:starlight-theme-nova/user-config' {
-  const options: import('./user-options').ThemeNovaOptions
-  export default options
+  const config: import('./user-options').ConfigSerialized
+  export default config
 }
 declare module 'virtual:starlight/components/Search' {
   const Search: typeof import('./components/Search.astro').default

package/src/virtual-user-config.ts

@@ -1,6 +1,6 @@
 import { type ViteUserConfig } from 'astro'
 
-import type { ThemeNovaOptions } from './user-options'
+import type { ConfigSerialized } from './user-options'
 
 function resolveVirtualModuleId<T extends string>(id: T): `\0${T}` {
   return `\0${id}`
@@ -8,11 +8,11 @@ function resolveVirtualModuleId<T extends string>(id: T): `\0${T}` {
 
 /** Vite plugin that exposes user config via virtual modules. */
 export function vitePluginUserConfig(
-  options: ThemeNovaOptions,
+  config: ConfigSerialized,
 ): NonNullable<ViteUserConfig['plugins']>[number] {
   /** Map of virtual module names to their code contents as strings. */
   const modules = {
-    'virtual:starlight-theme-nova/user-config': `export default ${JSON.stringify(options)}`,
+    'virtual:starlight-theme-nova/user-config': `export default ${JSON.stringify(config)}`,
   } satisfies Record<string, string>
 
   /** Mapping names prefixed with `\0` to their original form. */