The site renders itself: Thymeleaf pages, and a catering page among them

The public site was a React SPA. It is now server-rendered Thymeleaf, and the goodie box and catering
tables added in the previous commit have a page of their own. The look is unchanged: the templates
carry the same Tailwind classes the components did, and every one of the 241 classes the five pages
use resolves in the compiled stylesheet.

WHAT WENT AWAY. PageMetaController — 148 lines whose only job was to splice per-page <title> and OG
tags into one shell with regular expressions, with a test that read the real index.html so that
reformatting it failed the build instead of silently breaking the rewriting. A page rendered on the
server writes its own head. Also react-router (no client-side routes left), motion, vite-plugin-svgr,
and the SPA fallback (platform.web.spa.enabled=false): with the site server-rendered, forwarding a
mistyped URL to /index.html would answer with a blank admin shell and a 200 instead of the site's own
404 page.

WHAT GOT BETTER ON THE WAY, none of it visible. The category filter is a ?category= link, so every
filtered view is a URL you can send someone and a crawler can reach all forty items instead of the
twelve the default filter showed. The contact form is a form post: the enquiry is recorded before
delivery is attempted, and a refused relay re-renders the page with what the visitor typed still in
the boxes. The mobile menu is a <details> — the React version needed four effects to close on
navigation, close on Escape, stop the page behind it scrolling, and unmount (a panel parked off-screen
still extends the scrollable area, which is how you used to be able to scroll sideways and find the
menu); a new document cannot inherit an open menu.

THE PUBLIC SITE SHIPS 5 KB OF JAVASCRIPT, and works without it. The product cards are scroll-snap
strips, so the photos swipe on a phone and scroll with a trackpad unaided; gallery.js adds the arrows
and the dots, and creates them itself rather than having the template render controls that would sit
there dead.

Tailwind still needs its compiler, so npm remains a BUILD tool: the CLI compiles the templates into
static/css/site.css at process-classes (so `spring-boot:run` gets it too), and frontend/ now builds
only that stylesheet and the admin. The brand tokens are one file both stylesheets import — the
alternative was the shop front and the screen that edits it drifting a shade apart. The stylesheet URL
carries ?v=<sha>, because one hand-written CSS file has no content hash and a deploy has to be able to
tell a browser that what it cached is stale.

The admin is still React and is untouched, apart from losing the router it no longer needs. It is an
editor, not content.

PlatformContractTest stopped inheriting platform-starter-test's contract and restates it. The shared
version asserts that an unknown path forwards to the SPA shell, which is no longer true here, and its
test methods are package-private so it cannot be overridden. The platform should decide that assertion
from platform.web.spa.enabled — noted in the file.

9 new tests (46 total): every page's real title and og:url, the catalogue and the catering tables in
the HTML rather than fetched afterwards, server-side filtering, the 404, and that a crafted ?about=
link cannot put words of its own choosing in front of a customer.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

src/main/resources/static/js/gallery.js

@@ -0,0 +1,141 @@
+/*
+ * Arrows and dots for the product cards that have more than one photo.
+ *
+ * This is the only JavaScript the public site loads, and the site works without it: each gallery is a
+ * scroll-snap strip, so the photos are already swipeable on a phone and scrollable with a trackpad. What
+ * this adds is the two chevrons and the row of dots the site has always had — controls that need script
+ * to do anything, which is why they are created here rather than rendered in the template and left dead
+ * for anyone whose JavaScript did not load.
+ *
+ * Tailwind finds the class names below because src/main/tailwind/site.css lists this directory as a
+ * @source. Write them out in full — a class assembled from pieces at runtime would not be in the CSS.
+ */
+(function () {
+  'use strict';
+
+  var ARROW =
+    'absolute top-1/2 -translate-y-1/2 grid place-items-center h-10 w-10 rounded-full bg-bakery-900/40 ' +
+    'text-white backdrop-blur-sm transition hover:bg-bakery-900/60 focus:outline-none focus-visible:ring-2 ' +
+    'focus-visible:ring-white';
+
+  function chevron(direction) {
+    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('class', 'h-5 w-5');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '2');
+    svg.setAttribute('stroke-linecap', 'round');
+    svg.setAttribute('stroke-linejoin', 'round');
+    svg.setAttribute('aria-hidden', 'true');
+    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', direction === 'left' ? 'M15 18l-6-6 6-6' : 'M9 18l6-6-6-6');
+    svg.appendChild(path);
+    return svg;
+  }
+
+  function enhance(strip) {
+    var photos = strip.querySelectorAll('img');
+    if (photos.length < 2) return;
+
+    var frame = strip.parentElement;
+    var name = photos[0].getAttribute('alt') || 'this item';
+
+    // Which photo is showing: whichever one's left edge is nearest the strip's scroll position. Read
+    // from the scroll position rather than tracked in a variable, so a swipe and an arrow press can
+    // never disagree about where we are.
+    function current() {
+      return Math.round(strip.scrollLeft / strip.clientWidth);
+    }
+
+    function show(index) {
+      var target = Math.max(0, Math.min(photos.length - 1, index));
+      strip.scrollTo({ left: target * strip.clientWidth, behavior: 'smooth' });
+    }
+
+    function arrow(direction, label, position) {
+      var button = document.createElement('button');
+      button.type = 'button';
+      button.className = ARROW + ' ' + position;
+      button.setAttribute('aria-label', label);
+      button.appendChild(chevron(direction));
+      button.addEventListener('click', function () {
+        // Wrapping, as the old carousel did: past the last photo you land back on the first.
+        var next = current() + (direction === 'left' ? -1 : 1);
+        if (next < 0) next = photos.length - 1;
+        if (next > photos.length - 1) next = 0;
+        show(next);
+      });
+      return button;
+    }
+
+    frame.appendChild(arrow('left', 'Previous photo of ' + name, 'left-2'));
+    frame.appendChild(arrow('right', 'Next photo of ' + name, 'right-2'));
+
+    var dots = document.createElement('div');
+    dots.className = 'absolute inset-x-0 bottom-3 flex justify-center gap-1.5';
+    var buttons = [];
+    photos.forEach(function (_photo, index) {
+      var dot = document.createElement('button');
+      dot.type = 'button';
+      dot.setAttribute(
+        'aria-label',
+        'Show photo ' + (index + 1) + ' of ' + photos.length + ' of ' + name,
+      );
+      dot.addEventListener('click', function () {
+        show(index);
+      });
+      buttons.push(dot);
+      dots.appendChild(dot);
+    });
+    frame.appendChild(dots);
+
+    function paint() {
+      var active = current();
+      buttons.forEach(function (dot, index) {
+        dot.className =
+          'h-1.5 rounded-full shadow-xs transition-all motion-reduce:transition-none focus:outline-none ' +
+          'focus-visible:ring-2 focus-visible:ring-white ' +
+          (index === active ? 'w-4 bg-white' : 'w-1.5 bg-white/60 hover:bg-white/80');
+        if (index === active) {
+          dot.setAttribute('aria-current', 'true');
+        } else {
+          dot.removeAttribute('aria-current');
+        }
+      });
+    }
+
+    // Keyboard: the strip is focusable, so left/right work once it has focus.
+    strip.tabIndex = 0;
+    strip.setAttribute('role', 'group');
+    strip.addEventListener('keydown', function (event) {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        show(current() - 1);
+      }
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        show(current() + 1);
+      }
+    });
+
+    var scheduled = false;
+    strip.addEventListener(
+      'scroll',
+      function () {
+        // A smooth scroll fires this dozens of times; repaint once per frame.
+        if (scheduled) return;
+        scheduled = true;
+        requestAnimationFrame(function () {
+          scheduled = false;
+          paint();
+        });
+      },
+      { passive: true },
+    );
+
+    paint();
+  }
+
+  document.querySelectorAll('.gallery').forEach(enhance);
+})();