Rockville Brews

The site is prerendered with vite-ssg, which renders all twelve routes in one Node process. A conventional module-level i18n instance shares state across those renders, so a locale set while rendering /es/menu could bleed into whatever page rendered next.

We wrote a ~120-line localization layer instead of installing one. The locale is a pure function of the URL, the dictionary is picked per render, blank Spanish strings fall back to English, and the dev server warns about any key still in English.

Redirecting to /es after the app boots would mean hydrating English markup, then swapping every string, the URL, and the html lang attribute after first paint.

A small inline script runs before anything paints: it honors an explicit EN/ES choice from the switcher on every visit, otherwise checks the browser language exactly once, and redirects with replace() so the back button still works. URLs that already name a language are never touched.

Literal translations pushed the hero headline to five lines, wrapped the five-item navigation, and broke the happy hour band.

Strings were rewritten for the space rather than translated word for word, the nav uses "Prensa" instead of "Noticias", a deliberately tiny :lang(es) block relaxes a few widths, and the mobile overlay nav kicks in at 1040px instead of 860px.

Every prerendered page shares one index.html, so the noscript fallback and keywords meta were English on Spanish pages, and noscript can't become a Vue component without a hydration mismatch.

A build step rewrites those two blocks on every /es page after Vue has rendered it, while titles, descriptions, canonicals, hreflang, og:locale, and Menu schema are generated per language on each page.

Google drops hreflang pairings that aren't reciprocal, and two menu pages claiming the same structured-data identity get merged or dropped.

The sitemap lists all twelve URLs with their full alternate set, including themselves and x-default, and the Menu schema gets its own @id and inLanguage per locale.

A full-bleed autoplay video is heavy, and iOS in Low Power Mode refuses to autoplay even muted, inline video.

The video ships with no src and preload="none"; the right file (720p under 900px wide, 1080p above) is attached after mount, skipped entirely under reduced motion or data saver, paused when it leaves the viewport, and retried once on the first touch or scroll for iOS.

The hero stack measured about 803px tall regardless of viewport, so laptops shorter than that showed the headline and no button.

Height-based media queries (under 872px and under 640px tall, width-guarded so portrait phones keep the width-driven scale) tighten the hero spacing and type so the headline and the CTA always share the screen.

A long menu is hard to navigate on a small screen, and using scrollIntoView on the category pill bar yanked the whole page vertically mid-scroll.

A sticky, horizontally scrollable pill bar with a throttled scrollspy; the active pill is centered by scrolling only the bar, never the page, and anchors account for the header and bar heights.

The first prototype used Three.js for an animated hero, which dominated the bundle for a decorative effect.

Three.js was dropped for a video hero plus CSS, and route components load on demand. The shipped app is about 68 kB of JavaScript and 8 kB of CSS gzipped, plus route chunks of 0.5–2 kB.

The owners needed to review the real site on the real domain while the public still saw a holding page.

A single environment flag swaps the app for a coming-soon page. A private ?preview= link unlocks the full site for that browser session, strips the token from the URL so it can't leak into analytics or screenshots, and shows a preview bar with an exit button.

Restaurant sites are notorious for advertising last month's event, and a build running in UTC would even retire an Eastern-time event at 8pm.

Each event carries ISO dates with their own time zone offset; the list is filtered at build time and again in the browser, so a long-lived deploy self-corrects and nothing expired ever shows.

A brand-new site with an ad campaign behind it has to read as real and currently open, but copying Google ratings into schema violates Google's policies, and there were no testimonials to use.

Trust comes from structure instead: complete business, menu, event, and FAQ schema; the real address, hours, phone, and map; real photography; and links to the Google, Yelp, and Instagram listings. No invented reviews or ratings.

The prerender emits menu.html while the router and every link use /menu, so direct visits and refreshes on sub-pages 404'd on the host.

Vercel's cleanUrls setting maps each route to its HTML file, and the project README documents why that one line is load-bearing.