Install, customize, and update

Install the release

0.3.0 is the current release. Askr’s public format is askr-html. Quarto’s GitHub installer resolves tags and branches; a commit SHA is not a supported @ modifier.

quarto add arfiligol/askr@v0.3.0

Then select the format in a consumer _quarto.yml:

format:
  askr-html:
    toc: true
    code-copy: true

The installed copy belongs under the consumer’s tracked _extensions folder, at _extensions/arfiligol/askr. Askr does not fetch fonts, icons, or styles from a CDN.

Override tokens in the consumer

Create a consumer-owned Sass file, for example styles.scss, and list it after the format theme. This preserves one Askr token authority while making the consumer’s explicit final override visible:

format:
  askr-html:
    theme:
      light: [default, _extensions/arfiligol/askr/qdk.scss, styles.scss]
      dark: [default, _extensions/arfiligol/askr/qdk.scss, _extensions/arfiligol/askr/qdk-dark.scss, styles.scss]

/* Consumer-owned final override: change only a declared Askr token. */
/*-- scss:rules --*/
:root { --qdk-link: #2D5E85; }

Render the consumer and inspect the resulting CSS to verify its final token value. Do not edit a copy inside _extensions/arfiligol/askr; reinstall the reviewed tag instead.

Update

Choose a new version tag only after reviewing its provenance and rendering the consumer. Replace the installed extension through quarto add with that tag, commit the resulting _extensions change in the consumer, and repeat its own validation. The installed directory and its checked-in content are the consumer’s dependency pin.

Search

Askr styles Quarto’s overlay search. It does not add another index. Turn the control on in the consumer website:

website:
  search:
    location: navbar
    type: overlay

At 1280px and wider the button sits on the right, immediately left of the theme toggle, and the header stays one row. Below that width it moves to the left so the right side of the bar does not wrap.

Figures that follow the toggle

A cell can emit a light output and a dark output. Quarto shows the one that matches body.quarto-dark. Put the light output first:

#| renderings: [light, dark]

Draw or display the light figure, then the dark figure. With askr-html and theme-toggle, the dark stylesheet carries data-mode="dark", and the toggle adds quarto-dark to body. Do not set data-mode from the page. The Figures page in this gallery renders a pair of swatches this way.