Complete starter project content

[schalkneethling]

Summary

• Completes editorial detail-page content for the remaining starter projects.
• Adds available GOAL.md, ROADMAP.md, and live-site links for the starter projects where GitHub metadata/docs currently expose them.
• Redesigns project detail pages as project dossiers with a stronger hero, project artifact image, facts rail, action links, goal callout, status sections, technologies, and contribution CTA.
• Extends project content and project rendering tests so every main starter project has detail fields and representative detail pages render project artifacts and key links.

Validation

• pnpm exec vitest run tests/projectContent.test.ts
• pnpm run test:unit
• pnpm run typecheck
• pnpm exec playwright test tests/projects.spec.ts
• pnpm run build
• pnpm run test:a11y

Refs #1346

Summary by CodeRabbit

• New Features
  • Project detail pages now show richer project information, including goal, current status, next steps, and contribution guidance.
  • Project pages also surface key links more clearly, such as repository, live site, goal, and roadmap resources.
• Bug Fixes
  • Improved the layout and presentation of project detail pages for a cleaner, more consistent browsing experience.
• Tests
  • Added coverage to ensure project pages and project metadata display the expected links and details.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 671dcb1c-12f4-493a-b2df-8ac2bf4f2fcd

📥 Commits

Reviewing files that changed from the base of the PR and between 8be9ce0 and 8b0dccb.

📒 Files selected for processing (13)

• src/content/projects/common-components.md
• src/content/projects/create-project-calavera.md
• src/content/projects/css-benchpress.md
• src/content/projects/css-custom-property-inspector.md
• src/content/projects/css-expect.md
• src/content/projects/css-media-pseudo-polyfill.md
• src/content/projects/css-property-type-validator.md
• src/content/projects/masonry-gridlanes-wc.md
• src/content/projects/refined-plan-mode.md
• src/content/projects/skills-autoresearch-flue.md
• src/pages/projects/[slug].astro
• tests/projectContent.test.ts
• tests/projects.spec.ts

---

📝 Walkthrough

Walkthrough

Ten project markdown files gain expanded frontmatter fields (goalDocUrl, roadmapDocUrl, liveUrl, whatAndWhy, goalSummary, currentState, nextSteps, contributionGuidance). The project detail page ([slug].astro) is restructured with new hero/rail/grid layout and CSS to render these fields. Tests validate frontmatter completeness and page rendering.

Changes

Project metadata and detail page

Layer / File(s)	Summary
Starter project frontmatter fields src/content/projects/common-components.md, src/content/projects/create-project-calavera.md, src/content/projects/css-benchpress.md, src/content/projects/css-custom-property-inspector.md, src/content/projects/css-expect.md, src/content/projects/css-media-pseudo-polyfill.md, src/content/projects/css-property-type-validator.md, src/content/projects/masonry-gridlanes-wc.md, src/content/projects/refined-plan-mode.md, src/content/projects/skills-autoresearch-flue.md	Each project's frontmatter is extended with goalDocUrl, roadmapDocUrl/liveUrl (where applicable), whatAndWhy, goalSummary, currentState, nextSteps list, and contributionGuidance.
Project detail page markup and category logic src/pages/projects/[slug].astro	Adds projectKind derived from category and restructures the page into a hero action-list, hero-rail with facts, and grid-based Goal/Now/Next/Technologies/Invitation sections.
Project detail page styling src/pages/projects/[slug].astro	Rewrites the <style> block with hero layout, action-link/button styles, rail/artifact/facts styling, and responsive grid section spacing.
Frontmatter and page tests tests/projectContent.test.ts, tests/projects.spec.ts	Adds test fixtures/helpers verifying required frontmatter fields and expected URLs, plus a Playwright test verifying rendered links, facts, and image on a project detail page.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant SlugPage as "[slug].astro"
  participant ContentCollection

  Browser->>SlugPage: request /projects/:slug
  SlugPage->>ContentCollection: load project.data
  ContentCollection-->>SlugPage: frontmatter (goalDocUrl, roadmapDocUrl, liveUrl, nextSteps, category)
  SlugPage->>SlugPage: derive projectKind from category
  SlugPage-->>Browser: render hero, action-list, facts, Goal/Now/Next sections

Loading

Possibly related issues

• Complete starter project content for What I want to exist #1346: This PR implements the starter project content completion and project-detail link/schema work described in this issue, including the same project markdown files and goal/roadmap/live URLs.

Possibly related PRs

• schalkneethling/schalkneethling.com#1352: Both PRs update the /projects/[slug] detail page implementation, rendering frontmatter-derived sections and links like goal/roadmap/live.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title matches the PR’s main theme of completing starter project content and related page/details updates.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/complete-starter-project-content-1346

---

_{Comment @coderabbitai help to get the list of available commands.}

[schalkneethling]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.