feat(docs): implement version select

docs/astro.config.mjs

@@ -75,6 +75,8 @@ export default defineConfig({
       ],
       components: {
         MarkdownContent: './src/components/MarkdownContent.astro',
+        Header: './src/components/Header.astro',
+        MobileMenuFooter: './src/components/MobileMenuFooter.astro'
       },
     }),
   ],

docs/src/components/Header.astro

@@ -0,0 +1,87 @@
+---
+import config from 'virtual:starlight/user-config'
+import type { Props } from '@astrojs/starlight/props'
+
+import LanguageSelect from 'virtual:starlight/components/LanguageSelect'
+import Search from 'virtual:starlight/components/Search'
+import SiteTitle from 'virtual:starlight/components/SiteTitle'
+import SocialIcons from 'virtual:starlight/components/SocialIcons'
+import ThemeSelect from 'virtual:starlight/components/ThemeSelect'
+
+import VersionSelector from './VersionSelector.astro'
+
+/**
+ * Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
+ */
+const shouldRenderSearch = config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro'
+---
+
+<div class="header sl-flex">
+  <div class="title-wrapper sl-flex">
+    <SiteTitle {...Astro.props} />
+  </div>
+  <div class="sl-flex">
+    {shouldRenderSearch && <Search {...Astro.props} />}
+  </div>
+  <div class="sl-hidden md:sl-flex right-group">
+    <VersionSelector />
+    <div class="sl-flex social-icons">
+      <SocialIcons {...Astro.props} />
+    </div>
+    <ThemeSelect {...Astro.props} />
+    <LanguageSelect {...Astro.props} />
+  </div>
+</div>
+
+<style>
+  .header {
+    gap: var(--sl-nav-gap);
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+  }
+
+  .title-wrapper {
+    /* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
+    overflow: hidden;
+  }
+
+  .right-group,
+  .social-icons {
+    gap: 1rem;
+    align-items: center;
+  }
+  .social-icons::after {
+    content: '';
+    height: 2rem;
+    border-inline-end: 1px solid var(--sl-color-gray-5);
+  }
+
+  @media (min-width: 50rem) {
+    :global(:root[data-has-sidebar]) {
+      --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+    }
+    :global(:root:not([data-has-toc])) {
+      --__toc-width: 0rem;
+    }
+    .header {
+      --__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
+      --__main-column-fr: calc(
+        (
+            100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
+              (2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
+              var(--sl-content-width)
+          ) / 2
+      );
+      display: grid;
+      grid-template-columns:
+        /* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest  */
+        minmax(calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))), auto)
+        /* 2 (search box): all free space that is available. */
+        1fr
+        /* 3 (right items): use the space that these need. */
+        auto;
+      align-content: center;
+    }
+  }
+</style>

docs/src/components/MobileMenuFooter.astro

@@ -0,0 +1,35 @@
+---
+import LanguageSelect from 'virtual:starlight/components/LanguageSelect'
+import SocialIcons from 'virtual:starlight/components/SocialIcons'
+import ThemeSelect from 'virtual:starlight/components/ThemeSelect'
+import type { Props } from '@astrojs/starlight/props'
+import VersionSelector from './VersionSelector.astro'
+---
+
+<div class="mobile-preferences sl-flex">
+  <div class="sl-flex social-icons">
+    <SocialIcons {...Astro.props} />
+  </div>
+  <VersionSelector />
+  <ThemeSelect {...Astro.props} />
+  <LanguageSelect {...Astro.props} />
+</div>
+
+<style>
+  .social-icons {
+    margin-inline-end: auto;
+    gap: 1rem;
+    align-items: center;
+    padding-block: 1rem;
+  }
+  .social-icons:empty {
+    display: none;
+  }
+  .mobile-preferences {
+    justify-content: space-between;
+    flex-wrap: wrap;
+    border-top: 1px solid var(--sl-color-gray-6);
+    column-gap: 1rem;
+    padding: 0.5rem 0;
+  }
+</style>

docs/src/components/VersionSelector.astro

@@ -0,0 +1,73 @@
+---
+import Select from '@astrojs/starlight/components/Select.astro'
+
+const defaultVersion = 'v3'
+const versions = [
+  {
+    code: 'v4',
+    url: 'https://v4.reatom.dev/',
+  },
+  {
+    code: 'v3',
+    url: 'https://v3.reatom.dev/',
+  },
+]
+const defaultURL = versions.find((a) => a.code === defaultVersion)!.url
+---
+
+<reatom-version-select>
+  <Select
+    icon="rocket"
+    label="Platform version"
+    value={defaultURL}
+    options={versions.map((version) => ({
+      label: version.code,
+      value: version.url,
+      selected: version.code === defaultVersion,
+    }))}
+    width="min-content"
+  />
+</reatom-version-select>
+
+<script>
+  class ReatomVersionSelect extends HTMLElement {
+    constructor() {
+      super()
+      const select = this.querySelector('select')
+      if (select) {
+        const preselectValue = this.#getCurrentCode(select.getElementsByTagName('option'))
+        if (preselectValue) {
+          select.value = preselectValue
+        }
+
+        select.addEventListener('change', (e) => {
+          if (e.currentTarget instanceof HTMLSelectElement) {
+            window.location.href = e.currentTarget.value
+          }
+        })
+      }
+    }
+
+    #getCurrentCode(variants: HTMLCollectionOf<HTMLOptionElement>) {
+      const host = location.host
+      for (const variant of variants) {
+        const candidateURL = variant.value
+        const candidateHost = new URL(candidateURL).host
+
+        if (host === candidateHost) return candidateURL
+      }
+
+      return
+    }
+  }
+
+  customElements.define('reatom-version-select', ReatomVersionSelect)
+</script>
+
+<style>
+  /* reatom-version-select {
+        padding-inline-start: .5rem;
+        padding-inline-end: .2rem;
+        border: 1px solid var(--sl-color-gray-5);
+    } */
+</style>