> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Post Detail section — full article view for a single post

> The Post Detail section renders the complete content of a single post: title, author, date, reading time, body text, and cover image. Use it on post pages.

The `post-detail` section renders the full article view for a single blog post. It displays the post's title, author byline, publication date, estimated reading time, body content, and optional cover image. Use this section as the primary content section on your `posts/[slug]` dynamic route pages.

The `item` field holds a `$ref` pointer to `collection:current`, which OlonJS resolves at render time to the specific post matching the current URL slug. You author the pointer in your page JSON — you never inline post content directly in the section data.

## Data fields

<ParamField body="item" type="Post" required>
  A collection reference that resolves to the `Post` object for the current route. In your page JSON, set this to `{ "$ref": "collection:current" }`. OlonJS replaces the pointer at render time with the matching post entry.

  After resolution, `item` carries all post content fields:

  <Expandable title="Post fields">
    <ParamField body="title" type="string" required>
      The headline of the post, displayed as the primary heading of the article view.
    </ParamField>

    <ParamField body="excerpt" type="string" required>
      A short summary of the post. Rendered as the subtitle beneath the title.
    </ParamField>

    <ParamField body="body" type="string" required>
      The full body content of the post. Rendered in the main content area.
    </ParamField>

    <ParamField body="image" type="ImageSelectionSchema">
      Optional cover image displayed above or alongside the article body.

      <ParamField body="url" type="string" required>
        The fully qualified URL of the image.
      </ParamField>

      <ParamField body="alt" type="string" required>
        Descriptive alt text for screen readers and the HTML `alt` attribute.
      </ParamField>
    </ParamField>

    <ParamField body="date" type="string" required>
      Publication date string — for example `"2024-06-15"`. Rendered in the post byline.
    </ParamField>

    <ParamField body="author" type="string" required>
      Display name of the post author — for example `"Ada Lovelace"`. Rendered in the post byline.
    </ParamField>

    <ParamField body="readingTime" type="string" required>
      Estimated reading time — for example `"4 min read"`. Displayed alongside the date and author.
    </ParamField>

    <ParamField body="tags" type="array">
      Array of tag references. Used by the [Related Tags](/reference/sections/related-tags) section to render topic chips below the article. Post Detail does not render tags directly.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="backLabel" type="string">
  Optional label for the back-navigation link shown above the article — for example `"All posts"`. When omitted, no back link is rendered.
</ParamField>

## Settings fields

<ParamField body="paddingTop" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied above the section. Use `"xl"` to clear the navigation bar on the first section of the page.
</ParamField>

<ParamField body="paddingBottom" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied below the section.
</ParamField>

## JSON example

The following example is taken from `posts/[slug].json`:

```json theme={null}
{
  "id": "post-detail-body",
  "type": "post-detail",
  "data": {
    "backLabel": "All posts",
    "item": { "$ref": "collection:current" }
  },
  "settings": {
    "paddingTop": "xl"
  }
}
```

At render time, OlonJS resolves `collection:current` to the post whose `id` matches the URL slug — for example, visiting `/posts/write-the-readme-first` causes `item` to be replaced with the full post object for that entry.

## Typical page usage

Add `post-detail` as the first content section on your `posts/[slug]` page, followed by the [Related Tags](/reference/sections/related-tags) section. Both sections point `item` to `collection:current`, so they automatically receive the same resolved post.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.