# Article Page

## Essence

Page-content article wrapper for a single public note/article.

`Article Page` composes the article header, short version, body, and optional after-body area of an approved public article snapshot.

## Hook

Use inside `Page Template` for `/notes/[slug]/`.

## Internal Rules

- Is page content only; it does not render Header or Page Template.
- Owns no spacing directly; child blocks consume `Block` spacing.
- Uses `Article Header` for optional `publishedAt`, `title`, and topics.
- Uses `Article Short Version` for optional `shortVersion`.
- Uses `Rich Text` for the default body slot.
- Adds the article body heading inside the Rich Text flow before slotted article body content.
- Does not own back navigation or related reading data.
- The slotted content must already be mapped into Rich Text child components; callers must remove any duplicated first markdown heading before passing content in.
- Route-level note pages must map Wiki Markdown into Rich Text child components before passing slot content into `Article Page`; never pass raw `MarkdownBody` or local presentation overrides.
- Optional `after-body` slot is reserved for caller-owned article furniture that must appear after the body, such as related reading.
- `after-body` renders outside the article child-block padding but stays inside the `Article Page` width.
- The parent route or future sibling components own navigation and other article framing around the header/short-version/body set.
- Does not edit article meaning.
- Does not render private, draft, review, transcript, or raw Wiki material.

## Use When

- Rendering the header, short version, and main body portion of one public note/article.
- Previewing long-form body rhythm in the Design System.

## Do Not Use When

- Rendering article back navigation or related reading.
- Rendering the all-articles list.
- Rendering a case study page unless it adopts the same body contract.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `publishedAt` | ISO date string | Optional publication date rendered before title. |
| `title` | string | Optional article title rendered before the body. |
| `topics` | string[] | Optional article topics rendered as tags under the title. |
| `shortVersion` | string | Optional short article version rendered through `Article Short Version`. |
| default slot | rendered body content | Main article body. |
| `after-body` slot | rendered content | Optional caller-owned content rendered below the article body at Article Page width. |

## Accessibility Notes

- Creates the article page `h1` when `title` is provided.
- Uses the same metadata rhythm and date formatting as `Article Card`.
- Uses `Tag` for topics under the title.
- Renders `shortVersion` as a left-rule summary block before the body for lazy readers.
- The slotted body content must provide appropriate readable structure below the title.
- Design System preview composes the same child blocks as production; do not add unrelated preview furniture inside Article Page.

## Related Components And Patterns

- `Article Header`: renders metadata, title, and topics.
- `Article Short Version`: renders the lazy-reader summary.
- `Rich Text`: renders the main body heading and slotted article text.
- `Rich Text Paragraph`, `Rich Text Heading`, `Rich Text List`, and sibling Rich Text blocks: render mapped Markdown body content.
- `Tag`: renders article topics.
- `Related Reading`: can be passed through `after-body` by article routes.
- `Articles Index Page`: sibling public article surface.

## Code Paths

- `packages/design-system/src/components/ArticlePage.astro`
- `apps/portfolio-site/src/pages/notes/[slug].astro`
- `apps/portfolio-site/src/lib/markdownToRichText.ts`