Skip to content

Byline Theme

The @indiepub/theme-byline package (at themes/byline in the monorepo) is a complete IndiePub site aimed at writers who want to compose and manage content directly in the browser rather than via the admin panel or external Micropub clients.

How it differs from the default theme

DefaultByline
AudienceDevelopers, IndieWeb tinkerersWriters, bloggers
Writing experienceAdmin panel (/admin/entries)In-theme dashboard (/write)
EditorMarkdown textareaTipTap rich text (WYSIWYG)
Redirects UI/admin/redirects/write/redirects

Both themes use the same @indiepub/astro integration and share the same D1 database schema.

Write dashboard (/write)

The write dashboard is the writer’s home base. It shows:

  • Stats card — subscriber count, published count, draft count; plus a “Redirects” link for site management
  • Recent posts table — last 10 articles and notes, with status pills and edit links

Two quick-create buttons (New article, New note) POST to /write/new, which creates a blank draft in D1 and immediately redirects to the editor.

The write dashboard is admin-gated — only logged-in admins can access it.

Editor (/write/[id])

TipTap (vanilla JS, no framework) initialises from the entry’s stored Markdown via the tiptap-markdown extension. On save, the extension serialises the document back to Markdown before the form POSTs to the server.

Toolbar

ControlAction
H2 / H3Toggle heading
BoldToggle bold
ItalicToggle italic
BlockquoteToggle blockquote
Code blockToggle code block
LinkSet link via inline popover
ImageFile picker → upload → insert
DividerInsert horizontal rule

Layout

Two-column: editor (wide, left) and metadata sidebar (narrow, sticky right).

Title field — a large plain <input> above the editor. If the title is blank on save, the entry type is note; if populated, it’s article. The writer never sees the word “type”.

Sidebar fields:

  • Summary (textarea)
  • Tags (comma-separated)
  • Visibility (Public / Members only)
  • Save draft — saves and stays on the page
  • Publish — sets status to published and redirects to the live post
  • Update — updates an already-published entry
  • View live → — appears when the entry is published

Image upload

The image toolbar button opens a file picker. On selection the file is POSTed to /admin/upload (the shared R2 upload route from @indiepub/astro) and the returned URL is inserted into the editor. Drag-and-drop onto the editor area also triggers the upload.

Requires R2 to be configured (r2BindingName in your integration config).

Redirects (/write/redirects)

A CRUD interface for DB-driven redirects, styled to match the write aesthetic. Functionally equivalent to /admin/redirects — both write to the same redirects table and the middleware intercepts 404s regardless of which UI was used to create the rule.

Getting started

Terminal window
git clone https://github.com/your-org/indiepub
cd indiepub/themes/byline
pnpm install
pnpm db:migrate # applies migrations to local D1
pnpm dev

Visit http://localhost:4321/admin/onboarding to finish setup, then http://localhost:4321/write to start writing.

Dependencies

Beyond the standard IndiePub stack, the byline theme adds:

  • @tiptap/core, @tiptap/starter-kit — core editor
  • @tiptap/extension-image, @tiptap/extension-link, @tiptap/extension-placeholder — extensions
  • tiptap-markdown — Markdown serialisation/deserialisation round-trip