Shortcode & Theme Showcase

Feb 19, 2026 · 4 min read AI Generated

🤖

AI Disclosure: This post was written by AI. References to “I” refer to the AI author, not the site owner.

tl;dr: A visual reference for every shortcode and theme element available in the dustinlee.dev blog.

Callout Shortcode

Three variants: alert, warning, and tip.

Alert

Alert callout — Use this for important information that demands attention. This is the default type if none is specified.

Warning

Warning callout — Use this for cautionary notes. Something might break if you ignore this.

Tip

Tip callout — Use this for helpful suggestions. For example: run make help to see all available targets.

Note Shortcode

Three variants: editor, update, and discussion. Each accepts an optional date parameter.

Editorial Note

Editor’s note — This content was reviewed for accuracy and updated to reflect the latest API changes. The original version contained outdated endpoint references.

Editorial Note

Update note — Since this was published, Docker Compose v2 has become the default. All docker-compose commands should now use docker compose (no hyphen).

Editorial Note

Discussion note — There’s an ongoing conversation about whether to use AsciiDoc or Markdown as the default format. See the related issue for context.

AI Chat Shortcode

Renders a prompt/response conversation with different models.

You

What is the difference between Docker volumes and bind mounts?

Claude

Docker volumes are managed entirely by Docker and stored in a Docker-controlled directory on the host. They’re the preferred mechanism for persisting data.

Bind mounts map a specific host path into the container. They’re useful for development (e.g. live-reloading source code) but give the container access to the host filesystem.

# Volume
docker run -v my-data:/app/data myimage

# Bind mount
docker run -v /home/user/code:/app myimage

Key differences:

Volumes are portable; bind mounts depend on the host directory structure
Volumes can be managed with docker volume commands
Bind mounts have better performance on Linux but worse on macOS

You

Write a Python one-liner to reverse a string

GPT-4o

reversed_string = "hello world"[::-1]

This uses Python’s slice notation with a step of -1 to reverse the string. The result would be "dlrow olleh".

Typography

Headings

The heading hierarchy you see above — ## through ### — plus deeper levels:

Fourth Level Heading

Fifth Level Heading

Sixth Level Heading

Inline Elements

Regular text with bold, italic, and inline code. Also a link to somewhere and ~~strikethrough text~~.

Blockquote

This is a blockquote. It uses the green left border accent.
It can span multiple paragraphs and contain formatting.

Lists

Unordered:

First item with some text
Second item with inline code
Third item
- Nested item
- Another nested item

Ordered:

Step one — clone the repository
Step two — install dependencies
Step three — run the dev server
1. Sub-step with more detail
2. Another sub-step

Code Blocks

Bash

#!/bin/bash
# Deploy script
set -euo pipefail

echo "Building blog..."
cd blog && docker compose run --rm hugo --minify

echo "Deploying to Cloudflare Pages..."
CLOUDFLARE_API_TOKEN=$CF_TOKEN npx wrangler pages deploy public/ \
  --project-name=dustinlee-dev-blog \
  --branch=main

echo "Done!"

Python

from pathlib import Path
from datetime import datetime

def find_recent_posts(content_dir: str, days: int = 7) -> list[Path]:
    """Find posts modified within the last N days."""
    cutoff = datetime.now().timestamp() - (days * 86400)
    posts = Path(content_dir).rglob("index.*")
    return [p for p in posts if p.stat().st_mtime > cutoff]

if __name__ == "__main__":
    recent = find_recent_posts("blog/content/posts")
    for post in recent:
        print(f"  {post.parent.name}")

YAML

main:
  - name: "Home"
    url: "/"
    weight: 1
  - name: "Posts"
    url: "/posts/"
    weight: 2
  - name: "Archives"
    url: "/archives/"
    weight: 3

Tables

Command	Description	Default
`make blog-dev`	Start Hugo dev server	`:1313`
`make blog-build`	Build for production	`--minify`
`make blog-test`	Build with drafts, serve on nginx	`:1314`
`make blog-new`	Create new page bundle	`TYPE=post`
`make blog-revision`	Archive current version	—

Horizontal Rule

Content above the rule.

Content below the rule.

Combined Usage

A realistic example mixing shortcodes with regular content:

Here’s how to set up the development environment:

cp .env.example .env
make blog-dev

Tip

The dev server supports live reload — save a file and the browser will refresh automatically.

Editorial Note

As of February 2026, the Docker image uses Hugo v0.154.5. If you need a different version, update the tag in docker-compose.yaml.

If you’re unsure about the Makefile targets:

You

What does make blog-test do?

Claude

make blog-test runs two steps:

Builds the blog with --minify --buildDrafts so you can preview draft content
Serves the built output on port 1314 using an nginx container

This lets you test the production build locally without deploying. Visit http://localhost:1314 to see the result.

Warning

Don’t run make blog-deploy until you’ve tested with make blog-test first. Deployments count towards the Cloudflare Pages free tier limit of 500/month.

Comments

Loading comments...