diff --git a/docs/project-state.md b/docs/project-state.md index eaee6a1..8cec1c2 100644 --- a/docs/project-state.md +++ b/docs/project-state.md @@ -28,6 +28,25 @@ Living list of what's done and what's next for blog.hoelee.com. Work through the - ✅ Knowledge guides in `docs/` + README index + `hoelee-blog` skill - ✅ Both repos public (Gitea + GitHub) with title/description/homepage/topics + `v1.0.0` release - ✅ **Live re-audit of the Sept research recorded (§2 Phase E + §4), 2026-09-29** — 53 posts × 2 languages, 127 sitemap URLs, 133/133 internal links 200 +- ✅ **B5 Baseline & Hygiene Batch, 2026-10-18 (commit `3f63150` live on production)**: + - Default OG card upgraded: external delivery design with real author headshot integrated, optimised via mozjpeg q85 to **45 KB JPG** (`public/og-default.jpg`, down from 211 KB PNG), with PNG retained for backwards compatibility. + - 全站 72 篇 banner 404 卫生彻底清零：为 `scraping-bot-walled-marketplace-warm-browser-session` 补齐 terminal banner WebP 与 PNG 资产。 + - E9 modern system typography stack deployed: `--font-sans` and `--font-mono` upgraded to native multi-platform stack with PingFang SC / Microsoft YaHei CJK fallbacks. + - A2 branding alignment: ``, meta description, JSON-LD, and homepage hero unified to `Mr Hoelee — Full-Stack Developer & DevOps Engineer`. + - All 251 pages cleanly verified, Gitea and GitHub remotes strictly 0/0 aligned. +- ✅ **B6 Visual Redesign with External Consultant & Ideogram 4 Pipeline, 2026-10-18 (Round 4 completed)**: + - Outside design consultant review finalised: 70% Dark Cyber-Bento + 30% Blueprint schematic; 100% committed to **Hybrid Paradigm ("One Art, Four Targets")** — pure visual art for hero banners & list thumbnails (eliminating title duplication & bilingual collisions), programmatically composited typography for social share cards. + - **Frosted Bento Container Card (`template-v2.2.html`)** deployed to solve layout emptiness: + - 736×536 frosted acrylic card (`backdrop-filter: blur(16px)`, gradient top highlight); + - 2-line article description added to eliminate vertical voids; + - 100% full-width terminal evidence bar (`$ ...`); + - CSS-drawn 36px blueprint grid + top-left radial ambient glow restores industrial depth; + - 3D base art scaled to 116% and shifted inward to bridge the central divide. + - **Self-fitting headline engine implemented**: dynamically measures DOM lines in headless Chrome, stepping down font size (50px → 26px) until headline fits `<= 3 lines` with no orphan/widow lines; CJK titles intelligently split at punctuation; numbers glued with NBSP. + - Front-end homepage enhanced: `Featured` section upgraded to 2×2 Cyber-Bento Grid (with metric pills and pulsing green status dots); bilingual navigation brand link fixed to `/zh/`; in-post category tags fixed to `/zh/categories/`. + - **Shipped to production 2026-10-18 (front-end UI commit)**, after a measured pass on both themes: the bento scrim and metric pill were hardcoded to a *dark* blend, which on the light theme produced a muddy grey band and **1.96:1** pill text contrast; both are now theme tokens (`--card-veil`, `--pill-bg`, `--bento-visual-opacity`), and the "pulsing" dot finally has an actual `@keyframes bento-pulse` (it had none, and it is disabled under `prefers-reduced-motion`). Measured in headless Chrome, 1280px and 390px, EN + ZH: 4 cards, `2 cols / 1 col`, `documentElement.scrollWidth − clientWidth = 0`, no card overflow, all four `-800.webp` thumbs `naturalWidth 800` — contrast dark pill 6.56 / badge 4.83 / h3 11.86 / desc 5.78, light pill 6.10 / badge 4.85 / h3 16.36 / desc 6.74 (WCAG AA ≥ 4.5). Tag chips restyled to mono + hairline border (4px radius) site-wide; ZH post pages link `/zh/categories/<cat>/`, ZH brand links `/zh/`. + - Full catalog of 72 posts' unique physical metaphors and prompts extracted to `scripts/og-gen/prompts_catalog.json` (working-tree tooling, not committed) and `Desktop\blog-og-image-redesign-brief\03-72-Posts-Visual-Prompts-Catalog.md` (outside the repo). + - Round 4 delivery bundle packaged at `C:\Users\hoelee\Desktop\blog-og-image-redesign-brief\delivery-for-consultant-round4.zip`. - ✅ **B4 identity & distribution batch, 2026-10-16 (fourth batch)** — the photo and the About rewrite: - **Real author photo** (source `Professional Portrait with Blue Gradient Background.png`, 1254×1254, kept untouched in `Pictures/` with a converted JPG master beside it). Two derivatives, WebP first with a JPEG fallback: `lee-teong-hoe-640` (42 KB JPG / 26 KB WebP) and `-128` (3 KB / 2 KB). Appears in the About hero, the author card on every post, the home hero (both languages) and **JSON-LD `Person.image`** — the node search engines use to bind name to face. - **About page 1,024 → 7,357 characters**, in five sections: identity + photo, "By the numbers" (162 containers / 3 hosts / 71 essays / 0 hosting companies between me and the servers), the real tech stack in four columns, the Hoelee Enterprise block (website design and development is the main business, email hosting secondary) and a contact split between hiring and business (WhatsApp for enquiries). Chinese twin rewritten to match. @@ -870,6 +889,13 @@ not needed), cross-checked against the local repo at `D:/dev/hoelee-blog`. --- ## 4b. Live re-check — 2026-10-17 (after batches B1–B4) +... +- **B6 Visual Redesign Milestone reached (2026-10-18)**: + - Ideogram 4 pipeline running locally (`1360x768`, ar 16:9). + - Outside consultant reviewed Round 1..4. Frosted Bento layout + blueprint grid + headline auto-fitting (`FIT <n>px`) verified on real Chrome Headless. + - Delivery package Round 4 zipped (`delivery-for-consultant-round4.zip`, 2.4 MB). + - Ready for 72-post batch run once consultant finalises the 3 minor typography questions. + Method: `curl` from the Windows host, the unRaid nginx access log **read over the Portainer API** (no SSH to that host), and a DOM probe for the regenerated card. Spot values: `/zh/posts/` 200 · `/tags/docker/` 200 · `/llms.txt` 200 diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 5d439e4..0716b84 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -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> diff --git a/src/pages/index.astro b/src/pages/index.astro index 3c44190..de424be 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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> diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro index 7b8589e..29eb680 100644 --- a/src/pages/posts/[...slug].astro +++ b/src/pages/posts/[...slug].astro @@ -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>; diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro index a211c6d..6af5219 100644 --- a/src/pages/zh/index.astro +++ b/src/pages/zh/index.astro @@ -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> diff --git a/src/styles/global.css b/src/styles/global.css index d231b39..9f64796 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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; }