WebsiteBlog and newsletter website Coming soon
Longhand
Blog and newsletter website for an independent writer, with sidenotes, numbered issues, series, Pagefind search and three RSS feeds.
More screenshots
Essay with sidenotes in the margin 
Numbered newsletter archive 
Pagefind search with essay and letter filters 
Series in three parts
About Longhand
A reading-first website for an independent writer or a small publication, shown here as the fictional Longhand, a weekly letter about slow work and making things by hand. Standard Markdown footnotes become sidenotes in the margin, essays and numbered newsletter issues are two collections with their own archive and RSS feeds, and a series, tags, authors, an archive by year and related posts tie them together. Pagefind search with essay and letter filters, signup forms in five places, an Open Graph image generated for every post, and a designed light and dark mode in Source Serif 4 and Familjen Grotesk. Astro and Tailwind CSS 4.
Best for independent writers, newsletter authors, essayists, small publications and the developers who build their sites.
Features
Sidenotes from footnotes
Standard Markdown footnotes ([^1]) become notes in the margin on wide screens and a tap-to-open toggle on phones, without JavaScript. Figures with captions, pull quotes and Shiki code blocks that follow the theme.
Essays and issues
Two collections: long essays with covers, tags and series, and numbered newsletter issues with a preheader. Eight of each in the demo, with an archive by year and related posts.
Newsletter built in
Signup forms in five places with a demo confirmation; set one endpoint for a Buttondown-, ConvertKit- or Mailchimp-style form or your own webhook. A honeypot filters simple bots.
Search
Pagefind index built with the site, filters for essays and letters, works under a base path, ?q= prefills the box.
Three RSS feeds
Everything, essays only and issues only, each item with its summary, tags and author.
Open Graph images
A 1200x630 card generated at build time for every essay and issue with satori and resvg, in the site's own fonts.
Reading comfort
Optical-size Source Serif 4, a table of contents with the current section highlighted, reading time and a quiet progress bar.
Light and dark
Both designed, system aware, remembered and applied before paint. BlogPosting, PublicationIssue, Person, CreativeWorkSeries and BreadcrumbList structured data.
What's included
- Home
- Essays index and 8 essays
- Newsletter archive and 8 issues
- Series page
- Archive by year
- Tags and 9 tag pages
- Authors and 3 author pages
- Search
- Subscribe
- About
- Contact
- Legal notice and privacy
- 404
Tech stack and fit
Built with
- Astro 7
- TypeScript
- Tailwind CSS 4
- Content collections
- Pagefind
Who it's for
Independent writers, newsletter authors, essayists, small publications and the developers who build their sites.
Tags
Longhand FAQ
How do sidenotes work?
Write ordinary Markdown footnotes ([^1]). A small rehype plugin turns each one into a numbered note placed in the margin on screens 67.5rem and wider, and into a tap-to-open toggle below that. It is CSS only: no JavaScript is needed to read them.
Does Longhand send the newsletter?
No. It is the website around your newsletter. The signup forms validate in the browser and, with an empty endpoint in src/config/site.ts, show a demo confirmation and send nothing. Set the endpoint and field name of your email provider's form (Buttondown-, ConvertKit- or Mailchimp-style) or your own webhook.
How does search work without a server?
Pagefind indexes the built site after astro build and ships a static index in dist/pagefind. The search page loads it from the base path and filters results by essay or letter. In npm run dev there is no index yet: run a build and preview to try it.
Which RSS feeds are included?
Three: /rss.xml with everything, /rss/essays.xml and /rss/issues.xml. Items carry the title, summary, date, tags and author; the full text stays on the site.
Are the social images generated?
Yes. Every essay and issue gets a 1200x630 Open Graph image at build time, drawn with satori and resvg in Source Serif 4 and Familjen Grotesk. The layout is in src/lib/og.ts.
Can there be several authors?
Yes. Authors are a collection with a long bio each; the demo has the main writer and two guests, and every essay names its author by id.
Is there a dark mode?
Yes. Light and dark are both designed, follow the system setting, are switched from the header and remembered; code blocks switch theme with the page.
When can I buy Longhand?
Longhand is coming soon: the live demo is online, and it goes on sale on Gumroad shortly at $29 USD, a one-time purchase with free updates.
Can I use Longhand for a client project?
Yes. The license covers personal and commercial projects, including client work. Reselling or redistributing the template itself is not allowed.
Related templates
Close in purpose or features to Longhand. Browse all 35 templates.
Longhand is coming soon. The whole demo is already online.