hoelee/hoelee-blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(design): bento featured grid, theme-aware cards, mono tag chips
Deploy / build (push) Successful in 44s
Details

Browse Source 
- Homepage (EN + ZH) featured section becomes a 2x2 Cyber-Bento grid: OG
  thumbnail at 65%/140px behind a scrim, category badge + metric pill,
  3-line-clamped description, arrow CTA; 1 column under 680px.
- Bento scrim/pill/dot now use theme tokens (--card-veil, --pill-bg,
  --bento-visual-opacity). The original hardcoded dark blend measured
  1.96:1 pill contrast on the light theme; now 6.56 dark / 6.10 light.
- Add the missing @keyframes bento-pulse (the doc claimed a pulsing dot,
  none existed), disabled under prefers-reduced-motion.
- Tag chips: mono face, hairline border, 4px radius; dashed border for
  non-link tags.
- ZH pages: brand links /zh/, in-post category tag links
  /zh/categories/<cat>/ instead of the EN route.
- project-state: B6 shipped note with measured readings; correct the
  prompts-catalog path claim (file is outside the repo).

Measured in headless Chrome at 1280px and 390px, EN + ZH: 4 cards,
2 cols / 1 col, scrollWidth-clientWidth 0, no card overflow, all four
-800.webp thumbs loaded at 800x420.
This commit is contained in:
hoelee committed 2026-10-18 15:56:40 +08:00
1 parent 3f63150d51
commit 6e9d58b8cc
6 files changed
+279 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/layouts/BaseLayout.astro
+1 -1
View File
@@ -176,7 +176,7 @@ const nav = isZh
<body>
<header class="site-header">
<nav class="nav" aria-label="Main">
<a class="brand" href="/">Mr<span class="dot"> Hoelee</span></a>
<a class="brand" href={isZh ? '/zh/' : '/'}>Mr<span class="dot"> Hoelee</span></a>
<a href={isZh ? '/zh/posts/' : '/posts/'}>{nav.posts}</a>
<a href={isZh ? '/zh/categories/' : '/categories/'}>{nav.categories}</a>
<a href={isZh ? '/zh/about/' : '/about/'}>{nav.about}</a>
src/pages/index.astro
+40 -7
View File
@@ -21,6 +21,13 @@ const FEATURED_SLUGS = [
const bySlug = new Map(posts.map((p) => [p.slug, p]));
const featured = FEATURED_SLUGS.map((s) => bySlug.get(s)).filter(Boolean);
const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
const featuredMetrics: Record<string, string> = {
'running-production-infrastructure-solo': '3 Hosts · 162 Containers',
'loop-engineering-without-a-coding-agent': '11 Cron Jobs · 8 Pure Loops',
'one-prometheus-for-unraid-synology-and-a-vps': '3 Hosts · 1 Prometheus',
'self-healing-digital-goods-entitlements': 'NocoDB + n8n + AList',
};
---
<BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
@@ -56,14 +63,40 @@ const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
<section id="featured">
<h2>Featured</h2>
<div class="featured-grid">
{featuredPosts.map((p) => (
<a class="featured-card" href={`/posts/${p.slug}/`}>
<h3>{p.data.title}</h3>
<p>{p.data.description}</p>
<div class="featured-bento-grid">
{featuredPosts.map((post, idx) => {
const cleanSlug = post.slug.replace(/^zh\//, '');
const metric = featuredMetrics[cleanSlug] ?? post.data.category;
return (
<a class={`bento-card bento-item-${idx + 1}`} href={`/posts/${post.slug}/`}>
<div class="bento-visual" aria-hidden="true">
<img
src={`/og/thumb/${cleanSlug}-800.webp`}
alt=""
loading="lazy"
decoding="async"
width="400"
height="210"
onerror="this.style.display='none'"
/>
<div class="bento-visual-scrim"></div>
</div>
<div class="bento-content">
<div class="bento-top-meta">
<span class="featured-badge">{post.data.category}</span>
<span class="bento-metric-pill">
<span class="pulse-dot"></span>
{metric}
</span>
</div>
<h3>{post.data.title}</h3>
<p>{post.data.description}</p>
<span class="bento-cta">Read case study →</span>
</div>
</a>
))}
</div>
);
})}
</div>
</section>
<section>
src/pages/posts/[...slug].astro
+1 -1
View File
@@ -99,7 +99,7 @@ const jsonLd = {
<span class="sep">·</span>
<span>{minutes} min read</span>
<span class="sep">·</span>
<a class="tag" href={`/categories/${post.data.category}/`}>{post.data.category}</a>
<a class="tag" href={lang === 'zh' ? `/zh/categories/${post.data.category}/` : `/categories/${post.data.category}/`}>{post.data.category}</a>
{post.data.tags.map((t) => {
const href = tagLink(t, tagCount, lang);
return href ? <a class="tag" href={href}>{t}</a> : <span class="tag">{t}</span>;
src/pages/zh/index.astro
+40 -7
View File
@@ -20,6 +20,13 @@ const FEATURED_SLUGS = [
const bySlug = new Map(posts.map((p) => [p.slug, p]));
const featured = FEATURED_SLUGS.map((s) => bySlug.get(s)).filter(Boolean);
const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
const featuredMetrics: Record<string, string> = {
'running-production-infrastructure-solo': '3 台宿主 · 162 个容器',
'loop-engineering-without-a-coding-agent': '11 个 Cron · 8 个无 AI 纯脚本',
'one-prometheus-for-unraid-synology-and-a-vps': '3 台主机 · 1 套 Prometheus',
'self-healing-digital-goods-entitlements': 'NocoDB + n8n + AList 自愈权限',
};
---
<BaseLayout
@@ -60,14 +67,40 @@ const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
<section id="featured">
<h2>精选</h2>
<div class="featured-grid">
{featuredPosts.map((p) => (
<a class="featured-card" href={`/posts/${p.slug}/`}>
<h3>{p.data.title}</h3>
<p>{p.data.description}</p>
<div class="featured-bento-grid">
{featuredPosts.map((post, idx) => {
const cleanSlug = post.slug.replace(/^zh\//, '');
const metric = featuredMetrics[cleanSlug] ?? post.data.category;
return (
<a class={`bento-card bento-item-${idx + 1}`} href={`/posts/${post.slug}/`}>
<div class="bento-visual" aria-hidden="true">
<img
src={`/og/thumb/${cleanSlug}-800.webp`}
alt=""
loading="lazy"
decoding="async"
width="400"
height="210"
onerror="this.style.display='none'"
/>
<div class="bento-visual-scrim"></div>
</div>
<div class="bento-content">
<div class="bento-top-meta">
<span class="featured-badge">{post.data.category}</span>
<span class="bento-metric-pill">
<span class="pulse-dot"></span>
{metric}
</span>
</div>
<h3>{post.data.title}</h3>
<p>{post.data.description}</p>
<span class="bento-cta">阅读工程案例 →</span>
</div>
</a>
))}
</div>
);
})}
</div>
</section>
<section>
src/styles/global.css
+171 -24
View File
@@ -32,6 +32,13 @@
--measure: 70rem; /* global container width (nav, footer, all pages) */
--radius: 8px;
/* Bento cards — RGB triplet of the surface colour, so the thumbnail scrim
fades into the card in BOTH themes (a hardcoded dark blend turned muddy
grey on the light theme: measured pill contrast 1.96:1). */
--card-veil: 246, 248, 251;
--pill-bg: rgba(15, 20, 28, 0.05);
--bento-visual-opacity: 0.3;
color-scheme: light dark;
}
@@ -50,6 +57,10 @@ html[data-theme='dark'] {
--good: #4ade80;
--warn: #fbbf24;
--bad: #f87171;
--card-veil: 31, 41, 55;
--pill-bg: rgba(15, 20, 28, 0.5);
--bento-visual-opacity: 0.35;
}
* { box-sizing: border-box; }
@@ -219,16 +230,28 @@ time { color: var(--faint); font-size: 0.88rem; }
/* ---------- Tags & categories ---------- */
.tag {
display: inline-block;
background: var(--surface);
color: var(--muted);
padding: 0.1em 0.6em;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 500;
padding: 0.12em 0.55em;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 0.76rem;
margin: 0 0.35rem 0.35rem 0;
text-decoration: none;
}
a.tag:hover { color: var(--brand); }
a.tag {
background: var(--surface);
border: 1px solid var(--border);
color: var(--brand);
}
a.tag:hover {
border-color: var(--brand);
background: rgba(109, 141, 255, 0.12);
color: var(--brand-soft);
}
span.tag {
color: var(--faint);
background: transparent;
border: 1px dashed var(--border);
}
/* ---------- Code ---------- */
code {
@@ -447,34 +470,158 @@ pre code {
.btn-primary { border-color: var(--brand); color: var(--brand); }
.hero-note { font-size: 0.82rem; color: var(--faint); margin: 0; }
/* ---------- Featured ---------- */
.featured-grid {
/* ---------- Featured 2x2 Cyber-Bento Grid ---------- */
.featured-bento-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.15rem;
margin: 1rem 0 2.5rem;
}
.featured-card {
display: block;
@media (max-width: 680px) {
.featured-bento-grid {
grid-template-columns: 1fr;
}
}
.bento-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.1rem;
border-radius: 12px;
padding: 1.3rem;
overflow: hidden;
color: var(--ink);
text-decoration: none;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
isolation: isolate;
}
.featured-card:hover { border-color: var(--brand); }
.featured-card h3 { margin: 0.5rem 0 0.4rem; font-size: 1.02rem; line-height: 1.35; }
.featured-card p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.bento-card:hover {
transform: translateY(-2px);
border-color: var(--brand);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4), 0 0 20px -5px rgba(109, 141, 255, 0.25);
color: var(--ink);
}
.bento-visual {
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 140px;
z-index: -1;
opacity: var(--bento-visual-opacity);
transition: opacity 0.25s ease, transform 0.35s ease;
pointer-events: none;
}
.bento-card:hover .bento-visual {
opacity: 0.55;
transform: scale(1.04);
}
.bento-visual img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
}
.bento-visual-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, var(--surface) 0%, rgba(var(--card-veil), 0.6) 45%, transparent 100%),
linear-gradient(0deg, var(--surface) 0%, rgba(var(--card-veil), 0.4) 55%, transparent 100%);
}
.bento-content {
display: flex;
flex-direction: column;
height: 100%;
gap: 0.65rem;
}
.bento-top-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
}
.featured-badge {
display: inline-block;
font-size: 0.68rem;
letter-spacing: 0.06em;
font-family: var(--font-mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--brand);
border: 1px solid var(--border);
background: rgba(109, 141, 255, 0.12);
border: 1px solid rgba(109, 141, 255, 0.3);
padding: 0.15rem 0.55rem;
border-radius: 999px;
padding: 0.1em 0.6em;
}
.bento-metric-pill {
display: inline-flex;
align-items: center;
gap: 0.38rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--muted);
background: var(--pill-bg);
border: 1px solid var(--border);
padding: 0.15rem 0.55rem;
border-radius: 6px;
}
.pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--good);
box-shadow: 0 0 6px var(--good);
animation: bento-pulse 2.4s ease-in-out infinite;
}
@keyframes bento-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
.pulse-dot { animation: none; }
}
.bento-card h3 {
font-size: 1.08rem;
line-height: 1.38;
color: var(--ink);
margin-top: 0.15rem;
}
.bento-card p {
font-size: 0.88rem;
line-height: 1.55;
color: var(--muted);
flex-grow: 1;
}
.bento-cta {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--brand);
margin-top: 0.35rem;
transition: transform 0.15s ease;
}
.bento-card:hover .bento-cta {
color: var(--brand-soft);
transform: translateX(3px);
}
/* ---------- Collapsible long code blocks ---------- */
@@ -720,7 +867,7 @@ a.category-card:hover { border-color: var(--brand); }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
.related-grid { grid-template-columns: 1fr; }
.featured-grid { grid-template-columns: 1fr; }
.featured-bento-grid { grid-template-columns: 1fr; }
.proof-grid { grid-template-columns: repeat(2, 1fr); }
.stack-grid, .contact-split { grid-template-columns: 1fr; }
.about-hero { flex-direction: column; gap: 1rem; }