Eko Blog Post Page Copy

Purpose: Section-by-section copy and layout spec for individual blog post pages at eko.day/blog/:slug. Post content is generated by the Blog Generator in the admin app and rendered as markdown on the public site. This document defines the surrounding chrome — header, author bio, related posts, and CTAs.

Source: Features Document

Section 1: Post Header

Component: PostHeader — category badge, title, meta line, and hero image

Layout

ElementDescription
Category badgePill badge — Product, Engineering, or Stories. Links to /blog/category/:category
TitlePost title from the blog generator, rendered as h1
Meta lineAuthor name · Publication date · Reading time (e.g., "5 min read")
Hero imageFull-width image from the blog generator's hero image field

Design note: The meta line uses the reading time calculated from word count (approximately 200 words/minute). The publication date uses relative formatting for recent posts ("2 days ago") and absolute formatting for older posts ("January 15, 2026").

Section 2: Post Body

Component: PostBody — rendered markdown content area

Content

The post body is rendered from the markdown content produced by the Blog Generator. Supported elements:

  • Headings (h2–h4)
  • Paragraphs with bold, italic, and inline code
  • Ordered and unordered lists
  • Code blocks with syntax highlighting
  • Block quotes
  • Images with alt text and captions
  • Horizontal rules as section dividers

Design note: The body uses Tailwind's prose typography for consistent rendering. Maximum content width is constrained for readability (approximately 720px).

Section 3: Author Bio

Component: AuthorCard — compact author bio card below the post body

Layout

ElementDescription
AvatarAuthor profile image, circular crop
NameAuthor display name
RoleAuthor's role at Eko (e.g., "Founder", "Engineer")
Bio1-2 sentence author bio

Default Author

FieldValue
NameJonathan Steele
RoleFounder
BioBuilding Eko — a smarter way to monitor the web pages that matter to you.

Design note: The author card is a reusable component. When multiple authors contribute to the blog, each gets their own bio entry. For the initial launch, a single default author is sufficient.

Component: RelatedPostsGrid — 3-card grid of related posts below the author bio

Heading

Keep reading

Selection Logic

Related posts are selected by:

  1. Same category as the current post (primary signal)
  2. Most recent first
  3. Excludes the current post

Card Structure

Same structure as the post cards on the blog home page:

  • Thumbnail, category badge, title, excerpt, meta line

Empty State

If fewer than 3 related posts exist, show available posts. If the current post is the only post in its category, show the most recent posts from other categories.

Section 5: Newsletter CTA

Component: InlineNewsletterCTA — inline signup prompt after the post content

Heading

Enjoyed this post?

Body

Get new posts delivered to your inbox. We write about web monitoring, product updates, and the stories behind how people use Eko.

Primary CTA

Create an account → /signup

Section 6: Product CTA

Component: ProductCTA — contextual Eko signup callout

Heading

See Eko in action

Body

Eko monitors web pages and tells you when something meaningful changes — in plain English, with a confidence score. Try it free.

Primary CTA

Start monitoring free → /signup

SEO Notes

Design note: Each blog post generates its own SEO metadata from the Blog Generator fields. These are set per-post, not hardcoded.

FieldSourceConvention
Meta titleBlog Generator meta_title fieldMax 60 characters. Format: "Post Title | Eko Blog"
Meta descriptionBlog Generator meta_description fieldMax 160 characters. Summarizes the post's value to the reader.
OG imageBlog Generator hero_image field1200x630px recommended. Falls back to a default Eko blog OG image.
Canonical URLGenerated from slughttps://eko.day/blog/:slug
Structured dataJSON-LD BlogPostingIncludes author, datePublished, dateModified, headline, image