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

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

Reads <header> height and stores it in headerHeight.

getReadingTime

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)#