NASApunk

A NASApunk-style blog theme for Tola.

Write posts in Typst. Figures, diagrams and math render as inline SVG in the theme colours, by day and by night.

English · 简体中文

Live demo · My blog

Note

Need slides in the same style? The matching slide template is touying-nasapunk on Typst Universe.

Contents

• Features
• Screenshots
• Quick start
• Configuration
• Writing posts
• Components
• Deployment
• Project structure
• Fonts
• Acknowledgements
• License
• Star History

Features

Post header Document number, date, day of year and reading time on every post.	Archive Posts grouped by year, with a posts-per-month chart.	Tags Every tag with its post count and posts.
Series Posts sharing a series name link up.	Typst figures CeTZ and diagrams as inline SVG, in theme colours.	Callouts Five kinds, plus annotations.
Contents Numbered headings and a ToC that follows scrolling.	Search Full-text search with Pagefind, CJK included.	404 A custom page for missing addresses.

Screenshots

Post	A CeTZ figure, night theme
Callouts and code	On a phone, day and night

Quick start

You need Tola 0.8 or newer and Node.js (for the search index).

# 1. Get the theme: click "Use this template" on GitHub, or
git clone https://github.com/KKKZOZ/tola-theme-nasapunk.git my-blog
cd my-blog

# 2. Install Tola (or download a binary from its release page)
cargo install --locked tola

# 3. Install Pagefind and start the dev server
npm install
tola dev

Open http://127.0.0.1:5277. tola dev rebuilds on save; tola build writes the finished site, search index included, to public/.

Then make it yours:

1. Set your title, name, description and language under [site] in tola.toml.
2. Set the document-number prefix in templates/config.typ.
3. Replace the example posts in content/posts/ and edit content/about.typ.

Configuration

What	Where
Title, author, description, language	tola.toml → [site]
Public address (for the RSS feed, sitemap and link previews)	tola.toml → origin
Sub-path deployment, e.g. /blog/	tola.toml → base-path
Document-number prefix (TN → TN-001)	templates/config.typ → doc-prefix
Orange code next to the site title	templates/config.typ → mission
Footer links (GitHub, email, Mastodon, ...)	templates/config.typ → social-links
Preview image for shared links: drawn (auto), your own file, or none	templates/config.typ → social-image
Analytics or other <head> additions	templates/config.typ → head-extra
Header links	templates/layout.typ → nav-items
Posts per home page (older ones on /page/2/, /page/3/, …)	templates/pages.typ → shown
Heading levels in the table of contents	templates/post.typ → toc-depth
Posts in the RSS feed; full text or summaries	templates/feeds.typ → feed-size, full-text
Colours	tokens at the top of assets/styles/site.css, mirrored by palette in templates/base.typ
Search language	scripts/search-index.mjs → forceLanguage (see below)

Search detects the language from [site] language. For a site written mostly in Chinese, set forceLanguage to "zh" in scripts/search-index.mjs.

Writing posts

Every .typ file under content/posts/ is a post, published at the URL its path suggests: content/posts/notes/cache.typ → /posts/notes/cache/.

#import "@tola/source:0.0.0": tola-meta
#import "/utils/ui.typ": callout

#tola-meta((
  title: "Cache Coherence Notes",
  date: "2026-10-18",
  summary: "One line for the post list, search results and link previews.",
  tags: ("systems", "notes"),
  series: "Theme Tour",
))

= First section

#callout(kind: "warning")[Check the cache before trusting latency numbers.]

Field	Type	Notes
title	string	Required.
date	"YYYY-MM-DD"	Without a date, the file is published but left out of the post list.
updated	"YYYY-MM-DD"	Date of the last revision: shown under the title, and used by the sitemap and feed.
summary	string	Post list, search results, Open Graph.
tags	string or array	Shown as chips; collected on /tags/.
weight	integer	Home page order: lower comes first, posts with equal weight newest first. The default is 100 (0, which Hugo treats as unset, counts as 100 too), so weight: 1 pins a post to the top and weight: 200 sinks it. Other listings stay in date order.
series	string	Posts with the same name form a series, ordered by date.
draft	bool	Drafts are not published; links to them render as plain text.

Files under content/lab/ use the post layout but stay out of the post list. Open /lab/style-reference/ for every element the theme styles.

Components

Module	Provides
utils/ui.typ	callout, hint, img, gallery, xref, related
utils/diagram.typ	flow, diagram, timeline
utils/cetz.typ	cetz that renders to inline SVG in HTML export
utils/figure.typ	Theme colours and helpers for detailed CeTZ figures: pill, arrow, curve-arrow, cells, seg, legend, ...

#import "/utils/ui.typ": callout, xref
#import "/utils/diagram.typ": flow, n

#callout(kind: "success")[The build passed.]

#flow(n[Source], [compile], n([HTML], tone: "accent"))

See #xref("cetz-figures") for a full CeTZ example.

The example posts show each module in use: content/posts/theme-tour/ for callouts, footnotes, flows and timelines, content/posts/figure-kit.typ for every helper in utils/figure.typ with its output and signature, and content/posts/cetz-figures.typ for complete CeTZ figures built with them.

Deployment

tola build writes plain static files to public/, so any static host works.

For GitHub Pages, the repository ships .github/workflows/deploy.yml, which publishes the live demo. In your copy:

1. Set Settings → Pages → Source to GitHub Actions.
2. Delete the if: line in deploy.yml; it keeps template copies from deploying before they opt in.
3. Push to main.

The workflow asks GitHub for the site's address and passes it to tola build, so the same file works for a user site (https://<user>.github.io/) and a project site (https://<user>.github.io/<repo>/). A project site is served under /<repo>/ and leaves your user site untouched. Links in your posts that start with / need that prefix too; relative links and xref work anywhere, and the build points out any link it misses.

Project structure

├── site.typ              site program: emits every page
├── tola.toml             site settings
├── typst-fonts/          IBM Plex Mono and Rajdhani for figures
├── scripts/              search index build hook (Pagefind)
├── templates/            layouts, header and footer, listings
│   ├── config.typ        settings tola.toml has no key for
│   ├── feeds.typ         RSS feed, sitemap and robots.txt
│   └── social.typ        preview image for shared links
├── utils/                components for posts (see above)
├── assets/
│   ├── styles/site.css   all styles; colour tokens at the top
│   ├── scripts/          theme toggle, search, copy buttons, footnotes
│   └── webfonts/         IBM Plex Mono and Rajdhani, Latin subsets
├── content/
│   ├── posts/            example posts
│   ├── lab/              test pages, kept out of the post list
│   └── about.typ
└── .github/workflows/    build check and GitHub Pages deployment

Fonts

Body text is IBM Plex Mono and headings are Rajdhani, both self-hosted. Figures and the preview image drawn by Typst use the same two fonts from typst-fonts/, so they look the same on every build machine. Chinese, Japanese and Korean text falls back to the system font, in pages and in figures.

Note

For Chinese text, the theme recommends Sarasa Gothic SC (更纱黑体). Install it on the build machine and set cjk-font = "Sarasa Gothic SC" in templates/config.typ, and figures and the preview image use it too.

Acknowledgements

Built on Tola and Typst. Figures use CeTZ; search uses Pagefind. Fonts: IBM Plex Mono and Rajdhani.

License

The theme is released under the MIT License. The bundled fonts are under the SIL Open Font License 1.1; their license texts are in assets/webfonts/ and typst-fonts/.

Star History