@hgdc/docs 0.2.0 → 0.3.0

package/src/integration.ts

@@ -10,7 +10,7 @@ import { remarkAutoImport } from "./build/auto-import.ts"
 import { remarkBaseLinks } from "./build/base-links.ts"
 import { publicFiles } from "./build/public-files.ts"
 import { writeMachineReadable } from "./build/outputs.ts"
-import { parseDocsConfig, withHostProject, type DocsConfig } from "./core/config.ts"
+import { parseDocsConfig, socialNetwork, withHostProject, type DocsConfig } from "./core/config.ts"
 import {
   missingPages,
   normalizeNavigation,
@@ -148,17 +148,27 @@ export function starlightSidebar(
   )
 }
 
-const SOCIAL_ICONS = new Set([
-  "github",
-  "gitlab",
-  "linkedin",
-  "x.com",
-  "mastodon",
-  "discord",
-  "youtube",
-  "instagram",
-  "bluesky",
-])
+/**
+ * `redirects` de docs.json en redirections d'Astro : une page qui renvoie à la nouvelle
+ * adresse (le site est statique). Chemins écrits comme les liens de la doc, `base` ajouté.
+ */
+export function astroRedirects(
+  redirects: ReadonlyArray<{ source: string; destination: string; permanent?: boolean | undefined }>,
+  base: string,
+): Record<string, { status: 301 | 302; destination: string }> {
+  const slash = (path: string) => (path.endsWith("/") ? path : `${path}/`)
+  return Object.fromEntries(
+    redirects.map((item) => [
+      slash(item.source),
+      {
+        status: item.permanent === false ? 302 : 301,
+        destination: item.destination.startsWith("/")
+          ? `${base}${slash(item.destination.split("#")[0]!)}${item.destination.includes("#") ? `#${item.destination.split("#")[1]}` : ""}`
+          : item.destination,
+      },
+    ]),
+  )
+}
 
 function virtualConfigPlugin(data: VirtualConfig) {
   const id = "virtual:hgdc-docs/config"
@@ -215,9 +225,10 @@ export function createAstroConfig(options: SiteOptions = readSiteOptions()): Ast
   const theme = themeFor(config.colors?.primary, config.colors?.dark)
   const logo = typeof config.logo === "string" ? { light: config.logo } : config.logo
   const asset = (path: string) => join(options.contentDir, path.replace(/^\//, ""))
-  const social = Object.entries(config.footer?.socials ?? {})
-    .filter(([icon]) => SOCIAL_ICONS.has(icon))
-    .map(([icon, href]) => ({ icon: (icon === "x.com" ? "x.com" : icon) as "github", label: icon, href }))
+  const social = Object.entries(config.footer?.socials ?? {}).flatMap(([key, href]) => {
+    const network = socialNetwork(key)
+    return network ? [{ icon: network.icon as "github", label: network.label, href }] : []
+  })
 
   return {
     root: file("../template"),
@@ -231,6 +242,7 @@ export function createAstroConfig(options: SiteOptions = readSiteOptions()): Ast
     site: options.site ?? undefined,
     ...(base ? { base } : {}),
     trailingSlash: "always",
+    redirects: astroRedirects(config.redirects ?? [], base),
     markdown: { processor: unified({ remarkPlugins: [remarkAutoImport, [remarkBaseLinks, { base }]] }) },
     vite: {
       plugins: [virtualConfigPlugin(data)],
@@ -255,6 +267,8 @@ export function createAstroConfig(options: SiteOptions = readSiteOptions()): Ast
           Sidebar: file("./overrides/Sidebar.astro"),
           PageTitle: file("./overrides/PageTitle.astro"),
           PageFrame: file("./overrides/PageFrame.astro"),
+          SocialIcons: file("./overrides/SocialIcons.astro"),
+          Footer: file("./overrides/Footer.astro"),
         },
         expressiveCode: { themes: ["github-dark-default", "github-light-default"] },
         pagination: true,

package/src/overrides/Footer.astro

@@ -0,0 +1,154 @@
+---
+import Default from "@astrojs/starlight/components/Footer.astro"
+import data from "virtual:hgdc-docs/config"
+
+// « Cette page t'a aidé ? » au bas de chaque page, envoyé à la console (`/api/v1/feedback`).
+// Sans projet relié, rien n'est affiché : il n'y a personne pour lire les réponses.
+const endpoint = new URL("/api/v1/feedback", data.config.assistant?.endpoint ?? data.apiEndpoint).toString()
+---
+
+{
+  data.config.project && (
+    <hgdc-feedback class="hgdc-feedback not-content" data-endpoint={endpoint} data-project={data.config.project} data-pagefind-ignore>
+      <div data-step="ask">
+        <p class="hgdc-feedback__question">Cette page t'a aidé ?</p>
+        <div class="hgdc-feedback__choices">
+          <button type="button" data-helpful="true">Oui</button>
+          <button type="button" data-helpful="false">Non</button>
+        </div>
+      </div>
+      <form data-step="comment" hidden>
+        <label for="hgdc-feedback-comment">Qu'est-ce qui manquait ou pourrait être plus clair ? (facultatif)</label>
+        <textarea id="hgdc-feedback-comment" name="comment" rows="3" maxlength="1000"></textarea>
+        <div class="hgdc-feedback__choices">
+          <button type="submit">Envoyer</button>
+          <button type="button" data-skip>Passer</button>
+        </div>
+      </form>
+      <p data-step="done" class="hgdc-feedback__done" role="status" hidden>Merci, c'est noté.</p>
+    </hgdc-feedback>
+  )
+}
+<Default />
+
+<script>
+  class HgdcFeedback extends HTMLElement {
+    #helpful: boolean | null = null
+
+    connectedCallback() {
+      for (const button of this.querySelectorAll<HTMLButtonElement>("[data-helpful]"))
+        button.addEventListener("click", () => this.#choose(button.dataset.helpful === "true"))
+      const form = this.querySelector("form")!
+      form.addEventListener("submit", (event) => {
+        event.preventDefault()
+        const comment = new FormData(form).get("comment")
+        void this.#send(typeof comment === "string" ? comment.trim() : "")
+      })
+      this.querySelector("[data-skip]")?.addEventListener("click", () => void this.#send(""))
+    }
+
+    #show(step: "ask" | "comment" | "done") {
+      for (const element of this.querySelectorAll<HTMLElement>("[data-step]")) element.hidden = element.dataset.step !== step
+      if (step === "comment") this.querySelector("textarea")?.focus()
+    }
+
+    #choose(helpful: boolean) {
+      this.#helpful = helpful
+      // Un oui part tout de suite ; un non attend le commentaire (ou « Passer ») : un seul envoi par avis.
+      if (helpful) void this.#send("")
+      else this.#show("comment")
+    }
+
+    async #send(comment: string) {
+      if (this.#helpful === null) return
+      try {
+        await fetch(this.dataset.endpoint!, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({
+            project: this.dataset.project,
+            page: location.pathname,
+            helpful: this.#helpful,
+            ...(comment ? { comment } : {}),
+          }),
+          keepalive: true,
+        })
+      } catch {
+        // Un retour perdu ne gêne pas la lecture : rien à afficher.
+      }
+      this.#show("done")
+    }
+  }
+  customElements.define("hgdc-feedback", HgdcFeedback)
+</script>
+
+<style>
+  .hgdc-feedback {
+    display: block;
+    margin-block: 2.5rem 1.5rem;
+    padding: 1rem 1.25rem;
+    border-radius: 1rem;
+    background: var(--sl-color-gray-6);
+  }
+  .hgdc-feedback__question,
+  .hgdc-feedback label {
+    margin: 0 0 0.6rem;
+    font-size: var(--sl-text-sm);
+    font-weight: 500;
+    color: var(--sl-color-white);
+  }
+  .hgdc-feedback [data-step="ask"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+  .hgdc-feedback [data-step="ask"] .hgdc-feedback__question {
+    margin: 0;
+  }
+  .hgdc-feedback [hidden] {
+    display: none !important;
+  }
+  .hgdc-feedback__choices {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .hgdc-feedback button {
+    border: 1px solid var(--sl-color-gray-5);
+    background: var(--sl-color-black);
+    color: var(--sl-color-white);
+    border-radius: 999px;
+    padding: 0.35rem 1rem;
+    font: inherit;
+    font-size: var(--sl-text-sm);
+    cursor: pointer;
+  }
+  .hgdc-feedback button:hover {
+    border-color: var(--sl-color-accent);
+  }
+  .hgdc-feedback button[type="submit"] {
+    background: var(--sl-color-accent);
+    border-color: var(--sl-color-accent);
+    color: var(--hgdc-on-accent, #fff);
+  }
+  .hgdc-feedback form {
+    display: grid;
+    gap: 0.6rem;
+  }
+  .hgdc-feedback textarea {
+    width: 100%;
+    border-radius: 0.75rem;
+    border: 1px solid var(--sl-color-gray-5);
+    background: var(--sl-color-black);
+    color: var(--sl-color-white);
+    padding: 0.5rem 0.75rem;
+    font: inherit;
+    font-size: var(--sl-text-sm);
+  }
+  .hgdc-feedback__done {
+    margin: 0;
+    font-size: var(--sl-text-sm);
+    color: var(--sl-color-gray-2);
+  }
+</style>

package/src/overrides/Head.astro

@@ -1,14 +1,14 @@
----
-import Default from "@astrojs/starlight/components/Head.astro"
-import data from "virtual:hgdc-docs/config"
-
-import { markdownPath } from "../core/llms.ts"
-import { withBase, withoutBase } from "../core/navigation.ts"
-
-// llmstxt.org : chaque page annonce sa version Markdown et l'index qui la décrit.
-const markdown = withBase(data.base, markdownPath(withoutBase(data.base, Astro.url.pathname)))
----
-
-<Default><slot /></Default>
-<link rel="alternate" type="text/markdown" href={markdown} />
-<link rel="describedby" type="text/markdown" href={withBase(data.base, "/llms.txt")} />
+---
+import Default from "@astrojs/starlight/components/Head.astro"
+import data from "virtual:hgdc-docs/config"
+
+import { markdownPath } from "../core/llms.ts"
+import { withBase, withoutBase } from "../core/navigation.ts"
+
+// llmstxt.org : chaque page annonce sa version Markdown et l'index qui la décrit.
+const markdown = withBase(data.base, markdownPath(withoutBase(data.base, Astro.url.pathname)))
+---
+
+<Default><slot /></Default>
+<link rel="alternate" type="text/markdown" href={markdown} />
+<link rel="describedby" type="text/markdown" href={withBase(data.base, "/llms.txt")} />

package/src/overrides/PageTitle.astro

@@ -1,95 +1,95 @@
----
-import Default from "@astrojs/starlight/components/PageTitle.astro"
-import data from "virtual:hgdc-docs/config"
-
-import { markdownPath } from "../core/llms.ts"
-import { withBase, withoutBase } from "../core/navigation.ts"
-
-const markdown = withBase(data.base, markdownPath(withoutBase(data.base, Astro.url.pathname)))
-const assistant = Boolean(data.config.project) && data.config.assistant?.enabled !== false
----
-
-<div class="hgdc-title">
-  <Default><slot /></Default>
-  <div class="hgdc-page-actions not-content" data-hgdc-skip data-pagefind-ignore>
-    <button type="button" class="hgdc-action" data-hgdc-copy={markdown}>
-      <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16"
-        ><rect x="8" y="8" width="12" height="12" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"
-        ></rect><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" fill="none" stroke="currentColor" stroke-width="1.8"
-        ></path></svg
-      >
-      <span data-label>Copier pour un LLM</span>
-    </button>
-    <details class="hgdc-menu">
-      <summary class="hgdc-action hgdc-action--icon" aria-label="Autres formats de la page">
-        <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16"
-          ><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path></svg
-        >
-      </summary>
-      <ul class="hgdc-menu__list">
-        <li><a href={markdown}>Voir en Markdown</a></li>
-        <li><a data-hgdc-open="claude" href="https://claude.ai/new" target="_blank" rel="noopener">Ouvrir dans Claude</a></li>
-        <li><a data-hgdc-open="chatgpt" href="https://chatgpt.com/" target="_blank" rel="noopener">Ouvrir dans ChatGPT</a></li>
-        <li><a href={withBase(data.base, "/llms.txt")}>Index pour les agents (llms.txt)</a></li>
-      </ul>
-    </details>
-    {
-      assistant && (
-        <button type="button" class="hgdc-action" data-hgdc-ask>
-          <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16">
-            <path d="M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9z" fill="currentColor" />
-          </svg>
-          <span>Demander à l'assistant</span>
-        </button>
-      )
-    }
-    <span class="sr-only" role="status" aria-live="polite" data-hgdc-copy-status></span>
-  </div>
-</div>
-
-<script>
-  const status = document.querySelector<HTMLElement>("[data-hgdc-copy-status]")
-
-  for (const button of document.querySelectorAll<HTMLButtonElement>("[data-hgdc-copy]")) {
-    const label = button.querySelector<HTMLElement>("[data-label]")!
-    button.addEventListener("click", async () => {
-      const done = (text: string) => {
-        label.textContent = text
-        if (status) status.textContent = text
-        setTimeout(() => (label.textContent = "Copier pour un LLM"), 2000)
-      }
-      try {
-        const response = await fetch(button.dataset.hgdcCopy!)
-        if (!response.ok) throw new Error(String(response.status))
-        await navigator.clipboard.writeText(await response.text())
-        done("Page copiée")
-      } catch {
-        done("Copie impossible")
-      }
-    })
-  }
-
-  // « Ouvrir dans… » : l'assistant externe lit la version Markdown de cette page.
-  const markdownUrl = new URL(document.querySelector<HTMLElement>("[data-hgdc-copy]")!.dataset.hgdcCopy!, location.href)
-  const prompt = `Lis ${markdownUrl.href} et réponds à mes questions sur cette page.`
-  for (const link of document.querySelectorAll<HTMLAnchorElement>("[data-hgdc-open]")) {
-    const base = link.dataset.hgdcOpen === "claude" ? "https://claude.ai/new" : "https://chatgpt.com/"
-    link.href = `${base}?q=${encodeURIComponent(prompt)}`
-  }
-
-  // Le menu se ferme au clic extérieur et à Échap, comme un menu natif.
-  for (const menu of document.querySelectorAll<HTMLDetailsElement>(".hgdc-menu")) {
-    document.addEventListener("click", (event) => {
-      if (menu.open && !menu.contains(event.target as Node)) menu.open = false
-    })
-    menu.addEventListener("keydown", (event) => {
-      if (event.key === "Escape" && menu.open) {
-        menu.open = false
-        menu.querySelector("summary")?.focus()
-      }
-    })
-  }
-
-  for (const button of document.querySelectorAll("[data-hgdc-ask]"))
-    button.addEventListener("click", () => document.dispatchEvent(new CustomEvent("hgdc:assistant-open")))
-</script>
+---
+import Default from "@astrojs/starlight/components/PageTitle.astro"
+import data from "virtual:hgdc-docs/config"
+
+import { markdownPath } from "../core/llms.ts"
+import { withBase, withoutBase } from "../core/navigation.ts"
+
+const markdown = withBase(data.base, markdownPath(withoutBase(data.base, Astro.url.pathname)))
+const assistant = Boolean(data.config.project) && data.config.assistant?.enabled !== false
+---
+
+<div class="hgdc-title">
+  <Default><slot /></Default>
+  <div class="hgdc-page-actions not-content" data-hgdc-skip data-pagefind-ignore>
+    <button type="button" class="hgdc-action" data-hgdc-copy={markdown}>
+      <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16"
+        ><rect x="8" y="8" width="12" height="12" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"
+        ></rect><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" fill="none" stroke="currentColor" stroke-width="1.8"
+        ></path></svg
+      >
+      <span data-label>Copier pour un LLM</span>
+    </button>
+    <details class="hgdc-menu">
+      <summary class="hgdc-action hgdc-action--icon" aria-label="Autres formats de la page">
+        <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16"
+          ><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path></svg
+        >
+      </summary>
+      <ul class="hgdc-menu__list">
+        <li><a href={markdown}>Voir en Markdown</a></li>
+        <li><a data-hgdc-open="claude" href="https://claude.ai/new" target="_blank" rel="noopener">Ouvrir dans Claude</a></li>
+        <li><a data-hgdc-open="chatgpt" href="https://chatgpt.com/" target="_blank" rel="noopener">Ouvrir dans ChatGPT</a></li>
+        <li><a href={withBase(data.base, "/llms.txt")}>Index pour les agents (llms.txt)</a></li>
+      </ul>
+    </details>
+    {
+      assistant && (
+        <button type="button" class="hgdc-action" data-hgdc-ask>
+          <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16">
+            <path d="M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9z" fill="currentColor" />
+          </svg>
+          <span>Demander à l'assistant</span>
+        </button>
+      )
+    }
+    <span class="sr-only" role="status" aria-live="polite" data-hgdc-copy-status></span>
+  </div>
+</div>
+
+<script>
+  const status = document.querySelector<HTMLElement>("[data-hgdc-copy-status]")
+
+  for (const button of document.querySelectorAll<HTMLButtonElement>("[data-hgdc-copy]")) {
+    const label = button.querySelector<HTMLElement>("[data-label]")!
+    button.addEventListener("click", async () => {
+      const done = (text: string) => {
+        label.textContent = text
+        if (status) status.textContent = text
+        setTimeout(() => (label.textContent = "Copier pour un LLM"), 2000)
+      }
+      try {
+        const response = await fetch(button.dataset.hgdcCopy!)
+        if (!response.ok) throw new Error(String(response.status))
+        await navigator.clipboard.writeText(await response.text())
+        done("Page copiée")
+      } catch {
+        done("Copie impossible")
+      }
+    })
+  }
+
+  // « Ouvrir dans… » : l'assistant externe lit la version Markdown de cette page.
+  const markdownUrl = new URL(document.querySelector<HTMLElement>("[data-hgdc-copy]")!.dataset.hgdcCopy!, location.href)
+  const prompt = `Lis ${markdownUrl.href} et réponds à mes questions sur cette page.`
+  for (const link of document.querySelectorAll<HTMLAnchorElement>("[data-hgdc-open]")) {
+    const base = link.dataset.hgdcOpen === "claude" ? "https://claude.ai/new" : "https://chatgpt.com/"
+    link.href = `${base}?q=${encodeURIComponent(prompt)}`
+  }
+
+  // Le menu se ferme au clic extérieur et à Échap, comme un menu natif.
+  for (const menu of document.querySelectorAll<HTMLDetailsElement>(".hgdc-menu")) {
+    document.addEventListener("click", (event) => {
+      if (menu.open && !menu.contains(event.target as Node)) menu.open = false
+    })
+    menu.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && menu.open) {
+        menu.open = false
+        menu.querySelector("summary")?.focus()
+      }
+    })
+  }
+
+  for (const button of document.querySelectorAll("[data-hgdc-ask]"))
+    button.addEventListener("click", () => document.dispatchEvent(new CustomEvent("hgdc:assistant-open")))
+</script>

package/src/overrides/Sidebar.astro

@@ -1,60 +1,60 @@
----
-import Default from "@astrojs/starlight/components/Sidebar.astro"
-import data from "virtual:hgdc-docs/config"
-
-import { pagesOf, pageToPath, withBase } from "../core/navigation.ts"
-
-// Onglets et versions de docs.json, en tête de la sidebar : visibles sur ordinateur et dans
-// le menu mobile, sans toucher à la hauteur de l'en-tête de Starlight.
-const sections = data.tree.versions.flatMap((version) => version.tabs.map((tab) => ({ version, tab })))
-const index = Astro.locals.hgdcSection ?? 0
-const current = sections[index] ?? sections[0]!
-const firstPath = (items: Parameters<typeof pagesOf>[0]) => {
-  const first = pagesOf(items)[0]
-  return withBase(data.base, first ? pageToPath(first) : "/")
-}
-const tabs = current.version.tabs.filter((tab) => tab.label)
-const versions = data.tree.versions.filter((version) => version.label)
-const tabPosition = current.version.tabs.indexOf(current.tab)
-const versionHref = (version: (typeof versions)[number]) =>
-  firstPath((version.tabs[tabPosition] ?? version.tabs[0]!).items)
----
-
-{
-  (tabs.length > 1 || versions.length > 1) && (
-    <div class="hgdc-sections">
-      {versions.length > 1 && (
-        <label class="hgdc-version">
-          <span class="sr-only">Version de la documentation</span>
-          <select data-hgdc-version>
-            {versions.map((version) => (
-              <option value={versionHref(version)} selected={version === current.version}>
-                {version.label}
-                {version.isDefault ? " (actuelle)" : ""}
-              </option>
-            ))}
-          </select>
-        </label>
-      )}
-      {tabs.length > 1 && (
-        <nav aria-label="Sections de la documentation">
-          <ul class="hgdc-tabs">
-            {tabs.map((tab) => (
-              <li>
-                <a href={firstPath(tab.items)} aria-current={tab === current.tab ? "page" : undefined}>
-                  {tab.label}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      )}
-    </div>
-  )
-}
-<Default><slot /></Default>
-
-<script>
-  for (const select of document.querySelectorAll<HTMLSelectElement>("[data-hgdc-version]"))
-    select.addEventListener("change", () => window.location.assign(select.value))
-</script>
+---
+import Default from "@astrojs/starlight/components/Sidebar.astro"
+import data from "virtual:hgdc-docs/config"
+
+import { pagesOf, pageToPath, withBase } from "../core/navigation.ts"
+
+// Onglets et versions de docs.json, en tête de la sidebar : visibles sur ordinateur et dans
+// le menu mobile, sans toucher à la hauteur de l'en-tête de Starlight.
+const sections = data.tree.versions.flatMap((version) => version.tabs.map((tab) => ({ version, tab })))
+const index = Astro.locals.hgdcSection ?? 0
+const current = sections[index] ?? sections[0]!
+const firstPath = (items: Parameters<typeof pagesOf>[0]) => {
+  const first = pagesOf(items)[0]
+  return withBase(data.base, first ? pageToPath(first) : "/")
+}
+const tabs = current.version.tabs.filter((tab) => tab.label)
+const versions = data.tree.versions.filter((version) => version.label)
+const tabPosition = current.version.tabs.indexOf(current.tab)
+const versionHref = (version: (typeof versions)[number]) =>
+  firstPath((version.tabs[tabPosition] ?? version.tabs[0]!).items)
+---
+
+{
+  (tabs.length > 1 || versions.length > 1) && (
+    <div class="hgdc-sections">
+      {versions.length > 1 && (
+        <label class="hgdc-version">
+          <span class="sr-only">Version de la documentation</span>
+          <select data-hgdc-version>
+            {versions.map((version) => (
+              <option value={versionHref(version)} selected={version === current.version}>
+                {version.label}
+                {version.isDefault ? " (actuelle)" : ""}
+              </option>
+            ))}
+          </select>
+        </label>
+      )}
+      {tabs.length > 1 && (
+        <nav aria-label="Sections de la documentation">
+          <ul class="hgdc-tabs">
+            {tabs.map((tab) => (
+              <li>
+                <a href={firstPath(tab.items)} aria-current={tab === current.tab ? "page" : undefined}>
+                  {tab.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      )}
+    </div>
+  )
+}
+<Default><slot /></Default>
+
+<script>
+  for (const select of document.querySelectorAll<HTMLSelectElement>("[data-hgdc-version]"))
+    select.addEventListener("change", () => window.location.assign(select.value))
+</script>

package/src/overrides/SocialIcons.astro

@@ -0,0 +1,59 @@
+---
+import Default from "@astrojs/starlight/components/SocialIcons.astro"
+import data from "virtual:hgdc-docs/config"
+
+/** Barre du haut : liens de `navbar.links`, bouton `navbar.primary`, puis les réseaux. */
+const links = data.config.navbar?.links ?? []
+const primary = data.config.navbar?.primary
+---
+
+{
+  (links.length > 0 || primary) && (
+    <nav class="hgdc-navbar" aria-label="Liens">
+      {links.map((link) => (
+        <a class="hgdc-navbar__link" href={link.href}>
+          {link.label}
+        </a>
+      ))}
+      {primary && (
+        <a class="hgdc-navbar__primary" href={primary.href}>
+          {primary.label}
+        </a>
+      )}
+    </nav>
+  )
+}
+<Default />
+
+<style>
+  .hgdc-navbar {
+    display: none;
+    align-items: center;
+    gap: 1rem;
+    margin-inline-end: 0.5rem;
+  }
+  @media (min-width: 72rem) {
+    .hgdc-navbar {
+      display: flex;
+    }
+  }
+  .hgdc-navbar__link {
+    color: var(--sl-color-gray-2);
+    font-size: var(--sl-text-sm);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .hgdc-navbar__link:hover {
+    color: var(--sl-color-white);
+  }
+  .hgdc-navbar__primary {
+    background: var(--sl-color-accent);
+    color: var(--hgdc-on-accent, #fff);
+    border-radius: 999px;
+    padding: 0.35rem 0.9rem;
+    font-size: var(--sl-text-sm);
+    font-weight: 500;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+</style>

package/template/.astro/content-assets.mjs

@@ -1 +1,4 @@
-export default new Map();
+
+
+export default new Map([]);
+