Implement the RoQua documentation design

astro.config.mjs

@@ -20,18 +20,49 @@ export default defineConfig({
           // Same-page and relative links are fine; only flag links whose
           // target page doesn't exist.
           errorOnRelativeLinks: false,
+          // Not all pages are translated; English routes intentionally fall
+          // back to the Dutch content, so links to them are valid.
+          errorOnFallbackPages: false,
         }),
       ],
       title: {
         nl: "RoQua Documentatie",
         en: "RoQua Documentation",
       },
+      // The top bar is always dark, so the white wordmark works in both themes.
       logo: {
-        src: "./src/assets/roqua-q.png",
-        alt: "RoQua Logo",
+        src: "./src/assets/wordmark-white.svg",
+        alt: "RoQua",
+        replacesTitle: true,
       },
       favicon: "/img/favicon.ico",
 
+      components: {
+        Header: "./src/components/Header.astro",
+        Hero: "./src/components/Hero.astro",
+        PageTitle: "./src/components/PageTitle.astro",
+      },
+
+      // Code blocks are dark in both themes, per the design; the exact navy
+      // differs per scheme, so the values live in CSS variables in custom.css.
+      expressiveCode: {
+        themes: ["github-dark"],
+        styleOverrides: {
+          borderRadius: "0.5rem",
+          borderColor: "var(--sl-color-hairline)",
+          codeBackground: "var(--rq-code-bg)",
+          frames: {
+            editorTabBarBackground: "var(--rq-code-tabbar-bg)",
+            editorActiveTabBackground: "var(--rq-code-bg)",
+            editorActiveTabIndicatorTopColor: "transparent",
+            editorActiveTabIndicatorBottomColor: "var(--rq-topbar-active)",
+            terminalBackground: "var(--rq-code-bg)",
+            terminalTitlebarBackground: "var(--rq-code-tabbar-bg)",
+            terminalTitlebarBorderBottomColor: "rgb(255 255 255 / 0.08)",
+          },
+        },
+      },
+
       defaultLocale: "root",
       locales: {
         root: { label: "Nederlands", lang: "nl" },
@@ -42,7 +73,11 @@ export default defineConfig({
         baseUrl: "https://github.com/roqua/documentation/edit/master/",
       },
 
-      customCss: ["./src/styles/custom.css"],
+      customCss: [
+        "@fontsource-variable/roboto/standard.css",
+        "@fontsource-variable/roboto/standard-italic.css",
+        "./src/styles/custom.css",
+      ],
 
       // Recovers the Docusaurus category labels for autogenerated groups.
       routeMiddleware: "./src/starlightRouteData.ts",

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@astrojs/starlight": "^0.41.4",
+    "@fontsource-variable/roboto": "^5.3.0",
     "astro": "^7.1.3",
     "sharp": "^0.34.5"
   },

src/components/Header.astro

@@ -0,0 +1,113 @@
+---
+import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
+import Search from "@astrojs/starlight/components/Search.astro";
+import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
+import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
+
+/**
+ * The dark top bar from the "Ronde 1" design: wordmark, the four documentation
+ * areas, search, and the theme/language pickers. The active area gets a blue
+ * underline across the full bar height.
+ */
+
+const { locale } = Astro.locals.starlightRoute;
+const base = locale ? `/${locale}` : "";
+const isEnglish = locale === "en";
+
+const sections = [
+  { label: isEnglish ? "Manual" : "Handleiding", href: `${base}/docs/`, prefixes: [`${base}/docs/`] },
+  { label: isEnglish ? "Admin" : "Beheer", href: `${base}/docs/admin/`, prefixes: [`${base}/docs/admin/`] },
+  { label: "API", href: `${base}/technical/`, prefixes: [`${base}/technical/`] },
+  {
+    label: isEnglish ? "Data export" : "Data-export",
+    href: `${base}/technical/csv_export/`,
+    prefixes: [`${base}/technical/csv_export/`, `${base}/technical/sqlite_export/`],
+  },
+];
+
+// The most specific matching prefix wins, so /technical/csv_export/ highlights
+// "Data-export" rather than "API".
+const path = Astro.url.pathname.endsWith("/") ? Astro.url.pathname : `${Astro.url.pathname}/`;
+const active = sections.reduce(
+  (best, section) => {
+    const match = section.prefixes.find((prefix) => path.startsWith(prefix));
+    return match && match.length > best.length ? { length: match.length, section } : best;
+  },
+  { length: 0, section: undefined as (typeof sections)[number] | undefined },
+).section;
+
+---
+
+<div class="header">
+  <div class="title-wrapper sl-flex">
+    <SiteTitle />
+  </div>
+  <nav class="area-nav sl-hidden lg:sl-flex" aria-label={isEnglish ? "Documentation areas" : "Documentatie-onderdelen"}>
+    {
+      sections.map((section) => (
+        <a href={section.href} aria-current={section === active ? "true" : undefined}>
+          {section.label}
+        </a>
+      ))
+    }
+  </nav>
+  <div class="sl-flex search-wrapper print:hidden">
+    <Search />
+  </div>
+  <div class="sl-hidden md:sl-flex print:hidden right-group">
+    <ThemeSelect />
+    <LanguageSelect />
+  </div>
+</div>
+
+<style>
+  .header {
+    display: flex;
+    gap: var(--sl-nav-gap);
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+  }
+
+  .title-wrapper {
+    overflow: clip;
+    padding: 0.25rem;
+    margin: -0.25rem;
+    min-width: 0;
+  }
+
+  .area-nav {
+    align-items: center;
+    align-self: stretch;
+    gap: 1.375rem;
+    font-size: 0.9375rem;
+    border-inline-start: 1px solid rgb(255 255 255 / 0.18);
+    padding-inline-start: 1.75rem;
+  }
+  .area-nav a {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: rgb(255 255 255 / 0.72);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .area-nav a:hover {
+    color: #fff;
+  }
+  .area-nav a[aria-current="true"] {
+    color: #fff;
+    font-weight: 500;
+    box-shadow: inset 0 -3px 0 0 var(--rq-topbar-active);
+  }
+
+  .search-wrapper {
+    flex: 1;
+    justify-content: flex-end;
+  }
+
+  .right-group {
+    gap: 0.5rem;
+    align-items: center;
+  }
+</style>