Add project detail pages

[schalkneethling]

Summary

• expand /projects/[slug] into the project deep-dive page structure
• add optional project detail metadata and starter content for css-community-reset, ossreleasefeed-v2, and web-platform-pulse
• add shared project URL/static-path helpers with unit coverage

Testing

• pnpm exec vitest run tests/projectPages.test.ts
• pnpm run test:unit
• pnpm run typecheck
• pnpm run build
• pnpm run test:a11y
• production-preview screenshots for /projects/css-community-reset at desktop and mobile widths

Stacked on #1350. Closes #1345.

Summary by CodeRabbit

• New Features

  • Project pages now show richer, structured project details, including goal, current status, next steps, and ways to get involved.
  • Project cards and page links now use consistent project URLs, including support for additional project resources when available.

• Bug Fixes

  • Improved project page path generation to keep project links and page routes aligned.

• Content Updates

  • Added more descriptive metadata to several project entries for a more informative browsing experience.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 84377d69-65d4-4305-a0d3-4a1b1144c28d

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR adds internal project detail pages. It introduces getProjectPath/getProjectStaticPaths helpers, extends the project content schema and three markdown files with new metadata fields (whatAndWhy, goalSummary, currentState, nextSteps, contributionGuidance, goalDocUrl, roadmapDocUrl), reworks the [slug].astro page layout, and adds tests.

Changes

Project detail page feature

Layer / File(s)	Summary
Project path helper utilities src/lib/projectPages.ts, tests/projectPages.test.ts, src/components/Projects/ProjectList.astro	Adds getProjectPath and getProjectStaticPaths helpers with tests, and updates ProjectList.astro to build card URLs via the shared helper.
Schema and content metadata src/content.config.ts, src/content/projects/*.md	Extends the projectsCollection Zod schema with new optional fields and populates them in three project markdown files.
Project detail page layout and logic src/pages/projects/[slug].astro	Uses getProjectStaticPaths, derives fallback data fields, builds a filtered projectLinks array, and renders a restructured multi-section layout with new CSS including responsive rules.

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

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant SlugPage as [slug].astro
  participant Helper as projectPages.ts
  participant Content as Content Collection

  Browser->>SlugPage: GET /projects/{slug}
  SlugPage->>Helper: getProjectStaticPaths(projects)
  Helper->>Content: map project entries
  Content-->>Helper: project data (whatAndWhy, goalSummary, nextSteps, ...)
  Helper-->>SlugPage: static paths with props
  SlugPage-->>Browser: rendered project detail page

Loading

Related issues: #1345 (Add project detail pages for What I want to exist)

Suggested labels: review_needed_junior_swe, review_depth_standard

Suggested reviewers: schalkneethling

🐰 A helper hops, a schema grows,
New fields for goals and next-step rows,
The slug page blooms with facts and links,
While tests confirm just what it thinks,
A tidy warren, project pages glow.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The route, detail layout, starter content for three projects, and helper tests align with the core feature, but a11y coverage and validation evidence are not shown.	Add at least one accessibility test for a representative project page and document the typecheck, build, and a11y runs.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding project detail pages.
Out of Scope Changes check	✅ Passed	The changes stay focused on project detail pages, supporting content, and shared helpers/tests with no obvious unrelated additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/project-detail-pages-1345

---

_{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.

[coderabbitai]

🧹 Nitpick comments (1)

src/pages/projects/[slug].astro (1)

31-54: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

filter(Boolean) doesn't narrow out null from the array type.

projectLinks remains typed as ({ href, label } | null)[] since Boolean isn't a type predicate. The subsequent link && (...) guard in the template compensates at runtime, but the type looseness defeats the point of filtering and could mask a real null downstream if the guard is ever removed.

♻️ Proposed fix using a type predicate

-].filter(Boolean);
+].filter((link): link is NonNullable<typeof link> => link !== null);

Then the link && guard in the template (Line 121) becomes unnecessary.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/projects/`[slug].astro around lines 31 - 54, `projectLinks` is
still typed with possible `null` entries because `filter(Boolean)` is not a type
predicate. Update the `projectLinks` construction in the `[slug].astro` page to
use a proper type-guard filter (or build the array without `null`s) so the
result is inferred as only link objects. Then remove the redundant `link &&`
check in the template and iterate directly over the narrowed `projectLinks`
items.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/pages/projects/`[slug].astro:
- Around line 31-54: `projectLinks` is still typed with possible `null` entries
because `filter(Boolean)` is not a type predicate. Update the `projectLinks`
construction in the `[slug].astro` page to use a proper type-guard filter (or
build the array without `null`s) so the result is inferred as only link objects.
Then remove the redundant `link &&` check in the template and iterate directly
over the narrowed `projectLinks` items.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cda4944f-79f2-46ea-b220-6f8e930b87ec

📥 Commits

Reviewing files that changed from the base of the PR and between 98ae281 and 603ac95.

📒 Files selected for processing (8)

• src/components/Projects/ProjectList.astro
• src/content.config.ts
• src/content/projects/css-community-reset.md
• src/content/projects/ossreleasefeed-v2.md
• src/content/projects/web-platform-pulse.md
• src/lib/projectPages.ts
• src/pages/projects/[slug].astro
• tests/projectPages.test.ts