juba/bookup-html

Bookup custom Quarto HTML format

bookup-html custom quarto format

bookup is a custom quarto HTML format based on the Roboto font family. It provides both a light and a dark theme, and should be suitable for single documents, book projects and website projects.

Screenshots

Single document, light theme (live example)
Single document, dark theme (live example)
Book project with a docked sidebar, light theme (live example)
Website project with a floating sidebar, dark theme (live example)

Installation and usage

To use this custom format, first install the extension at the root directory of your project:

quarto add juba/bookup-html

And add the format to your YAML configuration, along with other HTML format options if needed:

format:
    bookup-html:
        toc: true
        toc-depth: 3

Even simpler, you can also directly install the extensions and generate a sample qmd file from a template with:

quarto use template juba/bookup-html

Dark and light variants

Warning : this will only work with quarto version 1.3 or higher.

By default, your document will be displayed with the light theme, with a toggle allowing to switch to the dark theme.

If you want to change this behavior you can add a variant to the format name:

Format name	Theme used
bookup-html (default)	Light theme by default, optional dark theme
bookup-html+dark	Dark theme by default, optional light theme
bookup-html+lightonly	Light theme only
bookup-html+darkonly	Dark theme only

Format Options

Currently bookup provides the following option:

• embed-fonts : if set to true, fonts are included locally with the document. If set to false, they are downloaded from Google Web Fonts. Not that if you use self-contained: true, fonts are embedded inside the resulting HTML even if embed-fonts is false.

Credits

This format is derived from the original bookdown theme, adapted for the online french book Introduction à R et au tidyverse.

bookup-html's Issues

Toggle from dark to light (and reverse) for plots

Dear @juba,

Thanks a lot for the great Quarto format! It’s just so much exactly what I needed!

I’m considering using bookup-html+dark which gives the ability to switch from dark to light.

Would it be possible to also switch between dark and light plots at the same time? Maybe using something like Mickaël Canouil is doing here: https://mickael.canouil.fr/posts/2023-05-30-quarto-light-dark/?

Or if it’s too complicated, would you have some recommendation about a ggplot theme that would fit for both light and dark mode? I see in your live example that the plots are light, but no so “aggressively” light in the dark rendered page. Did you use an existing theme or some custom one?

Thanks a lot for helping!

`code-line-numbers` doesn't working

Thanks for your great and beautiful template! I'm using this template writing some tutorials, but I found that the code-line-numbers option seems not to work. Whether I add it to the attribute of code blocks or to _quarto.yml under bookup-html, it doesn't works. And sometimes the left side(the area line numers are expected) will just disappear. Am I using the wrong way, or is there's any way to fix it? Thanks.

Dendrogram rendering from rainette

Hi @juba,

I really like books-html to render my Quarto documents, especially the possibility to have dark mode (and to toggle between light and dark). That’s just… great!

One question I have is about the rendering of a dendrogram coming from rainette_plot().

When I integrate such a plot in my Quarto document and render it as simple html, it is displayed like this:

And when I render the same document with bookup-html+dark, it is displayed like that:

The first version is much more readable than the second. I think the difference is because of the font size (I don’t know if there is something more).

Do you have an idea about how i could improve the rendering of the dendrogram with bookup-html+dark?

Thank you in advance for your help!

Switch back GHA quarto to release and embed-fonts to true by default

When quarto 1.3 is released, switch back to "release" for Quarto setup, and set embed-fonts back to true by default in template.qmd and _extension.yml.

Error when rendering in Rstudio.

ERROR: The extension Bookup is incompatible with this quarto version.

Extension requires: >=1.2.475
Quarto version: 1.2.335

I just installed the latest version of Quarto for Windows from https://quarto.org/docs/get-started/

Thank you