Yes!!! I've wanted to try making a minimal static site generator backed by typst, but math export was the blocker. Excited to give it a try!
Bundle Export
They talk about how they've ported the typst docs to typst using this. I'm curious to look into the infrastructure for how exactly that works, because clearly they've already solved a lot of the problems one would encounter with a static site generator. It looks like their blog is generated with Typst via Astro. It's also worth looking into that, but I'd still prefer to do my own thing.
Variable fonts
This is nice to have. In the past I've just exported static fonts for the configurations I need, but it's tedious to say the least.
Update: this "bundle" export format is neat. It really does feel like it turns Typst into a static site generator itself. There's not really any need for any wrapper generator, Typst does it all.
They use this pattern of an index.typ file at the root of all directories which import the relevant utilities from all files within that directory. So that document has a top-level #import "components/index.typ", and that file has imports like #import "section.typ": docs-chapter and so on.
The big architecture change is that everything is driven by this new main.typ file which (when exporting via html) doesn't actually contain any content: it just contains/includes #document and #asset definitions which populate the bundle.
It's indirected through some function calls and conditions, but the basic structure is this:
// main.typ
include "content/index.typ"
// content/index.typ
#include "overview.typ"
#include "tutorial/index.typ"
// etc.
// content/tutorial/1-writing.typ
#import "/components/index.typ": docs-chapter
#show: docs-chapter.with(
title: "Writing in Typst",
route: "/tutorial/writing-in-typst",
)
Let's get started! ...
The real meat of things that leverages the new bundle structure is in that docs-chapter show rule. When bundle output is enabled, that resolves to
#let html-section(title: none, route: none, body) = context {
document(route + "/" + "index.html", title: title, html.html(
html.head(...)
html.body(class: "docs", {
nav-folding(route) // generates the collapsible table of contents on the left.
body
nav-buttons // the previous/next page buttons at the bottom.
nav-on-this-page(here()) // generates the "on this page" outline on the right.
})
))
}
It's a little verbose, but I like the structure. Clearly they've put a lot of effort into making this "document" generalization fit in nicely with the rest of the architecture, and I think it pays off.
adutchman | 11 days ago
Just started using Typst and ran into the fonts issue, so very happy to see they're tackling issues head-on.
TangibleLight | 11 days ago
Yes!!! I've wanted to try making a minimal static site generator backed by typst, but math export was the blocker. Excited to give it a try!
They talk about how they've ported the typst docs to typst using this. I'm curious to look into the infrastructure for how exactly that works, because clearly they've already solved a lot of the problems one would encounter with a static site generator. It looks like their blog is generated with Typst via Astro. It's also worth looking into that, but I'd still prefer to do my own thing.
This is nice to have. In the past I've just exported static fonts for the configurations I need, but it's tedious to say the least.
TangibleLight | 10 days ago
Update: this "bundle" export format is neat. It really does feel like it turns Typst into a static site generator itself. There's not really any need for any wrapper generator, Typst does it all.
In fact, the new Typst documentation is all written in typst and the content you see in the browser is directly exported from
typst compile(along with some helper rust autodocs macros for the reference docs). For example: https://typst.app/docs/tutorial/writing-in-typst/ the source for this page is here https://github.com/typst/typst/blob/main/docs/content/tutorial/1-writing.typThey use this pattern of an
index.typfile at the root of all directories which import the relevant utilities from all files within that directory. So that document has a top-level#import "components/index.typ", and that file has imports like#import "section.typ": docs-chapterand so on.The big architecture change is that everything is driven by this new
main.typfile which (when exporting via html) doesn't actually contain any content: it just contains/includes#documentand#assetdefinitions which populate the bundle.It's indirected through some function calls and conditions, but the basic structure is this:
The real meat of things that leverages the new bundle structure is in that
docs-chaptershow rule. When bundle output is enabled, that resolves toAutodocs are handled with this
src/world.rswhich defines astdxtypst module, that roughly contains all the rust types and docs. So for example, the rust doc comment here https://github.com/typst/typst/blob/main/crates/typst-library/src/layout/container.rs#L215-L251 is picked up by https://github.com/typst/typst/blob/main/docs/content/reference/library/layout.typ, where the show rule includes a loop that pulls in content fromstdxwith the matching category.It's a little verbose, but I like the structure. Clearly they've put a lot of effort into making this "document" generalization fit in nicely with the rest of the architecture, and I think it pays off.