---
id: portfolio.ds.project-story-page
name: "Project Story Page"
type: template
status: active
relations: [{"type":"related_to","target":"portfolio.ds.article-page"},{"type":"related_to","target":"portfolio.ds.project-landing-page"},{"type":"related_to","target":"portfolio.ds.rich-text"}]
sources: ["apps/portfolio-site/src/design-system/docs/project-story-page.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/ProjectStoryPage.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/project-story-page.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/project-story-page.astro"]
---
# Project Story Page

## Purpose
Article-shaped page template for the complete story behind one project.

`Project Story Page` reuses `Article Page` as-is so a project story has the same header, summary, and Rich Text reading experience as an article. It deliberately ends after the story and does not expose related items.

This is the secondary narrative route. The landing page must remain understandable and actionable without opening it.

## Contract
- Belongs under `Page Template > Content` beside `Project Landing Page`.
- Uses `Article Page` as-is without parent styling overrides.
- Renders title, date, topics, summary, and mapped Rich Text body through the Article Page contract.
- Does not expose or populate the Article Page `after-body` slot.
- Does not render Related Projects or Related Reading.
- Receives Wiki Markdown only after route-level mapping into Rich Text child components.
- Expands context, reasoning, implementation, evidence, and limitations without duplicating the six-field Project Brief verbatim.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `publishedAt` | ISO date string | Supplies story metadata to Article Header. |
| `summary` | string | Renders the short-version summary. |
| `title` | string | Renders the story page title. |
| `topics` | string[] | Renders project topics through Tag. |
| `topicsAriaLabel` | string | Localized accessible name passed to Article Page. |
| default slot | Rich Text children | Supplies the complete story body. |

## Related Components And Patterns

- `Project Landing Page`: links to the dedicated story route.
- `Article Page`: owns the reused reading layout.
- `Rich Text`: owns the long-form content presentation.

## Code Paths

- `packages/design-system/src/components/ProjectStoryPage.astro`
- `apps/portfolio-site/src/pages/projects/[slug]/story.astro`
- `apps/portfolio-site/src/design-system/docs/project-story-page.astro`

## Use

Use when this named Design System contract is required by an approved composition or product surface.

## Do Not Use

Do not use outside the documented source, composition, or ownership contract without Design System Architect review.

## Accessibility

Preserve applicable accessibility behavior of the implementation and verify changes in actual usage.

## Verification

- Confirm every source path in frontmatter resolves to current implementation or documentation.
- Run `scripts/design-system-graph --check --no-write`.
- Verify actual usage and documented Preview against the enabled package profiles before completion.