Add version selector

Author: bendera

astro.config.mjs

@@ -21,6 +21,9 @@ export default defineConfig({
   integrations: [
     starlight({
       title: "VSCode Elements",
+      components: {
+        SiteTitle: "./src/components/SiteTitle.astro",
+      },
       social: [
         {
           icon: "github",

src/components/SiteTitle.astro

@@ -0,0 +1,83 @@
+---
+import { logos } from "virtual:starlight/user-images";
+import config from "virtual:starlight/user-config";
+import VersionInfo from "./VersionInfo.astro";
+const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
+---
+
+<a href={siteTitleHref} class="site-title sl-flex">
+  {
+    config.logo && logos.dark && (
+      <>
+        <img
+          class:list={{
+            "light:sl-hidden print:hidden": !("src" in config.logo),
+          }}
+          alt={config.logo.alt}
+          src={logos.dark.src}
+          width={logos.dark.width}
+          height={logos.dark.height}
+        />
+        {/* Show light alternate if a user configure both light and dark logos. */}
+        {!("src" in config.logo) && (
+          <img
+            class="dark:sl-hidden print:block"
+            alt={config.logo.alt}
+            src={logos.light?.src}
+            width={logos.light?.width}
+            height={logos.light?.height}
+          />
+        )}
+      </>
+    )
+  }
+  <span class:list={{ "sr-only": config.logo?.replacesTitle }} translate="no">
+    {siteTitle}
+  </span>
+</a>
+<select id="version-selector">
+  <option value="https://vscode-elements.github.io/docs-archive/v1">v1.x</option
+  >
+  <option selected value="https://vscode-elements.github.io"
+    >v<VersionInfo /></option
+  >
+</select>
+
+<style>
+  @layer starlight.core {
+    .site-title {
+      align-items: center;
+      gap: var(--sl-nav-gap);
+      font-size: var(--sl-text-h4);
+      font-weight: 600;
+      color: var(--sl-color-text-accent);
+      text-decoration: none;
+      white-space: nowrap;
+      min-width: 0;
+    }
+    span {
+      overflow: hidden;
+    }
+    img {
+      height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+      width: auto;
+      max-width: 100%;
+      object-fit: contain;
+      object-position: 0 50%;
+    }
+    select {
+      background-color: transparent;
+      border: 0;
+      margin-left: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+</style>
+
+<script>
+  const sl = document.querySelector<HTMLSelectElement>("#version-selector");
+  sl?.addEventListener("input", () => {
+    window.location.href = sl.value;
+  });
+</script>

src/components/VersionInfo.astro

@@ -1,11 +1,11 @@
----
-import * as fs from "node:fs/promises";
-
-const fc = await fs.readFile(
-  "node_modules/@vscode-elements/elements/package.json",
-  "utf-8"
-);
-const pkg = JSON.parse(fc);
----
-
-<p>Current version: {pkg.version}</p>
+---
+import * as fs from "node:fs/promises";
+
+const fc = await fs.readFile(
+  "node_modules/@vscode-elements/elements/package.json",
+  "utf-8"
+);
+const pkg = JSON.parse(fc);
+---
+
+{pkg.version}

src/content/docs/index.mdx

@@ -1,21 +1,17 @@
----
-title: VSCode Elements
-description: Web component library for developing Visual Studio Code extensions
-template: splash
-hero:
-  tagline: Web component library for developing Visual Studio Code extensions
-  image:
-    file: ../../assets/logo.svg
-  actions:
-    - text: Getting started
-      link: /guides/getting-started/
-      icon: right-arrow
-    - text: Source code
-      link: https://github.com/vscode-elements/elements
-      icon: external
-      variant: minimal
----
-
-import VersionInfo from "@components/VersionInfo.astro";
-
-<VersionInfo />
+---
+title: VSCode Elements
+description: Web component library for developing Visual Studio Code extensions
+template: splash
+hero:
+  tagline: Web component library for developing Visual Studio Code extensions
+  image:
+    file: ../../assets/logo.svg
+  actions:
+    - text: Getting started
+      link: /guides/getting-started/
+      icon: right-arrow
+    - text: Source code
+      link: https://github.com/vscode-elements/elements
+      icon: external
+      variant: minimal
+---