Playbook

A clean, text-first Hugo theme for micro.blog. Note that I am not a front-end developer and I just wanted pretty colors and something easy to use.

No images required. No external dependencies (except an optional Google Font). Dark mode included.

---

Features

• Text-first — works great with no images at all
• SEO — Open Graph, Twitter Cards, JSON-LD structured data, canonical URLs, RSS autodiscovery
• Dark mode — automatic via prefers-color-scheme
• Accessible — skip link, ARIA labels, focus styles, semantic HTML
• Micro posts — handles posts without titles gracefully
• Image support — cover images, inline figures with captions, image galleries
• Shortcodes — callout for tip/note/warning boxes
• No unsafe HTML — uses Hugo render hooks and shortcodes instead
• Print styles — clean output when printing posts
• Nunito font — friendly, rounded, loaded from Google Fonts

---

Installation on micro.blog

1. Go to micro.blog → Design → Edit Custom Themes
2. Click New Theme
3. Paste the GitHub repo URL
4. Apply the theme

---

Configuration

[params]
  author      = "Your Name"
  description = "A short description of your blog"
  homeTitle   = "Your Blog"
  homeIntro   = "A sentence or two about what this blog is."

  # Social links (shown in footer)
  twitterHandle = "yourhandle"
  microBlogURL  = "https://micro.blog/yourhandle"
  githubURL     = "https://github.com/yourhandle"

  # Fallback image for Open Graph when no post image is set
  defaultImage = "https://example.com/og-default.jpg"

  # Footer note (HTML allowed)
  footerNote = "Built with Hugo & Playbook"

[markup.goldmark.renderer]
  unsafe = false  # keep false — theme uses render hooks instead

Navigation menu

[[menu.main]]
  name   = "Home"
  url    = "/"
  weight = 1

[[menu.main]]
  name   = "Topics"
  url    = "/tags"
  weight = 2

[[menu.main]]
  name   = "About"
  url    = "/about"
  weight = 3

---

Post front matter

---
title: "My Post"
date: 2026-01-01
tags: ["lego", "coding"]

# Optional — full-width banner image on the post page
cover: "/images/my-photo.jpg"

# Optional — image used only for social sharing (OG/Twitter), not shown on page
ogImage: "/images/og-preview.jpg"

# Optional — overrides the auto-generated meta description
description: "A short summary for search engines and social cards."
---

---

Images in posts

Regular image — render hook adds lazy loading automatically:

![Alt text](/images/photo.jpg)

Image with caption — use the title field:

![Alt text](/images/photo.jpg "This becomes the caption")

Figure shortcode — Hugo built-in, full control:

{{</* figure src="/images/photo.jpg" alt="..." caption="My caption" */>}}

Gallery grid — wrap images in a div with class gallery using the figure shortcode's class param... or just drop multiple images and style with CSS.

---

Shortcodes

Callout

Highlight a tip, note, or warning:

{{</* callout type="tip" title="Pro tip" */>}}
Your content here. Markdown works inside.
{{</* /callout */>}}

Types: tip (default, indigo), note (gray), warning (amber)

---

License

MIT — see LICENSE.