SingleBlog

Purpose

The SingleBlog component renders a single blog post page.

It:

renders the post category link (when present)

renders title, hero image, published date and estimated reading time

renders post tags and the rich HTML content

renders sticky share buttons (Facebook + LinkedIn) that share the current page URL

Inputs (model contract)

Model shape (storefront example)

{
  "canSharePost": true,
  "post": {
    "id": "Post Id",
    "title": "Sample title",
    "content": "<p>Sample content</p>",
    "alias": "sample-post-alias",
    "tags": [
      "sample-tag",
      "..."
    ],
    "categoryName": "Sample text",
    "categoryAlias": "sample-category",
    "publishedAt": "2026-01-01T00:00:00.0000000",
    "mediaItem": {
      "id": "Media Item Id",
      "link": "https://example.com/media/sample.jpg",
      "mediaType": "Image"
    }
  },
  "name": "SingleBlog",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirSingleBlog",
    "name": "SingleBlog",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": ""
  },
  "translations": {
    "clickToLearnMoreAboutCategory": "Sample text",
    "sharePost": "Sample text",
    "hours": "Sample text",
    "...": "..."
  }
}

Required fields

settings.id

post

Optional fields

settings.cssClass

post.categoryName, post.categoryAlias (category link is hidden if missing)

post.title

post.mediaItem.link (hero image is hidden if missing)

post.tags[]

post.content (rendered as raw HTML)

canSharePost (present in the model; the current Liquid template does not use it)

translations.*

JavaScript

Global object

Components/SingleBlog/Default.js exposes a single Alpine object:

Liquid binds it via Alpine:

<section x-data="singleblogdefault">

`init()`

What it does

Captures pageUrl from window.location.href (used for share links).

Tracks header height (for sticky share buttons offset).

Computes the reading time based on the post content text.

Key behaviors / edge cases

Attaches resize and scroll listeners so header height stays correct.

`updateHeaderHeight()`

What it does

Reads <header> height and stores it in headerHeight.

`getReadingTime()`

What it does

Reads #post-wrap.innerText, counts words, and estimates reading time.

Key behaviors / edge cases

Uses wps = 3.8 (words per second).

If the result is under 1 minute, it sets time.minutes = -2.

The template treats time.minutes <= 0 as “< 1 minute”.

Dependencies

Alpine.js

Liquid globals:

the <header> element height (sticky offset)

Notes

Share links are built client-side using pageUrl, so they always share the current URL.

The post HTML content is rendered as raw HTML ({{ blog.content }}), so the backend is expected to provide safe HTML.

Extras

Template behavior (Liquid + Alpine)

Renders a category link to /blog/posts/<categoryAlias> when category info exists.

Uses a sticky share buttons column and applies a dynamic top style from headerHeight.

Displays reading time using time.hours and time.minutes computed in JS.

SingleBlog

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

init()#

updateHeaderHeight()#

getReadingTime()#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Purpose

Inputs (model contract)

Model shape (storefront example)

Required fields

Optional fields

JavaScript

Global object

`init()`

`updateHeaderHeight()`

`getReadingTime()`

Dependencies

Notes

Extras

Template behavior (Liquid + Alpine)