### Initialize Example Gallery Data

Source: https://github.com/mcanouil/gribouille/blob/main/docs/assets/templates/_example-gallery.ejs.md

Sets up the order of sections and groups items by their section property. This prepares the data structure for rendering the gallery.

```javascript
const sectionOrder = [
  { key: "basics",       heading: "Basics" },
  { key: "bars",         heading: "Bars and counts" },
  { key: "stats",        heading: "Statistics and smoothers" },
  { key: "geoms",        heading: "Layer geometries" },
  { key: "annotations",  heading: "Annotations" },
  { key: "scales",       heading: "Scales and colour" },
  { key: "late-binding", heading: "Late-binding aesthetics" },
  { key: "guides",       heading: "Axes and legends" },
  { key: "facets",       heading: "Facets and coordinates" },
  { key: "themes",       heading: "Themes" }
];
const grouped = {};
for (const item of items) {
  const sec = item.section || "other";
  (grouped[sec] = grouped[sec] || []).push(item);
}
```

--------------------------------

### Render Example Gallery Sections

Source: https://github.com/mcanouil/gribouille/blob/main/docs/assets/templates/_example-gallery.ejs.md

Iterates through the defined section order and renders each section if it contains items. For each section, it generates a heading and a container for gallery items.

```ejs
<% for (const { key, heading } of sectionOrder) { %>
<% if (grouped[key]) { %>
```{=html}
<section class="gallery-section">
<h2 id="<%= key %>"><%= heading %></h2>
<div class="gallery">
```
<% for (const item of grouped[key]) { %>
```{=html}
<article class="gallery-item">
<div class="light-content"><img class="lightbox" data-gallery="examples-light" src="../assets/typst-render/examples/<%= item.slug %>-light.svg" alt="<%= item.alt %>" loading="lazy"></div>
<div class="dark-content"><img class="lightbox" data-gallery="examples-dark" src="../assets/typst-render/examples/<%= item.slug %>-dark.svg" alt="<%= item.alt %>" loading="lazy"></div>
<h3 id="<%= item.slug %>"><%= item.title %></h3>
```

::: {.gallery-description}
<%= item.description %>
:::

```{=html}
<button type="button" class="btn btn-sm gallery-source-btn" data-bs-toggle="modal" data-bs-target="#modal-<%= item.slug %>" aria-label="View source for <%= item.title %>">View source</button>
</article>
```
<% } %>
```{=html}
</div>
</section>
```
<% } %>
<% } %>
```

--------------------------------

### Rebuild Social Card Image

Source: https://github.com/mcanouil/gribouille/blob/main/docs/assets/social-card/README.md

Execute this shell script to rebuild the social card image. Ensure you have quarto and npx installed, and Chromium will be downloaded on first run.

```sh
./build.sh
```

--------------------------------

### Benchmark: Compare Render Settings

Source: https://github.com/mcanouil/gribouille/blob/main/tools/benchmark/README.md

Compare different render variants of a specific case (e.g., 'point') at a fixed element count.

```bash
# Compare render settings of geom-point at a fixed count.
lua tools/benchmark/run.lua --cases point --variants base,large,star,alpha --sizes 1000
```

--------------------------------

### Benchmark: Compare Formats

Source: https://github.com/mcanouil/gribouille/blob/main/tools/benchmark/README.md

Run a quick comparison of a single case across different output formats (PNG, SVG, PDF) with specified element counts.

```bash
# Quick comparison of one case across formats.
lua tools/benchmark/run.lua --cases point --sizes 100,1000 --formats png,svg,pdf
```

--------------------------------

### Run Benchmark Harness

Source: https://github.com/mcanouil/gribouille/blob/main/tools/benchmark/README.md

Execute the benchmark harness with optional arguments to customize the test suite. Use options to specify cases, render variants, element counts, output formats, and more.

```bash
lua tools/benchmark/run.lua [options]
```

--------------------------------

### Run Snapshot Update Mode

Source: https://github.com/mcanouil/gribouille/blob/main/tests/visual/README.md

Execute the snapshot harness in update mode to recompile all sources and overwrite existing golden images. Use this when visual changes are intentional.

```bash
lua tools/snapshot/run.lua --update
```

--------------------------------

### Benchmark: Full Default Sweep with Memory Capture

Source: https://github.com/mcanouil/gribouille/blob/main/tools/benchmark/README.md

Perform a full benchmark sweep using default settings and enable memory usage capture.

```bash
# Full default sweep with memory capture.
lua tools/benchmark/run.lua --mem
```

--------------------------------

### Run Snapshot Check Mode

Source: https://github.com/mcanouil/gribouille/blob/main/tests/visual/README.md

Execute the snapshot harness in check mode to verify existing golden images against current compiles. Exits non-zero on failures.

```bash
lua tools/snapshot/run.lua --check
```

--------------------------------

### Run Snapshot Diff Tool

Source: https://github.com/mcanouil/gribouille/blob/main/tests/visual/README.md

Execute the snapshot diff tool to compare against a base commit. The tool serves a review interface and opens a browser.

```bash
lua tools/snapshot/diff.lua --base main
```

--------------------------------

### Create a Plot with Gribouille

Source: https://github.com/mcanouil/gribouille/blob/main/README.md

This snippet demonstrates how to create a plot using the Gribouille library in Typst. It includes data mapping, various geometric layers, custom scales, labels, and theme settings. Ensure the Gribouille library is imported.

```typst
#import "@preview/gribouille:0.4.1": *

#let species-colours = (
  Adelie: rgb("#ff8c00"),
  Chinstrap: rgb("#008B8B"),
  Gentoo: rgb("#800080"),
)

#plot(
  data: penguins,
  mapping: aes(
    x: "flipper-len",
    y: "body-mass",
    colour: "species",
    fill: "species",
    shape: "species",
  ),
  layers: (
    geom-point(size: 2pt, alpha: 0.25, stroke: 0.5pt, colour: rgb("#ffffff")),
    geom-smooth(method: "lm", se: true, alpha: 0.2),
    geom-mark(method: "hull", expand: 5pt, alpha: 0.25),
    geom-errorbar(stat: stat-summary(fun: "mean-sd"), width: 5pt),
    geom-errorbarh(stat: stat-summary(fun: "mean-sd"), height: 5pt),
    geom-label(
      stat: stat-summary(fun: "mean"),
      mapping: aes(label: "species"),
      colour: rgb("#ffffff"),
      size: 8pt,
    ),
  ),
  scales: (
    scale-x-continuous(),
    scale-y-continuous(labels: format-comma()),
    scale-colour-discrete(
      limits: species-colours.keys(),
      palette: species-colours.values(),
    ),
    scale-fill-discrete(
      limits: species-colours.keys(),
      palette: species-colours.values(),
    ),
  ),
  labels: labels(
    title: typst("Penguins *Dataset*"),
    subtitle: typst({
      [Flipper length vs body mass by species: ]
      species-colours
        .pairs()
        .map(p => text(fill: p.at(1), weight: "bold")[#p.at(0)])
        .join(", ")
    }),
    caption: "Data from Palmer Archipelago (Antarctica) penguin dataset.",
    colour: "Species",
    fill: "Species",
    shape: "Species",
    x: "Flipper Length (mm)",
    y: "Body Mass (g)",
  ),
  theme: theme-minimal(),
  width: 12cm,
  height: 9cm,
)
```

--------------------------------

### Run Benchmark Harness

Source: https://github.com/mcanouil/gribouille/blob/main/tools/benchmark/README.md

Execute the benchmark harness with specified variants, sizes, formats, and repetitions. This command refreshes the results.csv file used for performance plotting.

```bash
lua tools/benchmark/run.lua \
  --variants base \
  --sizes 100,1000,10000,100000 \
  --formats png,svg,pdf --reps 1 --timeout 90 \
  --out docs/benchmarks/results.csv
```

--------------------------------

### Check Typst Compiler Version

Source: https://github.com/mcanouil/gribouille/blob/main/CONTRIBUTING.md

To report a bug, include the Typst compiler version. Use the `typst --version` command to retrieve it.

```shell
typst --version
```

--------------------------------

### Initialize Tooltips with Tippy.js

Source: https://github.com/mcanouil/gribouille/blob/main/docs/assets/scripts/tooltips.html

This JavaScript code initializes tooltips for elements with a 'title' attribute. It customizes tooltip options like theme, placement, and delay. Ensure tippy.js is loaded before this script.

```javascript
window.addEventListener("DOMContentLoaded", function () {
    if (typeof window.tippy !== "function") return;
    var options = {
        theme: "gb",
        placement: "bottom",
        arrow: false,
        delay: [120, 0],
        offset: [0, 6],
        allowHTML: false,
        appendTo: function () {
            return document.body;
        }
    };

    function bind(el, label) {
        if (!el || !label) return;
        if (el.hasAttribute("title")) {
            el.setAttribute("data-tippy-original-title", el.getAttribute("title"));
            el.removeAttribute("title");
        }
        window.tippy(el, Object.assign({ content: label }, options));
    }

    var selectors = [
        ".navbar .nav-link[title]",
        ".navbar a[href][title]",
        ".navbar iconify-icon[title]",
        ".quarto-color-scheme-toggle[title]",
        ".page-footer a[title]",
        ".page-footer iconify-icon[title]",
        "main p iconify-icon[title]",
        "main li iconify-icon[title]"
    ];

    document.querySelectorAll(selectors.join(",")).forEach(function (el) {
        var label = el.getAttribute("title") || el.getAttribute("aria-label") || el.getAttribute("data-bs-original-title");
        bind(el, label);
    });

    document.querySelectorAll("a.navbar-brand-logo").forEach(function (logo) {
        bind(logo, "Home");
    });
});
```

--------------------------------

### Gribouille Data Pipeline Stages

Source: https://github.com/mcanouil/gribouille/blob/main/ARCHITECTURE.md

Illustrates the sequential stages of data processing within the Gribouille library. Data flows from initial input through various transformations to the final rendering.

```text
data ──▶ stat ──▶ position ──▶ scale ──▶ coord ──▶ facet ──▶ theme ──▶ render
```

--------------------------------

### Import Gribouille in Typst Document

Source: https://github.com/mcanouil/gribouille/blob/main/CONTRIBUTING.md

When creating a minimal reproducible Typst document for a bug report, import Gribouille using its preview path and specified version.

```typst
#import "@preview/gribouille:<version>": *
```

--------------------------------

### Survey Frequent Words in Typst Files

Source: https://github.com/mcanouil/gribouille/blob/main/GLOSSARY.md

This command-line snippet counts word frequencies in Typst files, sorts them numerically and in reverse, and filters for words appearing 50 or more times. It's used to identify potentially domain-specific terms.

```sh
grep -rhoE '\b[a-z]{1,4}\b' src --include='*.typ' \
  | sort | uniq -c | sort -rn | awk '$1 >= 50' | less
```

--------------------------------

### Typst Error Handling Utility

Source: https://github.com/mcanouil/gribouille/blob/main/CONTRIBUTING.md

Validation messages in Gribouille should be routed through utilities in `src/utils/errors.typ`. These utilities enforce a specific message grammar for consistency.

```typst
fail("scope: problem; got <repr(value)>. hint")
fail-enum("scope: problem; got <repr(value)>. hint")
fail-type("scope: problem; got <repr(value)>. hint")
fail-range("scope: problem; got <repr(value)>. hint")
check("scope: problem; got <repr(value)>. hint")
```

--------------------------------

### Error Handling Functions

Source: https://github.com/mcanouil/gribouille/blob/main/ARCHITECTURE.md

Provides a set of helper functions for generating specific types of error messages. These functions are pure and unit-tested to ensure reliable validation.

```typst
fail(scope, problem, hint: none)
fail-enum(scope, name, value, valid, hint: none)
fail-type(scope, name, value, expected, hint: none)
fail-range(scope, name, value, lo, hi, lo-open: …, hi-open: …, hint: none)
check(cond, scope, problem, hint: none)
```

--------------------------------

### Add Security Attributes to External Links

Source: https://github.com/mcanouil/gribouille/blob/main/docs/assets/scripts/external-links.html

Applies 'noopener' and 'noreferrer' attributes to links with target="_blank" to mitigate security risks. This is useful for all outbound links that open in a new tab.

```javascript
const SIDEBAR_LINK_SELECTOR = '.quarto-alternate-formats a, .quarto-other-links a';
function addSecurityAttributes(link) {
  if (link.getAttribute('target') === '_blank') {
    const currentRel = link.getAttribute('rel') || '';
    const relValues = new Set(currentRel.split(/\s+/).filter(Boolean));
    relValues.add('noopener');
    relValues.add('noreferrer');
    link.setAttribute('rel', Array.from(relValues).join(' '));
  }
}
function ensureBlankTarget(link) {
  link.setAttribute('target', '_blank');
  addSecurityAttributes(link);
}

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('a[target="_blank"]').forEach(addSecurityAttributes);
  document.querySelectorAll(SIDEBAR_LINK_SELECTOR).forEach(ensureBlankTarget);

  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) {
          if (node.tagName === 'A') {
            addSecurityAttributes(node);
          }
          node.querySelectorAll('a[target="_blank"]').forEach(addSecurityAttributes);
          node.querySelectorAll(SIDEBAR_LINK_SELECTOR).forEach(ensureBlankTarget);
        }
      });
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
});
```

--------------------------------

### Error Message Convention

Source: https://github.com/mcanouil/gribouille/blob/main/ARCHITECTURE.md

Defines the standard format for error messages within the Gribouille library, ensuring consistency and clarity. This convention is centralized in `src/utils/errors.typ`.

```text
<scope>: <problem>; got <repr(value)>. <hint>
```

--------------------------------

### Display Current Year in HTML

Source: https://github.com/mcanouil/gribouille/blob/main/docs/assets/scripts/current-year.html

This script waits for the DOM to be fully loaded, then finds an element with the ID 'current-year' and sets its text content to the current year. Ensure an element with id='current-year' exists in your HTML.

```javascript
document.addEventListener("DOMContentLoaded", function () {
  const el = document.getElementById('current-year');
  if (el) el.textContent = new Date().getFullYear();
});
```

--------------------------------

### Add Ordinal Suffixes to Dates

Source: https://github.com/mcanouil/gribouille/blob/main/docs/assets/scripts/ordinal-dates.html

Applies ordinal suffixes to day numbers within selected HTML elements. Ensure the target elements contain dates in a format compatible with the regular expression.

```javascript
/**
 * @license MIT
 * @copyright 2026 Mickaël Canouil
 * @author Mickaël Canouil
 */ const dateElements = document.querySelectorAll( "p.date, p.date-modified, div.listing-date, div.listing-file-modified" ); dateElements.forEach((el) => {
  el.innerHTML = el.innerHTML.replace( /(\d+)(st|nd|rd|th)/g, "$1<sup style='font-size:0.5em;font-style:italic;'>$2</sup>" );
 });
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.