reflexo-typst Documentation

Claim: the Typst compiling functions is provided by official typst

Example Application: single-file, shiroa and hexo-renderer-typst

You must prepare a artifact for each document, containing compressed data for different theme and screen settings. The bundle size of artifacts is optimized for typst documents.

Since preparation is offline, it is suitable for static sites and blogs.

After that, we provide a renderer to extract and render artifact in browser. Obviously, it doesn't have capabilities to compile typst code.

Besides static display effect like PDF, by rendering document to canvas, The renderer also overlays SVG for responsive effect by CSS anominations, and HTML layer for semantics embedding and user interactions. If you would like to hack, the HTML elements can be also placed in Typst document.

You may doubt that if a renderer is used, it is not static. Though we provide absolutely static renderer that exports typst to browser-directed SVG, official typst also provides PNG, SVG, and PDF export. They are not responsive.

For responsive rendering, it is worth to note that some metadata can be also embedded in HTML. For example, you can embed title, description meta in head to allow page previewing in social media. Though it is not implemented, HTML elements is considered for rendered statically to help SEO.

As an example, hexo-renderer-typst utilizes All-in-one Library for Node.js to build its functions. First, it creates a dyn layout compiler for precompiling documents:

this.dyn = DynLayoutCompiler.fromBoxed(NodeCompiler.create(compileArgs).intoBoxed());

this.dyn = DynLayoutCompiler.fromBoxed(NodeCompiler.create(compileArgs).intoBoxed());

Then, it simply invokes vector() method to compile the document:

return this.dyn.vector({ mainFilePath: path });

return this.dyn.vector({ mainFilePath: path });

Retrieving the sys arguments specified by the dynamic layout compiler:

/// It is in default A4 paper size (21cm)

#let page-width = sys.inputs.at("x-page-width", default: 21cm)

/// It is in default A4 paper size (21cm)

#let page-width = sys.inputs.at("x-page-width", default: 21cm)

Templating Example:

#set page(

  width: page-width,

  height: auto, // Also, for a website, we don't need pagination.

) if is-web-target;

#set page(

  width: page-width,

  height: auto, // Also, for a website, we don't need pagination.

) if is-web-target;

Note: If you find x-target is not overridden for export web artifacts, the SSG tool you are using may not follow this convention.

Note: Official typst may introduce their owned method to specify target, therefore this feature may move to the native approach in future.

Retrieving the sys arguments specified by SSG Tools:

/// The default target is _pdf_.

/// `typst.ts` will set it to _web_ when rendering a dynamic layout.

#let target = sys.inputs.at("x-target", default: "pdf")

/// The default target is _pdf_.

/// `typst.ts` will set it to _web_ when rendering a dynamic layout.

#let target = sys.inputs.at("x-target", default: "pdf")

Example:

#let is-web-target() = target.starts-with("web")

#let is-pdf-target() = target.starts-with("pdf")

#let is-web-target() = target.starts-with("web")

#let is-pdf-target() = target.starts-with("pdf")

The interface to develop a tools is explored. But there are already easy-touse tools that could be used for your SSG Framework or learned for a new one:

• shiroa for self-hosted simple book (documentation) site.

• hexo-renderer-typst for Hexo.

• apollo-typst for Apollo.