Admonitions cannot be referenced in typst

[holmrenser]

Not sure this should go here or at jupyterbook.

Admonitions can be referenced using directive targets, which works for html but is broken in typst.

Example:

:::{tip} This is a test admonition
:label: test-admonition

This admonition should be referred to later
:::

Here we refer back to the [admonition](#test-admonition).

This gets compiled to typst as follows:

#tipBlock(heading: [This is a test admonition])[
This admonition should be referred to later
]

Here we refer back to the #link(<test-admonition>)[admonition].

Which breaks typst compilation with the following error:
error: label <test-admonition> does not exist in the document

Proposed solution

The generated myst-imports.typ file contains the following typst blocks:

#let admonition(body, heading: none, color: blue) = {
  let stroke = (left: 2pt + color.darken(20%))
  let fill = color.lighten(80%)
  let title
  if heading != none {
    title = block(width: 100%, inset: (x: 8pt, y: 4pt), fill: fill, below: 0pt, radius: (top-right: 2pt))[#text(11pt, weight: "bold")[#heading]]
  }
  block(width: 100%, stroke: stroke, [
    #title
  #block(fill: luma(240), width: 100%, inset: 8pt, radius: (bottom-right: 2pt))[#body]
])
}

#let tipBlock(body, heading: [Tip]) = admonition(body, heading: heading, color: green)

This code should include possibilities for being crossreferenced.

Additional notes

This was done with jupyter-book v2.0.0-b0

[rowanc1]

Thanks @holmrenser - this is the correct place for the issue! Also came across this recently, thank you for the report.

[rowanc1]

Something like this should work, need to test it a bit more, and then ensure that the cross-reference is a link #link(<ref>)[content], not a @tip-label most of the time.

#let admonition(body, heading: none, color: blue, kind: none, supplement: "Admonition") = {
  let stroke = (left: 2pt + color.darken(20%))
  let fill = color.lighten(80%)
  let title
  if heading != none {
    title = block(width: 100%, inset: (x: 8pt, y: 4pt), fill: fill, below: 0pt, radius: (top-right: 2pt))[#text(11pt, weight: "bold")[#heading]]
  }

  // Set the admonition to "admonition:tip"
  if kind == none { kind = "admonition" }
  else { kind = "admonition:" + kind}

  figure(kind: kind, supplement: supplement,
    block(width: 100%, stroke: stroke, [
      #set align(left)
      #title
      #block(fill: luma(240), width: 100%, inset: 8pt, radius: (bottom-right: 2pt))[#body]
    ])
  )
}

#let tipBlock(body, heading: [Tip]) = admonition(body, heading: heading, color: green, kind: "tip", supplement: "Tip")

#tipBlock(heading: [This is a test admonition])[
This admonition should be referred to later
] <tip>

See #ref(<tip>) as an example.

[holmrenser]

That was fast! I can see how this would replace the macros in https://github.com/jupyter-book/mystmd/blob/main/packages/myst-to-typst/src/index.ts#L30-L59, but I guess there still has to be a part that renders the proper typst code for each individual admonition. With some pointers I could work on a PR.