# Project State & Enhancement Backlog
Living list of what's done and what's next for blog.hoelee.com. Work through these **one by one** โ don't batch unrelated changes. Check off items as they land.
**Status key:** โ
done ยท ๐ต in progress ยท โฌ not started
> **How to resume the project:** start at the top-most โฌ item in the **Execution Plan** (ยง2) below and work downward. Each step is self-contained, has a "done when" criterion, and references the governing doc. Don't jump ahead โ earlier steps unlock later ones.
---
## 1. Done (foundation)
- โ
Astro 5 static + Markdown, Gitea Actions CI/CD โ nginx โ Cloudflare (deployed)
- โ
Design system: hoelee.com brand palette, Inter + JetBrains Mono, light/dark, sticky nav, code copy button
- โ
Brand "Mr Hoelee" (replaced "hoelee.dev")
- โ
Author card + `Person`/`ProfilePage` JSON-LD (E-E-A-T), article meta, reading time, related posts
- โ
Full SEO: canonical, Open Graph (+dims), twitter:card, favicon (all sizes), RSS + sitemap
- โ
Category pages (`/categories/`, `/categories/[category]/`)
- โ
Locale scheme: English flat in `posts/`, Chinese in `posts/zh/` (lang derived from folder)
- โ
Language switcher in nav โ links to the **same post** in the other language (auto-matches by `zh/` prefix)
- โ
Locale-aware nav labels (EN/ZH)
- โ
Dark mode default (light opt-in via toggle)
- โ
Case study "How I Host This Blog"
- โ
Chinese translation of the case study (`posts/zh/how-i-host-this-blog.md`)
- โ
hello-world intro post
- โ
Case study "How I Built the DigiKedai Telegram AI Bot" + Chinese twin (`posts/zh/how-i-built-the-digikedai-telegram-bot/`)
- โ
Business framing corrected (website design & development = primary; email hosting = secondary)
- โ
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 (commit `6e9d58b`)**, 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//`, ZH brand links `/zh/`.
- Full catalog of 72 posts' unique physical metaphors and prompts extracted to `scripts/og-gen/prompts_catalog.json`, with the batch renderer `scripts/og-gen/render_from_art.mjs` + `art-meta.json` (committed 2026-10-18; the readable version of the catalog ships outside the repo at `Desktop\blog-og-image-redesign-brief\03-72-Posts-Visual-Prompts-Catalog.md`).
- **Batch rollout: 0 of 72 posts.** Everything above is **template-level**: the two sample posts (`running-production-infrastructure-solo`, `docker-reported-exit-0-the-oom-killer-disagreed`) are rendered into `Desktop\blog-og-image-redesign-brief\delivery-for-consultant-round4\` only. The repo/live site still serves the **v1** set โ 72 `public/banners/*.png` + 72 `public/og/*.png` generated by the terminal-panel generators on 2026-10-06โฆ10-16 โ so nothing on the site changed appearance from this work yet.
- **Three consultant questions are still unanswered** (they gate the batch; the ask is written verbatim in `delivery-for-consultant-round4\00-็ฌฌๅ่ฝฎ-ๅฎๆฝๅ้ฆไธ3ไธชๅพ
ๅฎ็ป่.md` ยงไบ): (1) English headline rag โ (A) keep the stepped shape, (B) drop 3โ5px for equal-width lines, **(C) shorten the OG-only title via a new `ogTitle` frontmatter field**, (D) other; (2) the hard CJK length cap for OG titles (currently assumed **โค30 chars incl. punctuation**, EN โค65); (3) whether list thumbnails should keep 100% right-focus or hold back to 85% for breathing room at ~398px display width.
- **Asset weight measured 2026-10-18 (must be decided before the batch).** A composited OG card is **558 KB as rendered PNG** vs the **42 KB** average of today's 72 cards; ร144 (EN+ZH) that is **~84 MB in the repo** and a much heavier share payload. Same card re-encoded: 256-colour PNG **240 KB**, 128-colour PNG 194 KB, **mozjpeg q85 84 KB**, q78 70 KB. So the batch should ship **JPEG** for `og:image` (the precedent already set by `/og-default.jpg`, 45 KB) โ which means an `ogImage:` path change on 144 frontmatter files, or a deliberate decision to keep PNG at ~240 KB and eat ~35 MB.
- Known gap in the plan: the **OCR pseudo-text gate** on the base art (regenerate a frame when any readable character is detected) was promised to the consultant and is **not implemented**.
- โ
**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.
- The headshot's dark-blue background sat close to the page background, so the photo/ghero/avatar get a faint brand ring + shadow (measured: the photo reads as a deliberate element instead of a floating head).
- **`/llms.txt`** generated from the collection at build time (48 KB, 142 post entries + section links) so LLM crawlers and answer engines can cite accurately; `robots.txt` now points at it.
- Still open: the **main site** (`www.hoelee.com`) counter says `12+ Experts` / `100+ Years Of Experience` while the blog says he runs the stack solo โ needs the owner's real numbers; and cross-posting to dev.to/Hashnode needs his accounts.
- โ
**B3 structure batch, 2026-10-16 (third batch from the external design review)** โ all numbers measured in a real browser (CDP), not by eye:
- **Found and fixed a real bug: site search never worked.** `/pagefind/pagefind.js` is an **ES module** (`export { search, debouncedSearch, โฆ }`) that defines **no `window.Pagefind`**, but `Search.astro` loaded it with a classic `