Tsubaki (椿)

Tsubaki is a premium Astro blog theme shaped around a Japanese editorial mood: paper-toned surfaces, camellia-red accents, deliberate asymmetry, and typography built from Shippori Mincho B1 and Zen Kaku Gothic New. Version 2.0 is a full redesign focused on calm reading, richer article utilities, and stronger out-of-the-box publishing features.

Live Demo · Buy on Polar.sh

What's New in 2.0

• Complete visual redesign with a more atmospheric Japanese editorial aesthetic
• New typography system using Shippori Mincho B1, Zen Kaku Gothic New, and IBM Plex Mono
• Search page with instant client-side filtering and shareable URL queries
• Related posts, social sharing, newsletter signup, and reading-time metadata built into post pages
• Improved table of contents, article utility layout, and reading progress treatment
• Refined archive, tag, about, and homepage layouts for a more cohesive product feel

Feature Set

• Editorial homepage with issue-style hero, lead essays, and newsletter callout
• Blog archive with tag filtering, pagination, and featured card layouts
• Post pages with reading time, word count, updated date, progress bar, TOC, author bio, social share, newsletter block, and related essays
• Search page for title, description, tags, and author
• Tag index and tag landing pages
• RSS feed and sitemap generation
• Light and dark themes with persisted preference
• View transitions and GSAP-powered page reveals
• Article image lightbox for inline content images
• JSON-LD metadata, canonical URLs, and Open Graph defaults

Built With

• Astro 6
• MDX content collections
• GSAP 3
• Custom CSS design system

Quick Start

pnpm install
pnpm dev

Open http://localhost:4321.

To produce a production build:

pnpm build
pnpm preview

Project Structure

src/
  components/
  content/blog/
  layouts/
  pages/
  styles/
  utils/
docs/support/

Content Authoring

Create .md or .mdx files in src/content/blog/.

---
title: "My First Post"
description: "A short summary used for cards and metadata."
date: 2026-03-01
updatedDate: 2026-03-05
tags: ["design", "astro"]
author: "Your Name"
image:
  src: "/images/post-cover.jpg"
  alt: "A descriptive alt text"
draft: false
---

Your article content goes here.

Supported frontmatter:

| Field | Type | Required | Notes | | --- | --- | --- | --- | | title | string | Yes | Post title | | description | string | Yes | Used for cards and SEO | | date | Date | Yes | Publish date | | updatedDate | Date | No | Optional updated label | | tags | string[] | No | Defaults to [] | | author | string | No | Defaults to Codotx Team | | image | { src, alt } | No | Hero image | | draft | boolean | No | Excluded when true |

Customization

Site settings

Update astro.config.mjs to set your site URL and optional base path.

Brand copy and metadata

Edit src/layouts/BaseLayout.astro, src/components/Nav.astro, and src/components/Footer.astro to change site metadata, navigation labels, and social links.

Visual system

Theme tokens and layout styling live in src/styles/tsubaki.css. This is where you should adjust colors, spacing, type scale, and component surfaces.

Included Pages

• /
• /blog
• /blog/[slug]
• /search
• /about
• /tags
• /tags/[tag]
• /404
• /rss.xml

Support Resources

Support documentation for customers lives in docs/support/:

• installation-guide.md
• faq.md
• response-templates.md
• troubleshooting.md

License

Tsubaki is a commercial theme. Each purchase includes a single-site license unless stated otherwise by the product terms.