ui: use Starlight primitives and refresh Echo theme - #462
Merged
Merged
Conversation
- Add FeatureCard, Starlight's Card markup with an <h3> title. Card renders its title as a <p>, which dropped the "Why Echo" titles from the heading outline. Pin the title's weight and letter-spacing so the global heading rule leaves the cards looking as before. - The install step now creates a module before `go get`, matching the quickstart.
- Get started: step 2 shows the complete hello-world server instead of the route excerpt, so `go run server.go` in step 3 works. On wide screens it takes the wide column beside Install and Run. Drop the now-unused route region. - Ecosystem cards: restore a hover state; the unlayered theme colors were overriding Starlight's LinkCard hover. - Hero terminal: hide the static command and output until the typing script starts, so they no longer flash before being cleared. No-JS and reduced-motion visitors still see the static state. - Search: take the locale from Starlight's route data instead of a second hardcoded locale list, and fail the build if a locale has no labels. - Ask AI: the modal logo now uses the same Starlight star as the header pill; update the comments that still said sparkle. - Remove margin resets that .not-content already makes dead.
- Search: build the empty-state launchpad on the client from a shared module again, so its markup ships once in the cached bundle instead of a <template> in every page (about 1.4 KB gzip per page). Icon paths are Starlight's own. Modified clicks on a quick link no longer close the palette. - Record the smaller page sizes in the performance baseline; the CORS pages are back inside the old master tolerance. - Sponsor button: drop LinkButton's markdown margins and 1.5rem icon so it is centred and the heart matches the text. - Hero terminal: gate the no-flash rule on a flag set by an inline script during parsing instead of @media (scripting), which older browsers ignore. - Get started: include the server through a file= fence so the source checks see it, instead of a raw import. - Footer: give the link columns a visually hidden h2 so they no longer sit under the sponsors heading. - Sponsor avatars: allow the GitHub avatar hosts so Astro optimizes them. - Merge the duplicated .hh-btn rule; unlayered CSS already beats Starlight's layered margins, so !important is not needed.
- Run step: `go mod tidy` before `go run`. The server imports echo/v5/middleware, which needs golang.org/x/time; `go get` of the root package does not record it, so the build failed with a missing go.sum entry. - Sponsor avatars: back to plain <img> with the ?size= 2x sources. Astro <Image> resized them to 1x (blurry on high-DPI screens) and made every build depend on downloading them from GitHub. - Search: quick links always close the palette, as Starlight does for its own result links; drop the observer's 10s cutoff, since Pagefind can mount late in a background tab. - Hero terminal: if the typing script never runs, reveal the static state after 2s instead of leaving the terminal blank. Read the command from the markup so it is written once. - FeatureCard owns its final styles instead of copying Card's and having terminal.css override them.
- Light theme: darken gray-3 to #42566a so secondary text again sits between gray-2 and caption gray-4 (7.3:1 vs 5.2:1 on the page background); the two were nearly the same color. - Hero buttons: size LinkButton's 1.5rem icons to the button text. - Search: bound the observer to 10s of visible time, so it still stops when Pagefind never mounts but a background tab gets the launchpad once shown. - Launchpad labels share the English key set as a type; drop a fallback the build already rules out and an ignore attribute Pagefind never sees.
vishr
changed the title
vishr
changed the title
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.
The homepage code/terminal frame had duplicate dividers and a boxed response, while custom cyan labels were too pale in light mode. This replaces the custom clipboard/frame, numbered steps, ecosystem cards, buttons, icons and deprecated badges with installed Starlight primitives. Feature cards use a small
FeatureCardcomponent (Starlight's Card markup with an<h3>title, since Card renders its title as a<p>). Search and Footer retain their native Starlight implementations; the empty-search quick links are built on the client fromsearch-launchpad.ts, so their markup ships once in the cached bundle rather than in every page's HTML. Sponsor avatars stay plain<img>hotlinks with 2x?size=sources, so builds do not download them.Refresh both themes with neutral surfaces, readable cyan text, stronger muted captions (light-mode gray-3/gray-4 kept distinct) and light-mode callout colors. The terminal has a static fallback for no-JS and reduced motion, and does not flash before the typing animation starts. Native copy controls are accessible, and long homepage code lines wrap on narrow screens. The get-started steps are runnable on a clean machine: step 2 includes the complete Hello World server through a
file=fence, and step 3 runsgo mod tidybeforego run server.go(the middleware package needsgolang.org/x/time, whichgo getof the root package does not record).Validation:
go vet ./...; stable/next production builds, source/translation checks, all 767 routes and internal links/assets, and performance checks pass at the head commit.go buildfails withoutgo mod tidyand succeeds with it.Performance baseline is intentionally updated. Homepage HTML grows from 8,601 to 11,580 gzip bytes and local assets from 19,546 to 27,418, mostly from Expressive Code blocks (including the complete server in step 2). CORS HTML grows from 11,390 to 12,671 gzip bytes, and local assets from 26,052 to 28,794 (the search quick links, labels and icons now live in the shared script). The external Phosphor icon font and
unpkg.comorigin are removed. Growth thresholds and checks remain unchanged; no dependencies are added.Follows merged #461. The Astro 7 / Starlight 0.42 upgrade and the quickstart go.sum fix landed on this branch after merge and moved to #463. Related to #456; this does not complete its remaining phases.