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

June 6, 2026

Writing in MDX

A starter guide — how posts work, what MDX shortcodes are available, and how to add your own content.

Read in 中文

This journal splits two moods: a brutalist bento home and an editorial reading experience for posts. The home grid is loud with structure; the articles are calm with words.

Stack at a glance

Click each card to read what it does in this project:

File-based routing under app/[locale]/, static generation for posts, and server components for the bento home grid.

Project shape

Expand folders to explore the layout:

globals.css — design tokens

*.mdx — articles + postMeta

bento/ — home grid

mdx/ — interactive article blocks

lib/posts.ts — scans content/posts/

messages/ — UI translations (en, zh)

i18n/ — locale routing

Step-by-step

Drop a .mdx file in content/posts/. Export a postMeta object with title, date, description, and optional tags. The slug comes from the filename — hello-world.mdx becomes /notes/hello-world.

Try it yourself

Here is the shape of a new post:

content/posts/my-post.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.

Then run the dev server:

Terminal

pnpm dev

Visit /en/notes/my-post to see it live.

Images in MDX

Place images in public/ and reference them with standard markdown syntax. The global MdxImg component adds a subtle border and spacing:

Gallery hero

The same asset powers the image carousel on the home bento grid.

Tags and discovery

Tags are optional strings on each post's postMeta. They power filter pills on the notes index, clickable tags on article headers, and the tag carousel on the home grid.

Try the filter below — it uses real posts from this site:

Try filtering by tag

The black gapdesign, bento, css, rwd
Building this journalguide, nextjs, mdx, build
Writing in MDXguide, mdx, journal
On makingcraft, process, design
Hello, worldjournal, intro

Bento gaps (interactive demo)

The home grid uses a single CSS token for black lines between tiles. Drag the slider to see how gap size changes the feel:

Adjust the gap

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

Mini bento preview

What is next

Browse the full notes index, read Hello, world for the site's tone, then replace this file with your own writing.

The best journals are built in small steps — one post, one tag, one quiet page at a time.

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