MintPrin.com
Menu

My First Little Thing - Complete Reference Template

English

This is the complete reference template for creating blog posts. Duplicate this file to create new posts with all the proper structure and frontmatter fields.

Featured image

How to Use This Template

This post serves as a complete reference guide for creating new blog posts on MintPrin.com. Duplicate this file whenever you want to create a new post!

Note: The featured image you see on this post is the default fallback placeholder (default-featured.webp). It appears automatically when no custom featured_image is specified in the frontmatter.

Quick Start Guide

1. Create Your Post File

# Copy this template
cp mysite/content/my-first-little-thing.md mysite/content/your-new-post.md

# The filename becomes your URL
# Example: my-awesome-post.md → /my-awesome-post

2. Update the Frontmatter

Edit the section between +++ markers at the top:

  • title: Your post title (shown on the page and in the directory)
  • date: Publication date (YYYY-MM-DD format)
  • description: Brief summary (shown in directory listing and meta tags)
  • post_type: Must be "LittleThingsWorthSharing" for blog posts
  • language: "English" or "Thai" (displays as a tag on the post)
  • featured_image: (Optional) Path to your custom 1200×1200 image

If you want a custom featured image instead of the default placeholder:

  1. Create or find a 1200×1200px image (PNG, JPG, or WebP)
  2. Save it to: mysite/static/images/LittleThingsWorthSharing/
  3. In the frontmatter, uncomment and update:
    featured_image = "/images/LittleThingsWorthSharing/your-image.jpg"

If you skip this step, the beautiful fallback placeholder image (default-featured.webp) will be used automatically.

4. Write Your Content

Everything below the second +++ is your post content. Use Markdown!

  • Dimensions: 1200×1200px (1:1 aspect ratio)
  • Format: PNG, JPG, or WebP
  • File size: Under 200KB for optimal performance
  • Location: mysite/static/images/LittleThingsWorthSharing/

Where Images Appear

  • Directory page (/LittleThingsWorthSharing): Shows as thumbnail on the left side (192px on desktop, full width on mobile)
  • Individual post page: Shows as hero image at the top, full width with rounded corners and border

Styling Features

  • Rounded corners matching the design system (rounded-card)
  • Mint border that highlights on hover
  • Smooth scale animation on hover (directory thumbnails only)
  • Full dark mode support
  • Responsive sizing

Markdown Examples

You can use all standard Markdown features:

Headings

Heading 1 (avoid - reserved for post title)

Heading 2

Heading 3

Heading 4

Text Formatting

Bold text for emphasis
Italic text for editorial style
Inline code for technical terms

Lists

Unordered list:

  • First item
  • Second item
  • Third item

Ordered list:

  1. Step one
  2. Step two
  3. Step three

Link to MintPrin.com
Link to Little Things Worth Sharing
Link to Design System

Code Blocks

def hello_world():
    print("Hello from a code block!")

const greeting = "Hello, world!";
console.log(greeting);

Blockquotes

This is a blockquote. It uses the body font (Bai Jamjuree) in italic style for an editorial feel that fits the Mint design aesthetic.

Images in Content

You can also add images within your post content (separate from the featured image):

![Alt text](/images/LittleThingsWorthSharing/content-image.jpg)

Horizontal Rules

Use --- to create a horizontal divider.

URL Structure

Important: Individual blog posts live at the root level for clean URLs:

  • This file: mysite/content/my-first-little-thing.md
  • URL: /my-first-little-thing
  • NOT /LittleThingsWorthSharing/my-first-little-thing

The directory page at /LittleThingsWorthSharing automatically lists all posts tagged with post_type = "LittleThingsWorthSharing".

Design System Integration

All blog posts automatically use the Mint design system:

Typography

  • Headings: Noto Sans Thai (clean, modern, bilingual support)
  • Body: Bai Jamjuree (warm, readable, Thai-optimized)
  • Code: IBM Plex Mono (technical, monospaced)

Colors

  • Text follows light/dark mode automatically
  • Links use mint accent color with smooth hover transitions
  • Code blocks use neutral backgrounds with accent text

Spacing & Layout

  • Maximum width: 768px (prose column)
  • Generous vertical rhythm using design system spacing tokens
  • All transitions use duration-smooth and ease-mint timing

File Checklist

Before publishing your new post:

  • Updated title in frontmatter
  • Set correct date (YYYY-MM-DD)
  • Added descriptive description (for SEO and directory listing)
  • Confirmed post_type = "LittleThingsWorthSharing"
  • Added featured_image (optional) or confirmed placeholder is acceptable
  • Replaced template content with your actual post
  • Tested the post looks good in both light and dark modes

That's It!

You're all set. This template includes everything you need to create beautiful, consistent blog posts on MintPrin.com. Just duplicate, edit, and publish!

Happy writing! 🎉

← Back to Little Things Worth Sharing