Skip to content

feat(home): replace hero image with a real, highlighted code block #878

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yusukebe merged 4 commits into from
Jun 28, 2026
Merged

feat(home): replace hero image with a real, highlighted code block #878

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
54ebfa7
feat(home): replace hero image with a real, highlighted code block
martinezharo Jun 26, 2026
3e03129
chore(home): drop the now-unused code.webp hero image
martinezharo Jun 26, 2026
bf79c32
feat(home): add shadow to hero code block and darken light-mode backg…
martinezharo Jun 27, 2026
cab9107
fix(home): keep kawaii hero logo at its original size and position
martinezharo Jun 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 2 additions & 37 deletions .vitepress/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,11 +360,6 @@ export const sidebarsExamples = (): DefaultTheme.SidebarItem[] => [
]

const kawaiiModeScript = `;(() => {
const defaultImage = '/images/code.webp'
const kawaiiImage = '/images/hono-kawaii.png'
const kawaiiAlt =
'A Kawaii Version of the Hono Logo. The first "o" is replaced with a flame, with japanese characters in the bottom right, and a JSX fragment closing tag above the flame.'

const getQueryMode = () =>
new URLSearchParams(window.location.search).get('kawaii')

Expand Down Expand Up @@ -392,40 +387,10 @@ const kawaiiModeScript = `;(() => {
return mode === 'true' || (mode !== 'false' && getStoredMode())
}

const setDocumentMode = (enabled) => {
document.documentElement.classList.toggle('kawaii-mode', enabled)
}

const syncHeroImage = (enabled) => {
document.querySelectorAll('.VPImage.image-src').forEach((img) => {
if (!(img instanceof HTMLImageElement)) {
return
}

img.src = enabled ? kawaiiImage : defaultImage
img.classList.toggle('kawaii', enabled)

if (enabled) {
img.alt = kawaiiAlt
}
})
}

const sync = () => {
const enabled = isKawaiiMode()
setDocumentMode(enabled)
syncHeroImage(enabled)
}

// Toggle the class before paint; the hero swap itself is handled in CSS.
try {
setDocumentMode(isKawaiiMode())
document.documentElement.classList.toggle('kawaii-mode', isKawaiiMode())
} catch (err) {}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', sync)
} else {
sync()
}
})()`

export default defineConfig({
Expand Down
14 changes: 14 additions & 0 deletions .vitepress/theme/Layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
import HeroImage from './components/HeroImage.vue'

const { Layout } = DefaultTheme
</script>

<template>
<Layout>
<template #home-hero-image>
<HeroImage />
</template>
</Layout>
</template>
37 changes: 37 additions & 0 deletions .vitepress/theme/components/HeroImage.vue
View file
Open in desktop
Comment thread
yusukebe marked this conversation as resolved.
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<script setup lang="ts">
// Hero snippet highlighted at build time and frozen as static HTML, so there's
// no client-side highlighting (and no flash). Generated with shiki — the engine
// VitePress uses — and the same themes from `.vitepress/config.ts`:
//
// codeToHtml(snippet, {
// lang: 'ts',
// themes: { light: 'github-light', dark: 'github-dark' },
// defaultColor: false,
// })
//
// Re-run that and paste the result here to change the snippet.
const codeHtml = `<pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { Hono } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'hono'</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Hono</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">c</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> c.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Hello Hono!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">))</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> app</span></span></code></pre>`

// Kept in sync with the kawaii image handled by the toggle in `.vitepress/config.ts`.
const kawaiiAlt =
'A Kawaii Version of the Hono Logo. The first "o" is replaced with a flame, with japanese characters in the bottom right, and a JSX fragment closing tag above the flame.'
</script>

<template>
<div class="hero-image-slot">
<div class="hero-code-window">
<div class="hero-code-titlebar" aria-hidden="true">
<span class="hero-code-dot hero-code-dot--red" />
<span class="hero-code-dot hero-code-dot--yellow" />
<span class="hero-code-dot hero-code-dot--green" />
</div>
<div class="hero-code-body" v-html="codeHtml" />
</div>
<img class="hero-kawaii" src="/images/hono-kawaii.png" :alt="kawaiiAlt" />
</div>
</template>
97 changes: 93 additions & 4 deletions .vitepress/theme/custom.css
View file
Open in desktop

@yusukebe yusukebe Jun 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the contrast between the code background and the overall background is too subtle. How about making the background of the code darker?

Image

@martinezharo martinezharo Jun 26, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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		 Captura de pantalla 2026-06-27 002604
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)		 Captura de pantalla 2026-06-27 002142
3. Use the same appearance in both light and dark mode, closer to the original screenshot Captura de pantalla 2026-06-27 002814

@yusukebe yusukebe Jun 27, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@martinezharo

I love "2. Keep the current color + add a subtle shadow"! It's the best. I also want to see the dark-mode pattern.

@martinezharo martinezharo Jun 27, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Glad you like option 2! The shadow version is already committed.
Here's how it looks in dark mode:

Captura de pantalla 2026-06-27 094129

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.

Original file line number Diff line number Diff line change
Expand Up @@ -201,16 +201,105 @@ body {
-webkit-font-smoothing: subpixel-antialiased;
}

.VPImage.image-src {
/**
* Hero code window
* -------------------------------------------------------------------------- */
/* Lift the image column above the hero info column (.main has z-index:10), or the
code window's left edge sits under it and loses pointer events / text selection. */
.VPHero .image {
position: relative;
z-index: 11;
}

.hero-image-slot {
margin-top: 25px;
width: 100%;
max-width: 640px;
}

html.kawaii-mode .VPImage.image-src {
content: url('/images/hono-kawaii.png');
.hero-code-window {
container-type: inline-size;
display: flex;
flex-direction: column;
width: 100%;
border-radius: 0.75cqw;
overflow: hidden;
background-color: var(--vp-code-block-bg);
}

.hero-code-titlebar {
display: flex;
gap: 1.5cqw;
padding: 3.4cqw 3.75cqw;
user-select: none;
}

.hero-code-dot {
width: 2.5cqw;
height: 2.5cqw;
border-radius: 50%;
background-color: var(--vp-c-divider);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.hero-code-dot--red {
background-color: #ff5f56;
}

.hero-code-dot--yellow {
background-color: #ffbd2e;
}

.hero-code-dot--green {
background-color: #27c93f;
}

.hero-code-body {
overflow: hidden;
}

.hero-code-body .shiki {
margin: 0;
/* Padding lives on the <pre> itself so the whole padded area is selectable text. */
padding: 2.75cqw 3.75cqw 6cqw;
cursor: text;
background-color: transparent !important;
font-family: var(--vp-font-family-mono);
font-size: 3.6cqw;
line-height: 1.6;
}

.hero-code-body .shiki span {
color: var(--shiki-light);
}

html.dark .hero-code-body .shiki span {
color: var(--shiki-dark);
}

/* Kawaii mode swaps the code window for the kawaii logo (class toggled in config.ts). */
.hero-kawaii {
display: none;
max-width: 100%;
max-height: 320px;
margin: 0 auto;
}

html.kawaii-mode .hero-code-window {
display: none;
}

html.kawaii-mode .hero-kawaii {
display: block;
}

/* The slot's margin-top positions the code window; the kawaii logo doesn't want it. */
html.kawaii-mode .hero-image-slot {
margin-top: 0;
}

@media screen and (max-width: 960px) {
html:not(.kawaii-mode) .VPHero.has-image .image:not(:has(.kawaii)) {
html:not(.kawaii-mode) .VPHero.has-image .image {
display: none;
}
}
2 changes: 2 additions & 0 deletions .vitepress/theme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ import 'virtual:group-icons.css'
import '@shikijs/vitepress-twoslash/style.css'
import ThoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
import { useSyncedPackageManagerCodeGroups } from './use-synced-package-manager-code-groups'
import Layout from './Layout.vue'

export default {
extends: DefaultTheme,
Layout,
setup() {
const setup = (DefaultTheme as { setup?: () => void }).setup
setup?.()
Expand Down