From fc9a371859046c0a7872bdde87643d245a2474a4 Mon Sep 17 00:00:00 2001
From: Magnus Madsen <magnusm@cs.au.dk>
Date: Mon, 3 Aug 2026 20:54:08 +0200
Subject: [PATCH] fix: add header and main landmarks for accessibility

PageSpeed flags the site for missing HTML5 landmarks. The layout had no
main landmark, and the "Fork me on GitHub" ribbon sat outside every
landmark region.

Wrap the slot in <main>, group the ribbon and navbar under <header>, and
name the existing <nav>. No visual change: the ribbon is positioned
against the viewport, so its place in the DOM only affects reading order,
and Bootstrap's reboot already gives header/nav/main display: block.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/layouts/Layout.astro | 64 ++++++++++++++++++++++------------------
 1 file changed, 35 insertions(+), 29 deletions(-)
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 6bdb1f4..502653a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -65,38 +65,44 @@ import '../styles/global.css';
     <link href="/favicon.png" rel="icon">
   </head>
   <body>
-    <a href="https://github.com/flix/flix">
-      <img style="position: absolute; top: 0; right: 0; border: 0; z-index: 9999;"
-          src="/forkme_right_green_007200.png"
-          alt="Fork me on GitHub">
-    </a>
     <div class="container page">
-      <nav class="navbar navbar-dark bg-info navbar-expand-md menu shadow-sm mb-4">
-        <div class="container-fluid">
-          <button
-            class="navbar-toggler"
-            type="button"
-            aria-controls="main-nav"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-          >
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse" id="main-nav">
-            <ul class="navbar-nav mr-lg-auto">
-              {navLinks.map(({ href, label }) => (
-                <li class="nav-item pl-1 pr-1">
-                  <a class={`nav-link${currentPath === href ? " active font-weight-bold" : ""}`} href={href}>
-                    {label}
-                  </a>
-                </li>
-              ))}
-            </ul>
+      <header>
+        {/* The ribbon is absolutely positioned against the viewport, so its
+            place in the DOM only affects the reading order, not the layout. */}
+        <a href="https://github.com/flix/flix">
+          <img style="position: absolute; top: 0; right: 0; border: 0; z-index: 9999;"
+              src="/forkme_right_green_007200.png"
+              alt="Fork me on GitHub">
+        </a>
+        <nav class="navbar navbar-dark bg-info navbar-expand-md menu shadow-sm mb-4" aria-label="Main">
+          <div class="container-fluid">
+            <button
+              class="navbar-toggler"
+              type="button"
+              aria-controls="main-nav"
+              aria-expanded="false"
+              aria-label="Toggle navigation"
+            >
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="main-nav">
+              <ul class="navbar-nav mr-lg-auto">
+                {navLinks.map(({ href, label }) => (
+                  <li class="nav-item pl-1 pr-1">
+                    <a class={`nav-link${currentPath === href ? " active font-weight-bold" : ""}`} href={href}>
+                      {label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
           </div>
-        </div>
-      </nav>
+        </nav>
+      </header>
 
-      <slot />
+      <main>
+        <slot />
+      </main>
     </div>
 
     <script>
