One command to build blogs with Typst

Showcase
1

I’ve created a template for building blogs with Typst, based on my own blog’s architecture. There was a post where I shared my initial approach.

I had good time to build it! To enrich my blog’s capabilities, I created many show rules that enhance semantics fluently. Most impressively, I now export content to various formats without duplicating them. Sounds like the real “write once, publish everywhere”. Many thanks to typst.

When I noticed guys forking my project, I modularized the architecture into tylant, meaning typst integrated into the astro islands. I conceived this name without the help of LLM in 5 minutes, so please forgive me if this name sounds stupid. It would be also great if you have some nice name and tell me.

To start with tylant, simply start with one command:

# npm or pnpm
pnpm create @myriaddreamin/tylant@latest

Currently, pnpm commands are hardcoded in the create script (so you need to install pnpm) but I think it can be easy to support npm and yarn with some simple changes. Also feel free to open issues on GitHub if you have any problem or ideas.

Features

  • Tags: Categorize your blog posts with tags.
  • Search: Search through your blog posts by “title”, “description”, or “tags”.
  • Self-Host Fonts: bundle and self-host fonts via @fontsource-variable/inter.
  • Link Preview: Link Preview on Open Graph, Facebook, and Twitter.
  • SEO: ARIA and Sitemap support.

Typst-specific features:

  • Equations, Syntax Highlighting, Footnotes, and many other typst features.
  • Heading Permalinks and Table of Contents.
  • PDF Archives. I mean we create PDF pages automatically.

Reference

image
image1813×1233 247 KB

8 Likes
2

I was able to initialize the template with

npm create astro@latest -- --template Myriad-Dreamin/tylant

instead of pnpm.

It took me some time to figure out that I needed to

git clone https://github.com/Myriad-Dreamin/typ.git
git clone https://github.com/Myriad-Dreamin/typst-zebraw/ -b better-html typ/packages/zebraw

I expected that some git submodule command would do that for me, but I couldn’t get that to work at least. If you don’t clone both of these repos, you get the following error:

$ npm run dev
...
Trace: Error compiling HTML NodeError {}
    at renderToHTML (file:///.../blog/node_modules/astro-typst/src/lib/typst.js:113:17)
    at renderToHTMLish (file:///.../blog/node_modules/astro-typst/src/lib/typst.js:134:52)
    at Object.getEntryInfo (file:///.../blog/node_modules/astro-typst/src/lib/integration.js:40:56)
    at syncData (/.../blog/node_modules/astro/dist/content/loaders/glob.js:64:48)
    at async eval (/.../blog/node_modules/astro/dist/content/loaders/glob.js:203:13)
...

So if someone else should also get these errors, that’s what you need to look out for

After fixing these things, everything seems to work – thanks :slight_smile: now I’ll be playing around with this new power^^

1 Like
3

Hi. If I understand it correctly, npm create astro@latest -- --template Myriad-Dreamin/tylant creates template from github repo instead of that create script from npm.

The create script will do it for you:

If any of the following commands fail, you can run them manually:
  cd /home/kamiyoru/work/ts/blog-test/my-blog
  git submodule add -b main https://github.com/Myriad-Dreamin/typ.git typ
  git submodule add -b main https://github.com/Myriad-Dreamin/tylant.git packages/tylant
  git submodule update --init --recursive
  pnpm install
Executing: git submodule add -b main https://github.com/Myriad-Dreamin/typ.git typ
Cloning into '/home/kamiyoru/work/ts/blog-test/my-blog/typ'...
  ...
Executing: git submodule add -b main https://github.com/Myriad-Dreamin/tylant.git packages/tylant
Cloning into '/home/kamiyoru/work/ts/blog-test/my-blog/packages/tylant'...
  ...
Executing: git submodule update --init --recursive
Submodule 'typ' (https://github.com/Myriad-Dreamin/typ.git) registered for path 'packages/tylant/typ'
  ...
Executing: pnpm install
Scope: all 7 workspace projects
 WARN  GET https://registry.npmjs.org/fdir error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
  ...
Done in 16.1s using pnpm v10.11.0

Your blog is ready! You can start it by running:
  cd /home/kamiyoru/work/ts/blog-test/my-blog
  pnpm run dev

Executing: pnpm run dev
 astro  v5.8.1 ready in 448 ms

┃ Local    http://localhost:4321/blog/
┃ Network  use --host to expose

20:44:14 watching for file changes...
4

ooh, I took “Currently, it only supports pnpm” to mean that the create command as a whole wouldn’t work. But now looking at the script (that I hadn’t found before) it’s only the pnpm install and pnpm run dev that will error at the end. Ok, that makes sense. thx!

1 Like