Content Components Toolbox

This page demonstrates every content component available on this site. When writing a post, copy the markup from any code block below, paste it into your Markdown draft, and replace the sample values with your own. All components support light and dark mode.

1. Product / Resource Card

A mobile-friendly card for course recommendations, books, gear reviews or any affiliate product. The outbound link is automatically tagged with rel="nofollow sponsored noopener".

Syntax:

{% product img="https://example.com/cover.jpg" badge="Best Course" title="Course Name" desc="A one-line description." old="$89.99" price="$19.99" rating="4.8" link="https://example.com/" btn="Start Learning" %}

All parameters except title and link are optional. badge, old (strikethrough price), and rating can be omitted.

Result:

Best Course★ 4.8

Complete Python Bootcamp 2026

From absolute beginner to building real projects — 32 hours of video, 12 quizzes and a certificate.

$89.99$19.99

Start Learning ↗

i

Affiliate disclosure

If you earn commissions, add a short FTC-style disclosure near the card, for example: “This post contains affiliate links and I may earn a small commission at no cost to you.”

2. Coupon Code

A one-click copyable coupon or promo code — a familiar pattern for online-course sales and software deals.

Syntax:

{% coupon code="STUDY20" title="20% off all courses" note="Enter the code at checkout. Click to copy." %}

Result:

COUPON20% off all coursesEnter the code at checkout. Click to copy.

STUDY20Copy Code

3. Download Card

A resource card for Google Drive, Dropbox, OneDrive, MEGA, Gumroad, GitHub, iCloud, MediaFire, TeraBox or a direct link. Each platform gets its own brand-colored badge.

Syntax:

{% drive platform="Google Drive" name="Python Cheat Sheet (PDF, 3 MB)" url="https://drive.google.com/" code="AB12-CD34" %}

Parameters: platform (drives the badge color), name, url, code (optional access code), btn (optional, defaults to Download).

Result:

Google DrivePython Cheat Sheet (PDF, 3 MB)

Download ↗Access code AB12-CD34Copy

GitHubPractice repository

Download ↗

4. YouTube Video

Pass either a video id or a full url. The player is responsive (16:9).

Syntax:

{% youtube id="jNQXAC9IVRw" title="Me at the zoo" %}

Result:

5. Spotify Player

Embed a focus-music track, album, playlist, episode or show. The ID is the last part of the Spotify share URL — perfect for “study music” posts.

Syntax:

{% spotify type="playlist" id="37i9dQZF1DXcBWIGoYBM5M" %}

Result:

6. Local Video and Audio

Put media files in your source/media/ folder (for example source/media/demo.mp4) and reference them with an absolute path. Audio files (.mp3, .m4a, .wav, .ogg, .aac, .flac) render as an audio player automatically.

Syntax:

{% video src="/media/demo.mp4" poster="/media/poster.jpg" %}
{% video src="/media/demo.mp3" %}

Result (hosted samples used for demonstration):

⚠

Tip

Avoid committing large media files to Git — repositories quickly become slow. Host big videos on YouTube and embed them instead.

7. Callout Boxes

Highlight notes, warnings, tips or successes. Types: info, success, warning, error.

Syntax:

{% alert type="warning" title="Heads up" %}
This is the callout body. **Markdown is supported.**
{% endalert %}

Result:

i

Note

This is a neutral info callout.

✓

Correct

Your solution passes all test cases.

⚠

A warning without a title.

✕

Common pitfall

Off-by-one errors happen here — remember that range endpoints are exclusive.

8. Collapsible Block (FAQ)

A native <details> block, ideal for FAQ sections or optional extra detail. Add open="true" to expand it by default.

Syntax:

{% collapse title="Do I need prior experience?" %}
No — the beginner track starts from zero.
{% endcollapse %}

Result:

Do I need prior experience?

No. The beginner track starts from zero and every lesson builds on the previous one.

How long do I keep access?

Forever. Once enrolled, all materials — including future updates — stay available on your account.

9. Newsletter Form

A Buttondown-powered subscribe box so readers get new notes and resources in their inbox.

Syntax:

{% subscribe %}

Optional parameters: title, desc, ph (placeholder), btn.

Result:

Subscribe to the newsletterNew posts, delivered to your inbox. No spam, unsubscribe anytime.

Subscribe

10. Web-Novel Card (Platform Promos)

A card purpose-built for promoting serialized fiction apps such as Novellia, GoodNovel, PlotNovel and Novel Master: a portrait cover, a brand-colored platform badge, an Ongoing/Completed status pill, chapter count, star rating, genre tags, a free-chapters hook and a “Start Reading” button.

Syntax:

{% novel platform="GoodNovel" cover="/images/cover.jpg" title="Novel Title" author="Pen Name" status="Ongoing" chapters="486" rating="4.8" genres="Werewolf, Romance" desc="A one-line hook." free="First 30 chapters free" link="https://..." btn="Start Reading" %}

Only title and link are required. Badge colors are built in for Novellia, GoodNovel, PlotNovel, Novel Master, Royal Road, Wattpad, WebNovel, Kindle, Kobo and Bookshop.org (any other platform gets a neutral blue badge). status accepts Ongoing, Completed or Hiatus; omit any field you do not need.

Result:

GoodNovelOngoing★ 4.8

Her Mate, Her Enemy

by Luna Vane

WerewolfRomanceParanormal

📖 486 chapters🎁 First 30 chapters free

On the night of the blood moon, she finds out her destined mate is the alpha who destroyed her pack — and the feeling is mutual.

Start Reading ↗

NovelliaCompleted★ 4.9

Sword of the Ninth Heaven

by Mo Qingchen

XianxiaCultivationAdventure

📖 1204 chapters🎁 Full book unlocked

A discarded outer disciple inherits a broken jade sword containing the will of an immortal emperor. The long climb to the ninth heaven begins tonight.

Read the Full Novel ↗

i

Affiliate disclosure

Platform promo links are monetized links — keep a one-line FTC disclosure on the page, for example: “This post contains affiliate links; I may earn a commission when you start reading at no cost to you.”

---

That is the full toolbox. New components will be added to this page as they are built.