Live design demo
A bilingual bento journal with MDX notes, projects, and interactive demos — open the live showcase. Navigate inside the frame — you are still on Tawny.
2025
幫助人們發現自我成長的冪律法則——微小而持續的行動，會隨時間複利成非凡成果。
我在 2025 年建立 PowLaw，作為朝向複利成長的溫和提醒。核心想法很簡單：多數有意義的改變不是一次爆發，而是由可重複的小行動累積而成。
冪律分佈無所不在——財富、注意力、技能。個人成長亦然：少數持續的習慣，往往驅動大部分長期進展。
PowLaw 幫助你：
產品刻意保持極簡——沒有喧鬧的遊戲化、沒有無限動態牆，只是一個安靜的地方，讓你明天再出現一次。
Art is a bilingual personal journal built around a brutalist bento home grid. It ships with MDX notes and projects, next-intl for English and Chinese, and interactive tiles — weather, location globe, image and tag carousels.
Use the live demo above to explore the full experience inside Tawny. When you are ready to start from the same foundation, scaffold a copy with the create command below, then replace the placeholder author details and sample content.
Scaffold a local copy with your preferred package manager.
pnpm create tawny@latest art my-appBrowse every file in templates/art.
templates/art
# Bento Journal
A bilingual personal journal template — brutalist bento home grid, MDX posts, and an editorial reading experience.
Design by [Hugo Lin](https://1chooo.com).
## Quick start
### Option A — create-next-app (recommended)
```bash
npx create-next-app@latest my-journal \
--example "https://github.com/1chooo/tawny" \
--example-path "templates/art"
```
### Option B — create-tawny CLI (interactive prompts)
```bash
npx create-tawny@latest art my-journal
```
Then:
```bash
cd my-journal
pnpm install # or npm / yarn / bun
cp .env.example .env # optional: set WEATHER_CITY
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000).
## Start here (sample content)
After scaffolding, read these starter articles in order:
1. **[Hello, world](/en/notes/hello-world)** — tone and basic MDX
2. **[Writing in MDX](/en/notes/writing-in-mdx)** — `postMeta`, images, shortcodes (`Callout`, `CodeBlock`, `TagDemo`, `GapDemo`, etc.)
3. **[Sample Project](/en/projects/sample-project)** — how featured projects appear on the home grid
Delete or replace them once you are comfortable.
## Customize these files
| File | What to change |
|------|----------------|
| `messages/en.json`, `messages/zh.json` | Site title, brand name, about page copy, nav labels |
| `lib/bento-links.ts` | GitHub, email, and location quick links on the home grid |
| `lib/locations.ts` | Cities on the globe page (coordinates + ids) |
| `lib/nav.ts` | Navigation items |
| `content/posts/` | Your notes (`.mdx` files with `postMeta` export) |
| `content/projects/` | Your projects (`projectMeta` export) |
| `public/` | Images — `opengraph-image.png` powers the bento carousel and sample MDX |
| `.env` | `WEATHER_CITY` or `WEATHER_LAT` / `WEATHER_LON` for the home weather tile |
### Placeholders (if you used Option A)
Search for `{{AUTHOR_NAME}}`, `{{AUTHOR_EMAIL}}`, `{{GITHUB_USERNAME}}`, and `{{CITY_NAME}}` across the project and replace them, or use Option B which does this automatically.
## Adding a post
Create `content/posts/my-post.mdx`:
```mdx
export const postMeta = {
title: "My first note",
date: "2026-06-06",
description: "A short summary for listings and SEO.",
tags: ["journal"],
};
Your MDX content starts here.
```
No manual registry — `lib/posts.ts` scans `content/posts/` at build time.
- `my-post.mdx` → English only
- `my-post.en.mdx` + `my-post.zh.mdx` → bilingual under the same slug
Visit `/en/notes/my-post` (or `/zh/notes/my-post`).
## Stack
- Next.js 16 App Router & React Server Components
- MDX with remark-gfm
- Tailwind CSS v4 & @tailwindcss/typography
- next-intl (English & Chinese)
- Bento home grid with image, tag, and upcoming carousels
## License
MIT — see [LICENSE](./LICENSE).