TheVine/itsthevine
Archived
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

The site renders itself: Thymeleaf pages, and a catering page among them
build-and-publish / build (pull_request) Successful in 2m8s
Details

Browse Source 
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]>
This commit is contained in:
austin
2026-07-26 16:07:01 -05:00
co-authored by Claude Opus 5
parent eb5f75bc9d
commit 61f3eb90ff
54 changed files with 2127 additions and 2398 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+5 -16
View File
@@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" media="(prefers-color-scheme: light)" href="/images/resources/logo_L.png">
<link rel="icon" media="(prefers-color-scheme: dark)" href="/images/resources/logo_dark.png">
<!-- Preconnect to the photo bucket so product images start loading a round-trip sooner. -->
<link rel="preconnect" href="https://s3.thebennett.net" crossorigin>
<!-- The wordmark is set in these; without preloading they arrive late and the logo visibly reflows. -->
<link rel="preload" as="font" type="font/woff2" href="/src/fonts/raleway-latin.woff2" crossorigin>
<link rel="preload" as="image" href="https://s3.thebennett.net/itsthevine/images/gallery/Outside.webp" fetchpriority="high">
<!-- PageMetaController rewrites the title and the four meta tags below per route, so crawlers and
link-preview scrapers get real per-page metadata instead of one generic shell. Keep the
attribute order and quoting as-is — it matches on them. -->
<title>The Vine Coffeehouse + Bakery</title>
<meta name="description" content="A locally owned coffeehouse and bakery in downtown Princeville, Illinois. We bake pastries, custom cakes, cookies, and cinnamon rolls, and serve sandwiches, paninis, and coffee.">
<meta property="og:title" content="The Vine Coffeehouse + Bakery">
<meta property="og:description" content="A locally owned coffeehouse and bakery in downtown Princeville, IL.">
<meta property="og:url" content="https://itsthevine.com">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta name="keywords" content="bakery, coffeehouse, pastries, custom cakes, cinnamon rolls, paninis, Princeville IL">
<!-- The shell for /admin, and nothing else. The public pages are server-rendered Thymeleaf now, so
this file no longer carries metadata for crawlers, and PageMetaController — which used to rewrite
it per route with regular expressions — is gone. -->
<meta name="robots" content="noindex">
<title>The Vine — admin</title>
</head>
<body>
<div id="root"></div>
frontend/package-lock.json
Generated
+432 -1088
View File
File diff suppressed because it is too large Load Diff
frontend/package.json
+4 -5
View File
@@ -6,15 +6,15 @@
"scripts": {
"dev": "vite",
"build": "tsc --noEmit && vite build",
"build:css": "tailwindcss -i site.css -o ../target/classes/static/css/site.css --minify",
"preview": "vite preview"
},
"dependencies": {
"motion": "12.42.2",
"react": "^19.2.7",
"react-dom": "^19.2.7",
"react-router-dom": "7.18.1"
"react-dom": "^19.2.7"
},
"devDependencies": {
"@tailwindcss/cli": "4.3.3",
"@tailwindcss/vite": "4.3.3",
"@types/node": "^26.1.0",
"@types/react": "^19.2.17",
@@ -22,7 +22,6 @@
"@vitejs/plugin-react": "^6.0.3",
"tailwindcss": "4.3.3",
"typescript": "^7.0.0",
"vite": "^8.1.3",
"vite-plugin-svgr": "^5.0.0"
"vite": "^8.1.3"
}
}
frontend/public/images/resources/logo_L.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 66 KiB

frontend/public/images/resources/logo_dark.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 71 KiB

frontend/site.css
+22
View File
@@ -0,0 +1,22 @@
/*
* The stylesheet for the server-rendered site.
*
* Compiled by the Tailwind CLI (`npm run build:css`) straight into target/classes/static/css: it is a
* source file, not a resource, and the generated stylesheet belongs in the build output rather than in
* src/main/resources next to it.
*
* It lives in this directory, beside the admin's stylesheet, because Tailwind resolves `@import
* "tailwindcss"` by walking up from the CSS file looking for node_modules — and node_modules is here.
* So this directory is the whole asset pipeline: one Tailwind, two stylesheets, one of them for pages
* that contain no JavaScript at all.
*
* @source points Tailwind at the templates, and at gallery.js — the product-card arrows are created in
* script, so their classes are only written down there. A utility exists in the output only if Tailwind
* saw it in one of these files, which is why a class name must never be assembled from pieces at
* runtime.
*/
@import "tailwindcss";
@import "./src/tokens.css";
@source "../src/main/resources/templates";
@source "../src/main/resources/static/js";
frontend/src/App.tsx
+12 -58
View File
@@ -1,66 +1,20 @@
import { useEffect } from 'react';
import { Outlet, Route, Routes, useLocation } from 'react-router-dom';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import HomePage from '@/pages/Home';
import ProductsPage from '@/pages/Products';
import HistoryPage from '@/pages/History';
import ContactPage from '@/pages/Contact';
import NotFoundPage from '@/pages/NotFound';
import AdminPage from '@/pages/Admin';
/**
* Client-side navigation keeps the previous scroll position, which lands you halfway down a page you
* just opened. Anchors like /#visit still need to work, so only reset when there isn't one.
* What's left of the React app: the admin screen, and nothing else.
*
* The shop front is server-rendered Thymeleaf now, so there are no client-side routes to route
* between — react-router went with the pages it used to switch. Spring serves this shell at /admin and
* only at /admin; every other URL is a page in src/main/resources/templates.
*
* The admin sits outside the public chrome deliberately: the nav would offer a signed-in editor links
* away from unsaved work, and the opening hours in the footer are noise on a screen whose whole job is
* the catalogue.
*/
const ScrollToTop = () => {
const { pathname, hash } = useLocation();
useEffect(() => {
// 'instant' overrides the page's scroll-behavior:smooth, which is meant for the #visit
// anchor, not for landing on a new page.
if (!hash) window.scrollTo({ top: 0, behavior: 'instant' });
}, [pathname, hash]);
return null;
};
/** The shop front: the nav, the footer, and the pages a customer sees. */
const PublicLayout = () => (
<div className="min-h-screen bg-bakery-50 flex flex-col">
<Header />
<main className="flex-grow">
<Outlet />
</main>
<Footer />
</div>
);
/**
* The admin sits outside the public chrome deliberately. It isn't a page you'd browse to — the nav
* would offer a signed-in editor links away from unsaved work, and the opening hours in the footer
* are noise on a screen whose whole job is the catalogue.
*/
const AdminLayout = () => (
<div className="min-h-screen bg-bakery-50">
<Outlet />
</div>
);
const App = () => (
<>
<ScrollToTop />
<Routes>
<Route element={<PublicLayout />}>
<Route path="/" element={<HomePage />} />
<Route path="/products" element={<ProductsPage />} />
<Route path="/history" element={<HistoryPage />} />
<Route path="/contact" element={<ContactPage />} />
<Route path="*" element={<NotFoundPage />} />
</Route>
<Route element={<AdminLayout />}>
<Route path="/admin" element={<AdminPage />} />
</Route>
</Routes>
</>
<div className="min-h-screen bg-bakery-50">
<AdminPage />
</div>
);
export default App;
frontend/src/assets/logo_L.svg
-1
View File
File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

frontend/src/assets/logo_R.svg
-1
View File
File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

frontend/src/components/Footer.tsx
-52
View File
@@ -1,52 +0,0 @@
import { Link } from 'react-router-dom';
import Logo from './Logo';
const Footer = () => {
return (
<footer className="bg-bakery-900 text-bakery-100">
<div className="container mx-auto px-4 py-14">
<div className="grid grid-cols-1 md:grid-cols-4 gap-10">
{/* Logo */}
<div className="col-span-1 md:col-span-2 flex items-start">
<Logo className="text-bakery-50" />
</div>
{/* Navigation Links */}
<div>
<h3 className="font-adbhashitha text-sm uppercase tracking-[0.18em] text-bakery-300 mb-4">Navigation</h3>
<ul className="space-y-2">
<li>
<Link to="/products" className="hover:text-white transition">Our Products</Link>
</li>
<li>
<Link to="/history" className="hover:text-white transition">Our Story</Link>
</li>
<li>
<Link to="/contact" className="hover:text-white transition">Contact</Link>
</li>
</ul>
</div>
{/* Contact Info */}
<div>
<h3 className="font-adbhashitha text-sm uppercase tracking-[0.18em] text-bakery-300 mb-4">Visit</h3>
<address className="not-italic space-y-2">
<p>215 E Main Street<br />Princeville, IL 61559</p>
<p><a href="tel:+13097010660" className="hover:text-white transition">(309) 701-0660</a></p>
<p className="break-words">
<a href="mailto:[email protected]" className="hover:text-white transition">contact@itsthevine.com</a>
</p>
</address>
</div>
</div>
{/* Bottom Bar */}
<div className="mt-12 text-center text-sm text-bakery-300">
<p>© {new Date().getFullYear()} The Vine Coffeehouse + Bakery</p>
</div>
</div>
</footer>
);
};
export default Footer;
frontend/src/components/Header.tsx
-118
View File
@@ -1,118 +0,0 @@
import { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Link, useLocation } from 'react-router-dom';
import Logo from './Logo';
const navItems = [
{ label: 'Our Products', href: '/products' },
{ label: 'Our Story', href: '/history' },
{ label: 'Contact', href: '/contact' },
];
const Header = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const { pathname } = useLocation();
// Close on navigation — without this the panel stays up over the page you just opened.
useEffect(() => setIsMobileMenuOpen(false), [pathname]);
// Escape closes it, and the page behind it doesn't scroll while it's up.
useEffect(() => {
if (!isMobileMenuOpen) return;
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setIsMobileMenuOpen(false); };
const previousOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
window.addEventListener('keydown', onKey);
return () => {
document.body.style.overflow = previousOverflow;
window.removeEventListener('keydown', onKey);
};
}, [isMobileMenuOpen]);
return (
<>
<header className="sticky top-0 z-40 bg-bakery-50/90 backdrop-blur border-b border-bakery-200">
<div className="container mx-auto px-4">
<div className="flex items-center justify-between gap-2 h-20 md:h-24">
{/* Logo */}
<Logo className="text-bakery-700" />
{/* Desktop Navigation */}
<nav className="hidden md:flex items-center gap-8">
{navItems.map((item) => (
<Link
key={item.href}
to={item.href}
className="text-sm uppercase tracking-[0.15em] text-bakery-700 hover:text-bakery-900 transition"
>
{item.label}
</Link>
))}
</nav>
{/* Mobile menu button — the same control opens and closes, so the bar never
disappears out from under your thumb. */}
<button
className="md:hidden p-2 shrink-0"
onClick={() => setIsMobileMenuOpen((open) => !open)}
aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
aria-expanded={isMobileMenuOpen}
>
<svg
className="h-6 w-6 text-bakery-700"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
{isMobileMenuOpen ? <path d="M6 18L18 6M6 6l12 12" /> : <path d="M4 6h16M4 12h16M4 18h16" />}
</svg>
</button>
</div>
</div>
</header>
{/* Mobile navigation. Three things here are load-bearing:
It lives OUTSIDE <header>. The header carries `backdrop-blur`, and a backdrop-filter
makes an element a containing block for fixed-position descendants — so a `fixed` panel
nested inside it resolves against the 80px header box, not the viewport, and gets
clipped to a sliver.
It starts BELOW the bar (`top-20`) instead of covering it, so the logo and the toggle
stay put and the panel needs no second copy of either. One logo, one position, every
breakpoint.
It must UNMOUNT when closed: a panel parked off-screen still extends the scrollable
area, which is what used to let you scroll sideways and find the menu. */}
<AnimatePresence>
{isMobileMenuOpen && (
<motion.div
initial={{ opacity: 0, y: -8 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -8 }}
transition={{ duration: 0.2, ease: 'easeOut' }}
className="md:hidden fixed inset-x-0 top-20 bottom-0 z-30 bg-bakery-50"
>
<nav className="container mx-auto px-4 flex flex-col">
{navItems.map((item) => (
<Link
key={item.href}
to={item.href}
className="text-bakery-800 hover:text-bakery-600 transition py-4 text-lg border-b border-bakery-100"
onClick={() => setIsMobileMenuOpen(false)}
>
{item.label}
</Link>
))}
</nav>
</motion.div>
)}
</AnimatePresence>
</>
);
};
export default Header;
frontend/src/components/Logo.tsx
-64
View File
@@ -1,64 +0,0 @@
import { Link } from 'react-router-dom';
import Logo_R from '@/assets/logo_R.svg?react';
import Logo_L from '@/assets/logo_L.svg?react';
interface LogoProps {
/** Tailwind text-* class. The SVG marks fill with currentColor, so this colors the whole lockup. */
className?: string;
size?: 'sm' | 'lg';
/** The hero sits on the homepage, where a link back to "/" is pointless. */
linked?: boolean;
}
// The lockup: branch · "The Vine" over "Coffeehouse + Bakery" · branch.
// Branch heights track the two-line wordmark so the marks read as part of it.
const SIZES = {
sm: {
branch: 'w-12 h-12 sm:w-14 sm:h-14',
name: 'text-xl sm:text-2xl md:text-3xl',
tag: 'text-[0.6rem] sm:text-xs tracking-[0.18em]',
gap: 'gap-1.5 sm:gap-2',
},
lg: {
branch: 'w-20 h-20 sm:w-28 sm:h-28',
name: 'text-4xl sm:text-5xl md:text-6xl',
tag: 'text-xs sm:text-base tracking-[0.2em]',
gap: 'gap-2 sm:gap-4',
},
};
const Logo: React.FC<LogoProps> = ({ className = 'text-bakery-700', size = 'sm', linked = true }) => {
const s = SIZES[size];
const inner = (
<>
<Logo_R className={`${s.branch} shrink-0`} />
<span className="flex flex-col items-center leading-none min-w-0">
<span className={`font-lejour ${s.name}`} style={{ letterSpacing: '0.01em' }}>
The Vine
</span>
<span className={`font-adbhashitha ${s.tag} uppercase mt-1.5 whitespace-nowrap`}>
Coffeehouse + Bakery
</span>
</span>
<Logo_L className={`${s.branch} shrink-0`} />
</>
);
const classes = `flex items-center ${s.gap} min-w-0 shrink ${className}`;
if (!linked) {
return (
<div className={`${classes} justify-center`} role="img" aria-label="The Vine Coffeehouse + Bakery">
{inner}
</div>
);
}
return (
<Link to="/" className={classes} aria-label="The Vine Coffeehouse + Bakery, home">
{inner}
</Link>
);
};
export default Logo;
frontend/src/components/ProductGallery.tsx
-143
View File
@@ -1,143 +0,0 @@
import { useRef, useState } from 'react';
interface ProductGalleryProps {
images: string[];
alt: string;
}
const Chevron = ({ direction }: { direction: 'left' | 'right' }) => (
<svg
className="h-5 w-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<path d={direction === 'left' ? 'M15 18l-6-6 6-6' : 'M9 18l6-6-6-6'} />
</svg>
);
/**
* The square photo on a product card, with arrows and dots when there's more than one shot.
*
* Replaces react-awesome-slider, which hasn't been published since 2020 and pins peer deps to
* React 16 — the same job in a fraction of the code, and one less unmaintained dependency in a
* build we gate on CVEs. Behaviour is what the old cards did: one image at a time, square crop,
* arrows only when they'd do something.
*/
/** Past this many pixels a horizontal drag counts as a swipe rather than a tap or a page scroll. */
const SWIPE_THRESHOLD = 40;
const ProductGallery: React.FC<ProductGalleryProps> = ({ images, alt }) => {
const [index, setIndex] = useState(0);
// Filtering swaps the product under a reused component instance, so a stale index can point
// past the new list — every frame then renders at opacity-0 and the card goes blank. Reset
// during render (the React-sanctioned way to derive state from props) rather than in an effect,
// so the correct frame paints on the first pass instead of flashing an empty square.
const [renderedFor, setRenderedFor] = useState(images);
if (renderedFor !== images) {
setRenderedFor(images);
setIndex(0);
}
const many = images.length > 1;
const active = index < images.length ? index : 0;
const step = (delta: number) => setIndex((i) => (i + delta + images.length) % images.length);
// Swipe on touch devices and arrow keys — the react-awesome-slider this replaced had swipe, and
// the products page is browsed mostly on phones. Vertical drags are left alone so the page still
// scrolls through the card.
const touchStart = useRef<{ x: number; y: number } | null>(null);
const onTouchStart = (e: React.TouchEvent) => {
const t = e.touches[0];
touchStart.current = { x: t.clientX, y: t.clientY };
};
const onTouchEnd = (e: React.TouchEvent) => {
const start = touchStart.current;
touchStart.current = null;
if (!start || !many) return;
const t = e.changedTouches[0];
const dx = t.clientX - start.x;
const dy = t.clientY - start.y;
if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) <= Math.abs(dy)) return;
step(dx < 0 ? 1 : -1);
};
const arrowClass =
'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';
return (
<div
className="relative aspect-square bg-bakery-100"
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}
onKeyDown={many ? (e) => {
if (e.key === 'ArrowLeft') { e.preventDefault(); step(-1); }
if (e.key === 'ArrowRight') { e.preventDefault(); step(1); }
} : undefined}
tabIndex={many ? 0 : undefined}
role={many ? 'group' : undefined}
aria-roledescription={many ? 'carousel' : undefined}
aria-label={many ? `${alt} — ${images.length} photos` : undefined}
>
{images.map((src, i) => (
<img
key={src}
src={src}
// Only the visible frame gets described; the rest are decorative duplicates of the same item.
alt={i === 0 ? alt : ''}
loading="lazy"
decoding="async"
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 motion-reduce:transition-none ${
i === active ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
aria-hidden={i === active ? undefined : true}
/>
))}
{many && (
<>
<button
type="button"
onClick={() => step(-1)}
aria-label={`Previous photo of ${alt}`}
className={`${arrowClass} left-2`}
>
<Chevron direction="left" />
</button>
<button
type="button"
onClick={() => step(1)}
aria-label={`Next photo of ${alt}`}
className={`${arrowClass} right-2`}
>
<Chevron direction="right" />
</button>
{/* Dots: how many photos there are, and which one you're on. */}
<div className="absolute inset-x-0 bottom-3 flex justify-center gap-1.5">
{images.map((src, i) => (
<button
key={src}
type="button"
onClick={() => setIndex(i)}
aria-label={`Show photo ${i + 1} of ${images.length} of ${alt}`}
aria-current={i === active ? 'true' : undefined}
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 ${
i === active ? 'w-4 bg-white' : 'w-1.5 bg-white/60 hover:bg-white/80'
}`}
/>
))}
</div>
</>
)}
</div>
);
};
export default ProductGallery;
frontend/src/fonts/AdBhashitha.woff
BIN
View File
Binary file not shown.
frontend/src/fonts/LeJour-Script.woff
BIN
View File
Binary file not shown.
frontend/src/fonts/raleway-latin.woff2
BIN
View File
Binary file not shown.
frontend/src/index.css
+12 -84
View File
@@ -1,85 +1,13 @@
/*
* The admin screen's stylesheet.
*
* The brand itself lives in ./tokens.css, shared with the server-rendered
* site's stylesheet — one palette, one set of fonts, and no drift between the shop front and the
* screen that edits it. Everything else the admin needs comes from utility classes in the React
* source, which Tailwind finds by scanning it.
*
* The fonts are served by Spring from /fonts rather than bundled here, so both stylesheets can name
* the same URL.
*/
@import "tailwindcss";
/* Brand fonts ship with the app rather than coming from Google — same look, no third-party request
on every page load. Raleway is the variable latin subset. */
@font-face {
font-family: 'Raleway';
src: url('./fonts/raleway-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'AdBhashitha';
src: url('./fonts/AdBhashitha.woff') format('woff');
font-display: swap;
}
@font-face {
font-family: 'LeJour Script';
src: url('./fonts/LeJour-Script.woff') format('woff');
font-display: swap;
}
@theme {
/* Sage & Cream. 500 is the signature sage; 600+ are the darker tones that white text can actually
sit on (500 on white is only 3.6:1 — too low). */
--color-bakery-50: #faf7f0;
--color-bakery-100: #f0efe3;
--color-bakery-200: #dde0cc;
--color-bakery-300: #c3cbae;
--color-bakery-400: #a2ae8b;
--color-bakery-500: #7c8b6b;
--color-bakery-600: #5f6f52;
--color-bakery-700: #4a5740;
--color-bakery-800: #37412f;
--color-bakery-900: #232b1e;
--font-sans: 'Raleway', ui-sans-serif, system-ui, sans-serif;
--font-adbhashitha: 'AdBhashitha', ui-serif, Georgia, serif;
--font-lejour: 'LeJour Script', ui-serif, Georgia, cursive;
}
html {
scroll-behavior: smooth;
/* Nothing on this site is meant to scroll sideways. */
overflow-x: hidden;
}
body {
background-color: var(--color-bakery-50);
color: var(--color-bakery-900);
font-family: var(--font-sans);
overflow-x: hidden;
opacity: 0;
animation: fadeIn 0.5s ease-in forwards;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
body { animation: none; opacity: 1; }
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* In @layer components, matching the old site. That ordering matters: a utility like `px-4` — which
the markup applies alongside `container` on nearly every section — has to win over this, or every
gutter on the site silently widens. */
@layer components {
.container {
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}
}
::selection {
background-color: var(--color-bakery-300);
color: var(--color-bakery-900);
}
@import "./tokens.css";
frontend/src/lib/assets.ts
-17
View File
@@ -1,17 +0,0 @@
/**
* Photos live in the public MinIO bucket, not in the app image — 50 MB of JPEGs has no business
* inside a container we redeploy on every commit, and the bucket serves them with a year-long
* cache. Small brand assets (logo marks, favicons) stay local so first paint needs nothing external.
*/
const BASE = (import.meta.env.VITE_ASSET_BASE ?? 'https://s3.thebennett.net/itsthevine').replace(/\/$/, '');
/**
* `photo('products/scones.webp')` -> absolute bucket URL.
*
* Segments are encoded individually: some gallery files have spaces in their names ("Cinnamon
* Rolls.webp") and a raw space in a URL doesn't fetch.
*/
export function photo(key: string): string {
const path = key.replace(/^\//, '').split('/').map(encodeURIComponent).join('/');
return `${BASE}/images/${path}`;
}
frontend/src/main.tsx
+2 -4
View File
@@ -1,13 +1,11 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';
// No BrowserRouter: this shell is served at /admin and nowhere else, so there is nothing to route.
createRoot(document.getElementById('root')!).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
<App />
</StrictMode>,
);
frontend/src/pages/Contact.tsx
-127
View File
@@ -1,127 +0,0 @@
import { useState } from 'react';
import { csrfHeader } from '@/lib/api';
type Status = 'idle' | 'sending' | 'sent' | 'error';
const ContactPage = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const [status, setStatus] = useState<Status>('idle');
const [error, setError] = useState('');
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setStatus('sending');
setError('');
try {
// csrfHeader() is empty unless security is switched on, so this posts the same as it always
// has on a deployment with no identity provider — and keeps working once one is configured,
// where an unaccompanied POST would otherwise be rejected.
const res = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json', ...csrfHeader() },
body: JSON.stringify(formData),
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Could not send the message.');
setStatus('sent');
setFormData({ name: '', email: '', message: '' });
} catch (err) {
// Never claim success we did not get. Tell them, and give them the phone number.
setStatus('error');
setError(err instanceof Error ? err.message : 'Could not send the message.');
}
};
return (
<div className="min-h-screen bg-bakery-50">
{/* Page header */}
<header className="container mx-auto px-4 pt-14 pb-10 md:pt-20 md:pb-12 text-center">
<h1 className="font-adbhashitha text-4xl md:text-5xl text-bakery-900">
Contact us
</h1>
</header>
{/* Contact Form Section */}
<div className="container mx-auto px-4 pb-16 md:pb-24">
<div className="max-w-2xl mx-auto bg-white p-8 md:p-10 rounded-3xl shadow-xs">
<h2 className="font-adbhashitha text-2xl md:text-3xl text-bakery-900 mb-2">Get in touch</h2>
<p className="text-bakery-700 mb-8">
Or call us: <a href="tel:+13097010660" className="underline underline-offset-4 hover:text-bakery-600">(309) 701-0660</a>
</p>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label className="block text-sm font-medium text-bakery-800 mb-2" htmlFor="name">Name</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
className="w-full px-4 py-2.5 bg-bakery-50 border border-bakery-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-bakery-500 focus:border-bakery-500"
required
/>
</div>
<div className="mb-4">
<label className="block text-sm font-medium text-bakery-800 mb-2" htmlFor="email">Email</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
className="w-full px-4 py-2.5 bg-bakery-50 border border-bakery-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-bakery-500 focus:border-bakery-500"
required
/>
</div>
<div className="mb-4">
<label className="block text-sm font-medium text-bakery-800 mb-2" htmlFor="message">Message</label>
<textarea
id="message"
name="message"
value={formData.message}
onChange={handleChange}
className="w-full px-4 py-2.5 bg-bakery-50 border border-bakery-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-bakery-500 focus:border-bakery-500"
rows={5}
required
/>
</div>
<div className="flex flex-col items-center gap-4">
<button
type="submit"
disabled={status === 'sending'}
className="px-8 py-3 bg-bakery-600 text-white rounded-full tracking-wide hover:bg-bakery-700 transition-colors disabled:opacity-60"
>
{status === 'sending' ? 'Sending...' : 'Send message'}
</button>
{status === 'sent' && (
<p role="status" className="text-bakery-700">
Thanks. Your message is on its way, and we will get back to you.
</p>
)}
{status === 'error' && (
<p role="alert" className="text-center text-red-700">
{error} Please call us on{' '}
<a href="tel:+13097010660" className="underline underline-offset-4">(309) 701-0660</a>.
</p>
)}
</div>
</form>
</div>
</div>
</div>
);
};
export default ContactPage;
frontend/src/pages/History.tsx
-59
View File
@@ -1,59 +0,0 @@
const HistoryPage = () => {
return (
<div className="bg-bakery-50">
{/* Page header */}
<header className="container mx-auto px-4 pt-14 pb-10 md:pt-20 md:pb-12 text-center">
<h1 className="font-adbhashitha text-4xl md:text-5xl text-bakery-900">
Our story
</h1>
</header>
{/* Story */}
<div className="container mx-auto px-4 pb-16 md:pb-24">
<div className="max-w-2xl mx-auto space-y-12">
<section>
<h2 className="font-adbhashitha text-2xl md:text-3xl text-bakery-900 mb-4">How it started</h2>
<p className="text-bakery-800 leading-relaxed">
Morissa Bennett opened The Vine in 2024, at 215 E Main Street, in the middle of downtown
Princeville. The plan was not complicated. Bake it ourselves, sell it ourselves, and keep
enough tables that nobody feels rushed out the door.
</p>
</section>
<section>
<h2 className="font-adbhashitha text-2xl md:text-3xl text-bakery-900 mb-4">What we make</h2>
<p className="text-bakery-800 leading-relaxed">
We opened with coffee and pastries. The menu kept growing. Now there are cinnamon rolls
and caramel rolls, scones, cookie bars, macarons, brownies, and pies, plus sandwiches and
paninis once the lunch crowd shows up.
</p>
</section>
<section>
<h2 className="font-adbhashitha text-2xl md:text-3xl text-bakery-900 mb-4">The cakes are the fun part</h2>
<p className="text-bakery-800 leading-relaxed">
Cakes and decorated cookies are made to order, which means we mostly bake whatever
Princeville is celebrating that week. We have done a tractor, a cow, a 76th birthday, a
retirement, a wedding, and a cake for the class of 1964. We have iced sugar cookies for
the cross country team and for a bridal party. If you can describe it, we will have a go
at it.
</p>
</section>
<section>
<h2 className="font-adbhashitha text-2xl md:text-3xl text-bakery-900 mb-4">Around town</h2>
<p className="text-bakery-800 leading-relaxed">
We turn out for Christmas in the Village every year and for other civic events, and the
Princeville Civic Association counts us among the town&apos;s small businesses. Enjoy
Illinois and Discover Peoria have both pointed travelers our way. If you are one of them,
we open at 7:00am, Tuesday through Saturday.
</p>
</section>
</div>
</div>
</div>
);
};
export default HistoryPage;
frontend/src/pages/Home.tsx
-133
View File
@@ -1,133 +0,0 @@
import { Link } from 'react-router-dom';
import Logo from '@/components/Logo';
import { photo } from '@/lib/assets';
const HomePage = () => {
return (
<div>
{/* Hero — centred lockup on a sage wash. */}
<section className="relative flex items-center min-h-[78svh] py-20 md:py-28 bg-bakery-900 text-white overflow-hidden">
{/* Softened on purpose: the storefront's own painted sign sits right behind
the logo, so a sharp photo makes you read the name twice. scale-110 hides
the blur's feathered edges. */}
<img
src={photo('gallery/Outside.webp')}
alt=""
fetchPriority="high"
className="absolute inset-0 w-full h-full object-cover object-bottom blur-[3px] scale-110"
/>
{/* Sage wash rather than a neutral black scrim — the tint is the identity. */}
<div className="absolute inset-0 bg-bakery-900/80" />
<div className="absolute inset-0 bg-gradient-to-t from-bakery-900 via-bakery-800/60 to-bakery-900/80" />
{/* w-full/min-w-0 keep this flex item from sizing to its max-content
width and blowing out the page on narrow screens. */}
<div className="relative container mx-auto px-4 w-full min-w-0">
<div className="max-w-3xl mx-auto text-center">
<Logo size="lg" linked={false} className="text-bakery-50 mb-10 justify-center" />
<p className="text-lg sm:text-xl text-bakery-100 mb-10 text-balance leading-relaxed">
A coffeehouse and bakery in downtown Princeville, Illinois.
</p>
<div className="flex flex-col sm:flex-row gap-3 justify-center">
<Link
to="/products"
className="bg-bakery-50 hover:bg-white text-bakery-900 px-8 py-3.5 rounded-full font-medium tracking-wide inline-block transition shadow-lg"
>
See the menu
</Link>
<a
href="#visit"
className="border border-bakery-200/60 hover:bg-bakery-50/10 text-bakery-50 px-8 py-3.5 rounded-full font-medium tracking-wide inline-block transition"
>
Visit us
</a>
</div>
</div>
</div>
</section>
{/* Our Specialties */}
<section className="py-16 md:py-24 bg-bakery-50">
<div className="container mx-auto px-4">
<h2 className="font-adbhashitha text-3xl md:text-4xl text-center text-bakery-900 mb-12">What people come in for</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
{['Cinnamon Rolls', 'Sugar Cookies', 'Cakes'].map((item) => (
<div
key={item}
className="group text-center bg-white rounded-3xl overflow-hidden shadow-xs hover:shadow-lg hover:-translate-y-1 transition duration-300"
>
<div className="overflow-hidden">
<img
src={photo(`gallery/${item}.webp`)}
alt={item}
width={600}
height={400}
loading="lazy"
className="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-105"
/>
</div>
<h3 className="font-adbhashitha text-xl md:text-2xl text-bakery-800 py-6 tracking-wide">{item}</h3>
</div>
))}
</div>
</div>
</section>
{/* About Us */}
<section className="py-16 md:py-24 bg-bakery-800 text-white">
<div className="container mx-auto px-4">
<div className="max-w-3xl mx-auto text-center">
<h2 className="font-adbhashitha text-3xl md:text-4xl mb-8" style={{ letterSpacing: '0.01em' }}>Our story</h2>
<p className="text-base md:text-lg text-bakery-100 mb-8 leading-relaxed">
Morissa Bennett opened The Vine in 2024. We bake in our own kitchen on Main Street:
cinnamon rolls, cookies, custom cakes, sandwiches, paninis, and coffee.
</p>
<Link to="/history" className="text-white hover:text-bakery-200 font-semibold underline underline-offset-4">
Read our story
</Link>
</div>
</div>
</section>
{/* Hours & Contact */}
<section id="visit" className="py-16 md:py-24 bg-bakery-50 scroll-mt-24">
<div className="container mx-auto px-4">
<h2 className="font-adbhashitha text-3xl md:text-4xl text-center text-bakery-900 mb-12">Visit us</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 max-w-4xl mx-auto">
<div className="bg-white rounded-3xl p-6 md:p-8">
<h2 className="font-adbhashitha text-2xl md:text-3xl text-bakery-900 mb-6">Our hours</h2>
<ul className="space-y-3 text-bakery-800">
<li className="flex justify-between gap-4">
<span>Tuesday – Friday</span>
<span className="font-medium whitespace-nowrap">7:00am – 2:00pm</span>
</li>
<li className="flex justify-between gap-4">
<span>Saturday</span>
<span className="font-medium whitespace-nowrap">7:00am – 12:00pm</span>
</li>
<li className="flex justify-between gap-4">
<span>Sunday – Monday</span>
<span className="font-medium">Closed</span>
</li>
</ul>
</div>
<div className="bg-white rounded-3xl p-6 md:p-8">
<h2 className="font-adbhashitha text-2xl md:text-3xl text-bakery-900 mb-6">Find us</h2>
<address className="not-italic space-y-3 text-bakery-800">
<p>215 E Main Street<br />Princeville, IL 61559</p>
<p>
<a href="tel:+13097010660" className="hover:text-bakery-600 underline underline-offset-4">(309) 701-0660</a>
</p>
<p className="break-words">
<a href="mailto:[email protected]" className="hover:text-bakery-600 underline underline-offset-4">contact@itsthevine.com</a>
</p>
</address>
</div>
</div>
</div>
</section>
</div>
);
};
export default HomePage;
frontend/src/pages/NotFound.tsx
-30
View File
@@ -1,30 +0,0 @@
import { Link } from 'react-router-dom';
const NotFoundPage = () => (
<div className="bg-bakery-50">
<div className="container mx-auto px-4 py-24 md:py-32 text-center">
<h1 className="font-adbhashitha text-4xl md:text-5xl text-bakery-900 mb-6">
We could not find that page
</h1>
<p className="text-bakery-800 mb-10">
It may have moved. The menu, our story, and how to reach us are all still here.
</p>
<div className="flex flex-col sm:flex-row gap-3 justify-center">
<Link
to="/"
className="bg-bakery-600 hover:bg-bakery-700 text-white px-8 py-3.5 rounded-full font-medium tracking-wide inline-block transition"
>
Back home
</Link>
<Link
to="/products"
className="border border-bakery-300 hover:bg-bakery-100 text-bakery-700 px-8 py-3.5 rounded-full font-medium tracking-wide inline-block transition"
>
See the menu
</Link>
</div>
</div>
</div>
);
export default NotFoundPage;
frontend/src/pages/Products.tsx
-94
View File
@@ -1,94 +0,0 @@
import { useEffect, useState } from 'react';
import { fetchCategories, fetchProducts, type Product } from '@/lib/api';
import ProductGallery from '@/components/ProductGallery';
const ProductsPage = () => {
const [categories, setCategories] = useState<string[]>(['All']);
const [selectedCategory, setSelectedCategory] = useState('All');
const [products, setProducts] = useState<Product[]>([]);
const [failed, setFailed] = useState(false);
useEffect(() => {
fetchCategories().then(setCategories).catch(() => setFailed(true));
}, []);
// The filter is applied by the API, not in the browser — one source of truth for what's in a
// category. `ignore` drops a slow response that lost the race to a newer click.
useEffect(() => {
let ignore = false;
setFailed(false);
fetchProducts(selectedCategory)
.then((p) => { if (!ignore) setProducts(p); })
.catch(() => { if (!ignore) setFailed(true); });
return () => { ignore = true; };
}, [selectedCategory]);
return (
<div className="min-h-screen bg-bakery-50">
{/* Page header */}
<header className="container mx-auto px-4 pt-14 pb-10 md:pt-20 md:pb-12 text-center">
<h1 className="font-adbhashitha text-4xl md:text-5xl text-bakery-900">
Our products
</h1>
</header>
{/* Products Section */}
<div className="container mx-auto px-4 pb-16">
{/* Categories */}
<div className="flex flex-wrap justify-center gap-4 mb-12">
{categories.map((category) => (
<button
key={category}
type="button"
onClick={() => setSelectedCategory(category)}
className={`px-6 py-2 rounded-full border text-sm uppercase tracking-[0.12em] transition-colors ${
selectedCategory === category
? 'bg-bakery-600 text-white border-bakery-600'
: 'bg-white border-bakery-300 text-bakery-700 hover:bg-bakery-100'
}`}
>
{category}
</button>
))}
</div>
{failed && (
<p role="alert" className="text-center text-bakery-800">
We could not load the menu just now. Please refresh, or call us on{' '}
<a href="tel:+13097010660" className="underline underline-offset-4">(309) 701-0660</a>.
</p>
)}
{/* Products Grid — deliberately unanimated. Filtering used to run a `layout` reflow plus
an enter/exit fade on every card, which on a 40-card grid reads as the page lurching
rather than responding. Swapping the list outright is instant, and the only motion
left is the shadow on hover. */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{products.map((product) => (
<div
key={product.id}
className="group bg-white rounded-3xl overflow-hidden shadow-xs transition-shadow duration-300 hover:shadow-lg"
>
{/* Image Container */}
<div className="relative w-full overflow-hidden">
<ProductGallery images={product.images} alt={product.name} />
</div>
{/* Content */}
<div className="p-6 text-center">
<h3 className="font-adbhashitha text-xl text-bakery-900 mb-2 tracking-wide">
{product.name}
</h3>
<span className="text-xs uppercase tracking-[0.15em] text-bakery-600">
{product.category}
</span>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default ProductsPage;
frontend/src/tokens.css
+140
View File
@@ -0,0 +1,140 @@
/*
* The brand: the sage-and-cream palette, the three fonts, and the base element rules.
*
* Shared deliberately. Two stylesheets are compiled from this — the server-rendered site
* (src/main/tailwind/site.css, scanning the Thymeleaf templates) and the admin SPA
* (frontend/src/index.css, scanning the React source) — and if the tokens were copied into both, the
* two halves of the same site would drift a shade apart the first time one of them was edited.
*
* Fonts are served by Spring from /fonts, not bundled by Vite, so both stylesheets can name the same
* URL and the browser caches one copy.
*/
@font-face {
font-family: 'Raleway';
src: url('/fonts/raleway-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'AdBhashitha';
src: url('/fonts/AdBhashitha.woff') format('woff');
font-display: swap;
}
@font-face {
font-family: 'LeJour Script';
src: url('/fonts/LeJour-Script.woff') format('woff');
font-display: swap;
}
@theme {
/* Sage & Cream. 500 is the signature sage; 600+ are the darker tones that white text can actually
sit on (500 on white is only 3.6:1 — too low). */
--color-bakery-50: #faf7f0;
--color-bakery-100: #f0efe3;
--color-bakery-200: #dde0cc;
--color-bakery-300: #c3cbae;
--color-bakery-400: #a2ae8b;
--color-bakery-500: #7c8b6b;
--color-bakery-600: #5f6f52;
--color-bakery-700: #4a5740;
--color-bakery-800: #37412f;
--color-bakery-900: #232b1e;
--font-sans: 'Raleway', ui-sans-serif, system-ui, sans-serif;
--font-adbhashitha: 'AdBhashitha', ui-serif, Georgia, serif;
--font-lejour: 'LeJour Script', ui-serif, Georgia, cursive;
}
html {
scroll-behavior: smooth;
/* Nothing on this site is meant to scroll sideways. */
overflow-x: hidden;
}
body {
background-color: var(--color-bakery-50);
color: var(--color-bakery-900);
font-family: var(--font-sans);
overflow-x: hidden;
opacity: 0;
animation: fadeIn 0.5s ease-in forwards;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
body { animation: none; opacity: 1; }
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* In @layer components, matching the old site. That ordering matters: a utility like `px-4` — which
the markup applies alongside `container` on nearly every section — has to win over this, or every
gutter on the site silently widens. */
@layer components {
.container {
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}
/*
* The two branch marks of the wordmark, as masks rather than inline SVG.
*
* They have to take their colour from the surrounding text — sage in the header, cream on the hero
* and in the footer — which an <img> cannot do. React solved that by inlining them through svgr,
* but these files are 31 KB each and the lockup appears up to three times on a page: inlining them
* in server-rendered HTML would add ~190 KB to every response. A mask over `currentColor` keeps the
* tinting, keeps the files cacheable, and costs two requests once.
*/
.mark {
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.mark-r {
-webkit-mask-image: url('/images/logo_R.svg');
mask-image: url('/images/logo_R.svg');
}
.mark-l {
-webkit-mask-image: url('/images/logo_L.svg');
mask-image: url('/images/logo_L.svg');
}
/*
* The photo strip on a product card scrolls, but a scrollbar across the bottom of a photo is not part
* of the design. Hiding it is safe here because the strip is not the only way through the photos: it
* snaps, it takes arrow keys, and the arrows and dots are on top of it.
*/
.no-scrollbar {
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
}
/* The mobile menu is a <details>; its default disclosure triangle would sit next to the hamburger. */
summary {
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
::selection {
background-color: var(--color-bakery-300);
color: var(--color-bakery-900);
}
frontend/tsconfig.json
+1 -1
View File
@@ -5,7 +5,7 @@
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"types": ["vite/client", "vite-plugin-svgr/client", "node"],
"types": ["vite/client", "node"],
"strict": true,
"skipLibCheck": true,
"noEmit": true,
frontend/vite.config.ts
+11 -6
View File
@@ -1,26 +1,31 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
import svgr from 'vite-plugin-svgr';
import path from 'node:path';
/**
* Builds the admin screen, and only that. The public site is server-rendered by Spring and never comes
* through here — its stylesheet is compiled from the Thymeleaf templates by the Tailwind CLI
* (`npm run build:css`).
*
* vite-plugin-svgr went with the public pages: the logo marks were inlined through it so they could
* take their colour from the surrounding text, and the server-rendered header does that with a CSS
* mask instead.
*/
export default defineConfig({
// svgr keeps the `import Logo from './x.svg?react'` style the old @svgr/webpack setup used, so the
// logo marks stay inline SVG and inherit currentColor.
plugins: [react(), tailwindcss(), svgr()],
plugins: [react(), tailwindcss()],
resolve: {
alias: { '@': path.resolve(__dirname, './src') },
},
server: {
port: 2024,
// Backend on :8080 during development; the built SPA is served by Spring, same origin.
// Backend on :8080 during development; the built admin is served by Spring, same origin.
proxy: {
'/api': 'http://localhost:8080',
},
},
build: {
outDir: 'dist',
// The photos live in MinIO, so what's left is small — a warning here would mean a real regression.
chunkSizeWarningLimit: 600,
},
});