A heavily documented example of static site using HTML export - Typst CN News (Unofficial) | Typst | Page 1

lapis kiln Feb 21, 2025, 2:25 PM

#

Thanks for typst team and @azure lodge, @timid yoke, @split pulsar, we have a very happy experience on building a static website using typst 0.13.0's HTML export. We hadn't had any frustrating problem and everything goes smooth. Impressively, for example, although typst doesn't have support to export math equations to HTML, we can support it on our side with an oneline show rule:

#let div-frame(content, attrs: (:)) = html.elem("div", html.frame(content), attrs: attrs)
show math.equation: div-frame.with(attrs: ("style": "display: flex; justify-content: center; overflow-x: auto;"))

Using 84.3% Typst, 2.3% CSS, and 0.9% HTML, it even doesn't use any static site generator or bundler, but a simple build script that calls typst compile and typst query.

What's the input:

assets are fonts, styles, icons, and tmTheme files used by the typst compiler.
typ/packages are local packages.
typ/templates are common template and components.
src/ are common source code used by documents.
content/{zh-CN, en} are documents in specific languages.

How it builds the site:

npm install to install the compiler, no any other external software and packages are required.
npm run build: build the output once.
npm run build -- --url-base=/news/: build the output once to host on my.github.io/news/
npm run dev: watch the whole project.
npm run serve: starts a local http server for preview.

To add a new content (news):

Create a typst file under the content/en/news/date/ containing the tempalte initialization:

#import "/typ/templates/news.typ": *

#show: news-template.with(
  date: "2025-02-06",
  title: "Typst 0.13.0, RC 1 released",
  lang: "en",
  tags: ("update",),
  description: "Typst 0.13.0, RC 1 was released.",
)

Other translated files can be optionally created.

Website: https://typst-doc-cn.github.io/news

cobalt tiger Feb 21, 2025, 2:29 PM

#

I'm getting redirected to a 404 page, but the URL https://typst-doc-cn.github.io/news/en/ works

lapis kiln Feb 21, 2025, 2:31 PM

#

cobalt tiger I'm getting redirected to a [404 page](<https://typst-doc-cn.github.io/news/de-D...

👀 Some rough edges could be further overcome. Lets fix it quickly.

split pulsar Feb 21, 2025, 2:56 PM

#

hope u get the Typstown pun 😆

fallow mist Feb 22, 2025, 2:27 PM

#

lapis kiln Thanks for typst team and <@960802671164522536>, <@708181138451070997>, <@694097...

Don't we currently need two distinct show rules for display and inline math? I've used this code to make math look good for simple documents:

#show math.equation.where(block: false): it => html.elem("span", html.frame(it))
#show math.equation.where(block: true): it => html.frame(it)

It's quite impressive that this "just works" and looks nice.

lapis kiln Feb 22, 2025, 5:27 PM

#

fallow mist Don't we currently need two distinct show rules for display and inline math? I'v...

Yeah, double it for inline math. 🐱

terse coral Feb 23, 2025, 6:49 AM

#

Is it possible currently to html export and pdf export the same typ file, which also controlling <head> of the html?

lapis kiln Feb 23, 2025, 6:50 AM

#

Use this function: https://github.com/typst-doc-cn/news/blob/db9e1fac88b68bdaf748af8fdc90f1585f8fbd88/typ/templates/template.typ#L196-L207

 show: load-html-template.with(
    "/src/template.html",
    extra-head: {
      /// Theme-specific CSS.
      if x-is-dark {
        preload-css("/assets/dark.css")
      } else {
        preload-css("/assets/light.css")
      }
    },
  )

#

The way to detect pdf export:

#let has-html-feature = ("target" in dictionary(std))
#let target = if has-html-feature {
  std.target()
} else {
  "paged"
}

terse coral Feb 23, 2025, 6:55 AM

#

but where does the pdf export get the content from? It will ignore the html.elems

lapis kiln Feb 23, 2025, 6:56 AM

#

don't put html.elem in your document and make you owned elements be aware of target

terse coral Feb 23, 2025, 6:58 AM

#

the show: load-html-template will put html right? If it does conditionally put html based on the target, then this issue occurs https://github.com/typst/typst/pull/5910

lapis kiln Feb 23, 2025, 7:10 AM

#

Perhaps the workaround can be only using the has-html-feature, which doesn't acquire to be wrapped in context

#

You could explore it by yourself.

weak steppe Feb 25, 2025, 6:19 AM

#

can't wait to use typst to render my website.

weak steppe Feb 25, 2025, 7:39 AM

#

fallow mist Don't we currently need two distinct show rules for display and inline math? I'v...

seems these two lines don't work on my case. Could you please explain them?

#

The inline math will not renderred correctly "This is test inline math: $A = pi r^2$. look at this: $A = pi r^2$. looks good."

fallow mist Feb 26, 2025, 9:44 PM

#

weak steppe seems these two lines don't work on my case. Could you please explain them?

That's strange. The idea is quite simple, span element is roughly equivalent to Typst's box. So the inline math would be wrapped in box. And rendered with SVG.

#

Maybe it is browser-dependent behaviour, could you share the resulting html?

#

(I would also check that later)

fallow mist Feb 26, 2025, 11:24 PM

#

This renders fine for me:

#show math.equation.where(block: false): it => html.elem("span", html.frame(it)) 
#show math.equation.where(block: true): it => html.frame(it) 

This is test inline math: $A = pi r^2$. look at this: $A = pi r^2$. looks good.

#

Works fine in chrome.

#

Are you sure you don't have conflicting show rules and/or css/js code?

weak steppe Feb 27, 2025, 8:35 PM

#

my code

#import "/typ/templates/news.typ": *
// #import "/typ/templates/template.typ": *

#show: news-template.with(
  date: "2025-02-09",
  title: "Typst 0.13.0, RC 1 released ioui",
  lang: "en",
  tags: ("update",),
  description: "Typst 0.13.0, eeeRC 1 was released.",
)


#show math.equation.where(block: false): it => html.elem("span", html.frame(it)) 
#show math.equation.where(block: true): it => html.frame(it) 

This is test inline math: $A = pi r^2$. look at this: $A = pi r^2$. looks good.

= Math

This is test inline math: $A = pi r^2$. look at this: $A = pi r^2$. looks good.

#

my website

#

what i do is I remove chinese version. trying to fork a new one and see what happen.

weak steppe Feb 27, 2025, 10:24 PM

#

Fork a new one, still doesn't work, the following is the html generated

</style>
      <h1 class="main-title">Typst 0.13.0, RC 1 released</h1>
      <div class="news-prop">Published At: 2025-02-06  Tags: update</div>
      <div class="news-body">
        <p>Typst 0.13.0, RC 1 was releases. <a href="https://staging.typst.app/docs/changelog/0.13.0">Changelog</a>.</p>
        <p>This is test inline math: <span><svg style="overflow: visible;" class="typst-doc" viewBox="0 0 0 0" width="0pt" height="0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
    <g/>
</svg>
</span>. look at this: <span><svg style="overflow: visible;" class="typst-doc" viewBox="0 0 0 0" width="0pt" height="0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
    <g/>
</svg>
</span>. looks good.</p>
        <h2>Math</h2>
        <p>This is test inline math: <span><svg style="overflow: visible;" class="typst-doc" viewBox="0 0 0 0" width="0pt" height="0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
    <g/>
</svg>
</span>. look at this: <span><svg style="overflow: visible;" class="typst-doc" viewBox="0 0 0 0" width="0pt" height="0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
    <g/>
</svg>
</span>. looks good.</p>
        <svg style="overflow: visible;" class="typst-doc" viewBox="0 0 0 0" width="0pt" height="0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
    <g/>
</svg>

fallow mist Mar 1, 2025, 9:27 PM

#

weak steppe my code ``` #import "/typ/templates/news.typ": * // #import "/typ/templates/tem...

Can you please share the template so I could reproduce the issue?

#

I'm quite sure the problem is somewhere inside.

#

Maybe css, as html looks okay.

#

Okay, it's definitely not full or well-formed. The <g> tags are closing, but not opening.

weak steppe Mar 1, 2025, 9:42 PM

#

fallow mist Okay, it's definitely not full or well-formed. The `<g>` tags are closing, but n...

https://remotedisk.github.io/news/en/news/2025-02/typst-0-13-0-rc-1-released.html

Typst Broadsheet

Typst 0.13.0, RC 1 was released.

#

and the typ code https://github.com/remotedisk/news/blob/main/content/en/news/2025-02/typst-0-13-0-rc-1-released.typ

GitHub

news/content/en/news/2025-02/typst-0-13-0-rc-1-released.typ at main...

News about typst. Contribute to remotedisk/news development by creating an account on GitHub.

#

I guess I may make a stupid mistake some where, but I dont what it is.

fallow mist Mar 1, 2025, 11:57 PM

#

weak steppe I guess I may make a stupid mistake some where, but I dont what it is.

I can't see an obvious mistake, I'm quite sure there is something wrong inside that giant HTML-code generation machine. I wasn't able to just render that HTML.

#

Cloned necessary repos, removed unnecessary news bases, got a blank page with several console errors. :)

weak steppe Mar 2, 2025, 2:24 AM

#

Thanks for investigating it!

lapis kiln Mar 2, 2025, 3:40 AM

#

the <g/> are suspicious. but I also don't know what thing produces empty svg frames in your document. they are all zero sized.

#A heavily documented example of static site using HTML export - Typst CN News (Unofficial)