npm package: @m615926/tsubaki
Description: Tsubaki v4 — community shopping street Astro theme with 4-panel hero carousel, split layouts, and CSS marquee footer.
Latest version: 4.0.0

# 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.

![Tsubaki Banner](./public/og-image.png)

**[Live Demo](https://tsubaki-demo.netlify.app)** · **[Buy on Polar.sh](https://polar.sh/codotx)**

## 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

```bash
pnpm install
pnpm dev
```

Open `http://localhost:4321`.

To produce a production build:

```bash
pnpm build
pnpm preview
```

## Project Structure

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

## Content Authoring

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

```md
---
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.