How to add a header logo in Typst template partial?

[DOH-FAA3303]

Description

I'm trying to add a logo in the header of my pdf like this and was able to successfully do it using only typst with the code below (see the image too):

#set page(
  paper: "iso-b3",
  header: align(right)[
    #image("cdc.png", width: 5%)
  ],
  numbering: "1",
  columns: 2,
)

In Quarto I tried to add the chunk of code to add the logo to via include-in-header but get this error: [typst]: Compiling index.typ to index.pdf...error: page configuration is not allowed inside of containers

When I add the code as a template-partial I get this error [typst]: Compiling index.typ to index.pdf...error: unknown variable: article. It looks like the partial is really messing with the .typ output but im not sure why. This is the part of the file it flags:

#show: doc => article(
  title: [my title],
  date: [2024-04-29],
  margin: (bottom: 10mm,left: 10mm,right: 10mm,top: 10mm,),
  paper: "iso-b3",
  font: ("Calibri",),
  fontsize: 14pt,
  toc_title: [Table of contents],
  toc_depth: 3,
  cols: 2,
  doc,
)

What am I missing here? What do I need to add to the partial?

Here is a reprex:

typst-template.typ

#set page(
  paper: "iso-b3",
  header: align(right)[
    #image("assets/cdc.png", width: 5%)
  ],
  numbering: "1",
  columns: 2,
)

index.qmd

---
title: my title
date: today

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis nibh, imperdiet quis erat sed, facilisis blandit mi. Morbi lacinia tristique leo, non gravida dolor facilisis ac. Etiam lectus lacus, ultricies non nisl id, vulputate posuere urna. Sed consequat condimentum dignissim. Proin aliquam, nunc vel feugiat efficitur, erat ipsum malesuada odio, a gravida ex elit ornare libero. Sed eget lacus fringilla, imperdiet ex non, ullamcorper justo. Morbi fermentum enim nec turpis iaculis porttitor non in erat. Vestibulum id leo nunc. Pellentesque malesuada sagittis libero eget facilisis. Curabitur et enim ante. Maecenas sed posuere mauris.

_quarto.yml

project:
  type: manuscript

manuscript:
  article: index.qmd

format:
  html:
    theme: cosmo
    comments:
      hypothesis: true
    title-block-style: manuscript
  docx: default
  jats: default
  pdf:
    output-file: "report"
    output-ext:  "pdf"
    linkcolor: RSSblue
    urlcolor: RSSblue
    documentclass: article
    classoption: [twocolumn]
    include-in-header: 
       - "assets/styles.tex"
  typst:
    output-file: "typst-report"
    output-ext:  "pdf"
    columns: 2
    fontsize: 14pt
    mainfont: Calibri
    papersize: iso-b3
    # papersize: a3
    margin:
      left: 10mm
      top: 10mm
      bottom: 10mm
      right: 10mm
    # include-in-header: 
    #   - "typst-template.typ"
    template-partials: 
      - "typst-template.typ"
    keep-typ: true

execute:
  freeze: auto

quarto check

Quarto 1.5.22
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.5.22
      Path: C:\Program Files\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: v2024.04
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\FAA3303\AppData\Roaming\TinyTeX\bin\windows\
      Version: 2024

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.11.5 (Conda)
      Path: C:/ProgramData/anaconda3/python.exe
      Jupyter: 5.3.0
      Kernels: python3

[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
      Version: 4.2.1
      Path: C:/PROGRA~1/R/R-42~1.1
      LibPaths:
        - C:/Program Files/R/R-4.2.1/library
      knitr: 1.45
      rmarkdown: 2.25

[>] Checking Knitr engine render......OK

[DOH-FAA3303]

I figured it out. It appears as though you can't just add a #set page to the existing Typst templates by putting it in via include-in-header because this includes the chunk after the header. And in Typst that causes an error that the page config is inside a container:

and likewise with adding the chunk via template-partials, it was not liking the fact that i was adding a chunk to an existing template.

What I did was I made a quarto extension in a new folder. The base extension for Typst projects gives you a typst-template.typ file and a typst-show.typ file and it explains what each does. I then copy and pasted these example files into my project and adjusted them (added the logo in header chunk of code to the typst-template.typ file in the #set page() portion) and it worked.

tl;dr - it looks like customizing things with Typst in Quarto really needs custom templates whereas with latex it's a bit easier to just add a style.tex file that will run on top of the base latex

Here's the typst-template.typ file result, note the set page() section with the header: align(right)[#image("assets/cdc.png", width: 6%)]:

// This is an example typst template (based on the default template that ships
// with Quarto). It defines a typst function named 'article' which provides
// various customization options. This function is called from the 
// 'typst-show.typ' file (which maps Pandoc metadata function arguments)
//
// If you are creating or packaging a custom typst template you will likely
// want to replace this file and 'typst-show.typ' entirely. You can find 
// documentation on creating typst templates and some examples here: 
//   - https://typst.app/docs/tutorial/making-a-template/
//   - https://github.com/typst/templates

#let article(
  title: none,
  authors: none,
  date: none,
  abstract: none,
  cols: 2,
  margin: (left: 10mm, right: 10mm, top: 3cm, bottom: 10mm),
  paper: "iso-b3",
  lang: "en",
  region: "US",
  font: (),
  fontsize: 14pt,
  sectionnumbering: none,
  toc: false,
  doc
) = {
  set page(
    paper: paper,
    margin: margin,
    numbering: "1",
    header: align(right)[
      #image("assets/cdc.png", width: 6%)
    ]
  )
  set par(justify: true)
  set text(lang: lang,
           region: region,
           font: font,
           size: fontsize)
  set heading(numbering: sectionnumbering)

  if title != none {
    align(center)[#block(inset: 2em)[
      #text(weight: "bold", size: 1.5em)[#title]
    ]]
  }

  if authors != none {
    let count = authors.len()
    let ncols = calc.min(count, 3)
    grid(
      columns: (1fr,) * ncols,
      row-gutter: 1.5em,
      ..authors.map(author =>
          align(center)[
            #author.name \
            #author.affiliation \
            #author.email
          ]
      )
    )
  }

  if date != none {
    align(center)[#block(inset: 1em)[
      #date
    ]]
  }

  if abstract != none {
    block(inset: 2em)[
    #text(weight: "semibold")[Abstract] #h(1em) #abstract
    ]
  }

  if toc {
    block(above: 0em, below: 2em)[
    #outline(
      title: auto,
      depth: none
    );
    ]
  }

  if cols == 1 {
    doc
  } else {
    columns(cols, doc)
  }
}

[cscheid]

tl;dr - it looks like customizing things with Typst in Quarto really needs custom templates whereas with latex it's a bit easier to just add a style.tex file that will run on top of the base latex

That's correct. This is more-or-less unavoidable because Typst has more structured expectations about what can happen where in the code (and that's why it's actually easier to write extensions in Typst!).

With that said, it is possible to replace template partials on the format metadata: https://quarto.org/docs/journals/templates.html#template-partials

Unfortunately, we don't have documentation on typst's partials yet (and we should! I'm tracking that bug here #9537)

[DOH-FAA3303]

@cscheid that makes sense! yea this seemed like a pain at first but you're right, now that I understand how it works it seems like it will be way easier to customize and write extensions with Typst.

For those that might stumble upon this, the Typst web app is really great for testing things out and making a template before transferring to Quarto https://typst.app/home/

[mcanouil]

There is documentation of the partials but not yet where are the others.

• Document Typst partials with other partials #8500