feat(home): replace hero image with a real, highlighted code block#878
Conversation
Swap the static hero bitmap (code.webp) for a real, syntax-highlighted code snippet rendered as selectable text inside a macOS-style window. - Highlighted at build time with the site's own Shiki themes (github-light/github-dark) and frozen as static HTML: no client-side highlighting, so no flash/CLS. - Follows light/dark mode and reuses --vp-code-block-bg, matching the docs code blocks; no longer a dark-only bitmap. - Crisp at any DPI and the code is now selectable, copyable and accessible to screen readers, unlike the image it replaces. - Scales with its width (container query units + aspect-ratio) to keep the original footprint. - Kawaii mode is preserved unchanged (same image, size and position); its toggle script is simplified to only set the class before paint, with the swap now handled in CSS.
There was a problem hiding this comment.
I think the contrast between the code background and the overall background is too subtle. How about making the background of the code darker?
There was a problem hiding this comment.
Sure! I've prepared a few proposals. Happy to apply whichever you prefer.
Here are the options for the code block background in light mode:
| Option | Preview |
|---|---|
1. Darker background (#eff2f5)Going much darker starts to hurt the syntax-highlight contrast |
 |
| 2. Keep the current color + add a subtle shadow (If you like this one, I can make it light-mode-only or apply it to both modes) |
 |
| 3. Use the same appearance in both light and dark mode, closer to the original screenshot |  |
There was a problem hiding this comment.
I love "2. Keep the current color + add a subtle shadow"! It's the best. I also want to see the dark-mode pattern.
There was a problem hiding this comment.
Glad you like option 2! The shadow version is already committed.
Here's how it looks in dark mode:
Also, a heads-up: while making these changes I noticed this PR had
introduced a small regression in kawaii mode. The hero
logo had shifted slightly and changed size compared to the original on
mobile and some other devices. I've fixed it in cab9107, and I've
re-checked that it now matches the original across the widths I tested.
Let me know if anything else needs changing.
|
Hey @martinezharo ! Super cool! I added the comments. Please check! |
The hero image area now renders from the `home-hero-image` slot (heroImageSlotExists), so the `hero.image` frontmatter and the public/images/code.webp bitmap it pointed to are no longer needed.
The hero refactor sized the kawaii logo with max-width:100%, which shrank it on narrow image columns (tablets, iPad Pro) and top-aligned it below 960px. Restore the original hero image behaviour: absolutely centered at every breakpoint with a per-breakpoint max-height as the size limit.
|
very cool! |
|
Looks good! This is a great PR in the AI era, when many PRs are sloppy. I'm so glad. Thank you very much! |
3 participants
Summary
The hero currently shows a static bitmap (
public/images/code.webp) of the "Hello Hono" snippet. This PR replaces it with the same snippet rendered as real, syntax‑highlighted text inside a macOS‑style window.It's highlighted at build time with the site's own Shiki themes (
github-light/github-dark) and frozen as static HTML, so there is no client‑side highlighting.Before / After
Light mode
Dark mode
Why
--vp-code-block-bgand the github‑light/dark themes, exactly like the docs code blocks.code.webpimage request.cqw) with anaspect-ratio, so it keeps the original footprint and scales with its width.Kawaii mode is unchanged
The
?kawaii=trueeaster egg works exactly as before — same image, same size (510×320) and same position. In normal mode you get the code window; in kawaii mode it is swapped for the kawaii logo via CSS. The toggle script inconfig.tsis simplified to only set the class before paint (the swap itself is now handled in CSS).Notes
HeroImage.vuedocuments how to regenerate it if the example ever changes.HeroImage.vueusesv-htmlwith that static, build‑time HTML (no dynamic or user input → no XSS surface); it is done this way to avoid client‑side highlighting and the flash it causes.Verification
bun install --frozen-lockfile
bun run format
bun run build
Happy to iterate on the design or close this if it doesn't fit the direction you want for the hero. 🙏