R: quarto custom css

qmd_template_at_a_glance.qmd

---
title:        Title
subtitle:     Subtitle
author:                     # originally: Erik Erhardt
date:         last-modified # today, now, last-modified
date-format:  long          # full, long, medium, short, iso,   https://quarto.org/docs/reference/dates.html
format:
  html:
    theme:                  litera
    highlight-style:        atom-one
    page-layout:            full      # article, full   # https://quarto.org/docs/output-formats/page-layout.html
    toc:                    true
    toc-depth:              4
    toc-location:           body      # left, body, right
    number-sections:        true      # true, false
    number-depth:           3
    code-fold:              show      # true (initially hidden), false, show (initially shown)
    code-tools:                       # menu top-right to show/hide all code
      toggle:               true
      caption:              "Code"    # none
      source:               false
    code-overflow:          scroll    # scroll, wrap
    code-block-bg:          true
    code-block-border-left: "#30B0E0"
    df-print:               paged     # default, kable, tibble, paged   # https://quarto.org/docs/computations/r.html
fig-width:                  6
fig-height:                 4
execute: # https://quarto.org/docs/computations/execution-options.html, https://quarto.org/docs/computations/r.html
  cache:    false   # false, true
  eval:     true    # true, false  Evaluate the code chunk (if false, just echos the code into the output).
  echo:     true    # true, false  Include the source code in output
---

<!---
# Erik's compile commands in R:
  fn_qmd <- "erik_qmd_template_simple.qmd"
  setwd("D:/Dropbox/StatAcumen/consult/Rpackages/erikmisc/data-raw/qmd_template")
  quarto::quarto_render(input = fn_qmd)
-->

```{r chunk-01, echo=FALSE}
options(width = 80)
#options(warn  = -1)
options(str   = strOptions(list.len = 1e3))
options(knitr.kable.NA = '') # Display NAs as blanks
my_seed <- 34567
set.seed(my_seed)
```

# Section

```{r}
1:10
```

quarto-custom-frontmatter.yml

---
title: "Analysis of ..."
author: "Knut Behrends"
description: "..."
date: today
format: 
  html:
    code-fold: true
    code-summary: "View source"
    toc: true
    toc-location: right
    css: 
      - https://gist.githubusercontent.com/knbknb/2383c48e9dd0aa1c1a3c3a852a982e19/raw/c5ac934d3b8160f7b26821445eb605a54d5747c2/quarto-custom-knbknb.css
execute:
  echo: true
  warning: false
---

quarto-custom-knbknb.css

/* Format sidebar */
summary {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1em;
}

/* Extra button under sidebar, injected with JavaScript */
.custom-code-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

table.table {
  margin-bottom: 2rem; /* default was: 0.5rem*/
}

quarto-table-of-contents--inject-navbar--button-collapse-all.js

window.addEventListener("DOMContentLoaded", (event) => {
  // Create the button, but do not append it yet
  var button = document.createElement("button");
  const expandCode = "Expand All Code Chunks";
  const collapseCode = "Collapse All Code Chunks";
  button.id = "toggle-all";
  button.textContent = expandCode;
  button.classList.add("btn", "btn-light", "btn-sm", "custom-code-button");

  // button action
  button.addEventListener("click", function () {
    var codeBlocks = document.querySelectorAll("details");
    if (button.textContent === expandCode) {
      codeBlocks.forEach(function (block) {
        block.setAttribute("open", "");
      });
      button.textContent = collapseCode;
    } else {
      codeBlocks.forEach(function (block) {
        block.removeAttribute("open");
      });
      button.textContent = expandCode;
    }
  });

  // Append the button to the bottom of the sidebar
  var navUl = document.querySelector("nav");
  navUl.appendChild(button);
});

snippet-load-js-into-qmd.md

Setup Document Rendering

<!-- 
#| label: inject_button_expand_all
# in qmd -> html page
# Inject, Format, Empower the button for expanding/collapsing all code blocks 
-->
<script type="application/javascript" src="quarto/quarto-table-of-contents--inject-navbar--button-collapse-all.js"></script>

<script type="application/javascript" src="https://gist.githubusercontent.com/knbknb/2383c48e9dd0aa1c1a3c3a852a982e19/raw/9e86cd89f33e359015580731455ce67dcda69c19/snippet-load-js-into-qmd.md"></script>