feat(design): bento featured grid, theme-aware cards, mono tag chips

- 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.
2026-10-18 15:56:40 +08:00
1 parent 3f63150d51
commit 6e9d58b8cc
@@ -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: `<title>`, 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
@@ -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>
@@ -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>
@@ -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>;
@@ -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>
@@ -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; }