starlight-theme-nova 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ocavue
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/shiki.css

@@ -0,0 +1,77 @@
+.sl-markdown-content .astro-code {
+  padding: 0;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--sl-color-gray-5);
+
+  code {
+    display: grid;
+    align-items: stretch;
+    overflow-x: hidden;
+    padding: 0.75rem 0;
+    box-sizing: border-box;
+    min-width: min-content;
+  }
+
+  .line {
+    min-height: 1lh;
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    display: inline-block;
+    flex: 1;
+    flex-grow: 1;
+    width: 100%;
+    min-width: min-content;
+  }
+
+  .line.highlighted,
+  .line.diff.add,
+  .line.diff.remove {
+    display: inline-block;
+  }
+
+  .line.highlighted {
+    background-color: rgb(107 114 128 / 0.2) /* #6b7280 */;
+  }
+
+  .line.diff.add {
+    background-color: rgb(34 197 94 / 0.5) /* #22c55e */;
+  }
+
+  .line.diff.remove {
+    background-color: rgb(239 68 68 / 0.5) /* #ef4444 */;
+  }
+}
+
+.astro-code {
+  background-color: var(--shiki-light-bg);
+}
+
+html.dark .astro-code {
+  background-color: var(--shiki-dark-bg);
+}
+
+.astro-code,
+.astro-code span {
+  color: var(--shiki-light);
+  font-style: var(--shiki-light-font-style);
+  font-weight: var(--shiki-light-font-weight);
+  text-decoration: var(--shiki-light-text-decoration);
+}
+
+html.dark .astro-code,
+html.dark .astro-code span {
+  color: var(--shiki-dark);
+  font-style: var(--shiki-dark-font-style);
+  font-weight: var(--shiki-dark-font-weight);
+  text-decoration: var(--shiki-dark-text-decoration);
+}

package/lib/styles.gen.css

@@ -0,0 +1,106 @@
+/* layer: preflights */
+*,::before,::after{--nova-rotate:0;--nova-rotate-x:0;--nova-rotate-y:0;--nova-rotate-z:0;--nova-scale-x:1;--nova-scale-y:1;--nova-scale-z:1;--nova-skew-x:0;--nova-skew-y:0;--nova-translate-x:0;--nova-translate-y:0;--nova-translate-z:0;--nova-pan-x: ;--nova-pan-y: ;--nova-pinch-zoom: ;--nova-scroll-snap-strictness:proximity;--nova-ordinal: ;--nova-slashed-zero: ;--nova-numeric-figure: ;--nova-numeric-spacing: ;--nova-numeric-fraction: ;--nova-border-spacing-x:0;--nova-border-spacing-y:0;--nova-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--nova-ring-shadow:0 0 rgb(0 0 0 / 0);--nova-shadow-inset: ;--nova-shadow:0 0 rgb(0 0 0 / 0);--nova-ring-inset: ;--nova-ring-offset-width:0px;--nova-ring-offset-color:#fff;--nova-ring-width:0px;--nova-ring-color:rgb(147 197 253 / 0.5);--nova-blur: ;--nova-brightness: ;--nova-contrast: ;--nova-drop-shadow: ;--nova-grayscale: ;--nova-hue-rotate: ;--nova-invert: ;--nova-saturate: ;--nova-sepia: ;--nova-backdrop-blur: ;--nova-backdrop-brightness: ;--nova-backdrop-contrast: ;--nova-backdrop-grayscale: ;--nova-backdrop-hue-rotate: ;--nova-backdrop-invert: ;--nova-backdrop-opacity: ;--nova-backdrop-saturate: ;--nova-backdrop-sepia: ;}::backdrop{--nova-rotate:0;--nova-rotate-x:0;--nova-rotate-y:0;--nova-rotate-z:0;--nova-scale-x:1;--nova-scale-y:1;--nova-scale-z:1;--nova-skew-x:0;--nova-skew-y:0;--nova-translate-x:0;--nova-translate-y:0;--nova-translate-z:0;--nova-pan-x: ;--nova-pan-y: ;--nova-pinch-zoom: ;--nova-scroll-snap-strictness:proximity;--nova-ordinal: ;--nova-slashed-zero: ;--nova-numeric-figure: ;--nova-numeric-spacing: ;--nova-numeric-fraction: ;--nova-border-spacing-x:0;--nova-border-spacing-y:0;--nova-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--nova-ring-shadow:0 0 rgb(0 0 0 / 0);--nova-shadow-inset: ;--nova-shadow:0 0 rgb(0 0 0 / 0);--nova-ring-inset: ;--nova-ring-offset-width:0px;--nova-ring-offset-color:#fff;--nova-ring-width:0px;--nova-ring-color:rgb(147 197 253 / 0.5);--nova-blur: ;--nova-brightness: ;--nova-contrast: ;--nova-drop-shadow: ;--nova-grayscale: ;--nova-hue-rotate: ;--nova-invert: ;--nova-saturate: ;--nova-sepia: ;--nova-backdrop-blur: ;--nova-backdrop-brightness: ;--nova-backdrop-contrast: ;--nova-backdrop-grayscale: ;--nova-backdrop-hue-rotate: ;--nova-backdrop-invert: ;--nova-backdrop-opacity: ;--nova-backdrop-saturate: ;--nova-backdrop-sepia: ;}
+
+  :root {
+    --sl-content-width: 50rem;
+  }
+
+  /* Dark mode Starlight theme variables. */
+  :root {
+    --sl-color-white: white;
+    --sl-color-gray-1: #e5e7eb;
+    --sl-color-gray-2: #d1d5db;
+    --sl-color-gray-3: #9ca3af;
+    --sl-color-gray-4: #4b5563;
+    --sl-color-gray-5: #374151;
+    --sl-color-gray-6: #1f2937;
+    --sl-color-black: #030712;
+    --sl-color-accent-low: #030712;
+    --sl-color-accent: #4b5563;
+    --sl-color-accent-high: #f3f4f6;
+  }
+
+  /* Light mode Starlight theme variables */
+  :root[data-theme='light'] {
+    --sl-color-white: #111827;
+    --sl-color-gray-1: #1f2937;
+    --sl-color-gray-2: #374151;
+    --sl-color-gray-3: #6b7280;
+    --sl-color-gray-4: #9ca3af;
+    --sl-color-gray-5: #d1d5db;
+    --sl-color-gray-6: #e5e7eb;
+    --sl-color-gray-7: #f3f4f6;
+    --sl-color-black: white;
+    --sl-color-accent-low: #e5e7eb;
+    --sl-color-accent: #1f2937;
+    --sl-color-accent-high: #111827;
+  }
+
+  /* Style the Markdown heading links. */
+  .sl-markdown-content
+    :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *))
+    > a {
+    color: var(--sl-color-white);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+/* layer: shortcuts */
+.nova-code-copy-button-icon-check{--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='M20 6L9 17l-5-5'/%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;width:100%;height:100%;}
+.nova-code-copy-button-icon-clipboard{--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%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/g%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;width:100%;height:100%;}
+.nova-code-container{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-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:rgb(255 255 255 / 0.8) /* #fff */;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);padding-inline-end: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);}
+.nova-header-title{margin:-0.25rem;min-width:0;display:flex;overflow:clip;padding:0.25rem;}
+.nova-header{box-sizing:border-box;height:100%;display:flex;align-items:center;gap:0.5rem;}
+.nova-header-actions{display:none;align-items:center;gap:0.5rem;}
+.nova-page-frame{min-height:100vh;display:flex;flex-direction:column;}
+.nova-header-search{display:flex;}
+.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));}
+.dark .nova-code-copy-button{background-color:rgb(75 85 99 / 0.3) /* #4b5563 */;--nova-text-opacity:1;color:rgb(255 255 255 / var(--nova-text-opacity)) /* #fff */;}
+.dark .nova-page-frame-header{background-color:rgb(3 7 18 / 0.5) /* #030712 */;}
+.dark .nova-code-copy-button:hover{background-color:rgb(107 114 128 / 0.5) /* #6b7280 */;}
+.nova-code-copy-button:hover{background-color:rgb(229 231 235 / 0.5) /* #e5e7eb */;}
+[data-has-sidebar] .nova-page-frame-header{padding-inline-end:calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));}
+.nova-code-container .nova-code-copy-button{opacity:0;}
+.nova-code-container:hover .nova-code-copy-button{opacity:1;}
+@media print{
+.nova-header-actions,
+.nova-header-search{display:none;}
+}
+@media (min-width: 50rem){
+.nova-header-search{max-width:15rem;flex:1 1 0%;}
+.nova-header-actions{display:flex;}
+}
+/* layer: default */
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
+.visible{visibility:visible;}
+.fixed{position:fixed;}
+.relative{position:relative;}
+.isolate{isolation:isolate;}
+.me{margin-inline-end:1rem;}
+.hidden{display:none;}
+.size-8{width:2rem;height:2rem;}
+.flex{display:flex;}
+.flex-1{flex:1 1 0%;}
+.transform{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));}
+.rounded-md{border-radius:0.375rem;}
+.hover\:bg-gray-400\/30:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
+.p-2{padding:0.5rem;}
+.color-\[var\(--sl-color-text\)\]{color:var(--sl-color-text) /* var(--sl-color-text) */;}
+.backdrop-filter{-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{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-colors{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;}
+.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}
+@media print{
+.print\:hidden{display:none;}
+}
+@media (min-width: 50rem){
+.md\:border-r{border-right-width:1px;}
+}
+@media (min-width: 72rem){
+.lg\:flex{display:flex;}
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "starlight-theme-nova",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "",
+  "author": "ocavue <ocavue@gmail.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/ocavue",
+  "homepage": "https://github.com/ocavue/starlight-theme-nova#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ocavue/starlight-theme-nova.git"
+  },
+  "bugs": "https://github.com/ocavue/starlight-theme-nova/issues",
+  "keywords": [],
+  "sideEffects": false,
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./*.css": "./lib/*.css",
+    "./components/*.astro": "./src/components/*.astro"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "dependencies": {
+    "@shikijs/transformers": "^1.29.0",
+    "astro-theme-toggle": "^0.5.1",
+    "hast-util-is-element": "^3.0.0"
+  },
+  "devDependencies": {
+    "@astrojs/starlight": "^0.32.2",
+    "@iconify-json/bxl": "^1.0.0",
+    "@iconify-json/logos": "^1.2.4",
+    "@iconify-json/lucide": "^1.2.22",
+    "@iconify-json/tabler": "^1.0.0",
+    "@ocavue/tsconfig": "^0.2.0",
+    "@types/node": "^20.0.0",
+    "@unocss/cli": "^66.0.0",
+    "astro": "^5.1.5",
+    "typescript": "^5.7.2",
+    "unocss": "^66.0.0",
+    "unocss-preset-animations": "^1.1.1"
+  },
+  "scripts": {
+    "dev": "unocss -w",
+    "build": "unocss"
+  }
+}

package/src/components/CodeCopy.astro

@@ -0,0 +1,37 @@
+<script>
+  const DEFAULT_HTML = /* html */ `<span class="nova-code-copy-button-icon-clipboard"></span>`
+  const SUCCESS_HTML = /* html */ `<span class="nova-code-copy-button-icon-check"></span>`
+
+  class CodeCopyButton extends HTMLElement {
+    constructor() {
+      super()
+    }
+
+    connectedCallback() {
+      this.innerHTML = DEFAULT_HTML
+
+      const update = () => {
+        this.innerHTML = state === 'ready' ? DEFAULT_HTML : SUCCESS_HTML
+      }
+
+      let state: 'ready' | 'success' = 'ready'
+      update()
+
+      this.addEventListener('click', () => {
+        if (state === 'ready') {
+          state = 'success'
+          update()
+
+          const code = this.dataset.code || ''
+          void navigator.clipboard.writeText(code)
+          setTimeout(() => {
+            state = 'ready'
+            update()
+          }, 1500)
+        }
+      })
+    }
+  }
+
+  customElements.define('nova-code-copy-button', CodeCopyButton)
+</script>

package/src/components/Header.astro

@@ -0,0 +1,22 @@
+---
+import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro'
+import Search from './Search.astro'
+import SiteTitle from './SiteTitle.astro'
+import SocialIcons from './SocialIcons.astro'
+import ThemeSelect from './ThemeSelect.astro'
+---
+
+<div class="nova-header">
+  <div class="nova-header-title">
+    <SiteTitle />
+  </div>
+  <div class="flex-1"></div>
+  <div class="nova-header-search">
+    <Search />
+  </div>
+  <div class="nova-header-actions">
+    <SocialIcons />
+    <LanguageSelect />
+    <ThemeSelect />
+  </div>
+</div>

package/src/components/MarkdownContent.astro

@@ -0,0 +1,16 @@
+---
+import Default from '@astrojs/starlight/components/MarkdownContent.astro'
+import CodeCopy from './CodeCopy.astro'
+---
+
+<Default>
+  <slot />
+</Default>
+
+<style is:global>
+  :root .sl-markdown-content dd:not(:where(.not-content *)) {
+  	padding-inline-start: 2rem;
+  }
+</style>
+
+<CodeCopy />

package/src/components/MobileMenuToggle.astro

@@ -0,0 +1,5 @@
+---
+import Default from '@astrojs/starlight/components/MobileMenuToggle.astro'
+---
+
+<Default />

package/src/components/PageFrame.astro

@@ -0,0 +1,77 @@
+---
+import MobileMenuToggle from './MobileMenuToggle.astro'
+
+const { hasSidebar } = Astro.locals.starlightRoute
+---
+
+<div class="nova-page-frame">
+  <header class="nova-page-frame-header">
+    <slot name="header" />
+  </header>
+  {
+    hasSidebar && (
+      <nav
+        class="sidebar print:hidden"
+        aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}
+      >
+        <MobileMenuToggle />
+        <div
+          id="starlight__sidebar"
+          class:list={['sidebar-pane', 'md:border-r border-border']}
+        >
+          <div class="sidebar-content sl-flex">
+            <slot name="sidebar" />
+          </div>
+        </div>
+      </nav>
+    )
+  }
+  <div class="main-frame"><slot /></div>
+</div>
+
+<style>
+  .sidebar-pane {
+    visibility: var(--sl-sidebar-visibility, hidden);
+    position: fixed;
+    z-index: var(--sl-z-index-menu);
+    inset-block: var(--sl-nav-height) 0;
+    inset-inline-start: 0;
+    width: 100%;
+    background-color: var(--sl-color-black);
+    overflow-y: auto;
+  }
+
+  :global([aria-expanded='true']) ~ .sidebar-pane {
+    --sl-sidebar-visibility: visible;
+  }
+
+  .sidebar-content {
+    height: 100%;
+    min-height: max-content;
+    padding: 1rem var(--sl-sidebar-pad-x) 0;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  @media (min-width: 50rem) {
+    .sidebar-content::after {
+      content: '';
+      padding-bottom: 1px;
+    }
+  }
+
+  .main-frame {
+    padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+    padding-inline-start: var(--sl-content-inline-start);
+  }
+
+  @media (min-width: 50rem) {
+    :global([data-has-sidebar]) .header {
+      padding-inline-end: var(--sl-nav-pad-x);
+    }
+    .sidebar-pane {
+      --sl-sidebar-visibility: visible;
+      width: var(--sl-sidebar-width);
+    }
+  }
+</style>

package/src/components/Search.astro

@@ -0,0 +1,107 @@
+---
+import Default from '@astrojs/starlight/components/Search.astro'
+---
+
+<Default />
+
+<style is:global>
+  ::backdrop {
+    --sl-color-backdrop-overlay: hsl(0 0 0% / 0.9);
+  }
+
+  [data-theme='light'] ::backdrop {
+    --sl-color-backdrop-overlay: hsl(0 0 100% / 0.9);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    site-search {
+      & dialog,
+      & dialog::backdrop {
+        transition:
+          display 300ms allow-discrete,
+          overlay 300ms allow-discrete;
+        animation-timing-function: ease-out;
+        animation-fill-mode: forwards;
+        will-change: transform, opacity, backdrop-filter, background-color;
+      }
+
+      & dialog {
+        animation-name: sl-ocavue-search-dialog-zoom-out;
+        animation-duration: 150ms;
+        transform: translateZ(0);
+      }
+
+      & dialog[open] {
+        animation-duration: 50ms;
+        animation-name: sl-ocavue-search-dialog-zoom-in;
+      }
+
+      & dialog::backdrop {
+        -webkit-backdrop-filter: none;
+        backdrop-filter: none;
+
+        animation-duration: 150ms;
+        animation-name: sl-ocavue-search-backdrop-fade-out;
+      }
+
+      & dialog[open]::backdrop {
+        animation-duration: 50ms;
+        animation-name: sl-ocavue-search-backdrop-fade-in;
+      }
+    }
+  }
+
+  @keyframes sl-ocavue-search-backdrop-fade-in {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--sl-color-backdrop-overlay);
+    }
+  }
+
+  @keyframes sl-ocavue-search-backdrop-fade-out {
+    from {
+      background-color: var(--sl-color-backdrop-overlay);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+
+  :root {
+    --sl-ocavue-search-dialog-zoom-scale: 1;
+    --sl-ocavue-search-dialog-zoom-translate-y: 0;
+  }
+
+  @media (min-width: 72rem) {
+    :root {
+      --sl-ocavue-search-dialog-zoom-scale: 0.95;
+      --sl-ocavue-search-dialog-zoom-translate-y: -1rem;
+    }
+  }
+
+  @keyframes sl-ocavue-search-dialog-zoom-in {
+    from {
+      opacity: 0;
+      transform: scale(var(--sl-ocavue-search-dialog-zoom-scale))
+        translateY(var(--sl-ocavue-search-dialog-zoom-translate-y));
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  @keyframes sl-ocavue-search-dialog-zoom-out {
+    from {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: scale(var(--sl-ocavue-search-dialog-zoom-scale))
+        translateY(var(--sl-ocavue-search-dialog-zoom-translate-y));
+    }
+  }
+</style>

package/src/components/SiteTitle.astro

@@ -0,0 +1,12 @@
+---
+import Default from '@astrojs/starlight/components/SiteTitle.astro'
+---
+
+<span class="site-title-wrapper"><Default /></span>
+
+<style>
+  .site-title-wrapper :global(.site-title) {
+    color: var(--sl-color-text);
+    font-size: var(--sl-text-h5);
+  }
+</style>

package/src/components/SocialIcons.astro

@@ -0,0 +1,23 @@
+---
+import { Icon } from '@astrojs/starlight/components'
+import config from 'virtual:starlight/user-config'
+
+type Platform = keyof NonNullable<typeof config.social>
+type SocialConfig = NonNullable<NonNullable<typeof config.social>[Platform]>
+const links = Object.entries(config.social || {}) as [Platform, SocialConfig][]
+---
+
+{
+  links.length > 0 && (
+    <>
+      {
+        links.map(([platform, { label, url }]) => (
+          <a href={url} rel="me" class="flex p-2 transition hover:bg-gray-400/30 rounded-md size-8 color-[var(--sl-color-text)]">
+            <span class="sr-only">{label}</span>
+            <Icon name={platform} size="1rem" color="currentColor" />
+          </a>
+        ))
+      }
+    </>
+  )
+}

package/src/components/ThemeProvider.astro

@@ -0,0 +1,5 @@
+---
+import { ThemeScript } from 'astro-theme-toggle'
+---
+
+<ThemeScript />

package/src/components/ThemeSelect.astro

@@ -0,0 +1,5 @@
+---
+import { Toggle } from 'astro-theme-toggle'
+---
+
+<Toggle class="size-8 p-2 rounded-md color-[var(--sl-color-text)] hover:bg-gray-400/30 transition-colors" />

package/src/components/TwoColumnContent.astro

@@ -0,0 +1,43 @@
+<div class="lg:flex">
+  {
+    Astro.locals.starlightRoute.toc && (
+      <aside class="right-sidebar-container print:hidden">
+        <div class="right-sidebar">
+          <slot name="right-sidebar" />
+        </div>
+      </aside>
+    )
+  }
+  <div class="main-pane"><slot /></div>
+</div>
+
+<style>
+  .main-pane {
+    isolation: isolate;
+    overflow-x: hidden;
+  }
+
+  @media (min-width: 72rem) {
+    .right-sidebar-container {
+      order: 2;
+      position: relative;
+      width: var(--sl-sidebar-width);
+    }
+
+    .right-sidebar {
+      position: fixed;
+      top: 0;
+      right: 0;
+      border-inline-start: 1px solid var(--sl-color-hairline);
+      padding-top: var(--sl-nav-height);
+      height: 100vh;
+      width: var(--sl-sidebar-width);
+      overflow-y: auto;
+      scrollbar-width: none;
+    }
+
+    .main-pane {
+      flex: 1;
+    }
+  }
+</style>

package/src/index.ts

@@ -0,0 +1,57 @@
+import type {
+  StarlightPlugin,
+  StarlightUserConfig,
+} from '@astrojs/starlight/types'
+
+import { shikiConfig } from './shiki-config'
+
+const components = {
+  Header: 'starlight-theme-nova/components/Header.astro',
+  Search: 'starlight-theme-nova/components/Search.astro',
+  ThemeProvider: 'starlight-theme-nova/components/ThemeProvider.astro',
+  ThemeSelect: 'starlight-theme-nova/components/ThemeSelect.astro',
+  SocialIcons: 'starlight-theme-nova/components/SocialIcons.astro',
+  SiteTitle: 'starlight-theme-nova/components/SiteTitle.astro',
+  PageFrame: 'starlight-theme-nova/components/PageFrame.astro',
+  MobileMenuToggle: 'starlight-theme-nova/components/MobileMenuToggle.astro',
+  TwoColumnContent: 'starlight-theme-nova/components/TwoColumnContent.astro',
+  MarkdownContent: 'starlight-theme-nova/components/MarkdownContent.astro',
+} as const
+
+export default function starlightThemeNova(): StarlightPlugin {
+  return {
+    name: 'starlight-theme-nova',
+    hooks: {
+      setup({ config, updateConfig, addIntegration }) {
+        const newConfig = {
+          customCss: [
+            // Including any user CSS *after* our own.
+            'starlight-theme-nova/styles.gen.css',
+            'starlight-theme-nova/shiki.css',
+            ...(config.customCss || []),
+          ],
+          components: {
+            // Including any user components *after* our own.
+            ...components,
+            ...config.components,
+          },
+          expressiveCode: config.expressiveCode ?? false,
+        } satisfies Partial<StarlightUserConfig>
+        updateConfig(newConfig)
+
+        addIntegration({
+          name: 'starlight-theme-nova-integration',
+          hooks: {
+            'astro:config:setup': ({ updateConfig }) => {
+              updateConfig({
+                markdown: {
+                  shikiConfig,
+                },
+              })
+            },
+          },
+        })
+      },
+    },
+  }
+}

package/src/shiki-config.ts

@@ -0,0 +1,22 @@
+import {
+  transformerMetaHighlight,
+  transformerNotationDiff,
+  transformerNotationHighlight,
+} from '@shikijs/transformers'
+import type { ShikiConfig } from 'astro'
+
+import { transformerCopyButton } from './shiki-transformer-copy-button'
+
+export const shikiConfig: ShikiConfig = {
+  themes: {
+    light: 'one-light',
+    dark: 'one-dark-pro',
+  },
+  defaultColor: false,
+  transformers: [
+    transformerNotationDiff(),
+    transformerNotationHighlight(),
+    transformerMetaHighlight(),
+    transformerCopyButton(),
+  ],
+}

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

@@ -0,0 +1,52 @@
+import type { ShikiConfig } from 'astro'
+import { isElement } from 'hast-util-is-element'
+
+type ShikiTransformer = NonNullable<ShikiConfig['transformers']>[number]
+
+const name = 'starlight-theme-nova-shiki-transformer-copy-button'
+
+/**
+ * A transformer that adds a copy button to code blocks.
+ */
+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: [],
+            },
+          ],
+        },
+      ]
+    },
+  }
+}

package/src/types.d.ts

@@ -0,0 +1,11 @@
+import 'astro/client'
+import '@astrojs/starlight'
+
+// This is a workaround to avoid type checking errors.
+declare module 'astro:content' {
+  export interface RenderResult {
+    Content: {
+      isAstroComponentFactory?: boolean
+    }
+  }
+}