@hgdc/docs 0.2.0 → 0.4.0

package/src/overrides/Footer.astro

@@ -0,0 +1,107 @@
+---
+import data from "virtual:hgdc-docs/config"
+
+import Icon from "./Icon.astro"
+
+// « 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 { pagination } = Astro.locals.starlightRoute
+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"><Icon name="thumbs-up" size={16} />Oui</button>
+          <button type="button" data-helpful="false"><Icon name="thumbs-down" size={16} />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>
+  )
+}
+{
+  (pagination.prev || pagination.next) && (
+    <nav class="hd-pagination not-content" aria-label="Pages voisines" data-pagefind-ignore>
+      {pagination.prev && (
+        <a class="hd-pagination__link" href={pagination.prev.href} rel="prev">
+          <span class="hd-pagination__hint"><Icon name="chevron-left" size={14} />Précédent</span>
+          <span class="hd-pagination__title">{pagination.prev.label}</span>
+        </a>
+      )}
+      {pagination.next && (
+        <a class="hd-pagination__link hd-pagination__link--next" href={pagination.next.href} rel="next">
+          <span class="hd-pagination__hint">Suivant<Icon name="chevron-right" size={14} /></span>
+          <span class="hd-pagination__title">{pagination.next.label}</span>
+        </a>
+      )}
+    </nav>
+  )
+}
+
+<script>
+  import { enhanceContent } from "../widget/code.ts"
+
+  enhanceContent()
+
+  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>
+

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/Header.astro

@@ -0,0 +1,92 @@
+---
+import Search from "virtual:starlight/components/Search"
+import data from "virtual:hgdc-docs/config"
+
+import { assistantEnabled, docsSections, sectionHref } from "./sections.ts"
+import Icon from "./Icon.astro"
+import ThemeToggle from "./ThemeToggle.astro"
+
+/**
+ * En-tête, comme chez Mintlify : produit à gauche, onglets de docs.json au centre, puis la
+ * recherche, l'assistant, les liens de `navbar` et le thème. Sur téléphone, le menu, le
+ * produit, la recherche et l'assistant seulement : le reste passe dans le menu.
+ */
+const { tabs, current } = docsSections(data.tree, Astro.locals.hgdcSection ?? 0)
+const home = `${data.base}/`
+const logo = typeof data.config.logo === "string" ? { light: data.config.logo } : data.config.logo
+const src = (path: string) => `${data.base}${path.startsWith("/") ? path : `/${path}`}`
+const links = data.config.navbar?.links ?? []
+const primary = data.config.navbar?.primary
+const assistant = assistantEnabled(data.config)
+---
+
+<div class="hd-header">
+  <div class="hd-header__start">
+    <button
+      type="button"
+      class="hd-icon-button hd-menu-button"
+      popovertarget="starlight__sidebar"
+      aria-label="Menu de la documentation"
+      aria-controls="starlight__sidebar"
+    >
+      <Icon name="menu" />
+    </button>
+    <a class="hd-brand" href={logo?.href ?? home}>
+      {
+        logo && (
+          <span class="hd-brand__mark">
+            <img class="hd-brand__light" src={src(logo.light)} alt="" width="24" height="24" />
+            <img class="hd-brand__dark" src={src(logo.dark ?? logo.light)} alt="" width="24" height="24" />
+          </span>
+        )
+      }
+      <span class="hd-brand__name">{data.config.name}</span>
+    </a>
+  </div>
+
+  {
+    tabs.length > 1 && (
+      <nav class="hd-header__tabs" aria-label="Sections de la documentation">
+        {tabs.map((tab) => (
+          <a href={sectionHref(data.base, tab.items)} aria-current={tab === current.tab ? "page" : undefined}>
+            {tab.label}
+          </a>
+        ))}
+      </nav>
+    )
+  }
+
+  <div class="hd-header__end">
+    <Search />
+    {
+      assistant && (
+        <button
+          type="button"
+          class="hd-icon-button"
+          data-hgdc-ask
+          aria-label="Demander à l'assistant"
+          title="Demander à l'assistant (Ctrl I)"
+        >
+          <Icon name="sparkles" />
+        </button>
+      )
+    }
+    {
+      (links.length > 0 || primary) && (
+        <nav class="hd-header__links" aria-label="Liens">
+          {links.map((link) => (
+            <a class="hd-pill hd-pill--ghost" href={link.href}>
+              {link.label}
+            </a>
+          ))}
+          {primary && (
+            <a class="hd-pill hd-pill--primary" href={primary.href}>
+              {primary.label}
+            </a>
+          )}
+        </nav>
+      )
+    }
+    <ThemeToggle variant="button" />
+  </div>
+</div>

package/src/overrides/Icon.astro

@@ -0,0 +1,65 @@
+---
+/**
+ * Icônes du modèle, au trait (24 × 24, 1,75), dessinées en ligne : aucune requête, aucune
+ * police d'icônes. `currentColor` suit le texte.
+ */
+const PATHS = {
+  menu: "M4 7h16M4 12h16M4 17h10",
+  search: "M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5-2 4 4",
+  sparkles:
+    "M12 3.5 13.6 8a3 3 0 0 0 1.9 1.9L20 11.5l-4.5 1.6a3 3 0 0 0-1.9 1.9L12 19.5 10.4 15a3 3 0 0 0-1.9-1.9L4 11.5 8.5 9.9A3 3 0 0 0 10.4 8ZM19 3v3M20.5 4.5h-3",
+  sun: "M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4",
+  moon: "M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z",
+  monitor: "M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm4 15h8m-4-3v3",
+  copy: "M9 9h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1Zm-4 6H4.5A1.5 1.5 0 0 1 3 13.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5",
+  check: "m5 12.5 4.5 4.5L19 7.5",
+  "chevron-down": "m6 9 6 6 6-6",
+  "chevron-right": "m9 6 6 6-6 6",
+  "chevron-left": "m15 6-6 6 6 6",
+  "arrow-up": "M12 19V5m-6 6 6-6 6 6",
+  "arrow-right": "M5 12h14m-6-6 6 6-6 6",
+  "arrow-up-right": "M7 17 17 7M8 7h9v9",
+  x: "M6 6l12 12M18 6 6 18",
+  flag: "M12 8v4.5M12 16h.01M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z",
+  list: "M4 6h16M4 12h10M4 18h13",
+  "thumbs-up":
+    "M7 10v11M15 5.9 14 10h5.8a2 2 0 0 1 1.9 2.5l-2.3 7A2 2 0 0 1 17.5 21H4a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2.8a2 2 0 0 0 1.8-1.1L12 2a3.1 3.1 0 0 1 3 3.9Z",
+  "thumbs-down":
+    "M17 14V3M9 18.1 10 14H4.2a2 2 0 0 1-1.9-2.5l2.3-7A2 2 0 0 1 6.5 3H20a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-2.8a2 2 0 0 0-1.8 1.1L12 22a3.1 3.1 0 0 1-3-3.9Z",
+  info: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-5v-4.5m0-3.5h.01",
+  note: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-5v-4.5m0-3.5h.01",
+  tip: "M9 18h6m-5 3h4M12 3a6 6 0 0 0-3.6 10.8c.5.4.6.8.6 1.2v.5h6V15c0-.4.2-.8.6-1.2A6 6 0 0 0 12 3Z",
+  warning: "M12 9.5v4M12 17h.01M10.3 4.2 2.6 17.5A2 2 0 0 0 4.3 20.5h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0Z",
+  danger: "M12 8v4.5M12 16h.01M8.3 3h7.4L21 8.3v7.4L15.7 21H8.3L3 15.7V8.3Z",
+  "circle-check": "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm-4-9 2.8 2.8L16 9.5",
+  file: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Zm0 0v5h5M9 13h6m-6 4h4",
+  hash: "M5 9h14M5 15h14M10 4 8 20M16 4l-2 16",
+  rotate: "M4 12a8 8 0 1 0 2.3-5.7M4 4v4h4",
+  expand: "M15 4h5v5M9 20H4v-5M20 4l-6 6M4 20l6-6",
+  shrink: "M14 10h6M14 10V4M10 14H4m6 0v6M14 10l6-6M10 14l-6 6",
+  markdown: "M4 6h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm3 9V9l2.5 3L12 9v6m5-6v6m-2-2 2 2 2-2",
+  external: "M14 4h6v6M20 4l-9 9M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4",
+} as const
+
+export type IconName = keyof typeof PATHS
+
+interface Props {
+  name: IconName
+  size?: number
+  class?: string
+}
+const { name, size = 18, class: className } = Astro.props
+---
+
+<svg
+  class:list={["hd-icon", className]}
+  aria-hidden="true"
+  viewBox="0 0 24 24"
+  width={size}
+  height={size}
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.75"
+  stroke-linecap="round"
+  stroke-linejoin="round"><path d={PATHS[name]}></path></svg
+>

package/src/overrides/PageFrame.astro

@@ -1,15 +1,62 @@
 ---
-import Default from "@astrojs/starlight/components/PageFrame.astro"
 import data from "virtual:hgdc-docs/config"
 
 import Assistant from "./Assistant.astro"
+import { assistantEnabled } from "./sections.ts"
+import SiteFooter from "./SiteFooter.astro"
 
-const assistant = data.config.project && data.config.assistant?.enabled !== false
+/**
+ * Cadre de page. En-tête fixe ; barre latérale fixe à gauche, jusqu'en bas de la page ;
+ * à droite, le contenu puis le pied de page, qui ne passe jamais sous la barre. Ouvert,
+ * l'assistant prend une colonne à droite et pousse le contenu au lieu de le recouvrir.
+ */
+const { hasSidebar } = Astro.locals.starlightRoute
+const assistant = assistantEnabled(data.config)
 ---
 
-<Default>
-  <slot name="header" slot="header" />
-  <slot name="sidebar" slot="sidebar" />
-  <slot />
-</Default>
-{assistant && <Assistant />}
+<div class="hd-page">
+  <header class="hd-topbar"><slot name="header" /></header>
+  {
+    hasSidebar && (
+      <nav class="hd-sidebar" aria-label="Navigation de la documentation">
+        <hd-sidebar-pane popover="auto" id="starlight__sidebar" class="sidebar-pane">
+          <div class="hd-sidebar__content">
+            <slot name="sidebar" />
+          </div>
+        </hd-sidebar-pane>
+      </nav>
+    )
+  }
+  <div class="hd-main-frame main-frame">
+    <slot />
+    <SiteFooter />
+  </div>
+  {assistant && <Assistant />}
+</div>
+
+<script>
+  // Le menu de téléphone est un popover : il s'ouvre sans JavaScript. Ce script le retire
+  // sur ordinateur, où la barre est toujours visible, et rend le reste inerte quand il est ouvert.
+  class SidebarPane extends HTMLElement {
+    connectedCallback() {
+      const desktop = matchMedia("(min-width: 50em)")
+      const reset = () => {
+        if (desktop.matches && this.matches(":popover-open")) this.hidePopover()
+        this.popover = desktop.matches ? null : "auto"
+      }
+      reset()
+      desktop.addEventListener("change", reset)
+      this.addEventListener("toggle", (event) => {
+        const open = (event as ToggleEvent).newState === "open"
+        for (const element of document.querySelectorAll<HTMLElement>(".hd-main-frame, .hd-askbar"))
+          element.toggleAttribute("inert", open)
+        document.documentElement.toggleAttribute("data-hd-menu", open)
+      })
+      // Un lien suivi dans le menu le ferme (utile pour une ancre de la même page).
+      this.addEventListener("click", (event) => {
+        if ((event.target as HTMLElement).closest("a") && this.matches(":popover-open")) this.hidePopover()
+      })
+    }
+  }
+  customElements.define("hd-sidebar-pane", SidebarPane)
+</script>

package/src/overrides/PageSidebar.astro

@@ -0,0 +1,7 @@
+---
+import TableOfContents from "virtual:starlight/components/TableOfContents"
+
+// Table des matières seule : sur téléphone, comme chez Mintlify, la page se lit sans elle.
+---
+
+{Astro.locals.starlightRoute.toc && <TableOfContents />}

package/src/overrides/PageTitle.astro

@@ -1,95 +1,126 @@
----
-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 type { StarlightRouteData } from "@astrojs/starlight/route-data"
+import data from "virtual:hgdc-docs/config"
+
+import { markdownPath } from "../core/llms.ts"
+import { withBase, withoutBase } from "../core/navigation.ts"
+import Icon from "./Icon.astro"
+
+/**
+ * En-tête de page : le groupe en surtitre, le titre, la description de la page en chapeau,
+ * et « Copier la page » avec ses autres formats (Markdown, Claude, ChatGPT, llms.txt).
+ */
+type Entry = StarlightRouteData["sidebar"][number]
+const route = Astro.locals.starlightRoute
+const containsCurrent = (entry: Entry): boolean =>
+  entry.type === "link" ? entry.isCurrent : entry.entries.some(containsCurrent)
+const group = route.sidebar.find((entry) => entry.type === "group" && containsCurrent(entry))?.label
+const description = route.entry.data.description
+const markdown = withBase(data.base, markdownPath(withoutBase(data.base, Astro.url.pathname)))
+---
+
+<div class="hd-title not-content">
+  {group && <p class="hd-eyebrow" data-pagefind-meta="section">{group}</p>}
+  <div class="hd-title__row">
+    <h1 id="_top">{route.entry.data.title}</h1>
+    <div class="hd-page-actions" data-hgdc-skip data-pagefind-ignore>
+      <div class="hd-split">
+        <button type="button" class="hd-split__main" data-hgdc-copy={markdown}>
+          <Icon name="copy" size={16} />
+          <span data-label>Copier la page</span>
+        </button>
+        <details class="hd-menu">
+          <summary class="hd-split__more" aria-label="Autres formats de la page">
+            <Icon name="chevron-down" size={16} />
+          </summary>
+          <ul class="hd-menu__list">
+            <li>
+              <button type="button" data-hgdc-copy-item>
+                <Icon name="copy" />
+                <span><strong>Copier la page</strong><small>En Markdown, pour un LLM</small></span>
+              </button>
+            </li>
+            <li>
+              <a href={markdown}>
+                <Icon name="markdown" />
+                <span><strong>Voir en Markdown</strong><small>La page en texte brut</small></span>
+              </a>
+            </li>
+            <li>
+              <a data-hgdc-open="claude" href="https://claude.ai/new" target="_blank" rel="noopener">
+                <Icon name="arrow-up-right" />
+                <span><strong>Ouvrir dans Claude</strong><small>Poser une question sur cette page</small></span>
+              </a>
+            </li>
+            <li>
+              <a data-hgdc-open="chatgpt" href="https://chatgpt.com/" target="_blank" rel="noopener">
+                <Icon name="arrow-up-right" />
+                <span><strong>Ouvrir dans ChatGPT</strong><small>Poser une question sur cette page</small></span>
+              </a>
+            </li>
+            <li>
+              <a href={withBase(data.base, "/llms.txt")}>
+                <Icon name="file" />
+                <span><strong>llms.txt</strong><small>L'index de la doc pour les agents</small></span>
+              </a>
+            </li>
+          </ul>
+        </details>
+      </div>
+      <span class="sr-only" role="status" aria-live="polite" data-hgdc-copy-status></span>
+    </div>
+  </div>
+  {description && <p class="hd-lead">{description}</p>}
+</div>
+
+<script>
+  const status = document.querySelector<HTMLElement>("[data-hgdc-copy-status]")
+  const main = document.querySelector<HTMLButtonElement>("[data-hgdc-copy]")
+
+  async function copyPage() {
+    if (!main) return
+    const label = main.querySelector<HTMLElement>("[data-label]")!
+    const done = (text: string) => {
+      label.textContent = text
+      if (status) status.textContent = text
+      setTimeout(() => (label.textContent = "Copier la page"), 2000)
+    }
+    try {
+      const response = await fetch(main.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")
+    }
+  }
+  main?.addEventListener("click", () => void copyPage())
+  document.querySelector("[data-hgdc-copy-item]")?.addEventListener("click", () => {
+    document.querySelector<HTMLDetailsElement>(".hd-menu")!.open = false
+    void copyPage()
+  })
+
+  // « Ouvrir dans… » : l'assistant externe lit la version Markdown de cette page.
+  if (main) {
+    const markdownUrl = new URL(main.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>(".hd-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) {
+        event.stopPropagation()
+        menu.open = false
+        menu.querySelector("summary")?.focus()
+      }
+    })
+  }
+</script>