Example: blog post layout
You can't hold a gun to someone's head and say "Be Creative."
Jan 28, 2021
Use this post as a live preview while you edit. Jump back to the template index. In the Markdown source, each pattern below is preceded by a format label (gray monospace line) showing the HTML or Markdown shape to copy.
Frontmatter (YAML)
Minimum required fields are title, date, and layout: layouts/post-blog.njk. Optional fields include description, draft, subtitle, tags, thumbnail, thumbnailAlt (Open Graph), updated, and optionally hero + heroAlt. Hero is optional: if you omit hero, nothing is rendered above the title. If you set hero, the file must exist under /static/ (validated on build). See scripts/layout-schema.mjs for the full contract.
---
title: "Your title"
date: 2021-01-28
description: "Short description for SEO / listings."
layout: layouts/post-blog.njk
draft: true
thumbnail: /static/posts/your-slug/preview.jpg
thumbnailAlt: Short description of the preview image
# hero: /static/posts/your-slug/hero.jpg # optional; omit for no hero image
# heroAlt: Description of hero for accessibility
subtitle: Optional line under the title
tags: post
---
Body patterns
Paragraph (Markdown)
Plain paragraphs — write normal Markdown text; no wrapper needed.
The best PM's don't come up with creative ideas and strategy all the time. They create space for creative thinking and optimize their process.
Heading (Markdown)
## Section title — use ## / ### for section breaks.
Schedule
Creative thinking takes time. You can't just flip your brain into creative mode instantly.
Pull quote (Markdown)
Use Markdown > at the start of each line (renders as the purple pull-quote style in blog posts).
Sometimes the hardest decisions in life cannot be solved with more thinking. They require listening to something quieter.
Inline image + caption
<img src="…" alt="…" /> then <p class="caption">…</p> on the next line
The movie Soul depicts flow as an alternate plane of existence.
Full-bleed figure (wide image)
<figure class="image-break"> … <img /> … optional <p class="caption"> … </figure>
An example starting point for a post.
Two images + one caption (side by side)
{% imagePair "/static/left.jpg", "/static/right.jpg", "Shared caption", "Alt for left", "Alt for right" %} — alts optional; on very narrow screens the pair stacks in one column.
Spotify track embed
{{ spotifyTrackEmbed("TRACK_ID", "Accessible title") }} — registered in .eleventy.js as a Nunjucks global (no import). Track id from open.spotify.com/track/{id} (see Final Fantasy 7).
More copy (Markdown)
Ordinary paragraphs again — mix with any of the patterns above.
Never start with a blank page. Throughout the week, jot down notes about your topic—words, phrases, links, or an outline. You don't have to start at the beginning; start wherever you feel comfortable.
I'm brad. I write about creativity, tapping into my intuition, and living life to the fullest. I send out a brief email whenever I publish a new video or blog post.
