feature: per-document `title-block-style: default`

[lnnrtwttkhn]

Bug description

I set up a standard Quarto website (https://quarto.org/docs/websites/). One page (here, index.html) should use title-block-style: none, a second page (here about.qmd) should use title-block-style: default. However, when I re-render the website (either using quarto render or quarto preview) the page that uses title-block-style: default occasionally does not look as expected (see below). Re-rendering the website again "solves" the problem (see below). While this is generally not a big issue, I noticed that it also occasionally happens for some of my larger Quarto projects where I deploy websites to GitHub Actions / Pages. All pages with title-block-style: default look weird (see below). The problem is that I haven't found a way to control the deployment GitHub Actions so that this issues does not occur.

Steps to reproduce

I prepared an example here: https://github.com/lnnrtwttkhn/quarto-title-block-style. I deliberately also tracked the changes in _site.

The issue seems to be related to _site/site_libs/bootstrap/bootstrap.min.css that "fluctuates" upon frequent re-rendering.

• Here is a commit where the page looked as expected: https://github.com/lnnrtwttkhn/quarto-title-block-style/commit/6dad9153c8dc827f0e83cf9eb097df6116faac18
• Here is a commit where the page looks unexpected: https://github.com/lnnrtwttkhn/quarto-title-block-style/commit/b99ffa09b3c1fa22f8bcb5a300538de3f9462d61

I haven't yet fully figured out a pattern when this occurs exactly but it happens both for quarto render and quarto preview.

Expected behavior

The page with title-block-style: default should look as expected:

Actual behavior

The page with title-block-style: default does not look as expected:

Your environment

• IDE: RStudio Version 2023.12.1+402 (2023.12.1+402)
• macOS 14.3.1 (Sonoma)
• Hardware: Apple MacBook Pro 14-inch, 2021, 16 GB RAM

Quarto check output

quarto check

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.3.450
      Path: /Applications/quarto/bin

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

[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /opt/homebrew/opt/python@3.12/bin/python3.12
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.3.1
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Users/wittkuhn/tools/quarto-title-block-style/renv/library/R-4.3/aarch64-apple-darwin20
        - /Users/wittkuhn/Library/Caches/org.R-project.R/R/renv/sandbox/R-4.3/aarch64-apple-darwin20/84ba8b13
      knitr: 1.45
      rmarkdown: 2.26

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

[lnnrtwttkhn]

As mentioned, also the rendered and deployed website (via GitHub Actions / Pages) does not look as expected: https://lennartwittkuhn.com/quarto-title-block-style/about.html. After updating the website via GitHub Actions (see here: https://github.com/lnnrtwttkhn/quarto-title-block-style/commit/2cef777d56fb7d0fee70be1fb6b26f296cd16ba1) the page looked as expected. See attempt 1: https://github.com/lnnrtwttkhn/quarto-title-block-style/actions/runs/8468302596/attempts/1. I then manually triggered the GitHub actions pipeline again (no modification in the code) and the page now looks weird. See attempt 2: https://github.com/lnnrtwttkhn/quarto-title-block-style/actions/runs/8468302596.

[cderv]

We may have an issue in sasslayers as documents seems to share the same file while they should use different one. I'll check but it seems like a regression as 7a6855fe5cb4ca1ea4dec9cfc47af2a75774f0ac should have dealt with that

[cderv]

Ok I think https://github.com/quarto-dev/quarto-cli/commit/7a6855fe5cb4ca1ea4dec9cfc47af2a75774f0ac solves part of the problem for banner customization (https://quarto.org/docs/authoring/title-blocks.html#title-banners) but not for the whole title-block style

My understanding is that we may not allow per-document title-block-style customization. However, if this is the case, we are definitely not protecting against the behavior you are seeing as one value will be overwritten by another when layering the scss.

@dragonstyle do you remember about this ? Is this incomplete support or effectively title-block-style is meant to be project level really ?

We document it at document level (https://quarto.org/docs/reference/formats/html.html#layout) so it seems we also need to bring support for special CSS includes in each page. Or find another solution adding the type of the style to the quarto-title-banner block and use the correct one inside bootstrap.min.css

[dragonstyle]

As currently implemented, I think that per document title-block-style really isn't supported. Since it is implemented by altering the SCSS used to generate the global style shared by the site, it will be a victim of the 'last compile', which will define the style used globally across the site.

To truly fix, we should like add support for N global styles (generating and linking additional copies of stylesheets based upon the equivalent of a hash of the generated style). This would allow pages to have their own title block styles as well as their own themes, etc...

[cderv]

Thanks for confirming.

So current workaround (if we call it like that) is use only one title-block-style configuration for a whole website.

And @lnnrtwttkhn thanks for the report

[lnnrtwttkhn]

Thanks @cderv and @dragonstyle for looking into this so quickly!

Would be lovely to have per-document title-block-style customization in the future.

Thanks for the great work on Quarto!