Monthly Love
Monthly Love
This is a tiny, private letter site for sending monthly letters to someone special. Letters are written in Notion and published to the web as password-protected pages: one password per letter, plus a separate password for the index of all letters. It was developed with Next.js, TypeScript, and the Notion API.
(portal passcode: missu)
Think of it as a minimal, personalized blog where every post is sealed in its own envelope: a locked page renders only the password form, and the letter body is never fetched from Notion until the right password is entered, so it never appears in the HTML or any HTTP response.
Key Features
- Notion as the CMS — write a letter in Notion, check the Published box, and it goes live at
/p/<slug>within a minute (ISR revalidates every 60 seconds), without a redeploy. - One password per letter — each letter has its own password, verified with
crypto.timingSafeEqualto resist enumeration attacks. Locked pages never leak the article body. - Stay unlocked — once a letter is opened, its slug is stored in a signed and encrypted
iron-sessioncookie (30-day lifetime), so returning readers aren’t asked again. - Rich letter content — Notion blocks are converted to Markdown server-side and rendered with GFM tables, task lists, toggles, images, and code blocks, plus a floating table of contents with scroll-spy.
- Bilingual interface — the site chrome switches between English and 中文.
- Comments back into Notion — visitor comments are stored as native Notion page comments, so replies land right where the letters are written.
- Private by design — every response carries
X-Robots-Tag: noindex, nofollow, so letters stay out of search engines.
How It Works
Writing a letter is the whole workflow:
- Draft the letter as a page in a Notion database with
Title,Slug,Password,Date, andExcerptproperties. - Check the Published checkbox.
- Share the short link and the password with your reader — that’s it.
On the reader’s side, the letter opens with a password prompt. After unlocking, the page remembers them for 30 days.
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Server Components, Server Actions) |
| Language | TypeScript |
| UI | React 19 + Tailwind CSS v4 |
| CMS | Notion API (@notionhq/client) |
| Markdown | notion-to-md + react-markdown |
| Sessions | iron-session |