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

feat(home): upgrade hero with lightbox banner, infra stats grid, tech pills, and category shortcuts
Deploy / build (push) Successful in 17s
Details

Browse Source
This commit is contained in:
hoelee committed 2026-10-26 10:39:59 +08:00
1 parent d5a0fc089d
commit f0b98843e9
3 files changed
+443 -79
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/index.astro
+86 -19
View File
@@ -32,7 +32,7 @@ const featuredMetrics: Record<string, string> = {
<BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
<section class="hero">
<div class="hero-content">
<div class="hero-intro">
<div class="hero-id">
<picture>
<source srcset={SITE.photo.smallWebp} type="image/webp" />
@@ -53,32 +53,90 @@ const featuredMetrics: Record<string, string> = {
platform, CI/CD, workflow automation and this blog. I write up what broke, what the
evidence said, and how I fixed it.
</p>
<p class="hero-cta">
<div class="hero-pills" aria-label="Core tech stack">
<span class="hero-pills-label">Stack:</span>
<a class="tech-pill" href="/tags/docker/">Docker</a>
<a class="tech-pill" href="/tags/self-hosting/">Self-Hosting</a>
<a class="tech-pill" href="/tags/n8n/">n8n</a>
<a class="tech-pill" href="/tags/ai/">Local GPU AI</a>
<a class="tech-pill" href="/tags/python/">Python</a>
<a class="tech-pill" href="/tags/php/">PHP</a>
<a class="tech-pill" href="/tags/security/">Security</a>
</div>
</div>
<div class="hero-visual">
<button
type="button"
class="hero-banner-card"
onclick="document.getElementById('arch-lightbox')?.showModal()"
aria-label="View full architecture diagram"
>
<picture>
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 960px) 100vw, 560px" type="image/webp" />
<img
class="hero-banner-img"
src="/images/hero-banner.jpg"
alt="From Code to Production — Systems Architecture & DevOps Infrastructure Ecosystem"
width="1024"
height="572"
loading="eager"
fetchpriority="high"
decoding="async"
/>
</picture>
<span class="hero-banner-zoom-badge">🔍 View full architecture</span>
</button>
<div class="hero-infra-grid" aria-label="Infrastructure stats">
<div class="infra-stat-card">
<div class="infra-stat-val">162</div>
<div class="infra-stat-label">Containers in Prod</div>
</div>
<div class="infra-stat-card">
<div class="infra-stat-val">3 Hosts</div>
<div class="infra-stat-label">Unraid · Synology · VPS</div>
</div>
<div class="infra-stat-card">
<div class="infra-stat-val">78</div>
<div class="infra-stat-label">Compose Stacks</div>
</div>
<div class="infra-stat-card">
<div class="infra-stat-val">91</div>
<div class="infra-stat-label">Bilingual Write-ups</div>
</div>
</div>
</div>
<div class="hero-actions">
<div class="hero-cta">
<a class="btn btn-primary" href="#featured">Read the engineering case studies ↓</a>
<a class="btn" href="/about/">Hiring? Profile &amp; stack →</a>
<a class="btn" href={SITE.website} target="_blank" rel="noopener">Malaysian SME? How I work ↗</a>
</p>
</div>
<p class="hero-note">
{posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
</p>
</div>
<div class="hero-banner-card">
<picture>
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 900px) 100vw, 480px" type="image/webp" />
<img
class="hero-banner-img"
src="/images/hero-banner.jpg"
alt="From Code to Production — Systems Architecture & DevOps Infrastructure Ecosystem"
width="1024"
height="572"
loading="eager"
fetchpriority="high"
decoding="async"
/>
</picture>
</div>
</section>
<dialog id="arch-lightbox" class="arch-lightbox" onclick="if (event.target === this) this.close()">
<div class="arch-lightbox-inner">
<button type="button" class="arch-lightbox-close" aria-label="Close" onclick="this.closest('dialog').close()">&times;</button>
<img
src="/images/hero-banner-2x.webp"
alt="From Code to Production — Systems Architecture & DevOps Infrastructure Ecosystem"
width="2048"
height="1144"
loading="lazy"
/>
<div class="arch-lightbox-caption">
<span>From Code to Production — Systems Architecture &amp; DevOps Infrastructure</span>
<span class="arch-lightbox-hint">ESC / Click outside to close</span>
</div>
</div>
</dialog>
<section id="featured">
<h2>Featured</h2>
<div class="featured-bento-grid">
@@ -120,7 +178,16 @@ const featuredMetrics: Record<string, string> = {
</section>
<section>
<h2>Latest posts</h2>
<div class="section-head-with-nav">
<h2>Latest posts</h2>
<div class="section-nav-pills" aria-label="Category shortcuts">
<a class="section-nav-pill" href="/categories/case-studies/">case-studies</a>
<a class="section-nav-pill" href="/categories/devops/">devops</a>
<a class="section-nav-pill" href="/categories/tutorials/">tutorials</a>
<a class="section-nav-pill" href="/categories/notes/">notes</a>
<a class="section-nav-pill section-nav-all" href="/posts/">All {posts.length} →</a>
</div>
</div>
{posts.length === 0 ? (
<p><em>No posts yet — check back soon.</em></p>
) : (
src/pages/zh/index.astro
+86 -19
View File
@@ -36,7 +36,7 @@ const featuredMetrics: Record<string, string> = {
altLocaleUrl={`${SITE.url}/`}
>
<section class="hero">
<div class="hero-content">
<div class="hero-intro">
<div class="hero-id">
<picture>
<source srcset={SITE.photo.smallWebp} type="image/webp" />
@@ -54,32 +54,90 @@ const featuredMetrics: Record<string, string> = {
<p class="hero-sub">
从代码到服务器，生产环境的 Web 系统我自己从头做到尾。<strong>三台自管服务器上跑着 162 个容器</strong>：客户站点、邮件平台、CI/CD、流程自动化，还有这个博客。这里写的是「坏了什么、证据在哪、怎么修好」。
</p>
<p class="hero-cta">
<div class="hero-pills" aria-label="核心技术栈">
<span class="hero-pills-label">技术栈：</span>
<a class="tech-pill" href="/zh/tags/docker/">Docker</a>
<a class="tech-pill" href="/zh/tags/self-hosting/">自托管</a>
<a class="tech-pill" href="/zh/tags/n8n/">n8n</a>
<a class="tech-pill" href="/zh/tags/ai/">本地 GPU AI</a>
<a class="tech-pill" href="/zh/tags/python/">Python</a>
<a class="tech-pill" href="/zh/tags/php/">PHP</a>
<a class="tech-pill" href="/zh/tags/security/">安全防护</a>
</div>
</div>
<div class="hero-visual">
<button
type="button"
class="hero-banner-card"
onclick="document.getElementById('arch-lightbox')?.showModal()"
aria-label="点击放大架构图"
>
<picture>
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 960px) 100vw, 560px" type="image/webp" />
<img
class="hero-banner-img"
src="/images/hero-banner.jpg"
alt="从代码到生产环境 —— 系统架构与 DevOps 运维生态图"
width="1024"
height="572"
loading="eager"
fetchpriority="high"
decoding="async"
/>
</picture>
<span class="hero-banner-zoom-badge">🔍 点击放大架构图</span>
</button>
<div class="hero-infra-grid" aria-label="基础设施数据">
<div class="infra-stat-card">
<div class="infra-stat-val">162</div>
<div class="infra-stat-label">生产环境容器</div>
</div>
<div class="infra-stat-card">
<div class="infra-stat-val">3 台宿主</div>
<div class="infra-stat-label">Unraid · 群晖 · VPS</div>
</div>
<div class="infra-stat-card">
<div class="infra-stat-val">78</div>
<div class="infra-stat-label">Compose 编排栈</div>
</div>
<div class="infra-stat-card">
<div class="infra-stat-val">91 篇</div>
<div class="infra-stat-label">中英双语实战复盘</div>
</div>
</div>
</div>
<div class="hero-actions">
<div class="hero-cta">
<a class="btn btn-primary" href="#featured">先看工程案例 ↓</a>
<a class="btn" href="/zh/about/">招聘方：技术栈与履历 →</a>
<a class="btn" href={SITE.website} target="_blank" rel="noopener">中小企业：合作方式 ↗</a>
</p>
</div>
<p class="hero-note">
共 {posts.length} 篇中文文章 · <a href="/">English</a> · <a href="/rss.xml">RSS</a>
</p>
</div>
<div class="hero-banner-card">
<picture>
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 900px) 100vw, 480px" type="image/webp" />
<img
class="hero-banner-img"
src="/images/hero-banner.jpg"
alt="从代码到生产环境 —— 系统架构与 DevOps 运维生态图"
width="1024"
height="572"
loading="eager"
fetchpriority="high"
decoding="async"
/>
</picture>
</div>
</section>
<dialog id="arch-lightbox" class="arch-lightbox" onclick="if (event.target === this) this.close()">
<div class="arch-lightbox-inner">
<button type="button" class="arch-lightbox-close" aria-label="关闭" onclick="this.closest('dialog').close()">&times;</button>
<img
src="/images/hero-banner-2x.webp"
alt="从代码到生产环境 —— 系统架构与 DevOps 运维生态图"
width="2048"
height="1144"
loading="lazy"
/>
<div class="arch-lightbox-caption">
<span>从代码到生产环境 —— 系统架构与 DevOps 运维生态图</span>
<span class="arch-lightbox-hint">ESC / 点击外部关闭</span>
</div>
</div>
</dialog>
<section id="featured">
<h2>精选</h2>
<div class="featured-bento-grid">
@@ -121,7 +179,16 @@ const featuredMetrics: Record<string, string> = {
</section>
<section>
<h2>最新文章</h2>
<div class="section-head-with-nav">
<h2>最新文章</h2>
<div class="section-nav-pills" aria-label="分类快捷入口">
<a class="section-nav-pill" href="/zh/categories/case-studies/">工程案例</a>
<a class="section-nav-pill" href="/zh/categories/devops/">运维</a>
<a class="section-nav-pill" href="/zh/categories/tutorials/">教程</a>
<a class="section-nav-pill" href="/zh/categories/notes/">笔记</a>
<a class="section-nav-pill section-nav-all" href="/zh/posts/">全部 {posts.length} 篇 →</a>
</div>
</div>
{posts.length === 0 ? (
<p><em>中文文章即将发布，敬请期待。</em></p>
) : (
src/styles/global.css
+271 -41
View File
@@ -518,35 +518,105 @@ pre code {
}
.hero h1 { margin: 0; font-size: 1.85rem; line-height: 1.25; }
.hero-sub { font-size: 1.02rem; color: var(--muted); max-width: 62ch; margin: 0 0 0.25rem; line-height: 1.6; }
/* Tech Stack Pills */
.hero-pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
margin: 0.85rem 0 0;
}
.hero-pills-label {
font-size: 0.78rem;
color: var(--faint);
font-family: var(--font-mono);
margin-right: 0.15rem;
}
.tech-pill {
display: inline-flex;
align-items: center;
font-size: 0.78rem;
font-family: var(--font-mono);
color: var(--muted);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.18rem 0.65rem;
text-decoration: none;
transition: all 0.2s ease;
}
.tech-pill:hover {
color: var(--brand);
border-color: var(--brand);
background: color-mix(in srgb, var(--brand) 10%, transparent);
}
/* CTA buttons & RSS note */
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: 1.15rem 0 0.75rem;
gap: 0.75rem;
margin: 0;
}
.btn {
display: inline-block;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
font-size: 0.88rem;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.5rem 0.85rem;
padding: 0.52rem 0.95rem;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn:hover {
border-color: var(--brand);
color: var(--brand);
}
.btn-primary {
background: var(--brand);
color: #ffffff !important;
border-color: var(--brand);
font-weight: 600;
box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 30%, transparent);
}
.btn-primary:hover {
background: var(--brand-soft);
border-color: var(--brand-soft);
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 45%, transparent);
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-primary { border-color: var(--brand); color: var(--brand); }
.hero-note { font-size: 0.82rem; color: var(--faint); margin: 0; }
/* Visual block (Banner + Lightbox + Infra Stats Grid) */
.hero-visual {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
.hero-banner-card {
overflow: hidden;
position: relative;
display: block;
width: 100%;
padding: 0;
margin: 0;
border: 1px solid var(--border-color, rgba(128, 128, 128, 0.2));
background: var(--surface);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
cursor: zoom-in;
text-align: left;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hero-banner-card:hover {
border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.25);
transform: translateY(-1px);
}
.hero-banner-img {
width: 100%;
@@ -555,59 +625,219 @@ pre code {
display: block;
object-fit: cover;
}
.hero-banner-zoom-badge {
position: absolute;
bottom: 0.65rem;
right: 0.65rem;
z-index: 2;
padding: 0.25rem 0.6rem;
font-size: 0.75rem;
font-weight: 500;
color: #ffffff;
background: rgba(15, 23, 42, 0.82);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
pointer-events: none;
transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-banner-card:hover .hero-banner-zoom-badge {
background: var(--brand);
border-color: rgba(255, 255, 255, 0.35);
}
/* Desktop: 2-column grid layout (>= 900px) */
@media (min-width: 900px) {
/* 4-Stat Infra Grid */
.hero-infra-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.infra-stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.7rem 0.9rem;
display: flex;
flex-direction: column;
justify-content: center;
transition: border-color 0.2s ease, background 0.2s ease;
}
.infra-stat-card:hover {
border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}
.infra-stat-val {
font-size: 1.3rem;
font-weight: 700;
line-height: 1.2;
color: var(--ink);
letter-spacing: -0.02em;
font-family: var(--font-mono);
}
.infra-stat-label {
font-size: 0.76rem;
color: var(--muted);
margin-top: 0.2rem;
line-height: 1.35;
}
/* Architecture Lightbox Dialog */
.arch-lightbox {
border: none;
border-radius: 12px;
background: transparent;
padding: 0;
max-width: 94vw;
max-height: 94vh;
margin: auto;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
outline: none;
}
.arch-lightbox::backdrop {
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
}
.arch-lightbox-inner {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.arch-lightbox-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 2;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 1.4rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
}
.arch-lightbox-close:hover {
background: var(--brand);
transform: scale(1.05);
}
.arch-lightbox img {
width: 100%;
max-height: 82vh;
object-fit: contain;
display: block;
}
.arch-lightbox-caption {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.65rem 1rem;
font-size: 0.82rem;
color: var(--muted);
border-top: 1px solid var(--border);
background: var(--paper);
}
.arch-lightbox-hint {
font-size: 0.75rem;
color: var(--faint);
}
/* Desktop layout: >= 960px */
@media (min-width: 960px) {
.hero {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 2.5rem;
align-items: center;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"intro visual"
"actions visual";
gap: 1.5rem 2rem;
align-items: stretch;
}
.hero-content {
.hero-intro {
grid-area: intro;
}
.hero-actions {
grid-area: actions;
display: flex;
flex-direction: column;
min-width: 0;
justify-content: flex-end;
gap: 0.75rem;
}
.hero-banner-card {
border-radius: 12px;
margin: 0;
.hero-visual {
grid-area: visual;
}
}
/* Mobile & Tablet: single-column visual flow (< 900px) */
@media (max-width: 899px) {
/* Mobile & Tablet: < 960px */
@media (max-width: 959px) {
.hero {
display: flex;
flex-direction: column;
gap: 0;
}
.hero-content {
display: contents;
}
.hero-id {
order: 1;
margin-bottom: 0.75rem;
}
.hero-sub {
order: 2;
margin-bottom: 0;
gap: 1.25rem;
}
.hero-banner-card {
order: 3;
margin: 1rem 0;
border-radius: 8px;
}
.hero-cta {
order: 4;
margin: 0 0 0.75rem;
}
.hero-note {
order: 5;
margin: 0;
.hero-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
}
/* Section Header with Category Shortcuts */
.section-head-with-nav {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem 1rem;
margin: 2.25rem 0 0.75rem;
}
.section-head-with-nav h2 {
margin: 0;
}
.section-nav-pills {
display: inline-flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
}
.section-nav-pill {
font-size: 0.76rem;
font-family: var(--font-mono);
color: var(--muted);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.15rem 0.6rem;
text-decoration: none;
transition: all 0.2s ease;
}
.section-nav-pill:hover {
color: var(--brand);
border-color: var(--brand);
background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.section-nav-all {
color: var(--brand);
border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
}
.section-nav-all:hover {
background: var(--brand);
color: #ffffff;
border-color: var(--brand);
}
/* ---------- Featured 2x2 Cyber-Bento Grid ---------- */
.featured-bento-grid {
display: grid;