typst: use customized block with nested div :::

[debdagybra]

Description

I would like to suggest to add the possibility to define a typst block layout in a typst-template.typ and then use it in a .qmd file in a nested div :::{.block}.

example:

---
title: "custom blocks"
format: typst
execute:
  echo: false
---

::: {.block fill="luma(230)"}

This block is grey but the user must enter the parameters by himself and repeat them for every new blocks.

:::

```{=typst}
// the next line can be inside a typst-template.typ file
#show "greyBlock-typst": [fill="luma(230)"]
```
::: {.block greyBlock-typst}

I want a grey block here.

:::


workaround:  

```{r}
greyBlock <- "fill=\"luma(230)\""
```
::: {.block `r greyBlock`}

grey block styled with r object

:::

[mcanouil]

That's exactly what extensions are for, see https://quarto.org/docs/extensions/.

For instance, the equivalent for LaTeX: https://github.com/quarto-ext/latex-environment.

PS: I changed the thread to Q&A as the extension mechanism purpose is there exactly for this cases.

[andrewheiss]

Here's an example workaround without using a full extension (though I might try expanding it to something like that LaTeX environment extension). It uses a Lua filter (that I just copied/adapted from Quarto's Typst AMS template).

First, save this as a .lua file:

response.lua

local function endTypstBlock(blocks)
  local lastBlock = blocks[#blocks]
  if lastBlock.t == "Para" or lastBlock.t == "Plain" then
    lastBlock.content:insert(pandoc.RawInline('typst', '\n]'))
    return blocks
  else
    blocks:insert(pandoc.RawBlock('typst', ']\n'))
    return blocks
  end
end

function Div(el)
  if el.classes:includes('memo-excerpt') then
    local blocks = pandoc.List({
      pandoc.RawBlock('typst', '#excerpt[')
    })
    blocks:extend(el.content)
    return endTypstBlock(blocks)
  elseif el.classes:includes('memo-reviewer') then
    local blocks = pandoc.List({
      pandoc.RawBlock('typst', '#reviewer[')
    })
    blocks:extend(el.content)
    return endTypstBlock(blocks)
  end
end

That looks for two different pandoc div classes (.memo-excerpt and .memo-reviewer) and creates custom blocks for them like this:

#excerpt[
blah blah
]

#reviewer[
blah blah
]

Then in Quarto, add that Lua script as a filter:

---
title: "Response memo"
format:
  typst: 
    filters:
      - response.lua
    include-before-body:
      - text: |
          #let reviewer(body) = [
            #set text(
              fill: rgb("#dd5129"), size: 0.92em, style: "italic"
            )
        
            #block(inset: (x: 2em, y: 1em))[
              #body
            ]
          ]
          
          #let excerpt(body) = [
            #set text(
              fill: rgb("#0f7ba2"), size: 0.92em
            )
            
            #block(inset: (x: 2em, y: 1em))[
              #body
            ]
          ]
---

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

::: {.memo-reviewer}
**Reviewer 1**: Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
:::

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

::: {.memo-excerpt}
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
:::

That results in a PDF like this:

---

It would be neat to make an extension that is more dynamic, similar to latex-environment, but for now this has been working well for me.

[andrewheiss]

So actually I just made a template with two custom div-like elements and two custom span-like elements: https://github.com/andrewheiss/hikmah-academic-quarto/tree/main/_extensions/hikmah-response

See here for an example: https://github.com/andrewheiss/hikmah-academic-quarto/blob/main/hikmah-response-memo.qmd

Basically, it's set up so you can do this:

---
title: Responses to editor and reviewer concerns
format:
  hikmah-response-typst: default
---

The Editor's and Reviewers' comments are cited or summarized in [red italicized text]{.memo-reviewer-inline}, and our responses are in black Roman text. We include excerpts from our revised manuscript in [blue]{.memo-excerpt-inline}.

::: {.memo-reviewer}
***Reviewer 2***: This is the worst paper I have ever read.
:::

why are you so mean :(

::: {.memo-excerpt}
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
:::

and get this:

(all the typst-specific things are at https://github.com/andrewheiss/hikmah-academic-quarto/blob/64033cf6de3e13fa35cdd8e67c630b666adf1297/_extensions/hikmah-response/typst-template.typ#L1-L22)

[debdagybra]

Thank you very much @andrewheiss !