Live design demo

Art

A bilingual bento journal with MDX notes, projects, and interactive demos — open the live showcase. Navigate inside the frame — you are still on Tawny.

Open in new tab Back to Designs

designs/art

Hugo Lin

2026年6月6日

用 MDX 寫作

入門指南——文章如何運作、有哪些 MDX 短碼，以及如何加入自己的內容。

閱讀英文版

這本日誌刻意分成兩種氛圍：首頁的粗獷 bento 網格，以及文章頁的編輯式閱讀體驗。首頁用結構說話；文章用文字呼吸。

技術堆疊一覽

點選每張卡片，了解它在專案中的角色：

在 app/[locale]/ 下以檔案路由組織頁面，文章靜態生成，首頁 bento 網格以 Server Component 渲染。

專案結構

展開資料夾，瀏覽目錄配置：

globals.css — 設計 token

*.mdx — 文章與 postMeta

bento/ — 首頁網格

mdx/ — 互動式文章區塊

lib/posts.ts — 掃描 content/posts/

messages/ — UI 翻譯（en、zh）

i18n/ — 語系路由

逐步操作

在 content/posts/ 放入 .mdx 檔案。匯出 postMeta 物件，包含 title、date、description 與可選的 tags。slug 來自檔名——hello-world.mdx 對應 /notes/hello-world。

動手試試

新文章的基本結構如下：

content/posts/my-post.mdx

export const postMeta = {
title: "我的第一篇筆記",
date: "2026-06-06",
description: "供列表與 SEO 使用的簡短摘要。",
tags: ["journal"],
};

你的 MDX 內容從這裡開始。

啟動開發伺服器：

終端機

pnpm dev

前往 /zh/notes/my-post 即可預覽。

MDX 中的圖片

將圖片放在 public/，用標準 markdown 語法引用。全域 MdxImg 元件會加上細框與間距：

首頁輪播圖

同一張圖也會出現在首頁 bento 的圖片輪播中。

標籤與探索

標籤是 postMeta 上的可選字串。它們驅動筆記列表的篩選 pill、文章頁可點擊的標籤，以及首頁 bento 的標籤輪播。

試試下方的篩選器——它使用本站的真實文章：

試試用標籤篩選

黑色間距design, bento, css, rwd
打造這本日誌guide, nextjs, mdx, build
用 MDX 寫作guide, mdx, journal
On makingcraft, process, design
Hello, worldjournal, intro

Bento 間距（互動示範）

首頁網格用單一 CSS token 控制格子之間的黑線。拖曳滑桿，感受間距大小對版面的影響：

Adjust the gap

CSS variable: --spacing-art-bento-gap: 8px

Mini bento preview

接下來

瀏覽完整筆記列表，閱讀 Hello, world 感受語氣，然後用你自己的文字取代這篇指南。

最好的日誌都是一小步一小步長出來的——一篇文章、一個標籤、一頁安靜的版面。

About

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.

Get the template

Scaffold a local copy with your preferred package manager.

Terminal

pnpm create tawny@latest art my-app

Template source

Browse every file in templates/art.

templates/art

README.md

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