website: sticky JS-disabled warning + preview:website:watch - #34
Merged
Merged
Conversation
The no-JS banner (added in #32) scrolled away with the page - not acceptable for the one warning that matters most here, since the whole site exists to demo the console and a visitor who can't get it to open needs to know why. It's now position: sticky, with a <noscript>-scoped <style> handing the sticky-top-0 spot to it instead of Nav's <header> (which would otherwise fight it for that spot while scrolling). Copy is punchier and points at the fix ("Enable it in your browser"). Also adds preview:website:watch, rebuilding the prerendered build on every source change (scripts/watch-preview.mjs, plain node:fs.watch, no new dependencies) and keeping one `vite preview` running - no hot reload, refresh manually, same trade preview:website already made. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two related follow-ups from #32/#33:
1. The no-JS banner is now sticky and more prominent. It previously scrolled away with the page — but this is the one warning on the site that matters most: the whole point of the page is the console demo, and a visitor with JS off who can't get it to open would reasonably read that as a bug rather than expected behavior. It's
position: stickynow, with a<noscript>-scoped<style>that sets Nav's<header>toposition: static— otherwise both elements fight over the stickytop: 0spot while scrolling and visually overlap. Copy is punchier and tells the visitor what to do about it ("Enable it in your browser to try it").2. Added
pnpm preview:website:watch.preview:website(#33) is a one-shot build-then-serve. This rebuilds automatically on every change underwebsite/srcorwebsite/index.htmland keeps onevite previewrunning —scripts/watch-preview.mjs, a plainnode:fs.watchloop with no new dependencies (nochokidar/concurrently), since a full rebuild here is well under a second. Still no hot reload — refresh the browser yourself after each rebuild — same tradepreview:websitealready made, just automated.Full reasoning for both in
DECISIONS.md.Test plan
dist/index.html— banner markup present,sticky/z-50classes compiled by Tailwind.preview:website:watch, edited a source file, confirmed it rebuilt automatically and the runningvite previewserved the updated output.pnpm run typecheckandpnpm run lint(oxlint, repo-wide) — no new warnings.🤖 Generated with Claude Code