From 3b892789bca681fb0852722b306893e5953638e9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 1 Oct 2026 13:53:48 +0000
Subject: [PATCH] Sync from next-template@f5e0055

---
 src/app/customer-login/page.tsx       |   4 +-
 src/app/layout.tsx                    |  79 ++++++------
 src/app/test-fonts/page.tsx           |   4 +-
 src/components/FontDetail.tsx         |  10 +-
 src/components/FontdueHTML.tsx        |  28 ++++-
 src/components/NavMenu.tsx            | 119 ++++++++++++++++++
 src/styles/components/nav/_nav.scss   | 171 +++++++++++++++++++++++++-
 src/styles/components/page/_page.scss |   7 +-
 src/styles/generic/_markdown.scss     |  24 +++-
 9 files changed, 396 insertions(+), 50 deletions(-)
 create mode 100644 src/components/NavMenu.tsx

diff --git a/src/app/customer-login/page.tsx b/src/app/customer-login/page.tsx
index 7df2fcc..76b3966 100644
--- a/src/app/customer-login/page.tsx
+++ b/src/app/customer-login/page.tsx
@@ -31,7 +31,9 @@ export default async function CustomerLoginPage() {
           )}
         </article>
 
-        <CustomerLoginForm />
+        <div className="page__form">
+          <CustomerLoginForm />
+        </div>
       </div>
     </main>
   );
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e397d47..93a8903 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,6 +9,7 @@ import "@/styles/main.scss";
 import { RootLayoutQuery } from "@graphql";
 import { fetchGraphql } from "@/lib/graphql";
 import ActiveLink from "@/components/ActiveLink";
+import NavMenu from "@/components/NavMenu";
 import PreloadWebfonts from "@/components/PreloadWebfonts";
 import FontdueHTML from "@/components/FontdueHTML";
 
@@ -86,48 +87,52 @@ export default async function RootLayout(props: LayoutProps) {
             },
           }}
         >
-          <nav className="nav" data-border="true">
-            <div className="nav__links">
-              <div className="nav__item" data-label="home">
-                {viewer.logo ? (
+          <nav className="nav" data-border="true" aria-label="Main">
+            <div className="nav__item" data-label="home">
+              {viewer.logo ? (
+                <ActiveLink href="/" className="nav__link">
+                  <Image
+                    src={viewer.logo.url}
+                    alt="Logo"
+                    width={(viewer.logo.meta.width ?? 100) / 2}
+                    height={(viewer.logo.meta.height ?? 100) / 2}
+                    priority
+                  />
+                </ActiveLink>
+              ) : (
+                <h1>
                   <ActiveLink href="/" className="nav__link">
-                    <Image
-                      src={viewer.logo.url}
-                      alt="Logo"
-                      width={(viewer.logo.meta.width ?? 100) / 2}
-                      height={(viewer.logo.meta.height ?? 100) / 2}
-                      priority
-                    />
+                    {viewer.settings?.title}
                   </ActiveLink>
-                ) : (
-                  <h1>
-                    <ActiveLink href="/" className="nav__link">
-                      {viewer.settings?.title}
+                </h1>
+              )}
+            </div>
+
+            <NavMenu>
+              <div className="nav__links">
+                <ActiveLink className="nav__link" href="/">
+                  {moreThanOneCollection ? "Fonts" : "Home"}
+                </ActiveLink>
+                {pages
+                  ?.filter((node) => node.slug?.name !== "customer-login")
+                  .map((node) => (
+                    <ActiveLink
+                      href={`/${node.slug?.name}`}
+                      className="nav__link"
+                      key={node.id}
+                    >
+                      {node.title}
                     </ActiveLink>
-                  </h1>
-                )}
+                  ))}
               </div>
-              <ActiveLink className="nav__link" href="/">
-                {moreThanOneCollection ? "Fonts" : "Home"}
-              </ActiveLink>
-              {pages
-                ?.filter((node) => node.slug?.name !== "customer-login")
-                .map((node) => (
-                  <ActiveLink
-                    href={`/${node.slug?.name}`}
-                    className="nav__link"
-                    key={node.id}
-                  >
-                    {node.title}
-                  </ActiveLink>
-                ))}
-            </div>
 
-            <div className="nav__item" data-label="login">
-              <ActiveLink className="nav__link" href="/customer-login">
-                Log in
-              </ActiveLink>
-            </div>
+              <div className="nav__item" data-label="login">
+                <ActiveLink className="nav__link" href="/customer-login">
+                  Log in
+                </ActiveLink>
+              </div>
+            </NavMenu>
+
             <div className="nav__item" data-label="cart">
               <CartButton buttonStyle="icon" />
             </div>
diff --git a/src/app/test-fonts/page.tsx b/src/app/test-fonts/page.tsx
index 9d3738d..6714cb2 100644
--- a/src/app/test-fonts/page.tsx
+++ b/src/app/test-fonts/page.tsx
@@ -24,7 +24,9 @@ export default async function TestFontsPage() {
           {page?.text ? <FontdueHTML html={page.text} /> : null}
         </article>
 
-        <TestFontsForm />
+        <div className="page__form">
+          <TestFontsForm />
+        </div>
       </div>
     </main>
   );
diff --git a/src/components/FontDetail.tsx b/src/components/FontDetail.tsx
index fc6482e..a4a2b7c 100644
--- a/src/components/FontDetail.tsx
+++ b/src/components/FontDetail.tsx
@@ -208,10 +208,12 @@ async function CollectionHeader({
                 view it.
               </p>
             </article>
-            <NodePasswordForm
-              collectionSlug={collectionSlug}
-              unlockEndpoint="/api/unlock"
-            />
+            <div className="page__form">
+              <NodePasswordForm
+                collectionSlug={collectionSlug}
+                unlockEndpoint="/api/unlock"
+              />
+            </div>
           </div>
         </main>
       );
diff --git a/src/components/FontdueHTML.tsx b/src/components/FontdueHTML.tsx
index 58a1a8a..5cd34a8 100644
--- a/src/components/FontdueHTML.tsx
+++ b/src/components/FontdueHTML.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import parse from "html-react-parser";
+import parse, { attributesToProps, Text } from "html-react-parser";
 import { kebabToCamel } from "../lib/utils";
 import TestFontsForm from "fontdue-js/TestFontsForm";
 import NewsletterSignup from "fontdue-js/NewsletterSignup";
@@ -32,9 +32,35 @@ interface FontdueHTML_props {
 
 export default function FontdueHTML({ html }: FontdueHTML_props) {
   const content = useMemo(() => {
+    // Body images come through as bare <img> tags. The first one is often the
+    // only one above the fold, so it keeps loading eagerly and the rest wait
+    // until they are scrolled near, instead of every visitor fetching all of
+    // them up front.
+    let imageCount = 0;
     return parse(html ?? "", {
       replace: (domNode) => {
+        // Body copy sometimes arrives as a run of text with no paragraph
+        // around it. The reading measure is set on the children of the
+        // article, and a bare run of text is not one of them, so it is
+        // wrapped to keep it from running the full width of the column.
+        if (
+          domNode instanceof Text &&
+          domNode.parent === null &&
+          domNode.data.trim() !== ""
+        ) {
+          return <div>{domNode.data}</div>;
+        }
         if ("name" in domNode && "attribs" in domNode) {
+          if (domNode.name === "img") {
+            const isFirstImage = imageCount++ === 0;
+            return (
+              <img
+                {...attributesToProps(domNode.attribs)}
+                loading={isFirstImage ? "eager" : "lazy"}
+                decoding="async"
+              />
+            );
+          }
           const props = attrsToProps(domNode.attribs);
           if (domNode.name === "fontdue-test-fonts-form") {
             return <TestFontsForm {...props} />;
diff --git a/src/components/NavMenu.tsx b/src/components/NavMenu.tsx
new file mode 100644
index 0000000..3d04a29
--- /dev/null
+++ b/src/components/NavMenu.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { usePathname } from "next/navigation";
+
+// The part of the header that folds away on narrow screens: on wide ones a row
+// of links next to the wordmark, on narrow ones a panel behind a toggle.
+//
+// Which of the two you get is decided entirely in CSS, so this component only
+// tracks whether the menu is open and there is no breakpoint duplicated here
+// that could drift from the stylesheet. The panel is a sibling of the button
+// rather than nested inside it so that on wide screens it can be dissolved
+// with `display: contents`, letting the groups it holds sit directly in the
+// header grid.
+export default function NavMenu({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Navigating does not unmount the panel, so without this it would stay open
+  // over the page you just moved to. Also covers the browser's back button,
+  // which no click handler would see.
+  useEffect(() => setOpen(false), [pathname]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        toggleRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+
+    // Past the width the stylesheet stops drawing a panel, the menu is part of
+    // the bar again and none of what follows belongs to it. A window dragged
+    // wider or a phone turned on its side therefore has to close it, or the
+    // page keeps a scroll lock and an unreachable body with nothing on screen
+    // to explain either. Read the answer off the panel itself so the width
+    // that decides it stays in the stylesheet.
+    const onResize = () => {
+      const panel = panelRef.current;
+      if (panel && getComputedStyle(panel).display === "contents") {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("resize", onResize);
+
+    // The menu covers the page, so the page behind it should neither scroll
+    // nor be reachable by keyboard while it does.
+    const { body } = document;
+    const previousOverflow = body.style.overflow;
+    const previousPadding = body.style.paddingRight;
+    // Locking the page takes its scrollbar away with it, and on the desktop
+    // browsers that reserve room for one that would shift the whole page
+    // sideways as the menu opens. Handing the width back as padding holds it
+    // still. Nothing to do where scrollbars are drawn over the page, which is
+    // every touch device.
+    const scrollbar = window.innerWidth - document.documentElement.clientWidth;
+    body.style.overflow = "hidden";
+    if (scrollbar > 0) {
+      const padding = parseFloat(getComputedStyle(body).paddingRight) || 0;
+      body.style.paddingRight = `${padding + scrollbar}px`;
+    }
+
+    const concealed = Array.from(
+      document.querySelectorAll<HTMLElement>(".main, .footer"),
+    );
+    concealed.forEach((element) => element.setAttribute("inert", ""));
+
+    // Move into the menu so the first thing after the toggle is a destination,
+    // not whatever happened to follow it in the document.
+    panelRef.current?.querySelector<HTMLElement>("a, button")?.focus();
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("resize", onResize);
+      body.style.overflow = previousOverflow;
+      body.style.paddingRight = previousPadding;
+      concealed.forEach((element) => element.removeAttribute("inert"));
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        ref={toggleRef}
+        type="button"
+        className="nav__toggle"
+        // Doubles as the styling hook for the bars becoming a cross, so the
+        // open state is never stored in two places.
+        aria-expanded={open}
+        aria-controls="nav-menu"
+        onClick={() => setOpen((wasOpen) => !wasOpen)}
+      >
+        <span className="visually-hidden">{open ? "Close menu" : "Menu"}</span>
+        <span className="nav__burger" aria-hidden="true" />
+      </button>
+
+      <div
+        ref={panelRef}
+        className="nav__panel"
+        id="nav-menu"
+        data-open={open}
+        // Anything actionable in here navigates, and leaving the menu up over
+        // the page it just moved to is wrong.
+        onClick={(event) => {
+          if ((event.target as HTMLElement).closest("a, button")) {
+            setOpen(false);
+          }
+        }}
+      >
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/src/styles/components/nav/_nav.scss b/src/styles/components/nav/_nav.scss
index ef6403f..765b337 100644
--- a/src/styles/components/nav/_nav.scss
+++ b/src/styles/components/nav/_nav.scss
@@ -1,21 +1,65 @@
 .nav {
   display: grid;
   grid-gap: var(--gutter);
-  grid-template-columns: auto max-content max-content;
   align-items: center;
   border-bottom: 1px solid var(--horizontal_rule_color);
   padding: 20px 0;
   min-height: 70px;
 
+  // Narrow: the wordmark, the cart and the toggle. Everything else moves into
+  // the menu behind the toggle.
+  grid-template-columns: auto max-content max-content;
+
+  @include minWidth(desktop) {
+    // The menu dissolves at this width, so its two groups become columns of
+    // the bar in their own right: wordmark, links, login, cart. The wordmark
+    // keeps the 220px column the page grid opens with, so the links start
+    // where a page's body does.
+    grid-template-columns: 220px auto max-content max-content;
+  }
+
+  @include maxWidth(desktop) {
+    // The panel hangs off the bar rather than off the viewport, so it meets
+    // the rule under it whatever height a logo gives the bar.
+    position: relative;
+
+    // While the menu is open the bar pins itself to the top of the screen, so
+    // the panel below always runs to the bottom edge instead of trailing off
+    // it on a page that was already scrolled. Closed, the bar scrolls away
+    // with the page exactly as it always has.
+    &:has(.nav__panel[data-open="true"]) {
+      position: sticky;
+      top: 0;
+      z-index: z-index(site, nav);
+      background-color: var(--primary_background_color);
+    }
+  }
+
   &__links {
     display: grid;
     grid-column-gap: 30px;
     align-items: center;
 
     @include minWidth(desktop) {
-      grid-template-columns: 220px;
       grid-auto-flow: column;
       grid-auto-columns: max-content;
+      // Every gap in the bar is the page gutter, but the links have always
+      // stood 30px off the wordmark's column rather than a gutter's width.
+      // This is the difference between the two, so they begin exactly where
+      // they always have. It goes negative above 1280, where the gutter is
+      // wider than 30px.
+      margin-left: calc(30px - var(--gutter));
+    }
+
+    // In the menu each link is a row of its own, so they need room between
+    // them and a hit area taller than the text.
+    @include maxWidth(desktop) {
+      grid-row-gap: 12px;
+      justify-items: start;
+
+      .nav__link {
+        padding: 8px 0;
+      }
     }
   }
 
@@ -24,7 +68,126 @@
     text-decoration: none;
   }
 
-  &__item[data-label="cart"] {
-    margin-left: auto;
+  // Dissolved on wide screens so the groups it holds sit directly in the bar's
+  // grid; a box of its own only once it is a menu.
+  &__panel {
+    display: contents;
+
+    @include maxWidth(desktop) {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      top: 100%;
+      // Bleeds back through the page gutters so the panel covers the full
+      // width, then puts them back as padding so what it holds stays on the
+      // same line as the wordmark above it.
+      left: calc(-1 * var(--outer-gutter));
+      right: calc(-1 * var(--outer-gutter));
+      height: calc(100dvh - 100%);
+      padding: 30px var(--outer-gutter);
+      background-color: var(--primary_background_color);
+      // The bar's own rule is painted under the panel, so the panel carries
+      // the same one to keep it unbroken.
+      border-top: 1px solid var(--horizontal_rule_color);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      z-index: z-index(site, nav);
+
+      // Closed panels are removed outright rather than hidden, which also
+      // takes their links out of the tab order.
+      &[data-open="false"] {
+        display: none;
+      }
+    }
+  }
+
+  // Pushed to the foot of the menu, under a rule: the account link is not one
+  // of the site's pages and should not read as one.
+  &__item[data-label="login"] {
+    @include maxWidth(desktop) {
+      margin-top: auto;
+      padding-top: 30px;
+      border-top: 1px solid var(--horizontal_rule_color);
+    }
+  }
+
+  // Only ever visible once the links have collapsed.
+  &__toggle {
+    @include resetButton();
+    display: none;
+
+    @include maxWidth(desktop) {
+      display: flex;
+      align-items: center;
+      // Last in the bar, though not last in the markup: the panel has to
+      // follow the button that opens it, which puts the cart after both.
+      order: 1;
+      color: var(--primary_text_color);
+      // Widened on the leading edge only: the trailing edge stays flush with
+      // the page gutter.
+      padding: 10px 0 10px 20px;
+    }
+
+    &:focus-visible {
+      outline: 1px solid currentColor;
+      outline-offset: 4px;
+    }
+  }
+
+  // Three hairlines at the weight of every other rule on the page, which is
+  // why this is drawn rather than set as an icon.
+  &__burger {
+    position: relative;
+    display: block;
+    width: 18px;
+    height: 1px;
+    background-color: currentColor;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background-color: currentColor;
+      transition:
+        transform 0.2s ease-out,
+        top 0.2s ease-out;
+    }
+
+    &::before {
+      top: -5px;
+    }
+
+    &::after {
+      top: 5px;
+    }
+  }
+
+  // Driven straight off `aria-expanded`, so the open state lives in exactly one
+  // place: the middle rule drops out and the outer two cross.
+  &__toggle[aria-expanded="true"] &__burger {
+    background-color: transparent;
+
+    &::before,
+    &::after {
+      top: 0;
+    }
+
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nav__burger::before,
+  .nav__burger::after {
+    transition: none;
   }
 }
diff --git a/src/styles/components/page/_page.scss b/src/styles/components/page/_page.scss
index 1cc86c8..3cd93be 100644
--- a/src/styles/components/page/_page.scss
+++ b/src/styles/components/page/_page.scss
@@ -8,7 +8,12 @@
   }
 
   &__body {
-    max-width: 40em;
     grid-column: 2 / span 1;
   }
+
+  // A form is filled in, not read across, so it keeps the reading measure
+  // even though the body around it may now use the whole column.
+  &__form {
+    max-width: 40em;
+  }
 }
diff --git a/src/styles/generic/_markdown.scss b/src/styles/generic/_markdown.scss
index 9c54166..9f6945b 100644
--- a/src/styles/generic/_markdown.scss
+++ b/src/styles/generic/_markdown.scss
@@ -1,5 +1,27 @@
 .markdown {
-  max-width: 40rem;
+  // The measure belongs to the reading, not to the column. Text keeps a
+  // comfortable line length, while anything that is looked at rather than
+  // read is free to use the whole width it has been given.
+  > * {
+    max-width: 40rem;
+  }
+
+  > :is(img, picture, figure, video, iframe, table) {
+    max-width: 100%;
+  }
+
+  // Lists are indented, so they give that back to finish flush with the
+  // paragraphs around them rather than hanging past them.
+  > :is(ul, ol) {
+    max-width: calc(40rem - 1em);
+  }
+
+  // The reset does not cover <hr>, so it still carries the browser's auto
+  // side margins. Those would centre it in an article that is now wider
+  // than the measure, instead of leaving it beside the text.
+  > hr {
+    margin-inline: 0;
+  }
 
   h1 {
     font-size: 2rem;