first commit:

- we have a static astro website under /website. It has the
implementation docs of the homepage/gaufre templates, and it handles the
few API endpoints (the gaufre js, backgrounds, logos)
- we have a vite app under /packages/integration. It has the react
components generating the homepage and the gaufre button, and their css.
Its used to generate an npm package

website/public/api/v1/gaufre.js

@@ -0,0 +1,124 @@
+;(function () {
+  const BUTTON_CLASS = "js-lasuite-gaufre-btn"
+  let lastFocusedButton = null
+
+  if ("requestIdleCallback" in window) {
+    requestIdleCallback(() => {
+      appendIframe()
+    })
+  }
+
+  document.body.addEventListener("click", (event) => {
+    if (!event.target.classList || !event.target.classList.contains(BUTTON_CLASS)) {
+      const buttons = document.querySelectorAll(`.${BUTTON_CLASS}`)
+      buttons.forEach((b) => b.classList.remove("lasuite--opened"))
+      hideIframe()
+      return
+    }
+
+    const button = event.target
+    button.classList.toggle("lasuite--opened")
+    if (button.classList.contains("lasuite--opened")) {
+      showIframe(button)
+    } else {
+      hideIframe()
+    }
+  })
+
+  document.addEventListener("keyup", (event) => {
+    if (event.key === "Escape") {
+      hideIframe()
+    }
+  })
+
+  window.addEventListener("message", (event) => {
+    if (event.data === "lasuite-close-services-iframe") {
+      hideIframe()
+    }
+  })
+
+  window.addEventListener("resize", () => {
+    const iframe = document.querySelector(`#lasuite-gaufre-iframe.lasuite--opened`)
+    if (!iframe) {
+      return
+    }
+    const button = document.querySelector(`.${BUTTON_CLASS}.lasuite--opened`)
+    if (!button) {
+      return
+    }
+    iframe.style.cssText = getIframePositionStyle(button)
+  })
+
+  const appendIframe = () => {
+    if (document.querySelector(`#lasuite-gaufre-iframe`)) {
+      return
+    }
+    const scriptTag = document.querySelector(`#lasuite-gaufre-script`)
+    if (!scriptTag) {
+      console.log(
+        "La Suite numérique: Gaufre script tag not found, please check out the documentation",
+      )
+      return
+    }
+    const iframe = document.createElement("iframe")
+    iframe.title = "Services de La Suite numérique"
+    iframe.id = "lasuite-gaufre-iframe"
+    iframe.width = "304"
+    iframe.height = "360"
+    iframe.style.cssText = "display: none !important"
+    const { host, protocol } = new URL(scriptTag.src)
+    const searchParams = new URLSearchParams(scriptTag.src)
+    const anct = searchParams.get("type") === "anct"
+    const lang = ["en"].includes(searchParams.get("lang")) ? searchParams.get("lang") : null
+    iframe.src = `${protocol}//${host}/api/v1/${(!!lang && `${lang}/`) || ""}gaufre${(!!anct && "?type=anct") || ""}`
+    document.body.appendChild(iframe)
+  }
+
+  const getIframePositionStyle = (button) => {
+    const buttonCoords = button.getBoundingClientRect()
+    const isSmallScreen = window.innerWidth <= 400
+    return `
+      position: absolute !important;
+      top: ${buttonCoords.top + buttonCoords.height + 8}px;
+      ${
+        isSmallScreen
+          ? `
+        left: 5px;
+        right: 5px;
+        margin: 0 auto;
+      `
+          : `
+      left: ${buttonCoords.right - 304 + document.documentElement.scrollLeft}px;`
+      }
+      border: 0 !important;
+      display: block !important;
+      z-index: 100000;
+    `
+  }
+
+  const showIframe = (button) => {
+    const iframe = document.querySelector(`#lasuite-gaufre-iframe`)
+    if (!iframe) {
+      appendIframe()
+    }
+    iframe.style.cssText = getIframePositionStyle(button)
+    iframe.classList.add("lasuite--opened")
+    lastFocusedButton = button
+    setTimeout(() => {
+      iframe.focus()
+    }, 0)
+  }
+
+  const hideIframe = () => {
+    const iframe = document.querySelector(`#lasuite-gaufre-iframe`)
+    if (iframe) {
+      iframe.style.cssText = "display: none !important"
+      iframe.classList.remove("lasuite--opened")
+    }
+    if (lastFocusedButton) {
+      lastFocusedButton.classList.remove("lasuite--opened")
+      lastFocusedButton.focus()
+      lastFocusedButton = null
+    }
+  }
+})()

website/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

website/public/fonts/readme.md

@@ -0,0 +1,13 @@
+We use a subset of Marianne font because we know we use just a few characters for our list. This
+shrinks the font file size noticeably!
+
+Example command to use to generate the subset with glyphhanger:
+
+```
+glyphhanger \
+  --subset="./Marianne-Regular.woff2" \
+  --formats=woff2 \
+  --whitelist="DeskLaSuiteNumériqueMessagerieTchapResanaFranceTransfertContactsGristLePadWebConférencedel'ÉtatWebinaire  "
+```
+
+Assuming you have the Marianne-Regular.woff2 file (you can take it from the DSFR).