diff --git a/docs/consultant-review-2026-10-27-posts-and-casestudies-plan.md b/docs/consultant-review-2026-10-27-posts-and-casestudies-plan.md index 56ce025..29609b9 100644 --- a/docs/consultant-review-2026-10-27-posts-and-casestudies-plan.md +++ b/docs/consultant-review-2026-10-27-posts-and-casestudies-plan.md @@ -93,3 +93,30 @@ 2. 运行 `node scripts/check-assets.mjs`,确保静态资源引证有效。 3. 使用 Headless 探测工具或 Playwright 脚本验证 1920px 与 375px 视口下的视觉呈现与水平溢出(`scrollWidth === clientWidth`)。 4. 提交 Git 并推送到 Gitea(`git.hoelee.com`)与 GitHub 镜像。 + +--- + +## 交付记录 — 2026-10-27 + +按上文四个工单全部落地,构建、资源校验、视口溢出探测均通过。逐项对照: + +| 工单 | 状态 | 落地位置 | 偏差 / 说明 | +| --- | --- | --- | --- | +| 1 · `/posts/` 混合归档(EN/ZH) | ✅ | `src/components/Archive.astro`、`src/lib/featured.ts`、`src/pages/posts/index.astro`、`src/pages/zh/posts/index.astro`、`src/pages/index.astro` | 旗舰集合用固定 slug(3 张归档 / 4 张首页),不用「最新 N 篇」;不做分页,仍是全量渲染 + 客户端过滤,`Ctrl+F` 与零请求都保住;筛选时旗舰块折叠为 `inert` + 高度 0,状态行从 `All 91 posts` 变为 `Showing 27 of 91 posts` | +| 2 · `case-studies` 作品集版式 | ✅ | `src/components/PortfolioHero.astro`、`src/lib/portfolio.ts`、`src/components/PostList.astro`、`src/styles/global.css`、`src/pages/{,zh/}categories/[category].astro` | banner 从 3:1 改为 **21:9**(2400×1029),因为 3:1 在 240–300px 展示高度下纵向空间不足;连线由「三根曲线穿面板」改为共享铜总线;纯几何、无烘焙文字、seeded 确定性,重跑不产生 diff。指标 pill 只取正文出现过的数字(容器数 / VRAM / cron) | +| 3 · 列表组件与多语言对齐 | ✅ | `src/components/PostList.astro`、`src/components/Archive.astro`、`src/styles/global.css` | 动作链接为中英双语且不进 Tab 序(每卡一个键盘停留点);`Archive.astro` 行尾与分类 chip 原本泄漏英文 slug,已统一走 `categoryLabel()`;移动端标题链接 `min-height: 44px`。**标签 chip 仍是导航链接**(跳 `/tags/x/`),不改为页内过滤——这是先前锁定的决策,保留 | +| 4 · 端到端验收与发布 | ✅ | `scripts/probe-layout.mjs`(新增) | 9 个页面 × 8 个视口(1920/1280/960/768/430/390/375/320)共 **72/72** 通过,`scrollWidth == clientWidth`;折叠行为在 EN/ZH × 1280/390 实测;`check-assets.mjs` 182 篇资源齐备 | + +验收命令: + +```bash +npm run build && node scripts/check-assets.mjs +python -m http.server 4321 --directory dist & +chrome --headless=new --remote-debugging-port=9333 about:blank & +node scripts/probe-layout.mjs # 退出码 1 = 有横向溢出或折叠失效 +``` + +截图评审期间另修的三处(不在原工单内,属于同类体验缺陷):两条 chip 条带原本无标签且视觉同构 +(`devops` 出现两次:分类 30 / 话题 6)→ 加 *Category* / *Topic* 标签、≤700px 时标签上移; +列表卡片标签数封顶 4 个 + `+N`,修复卡片元信息行高不一致;导航补 `aria-current="page"` +(此前四个栏目链接在任何页面都没有当前位置提示)。 diff --git a/docs/project-state.md b/docs/project-state.md index 8e88be9..fe10f94 100644 --- a/docs/project-state.md +++ b/docs/project-state.md @@ -26,6 +26,8 @@ Living list of what's done and what's next for blog.hoelee.com. Work through the - ✅ 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]/`) +- ✅ `/posts/` hybrid archive + case-study portfolio (2026-10-27): fixed-slug flagship cards, + collapse-on-filter, portfolio hero, action links, 44 px tap targets — see §4e - ✅ 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) @@ -430,6 +432,38 @@ A paid reviewer read `how-i-built-an-automated-music-video-pipeline`, `uploading session's paragraphs rode into the other's commit — content survived, but the history stopped attributing correctly. --- +## 4e. Live re-check — 2026-10-27 (hybrid archive + case-study portfolio) + +Delivered the four work orders in `docs/consultant-review-2026-10-27-posts-and-casestudies-plan.md`. +Measured, not assumed — `node scripts/probe-layout.mjs` drives a headless Chrome over CDP and +reports **72/72** page×viewport checks with `scrollWidth == clientWidth`, plus the collapse test. + +- **`/posts/` and `/zh/posts/` are hybrid, not paginated.** Three fixed-slug flagship cards + (`src/lib/featured.ts`, 3 on the archive, 4 on the home page) sit above the complete + year/month archive, which still lists every post and keeps `Ctrl+F` working. Typing in the + filter or clicking a category chip collapses the flagship block (`inert`, height 0, + `data-collapsed="true"`) and the status line switches from `All 91 posts` to + `Showing 27 of 91 posts`; clearing restores it. Verified at 1280 and 390 in both languages. +- **`/categories/case-studies/` is a portfolio.** `src/components/PortfolioHero.astro` — copy left, + a 21:9 architecture banner right (2400×1029, 33 KB WebP + a 1200 px variant, generated + deterministically by `scripts/gen-case-studies-banner.mjs`; pure geometry, no baked text). + Ordering comes from `src/lib/portfolio.ts` (`CASE_STUDY_FLAGSHIPS`, narrative order + scale → local AI → automation → shipped commercial result), not from `pubDate`, so publishing + a new post cannot rewrite the story. Every card carries a measured pill (container counts, VRAM, + cron counts — all read from the post body, never invented). +- **One shipped narrative.** `lib/featured.ts` and `lib/portfolio.ts` share `pickFeatured()`, so the + home page, the archive and the portfolio can never disagree about which write-ups are flagship. +- **Listing rows name their action**: `Read article →` / `Read case study →` + (`阅读文章 →` / `阅读案例复盘 →`), as a redundant link kept out of the tab order (`tabindex="-1"`, + one keyboard stop per card). Mobile title links get a 44 px minimum tap height. +- **ZH leak fixed at the source.** `Archive.astro` printed raw category slugs in the row tail and in + the category chips; both now go through `categoryLabel(category, lang)` (运维架构 / 工程案例 / …). +- **Smaller craft fixes found while reviewing screenshots**: the two chip strips were unlabelled and + read as one list with a duplicated `devops` (category 30 vs topic 6) → labelled *Category* / *Topic*, + stacked above the chips below 700 px; rows now cap tags at four plus a `+N` chip so card rhythm + stops breaking; the nav gained `aria-current="page"` (it had no active state at all). +- **Docs:** `scripts/probe-layout.mjs` is committed as the repeatable gate for this class of bug. + ## 5. Conventions (non-negotiable) - Push git.hoelee.com first, then GitHub