Post Detail section — full article view for a single post

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

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:

Show Post fields

string

required

The headline of the post, displayed as the primary heading of the article view.

string

required

A short summary of the post. Rendered as the subtitle beneath the title.

string

required

The full body content of the post. Rendered in the main content area.

ImageSelectionSchema

Optional cover image displayed above or alongside the article body.

string

required

The fully qualified URL of the image.

string

required

Descriptive alt text for screen readers and the HTML alt attribute.

string

required

Publication date string — for example "2024-06-15". Rendered in the post byline.

string

required

Display name of the post author — for example "Ada Lovelace". Rendered in the post byline.

string

required

Estimated reading time — for example "4 min read". Displayed alongside the date and author.

array

Array of tag references. Used by the Related Tags section to render topic chips below the article. Post Detail does not render tags directly.

string

Optional label for the back-navigation link shown above the article — for example "All posts". When omitted, no back link is rendered.

Settings fields

"none" | "sm" | "md" | "lg" | "xl"

Vertical padding applied above the section. Use "xl" to clear the navigation bar on the first section of the page.

"none" | "sm" | "md" | "lg" | "xl"

Vertical padding applied below the section.

JSON example

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

{
  "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 section. Both sections point item to collection:current, so they automatically receive the same resolved post.

Section Components

APIs & Routes

Post Detail section — full article view for a single post

Data fields

Settings fields

JSON example

Typical page usage

​Data fields

​Settings fields

​JSON example

​Typical page usage

Data fields

Settings fields

JSON example

Typical page usage