class on from its
+// folder's _metadata.yml; components read --sec (bar, decoration only) and
+// --sec-ink (text and glyphs). Pages outside a navbar section, like home,
+// keep the brand defaults. The classes are plain, so other elements (the
+// home chooser cards) can use them too.
+// The defaults go on body, not :root: var() resolves where the property is
+// declared, and the dark --qorg-* values only exist from body.quarto-dark.
+body {
+ --sec: var(--qorg-brand);
+ --sec-ink: var(--qorg-link);
+}
+
+@each $name in getstarted, guide, extensions, reference, gallery, blog {
+ .sec-#{$name} {
+ --sec: var(--qorg-sec-#{$name});
+ --sec-ink: var(--qorg-sec-#{$name}-ink);
+ }
+}
diff --git a/_extensions/quartoorg/scss/partials/_shapes.scss b/_extensions/quartoorg/scss/partials/_shapes.scss
new file mode 100644
index 0000000000..e92d0dd99c
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_shapes.scss
@@ -0,0 +1,112 @@
+// Shapes that the site chrome, the components and the gallery share.
+// Each mixin draws the shape from the tokens; the caller picks the element.
+
+// Section heading with a 5px rounded bar on its left, in the section colour
+// unless the caller passes another one (the gallery uses its category colour).
+@mixin qorg-bar-heading($bar-inset: 0.2rem, $bar: var(--sec)) {
+ position: relative;
+ padding-left: 0.95rem;
+ border-bottom: 0;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: $bar-inset;
+ bottom: $bar-inset;
+ width: 5px;
+ border-radius: 3px;
+ background: $bar;
+ }
+}
+
+// Floating panel: line border, translucent page surface with a blur behind
+// it, and a soft shadow. The parent keeps it in view (sticky).
+@mixin qorg-float-panel($radius: var(--qorg-radius-card)) {
+ border: 1px solid var(--qorg-line);
+ border-radius: $radius;
+ background: color-mix(in srgb, var(--qorg-bg) 92%, transparent);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ box-shadow: 0 4px 16px var(--qorg-shadow);
+}
+
+// Card: line border, card radius, panel surface, and a 4px bar along the
+// top, in the section colour by default. $bar: null draws no bar.
+@mixin qorg-card-shell($bar: var(--sec)) {
+ position: relative;
+ overflow: hidden;
+ border: 1px solid var(--qorg-line);
+ border-radius: var(--qorg-radius-card);
+ background: var(--qorg-panel);
+
+ @if $bar {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: $bar;
+ }
+ }
+}
+
+// Glyph in a square box tinted with the section colour.
+@mixin qorg-glyph-box($size: 2.3rem) {
+ display: inline-grid;
+ place-items: center;
+ width: $size;
+ height: $size;
+ border-radius: 10px;
+ background: color-mix(in srgb, var(--sec) 16%, var(--qorg-panel));
+ color: var(--sec-ink);
+ font-size: 1.25rem;
+}
+
+// Tile: a control whose border is its only edge, so the border uses the
+// strong line (3:1). Hover shows the section colour.
+@mixin qorg-tile {
+ border: 1px solid var(--qorg-line-strong);
+ border-radius: var(--qorg-radius-card);
+ background: var(--qorg-panel);
+ color: var(--qorg-ink);
+ text-decoration: none;
+
+ &:hover {
+ border-color: var(--sec);
+ color: var(--qorg-ink);
+ }
+}
+
+// Current or selected tile: a second pixel of border as an inset shadow, so
+// the tile keeps its size, and a bold label.
+@mixin qorg-tile-current {
+ border-color: var(--sec);
+ box-shadow: inset 0 0 0 1px var(--sec);
+ font-weight: 700;
+}
+
+// Chip look: small caps label on the chip surface, with the chip radius.
+// The gallery uses it with its own, smaller sizes.
+@mixin qorg-chip-skin {
+ border: 1px solid var(--qorg-chip-line);
+ border-radius: var(--qorg-radius-chip);
+ background: var(--qorg-chip);
+ color: var(--qorg-chip-ink);
+ font-variant: small-caps;
+ letter-spacing: 0.03em;
+}
+
+// Chip with the site sizes.
+@mixin qorg-chip {
+ display: inline-flex;
+ align-items: center;
+ min-height: 24px;
+ padding: 0.05rem 0.6rem;
+ font-size: 0.75rem;
+ font-weight: 600;
+ text-transform: none;
+ @include qorg-chip-skin;
+}
diff --git a/_extensions/quartoorg/scss/partials/_site.scss b/_extensions/quartoorg/scss/partials/_site.scss
index 1b5a547543..d77a4ca333 100644
--- a/_extensions/quartoorg/scss/partials/_site.scss
+++ b/_extensions/quartoorg/scss/partials/_site.scss
@@ -1,6 +1,12 @@
// Site rules shared by the light and dark themes, in the order the original
-// stylesheets loaded: styles.css, then index.css.
+// stylesheets loaded: styles.css, then index.css. Tokens come first, so every
+// partial can read them.
+@import "tokens";
+@import "shapes";
+@import "focus";
+@import "sections";
@import "navbar";
+@import "chrome";
@import "content";
@import "downloads";
@import "embeds";
@@ -13,3 +19,4 @@
@import "color-box";
@import "home";
@import "announcement";
+@import "gallery";
diff --git a/_extensions/quartoorg/scss/partials/_tokens.scss b/_extensions/quartoorg/scss/partials/_tokens.scss
new file mode 100644
index 0000000000..01e987fdb2
--- /dev/null
+++ b/_extensions/quartoorg/scss/partials/_tokens.scss
@@ -0,0 +1,73 @@
+// Design tokens: custom properties read by every partial.
+// Light values go on :root and dark values on body.quarto-dark, because
+// Quarto loads the light stylesheet again after the dark one, so a dark
+// value on :root would lose in dark mode. The colours come from the
+// quartoorg-palette.scss theme layer.
+
+$qorg-roles: (
+ "bg": ($qorg-bg-light, $qorg-bg-dark),
+ "panel": ($qorg-panel-light, $qorg-panel-dark),
+ "band": ($qorg-band-light, $qorg-band-dark),
+ "hero": ($qorg-hero-light, $qorg-hero-dark),
+ "code-bg": ($qorg-code-bg-light, $qorg-code-bg-dark),
+ "ink": ($qorg-ink-light, $qorg-ink-dark),
+ "muted": ($qorg-muted-light, $qorg-muted-dark),
+ "line": ($qorg-line-light, $qorg-line-dark),
+ "line-strong": ($qorg-line-strong-light, $qorg-line-strong-dark),
+ "link": ($qorg-link-light, $qorg-link-dark),
+ "brand": ($qorg-brand-light, $qorg-brand-dark),
+ "brand-hover": ($qorg-brand-hover-light, $qorg-brand-hover-dark),
+ "on-brand": ($qorg-on-brand-light, $qorg-on-brand-dark),
+ "ring": ($qorg-ring-light, $qorg-ring-dark),
+ "chip": ($qorg-chip-light, $qorg-chip-dark),
+ "chip-ink": ($qorg-chip-ink-light, $qorg-chip-ink-dark),
+ "chip-line": ($qorg-chip-line-light, $qorg-chip-line-dark),
+ "interactive-ink": ($qorg-interactive-ink-light, $qorg-interactive-ink-dark),
+);
+
+$qorg-sections: (
+ "getstarted": ($sec-getstarted-bar, $sec-getstarted-ink-light, $sec-getstarted-ink-dark),
+ "guide": ($sec-guide-bar, $sec-guide-ink-light, $sec-guide-ink-dark),
+ "extensions": ($sec-extensions-bar, $sec-extensions-ink-light, $sec-extensions-ink-dark),
+ "reference": ($sec-reference-bar, $sec-reference-ink-light, $sec-reference-ink-dark),
+ "gallery": ($sec-gallery-bar, $sec-gallery-ink-light, $sec-gallery-ink-dark),
+ "blog": ($sec-blog-bar, $sec-blog-ink-light, $sec-blog-ink-dark),
+);
+
+$qorg-categories: (
+ "reports": $cat-reports,
+ "dashboards": $cat-dashboards,
+ "research": $cat-research,
+ "teaching": $cat-teaching,
+ "docs": $cat-docs,
+ "personal": $cat-personal,
+);
+
+:root {
+ @each $role, $values in $qorg-roles {
+ --qorg-#{$role}: #{nth($values, 1)};
+ }
+ @each $name, $values in $qorg-sections {
+ --qorg-sec-#{$name}: #{nth($values, 1)};
+ --qorg-sec-#{$name}-ink: #{nth($values, 2)};
+ }
+ @each $name, $value in $qorg-categories {
+ --cat-#{$name}: #{$value};
+ }
+ --qorg-interactive-bg: #{$qorg-interactive-bg};
+ --qorg-interactive-line: #{$qorg-interactive-line};
+ --qorg-prerelease: #{$qorg-prerelease};
+ --qorg-on-prerelease: #{$qorg-on-prerelease};
+ --qorg-shadow: #{$qorg-shadow};
+ --qorg-radius-card: 12px;
+ --qorg-radius-chip: 20px;
+}
+
+body.quarto-dark {
+ @each $role, $values in $qorg-roles {
+ --qorg-#{$role}: #{nth($values, 2)};
+ }
+ @each $name, $values in $qorg-sections {
+ --qorg-sec-#{$name}-ink: #{nth($values, 3)};
+ }
+}
diff --git a/_extensions/quartoorg/scss/partials/_tool-links.scss b/_extensions/quartoorg/scss/partials/_tool-links.scss
index e589c4b293..cd4e45b138 100644
--- a/_extensions/quartoorg/scss/partials/_tool-links.scss
+++ b/_extensions/quartoorg/scss/partials/_tool-links.scss
@@ -10,26 +10,11 @@
.tool a {
width: 100px;
text-align: center;
- color: var(--bs-body-color);
- border: 1px solid var(--bs-border-color);
- border-radius: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-top: 10px;
font-size: 0.85em;
-}
-
-.tool a:hover {
- color: var(--bs-body-color);
- border-color: var(--bs-link-color);
- background-color: transparent;
-}
-
-/* .btn's focus style is a near-white shadow; restore a visible ring. */
-.tool a:focus-visible {
- outline: 2px solid var(--bs-link-color);
- outline-offset: 2px;
- box-shadow: none;
+ @include qorg-tile;
}
.tool a img {
diff --git a/_extensions/quartoorg/scss/partials/_tools-tabset.scss b/_extensions/quartoorg/scss/partials/_tools-tabset.scss
index 82d3dca3c6..e5569d22b1 100644
--- a/_extensions/quartoorg/scss/partials/_tools-tabset.scss
+++ b/_extensions/quartoorg/scss/partials/_tools-tabset.scss
@@ -27,27 +27,14 @@
text-align: center;
margin-right: 10px;
margin-top: 10px;
- color: inherit;
width: 102px;
font-size: 0.8em;
+ @include qorg-tile;
}
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link,
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active,
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active,
.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
- border: 1px solid rgb(222, 226, 230);
- border-radius: 10px;
-}
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link:hover {
- border-color: rgb(80,146,221);
- border-width: 1px;
-}
-
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active,
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
- border-color: rgb(80,146,221);
- /* Second pixel as a shadow, so selecting a tab doesn't resize it. */
- box-shadow: inset 0 0 0 1px rgb(80,146,221);
+ @include qorg-tile-current;
}
.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link img {
diff --git a/_extensions/quartoorg/scss/prerelease-banner.scss b/_extensions/quartoorg/scss/prerelease-banner.scss
index d633629b19..b7962d2bf4 100644
--- a/_extensions/quartoorg/scss/prerelease-banner.scss
+++ b/_extensions/quartoorg/scss/prerelease-banner.scss
@@ -4,5 +4,6 @@
// #e60033 gives white text 4.76:1 (WCAG 1.4.3 needs 4.5:1).
// Cosmo's $danger (#ff0039) gives only 3.95:1.
#quarto-announcement {
- background-color: #e60033;
+ color: var(--qorg-on-prerelease);
+ background-color: var(--qorg-prerelease);
}
diff --git a/_extensions/quartoorg/scss/quartoorg-dark.scss b/_extensions/quartoorg/scss/quartoorg-dark.scss
index 12700985c3..a93af96a43 100644
--- a/_extensions/quartoorg/scss/quartoorg-dark.scss
+++ b/_extensions/quartoorg/scss/quartoorg-dark.scss
@@ -1,84 +1,80 @@
/*-- scss:defaults --*/
-$blue: #447099;
-$red: #D44000;
-$orange: #EE6331;
-$yellow: #E7B10A;
-$green: #72994E;
-$teal: #419599;
-$cyan: #75A8D9;
-$black: #000;
-$white: #fff;
-$gray: #404041;
-$gray-dark: #343a40;
-$gray-100: #f8f8f8;
-$gray-200: #C2C2C4;
-$gray-300: #949494;
-$gray-400: #707073;
-$gray-500: #495057;
-$gray-600: #404041;
-$gray-700: #333333;
-$gray-800: #242426;
-$gray-900: #151515;
+$blue: $qorg-brand-light;
+$red: $qorg-red-dark;
+$orange: $qorg-orange-dark;
+$yellow: $qorg-yellow-dark;
+$green: $qorg-green-dark;
+$teal: $qorg-teal-dark;
+$cyan: $qorg-cyan-dark;
+
+// Navy grey scale: the dark end holds the surfaces, the light end the text.
+$gray-100: $qorg-ink-dark;
+$gray-200: $qorg-chip-ink-dark;
+$gray-300: $qorg-muted-dark;
+$gray-400: $qorg-line-strong-dark;
+$gray-500: mix($qorg-line-strong-dark, $qorg-chip-line-dark);
+$gray-600: $qorg-chip-line-dark;
+$gray-700: $qorg-chip-dark;
+$gray-800: $qorg-panel-dark;
+$gray-900: $qorg-bg-dark;
+$gray: $gray-600;
+$gray-dark: $gray-800;
$default: $gray-900;
-$primary: $cyan;
+$primary: $qorg-link-dark;
$secondary: $gray-400;
$success: $green;
$info: $yellow;
$warning: $orange;
$danger: $red;
-
-
// Base document colors
-$body-bg: $gray-900;
-$body-color: $gray-100;
-$link-color: $cyan;
+$body-bg: $qorg-bg-dark;
+$body-color: $qorg-ink-dark;
+$link-color: $qorg-link-dark;
+$text-muted: $qorg-muted-dark;
+$body-secondary: $text-muted;
// Bootstrap's own $pre-color default (#000, meant for a light background)
-// is hardcoded regardless of theme -- inherit so bare elements (e.g.
-// Quarto's own .cell-decorator notebook-view prompts) stay legible here.
+// is hardcoded regardless of theme, so inherit to keep bare elements
+// (e.g. Quarto's own .cell-decorator notebook-view prompts) legible here.
// Bootswatch's dark themes (darkly, cyborg) carry the same override.
$pre-color: inherit;
-$light: rgb(32.4,32.4,34.2);
+$light: $qorg-band-dark;
// Navigation element colors
-$footer-bg: $gray-900;
-$navbar-bg: shade-color($gray-800, 10%);
-
+$navbar-bg: $body-bg;
+$footer-bg: $body-bg;
+$footer-fg: $text-muted;
// Code blocks
-$code-block-bg-alpha: -.9;
+$code-block-bg: $qorg-code-bg-dark;
-// Bootstrap popovers
-$popover-bg: #242424;
-
-// Bootstrap inputs
-$input-bg: #242424;
-$dropdown-bg: $body-bg;
+// Surfaces that float above the page
+$popover-bg: $qorg-panel-dark;
+$input-bg: $qorg-panel-dark;
+$dropdown-bg: $qorg-panel-dark;
$dropdown-color: $body-color;
$dropdown-link-color: $body-color;
-$dropdown-link-hover-bg: $gray-600;
-$dropdown-link-hover-color: #eee;
-$nav-tabs-link-hover-border-color: rgb(80, 80, 80);
+$dropdown-link-hover-bg: $qorg-chip-dark;
+$dropdown-link-hover-color: $body-color;
+$nav-tabs-link-hover-border-color: $qorg-line-strong-dark;
-// Borders need 3:1 against the page background (WCAG 1.4.11);
-// $gray-400 on $gray-900 is 3.70:1.
-$border-color: $gray-400;
+// Borders need 3:1 against the page background (WCAG 1.4.11); line-strong
+// is 3.9:1 on the dark page.
+$border-color: $qorg-line-strong-dark;
-$mono-background-color: rgba(0,0,0,0);
+$mono-background-color: transparent;
// Quarto defaults $code-bg to $gray-100, which is light here.
$code-bg: $body-bg;
-$code-color: rgb(192, 128, 216);
+$code-color: $qorg-code-color-dark;
$nav-tabs-link-active-color: $body-color;
$toc-inactive-border: rgba($gray-800, 0.5);
$input-text-background-color: $gray-800;
$input-group-addon-bg: $gray-800;
$carousel-dark-caption-color: $body-color;
-$pagination-disabled-bg: rgb(24,24,24);
-
-$text-muted: lighten(#6a737b, 20%);
+$pagination-disabled-bg: $body-bg;
/*-- scss:rules --*/
@import "partials/dark-rules";
diff --git a/_extensions/quartoorg/scss/quartoorg-palette.scss b/_extensions/quartoorg/scss/quartoorg-palette.scss
new file mode 100644
index 0000000000..c63966133d
--- /dev/null
+++ b/_extensions/quartoorg/scss/quartoorg-palette.scss
@@ -0,0 +1,101 @@
+/*-- scss:defaults --*/
+// Every literal colour of the site theme, in light and dark.
+// Partials read these through the custom properties in _tokens.scss; the
+// theme entry files read them to set Bootstrap variables.
+//
+// This is a theme layer, not a partial, and it must come last in the theme
+// lists in _extension.yml. Quarto joins defaults layers in reverse order, so
+// these declarations then come before the entry files' defaults. Quarto reads
+// that text to export Bootstrap variables as --quarto-scss-export-*, and it
+// does not follow @import.
+
+// Surfaces and text.
+$qorg-bg-light: #ffffff;
+$qorg-bg-dark: #161f28;
+$qorg-panel-light: #ffffff;
+$qorg-panel-dark: #1d2833;
+$qorg-band-light: #f3f6f9;
+$qorg-band-dark: #1a2430;
+$qorg-hero-light: #eaf1f7;
+$qorg-hero-dark: #1c2f3d;
+$qorg-code-bg-light: #eff2f5;
+$qorg-code-bg-dark: #1d2833;
+$qorg-ink-light: #1c2733;
+$qorg-ink-dark: #e8eef4;
+$qorg-muted-light: #5d6b7b;
+$qorg-muted-dark: #a4b4c4;
+$qorg-line-light: #dde3ea;
+$qorg-line-dark: #2c3a48;
+$qorg-line-strong-light: #7d8a98;
+$qorg-line-strong-dark: #687c90;
+$qorg-link-light: #26527a;
+$qorg-link-dark: #8fbdf0;
+$qorg-brand-light: #447099;
+$qorg-brand-dark: #8fbdf0;
+$qorg-brand-hover-light: #26527a;
+$qorg-brand-hover-dark: #b5d3f5;
+$qorg-on-brand-light: #ffffff;
+$qorg-on-brand-dark: #0f1a24;
+$qorg-ring-light: #1f5fbf;
+$qorg-ring-dark: #7fb2ff;
+$qorg-chip-light: #eef1f5;
+$qorg-chip-dark: #26333f;
+$qorg-chip-ink-light: #3f5266;
+$qorg-chip-ink-dark: #c4d2df;
+$qorg-chip-line-light: #e2e7ec;
+$qorg-chip-line-dark: #33424f;
+
+// Dark theme status and accent colours, used by Bootstrap's theme colours and
+// callouts.
+$qorg-red-dark: #d44000;
+$qorg-orange-dark: #ee6331;
+$qorg-yellow-dark: #e7b10a;
+$qorg-green-dark: #72994e;
+$qorg-teal-dark: #419599;
+$qorg-cyan-dark: #75a8d9;
+
+// Inline code text in dark mode; 5.22:1 on the dark panel.
+$qorg-code-color-dark: #c080d8;
+
+// Prerelease banner; white text on it is 4.76:1.
+$qorg-prerelease: #e60033;
+$qorg-on-prerelease: #ffffff;
+
+// Site sections: the bar is decoration only, the ink is for text and glyphs.
+// Light inks are 7:1 or more on white, dark inks 7.6:1 or more on the dark
+// panel.
+$sec-getstarted-bar: #2f9e5b;
+$sec-getstarted-ink-light: #185a33;
+$sec-getstarted-ink-dark: #74d6a0;
+$sec-guide-bar: #3b7dd8;
+$sec-guide-ink-light: #26527a;
+$sec-guide-ink-dark: #8fbdf0;
+$sec-extensions-bar: #8b5cf6;
+$sec-extensions-ink-light: #5b35b5;
+$sec-extensions-ink-dark: #c3b1fb;
+$sec-reference-bar: #12a594;
+$sec-reference-ink-light: #085a50;
+$sec-reference-ink-dark: #5fd8c8;
+$sec-gallery-bar: #d6457f;
+$sec-gallery-ink-light: #8f1f4f;
+$sec-gallery-ink-dark: #f5a5c6;
+$sec-blog-bar: #e8863c;
+$sec-blog-ink-light: #7f3c0c;
+$sec-blog-ink-dark: #f3b07a;
+
+// Gallery categories, the same in both modes.
+$cat-reports: #3b7dd8;
+$cat-dashboards: #12a594;
+$cat-research: #8b5cf6;
+$cat-teaching: #e8863c;
+$cat-docs: #546e91;
+$cat-personal: #d6457f;
+
+// Gallery interactive marker.
+$qorg-interactive-bg: rgba(18, 165, 148, 0.16);
+$qorg-interactive-line: rgba(18, 165, 148, 0.3);
+$qorg-interactive-ink-light: #0a6b5e;
+$qorg-interactive-ink-dark: #2fd4bf;
+
+// Soft shadow under floating panels (table of contents, gallery rail).
+$qorg-shadow: rgba(0, 0, 0, 0.1);
diff --git a/_extensions/quartoorg/scss/quartoorg.scss b/_extensions/quartoorg/scss/quartoorg.scss
index 3ae6cd3dd5..7c977649f0 100644
--- a/_extensions/quartoorg/scss/quartoorg.scss
+++ b/_extensions/quartoorg/scss/quartoorg.scss
@@ -1,27 +1,31 @@
/*-- scss:defaults --*/
-$link-color: #39729E;
-$text-muted: #6a737b;
-// Align light mode with the site's brand blue (quartoorg-dark.scss $blue).
-// This also clears the white-on-primary contrast failures on cosmo's
-// #2780e3 (3.97:1): .btn-primary, .text-bg-primary badges, and Quarto's
-// notebook-preview header, whose h6 Quarto dims to opacity .9 (axe
-// color-contrast-b09c0e, -50505e). White on #447099 is 5.22:1; the faded
-// h6 is 4.59:1.
-$primary: #447099;
+$body-color: $qorg-ink-light;
+$link-color: $qorg-link-light;
+$text-muted: $qorg-muted-light;
+$footer-fg: $text-muted;
+
+// The brand blue. White on it is 5.22:1, which also clears the
+// white-on-primary contrast failures that cosmo's #2780e3 (3.97:1) caused:
+// .btn-primary, .text-bg-primary badges, and Quarto's notebook-preview
+// header, whose h6 Quarto dims to opacity .9 (4.59:1 here).
+$primary: $qorg-brand-light;
// Quarto's body-secondary mixin (blockquotes, captions, asides, header
-// section numbers) defaults to theme-dim($body-color, 25%) = #6d7a86, only
-// 4.39:1 on white — a WCAG AA 1.4.3 failure (axe color-contrast-7ed054).
-// Defining $body-secondary makes the mixin use it instead; $text-muted is
-// 4.83:1.
+// section numbers) defaults to theme-dim($body-color, 25%), under 4.5:1 on
+// white. Defining $body-secondary makes the mixin use the muted text colour,
+// 5.4:1.
$body-secondary: $text-muted;
-// Code-block background: the darkest tint of the site's cosmo blue-gray that
-// still keeps every a11y-light syntax color at WCAG AA (>=4.5:1). a11y-light's
-// palette is tuned for a near-white background, so this stays pale; one step
-// darker (#eef1f4) drops the worst token (red #d91e18) below 4.5:1.
-$code-block-bg: #eff2f5;
+// Quarto components that the site does not own (tabset tabs, inputs, listing
+// filters) use $border-color as their only edge, so it needs 3:1 against the
+// page (WCAG 1.4.11); line-strong is 3.5:1 on white.
+$border-color: $qorg-line-strong-light;
+
+// Code-block background: the darkest tint that still keeps every a11y-light
+// syntax colour at 4.5:1 or more. One step darker (#eef1f4) drops the worst
+// token (red #d91e18) below 4.5:1.
+$code-block-bg: $qorg-code-bg-light;
/*-- scss:rules --*/
@import "partials/light-rules";
diff --git a/_freeze/docs/gallery/index/execute-results/html.json b/_freeze/docs/gallery/index/execute-results/html.json
deleted file mode 100644
index 347a5511d9..0000000000
--- a/_freeze/docs/gallery/index/execute-results/html.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "hash": "349c44c283421f234ad09142d65d8438",
- "result": {
- "engine": "knitr",
- "markdown": "---\npagetitle: \"Gallery\"\ntoc: false\nimage: articles/advanced-layout-pdf.png\nsearch: false\nexecute:\n echo: false\nlisting:\n - id: gallery\n template: gallery.ejs\n contents: gallery.yml\ndescription: |\n A gallery of example documents, websites, books, and presentations created with Quarto.\naliases:\n - /docs/dashboards/examples/index.html\n - /docs/dashboards/examples/\n---\n\n::: {#hero-banner .column-screen}\n::: {.grid .column-page}\n::: {.headline .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.h1 role=\"heading\" aria-level=\"1\"}\nGallery\n:::\n\n\nQuarto can produce a wide variety of output formats. Here are some examples:\n\n- [Articles & Reports](#articles-reports)\n- [Presentations](#presentations)\n- [Dashboards](#dashboards)\n- [Websites](#websites)\n- [Books](#books)\n- [Interactive Docs](#interactive-docs)\n:::\n\n\n::: {.cell .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.cell-output-display}\n\n```{=html}\n\n
\n
\n
\n
\n
\n \n
\n
Articles and reports with Python and R
\n
\n
\n
\n
\n \n
\n
Create data-driven presentations
\n
\n
\n
\n
\n \n
\n
Engage readers with interactivity
\n
\n
\n
\n
\n \n
\n
Publish collections of articles as a website
\n
\n
\n
\n
\n \n
\n
Create multi-format books
\n
\n
\n
\n
\nPrevoius \n \n
\nNext \n \n
/.png` |
+| axe DevTools console (PNG, manual, macOS) | see script header | `scripts/capture-axe-devtools.mjs` | `docs/output-formats/images/axe-console.png` |
+
+Only `npm run capture:previews` makes the mp4 and webm hover clips.
+
+Each `capture:*` gallery command takes `-- --name ` to match a subset.
+Each also takes `-- --limit ` to stage the first `n` matches.
+
+## Prerequisites at a glance
+
+All commands need Node.js 18+ and this tool's dependencies (`npm install`, then `npx playwright install chromium`).
+
+`capture:previews` also needs ffmpeg on `PATH` and a full Playwright Chromium; set `PREVIEW_CHROME` to point at it because the headless shell cannot record video.
+
+`capture:pdf-thumbs` also needs poppler (`pdfinfo`, `pdftoppm`) and ImageMagick (`magick`).
+
+Full setup steps are in `SETUP.md`.
+The gallery prerequisites are detailed in `scripts/PREVIEWS.md`.
+
+## Where to read next
+
+`SETUP.md` covers install steps and the still-screenshot workflow.
+`scripts/PREVIEWS.md` covers gallery video previews plus PDF and card thumbnails in detail.
+`docs/gallery/README.md` covers how to add the gallery entries these thumbnails serve.
+`CLAUDE.md` covers the AI-assisted workflow and the `manifest.json` field reference.
+`DECISIONS.md` covers why the tooling is built the way it is.
+`npm run help` prints the full command list.
diff --git a/_tools/screenshots/SETUP.md b/_tools/screenshots/SETUP.md
index de12eb4bcd..20c8aced2f 100644
--- a/_tools/screenshots/SETUP.md
+++ b/_tools/screenshots/SETUP.md
@@ -61,6 +61,12 @@ playwright-cli -s=screenshot screenshot --filename=docs/websites/images/about-jo
playwright-cli -s=screenshot close
```
+## Gallery featured video previews
+
+`scripts/capture-previews.mjs` (`npm run capture:previews`) records the animated preview
+clips for featured gallery cards. It is separate from the still-screenshot manifest and
+needs ffmpeg plus a full Playwright Chromium. See **`scripts/PREVIEWS.md`** for details.
+
## Optional: PNG Compression
```bash
diff --git a/_tools/screenshots/package-lock.json b/_tools/screenshots/package-lock.json
index ce19c156c7..92534f5647 100644
--- a/_tools/screenshots/package-lock.json
+++ b/_tools/screenshots/package-lock.json
@@ -6,6 +6,7 @@
"": {
"dependencies": {
"ajv": "^8.18.0",
+ "js-yaml": "^5.2.3",
"open": "^10.0.0",
"playwright": "^1.50.0",
"sharp": "^0.33.0"
@@ -398,6 +399,12 @@
"url": "https://github.com/sponsors/epoberezkin"
}
},
+ "node_modules/argparse": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+ "license": "Python-2.0"
+ },
"node_modules/bundle-name": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
@@ -593,6 +600,28 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/js-yaml": {
+ "version": "5.2.3",
+ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-5.2.3.tgz",
+ "integrity": "sha512-n+mUVyUX5bVv7G/G2zyIHOhdxfuU1dY2NOFzTQUWiMUbFss8b57NFlgCCaggU78wSw5KVS9cllzeLyzyR+n5nw==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/puzrin"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/nodeca"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "argparse": "^2.0.1"
+ },
+ "bin": {
+ "js-yaml": "bin/js-yaml.mjs"
+ }
+ },
"node_modules/json-schema-traverse": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
diff --git a/_tools/screenshots/package.json b/_tools/screenshots/package.json
index 770a0cbfdf..d14dbc1243 100644
--- a/_tools/screenshots/package.json
+++ b/_tools/screenshots/package.json
@@ -8,14 +8,21 @@
"serve": "node scripts/serve.js",
"compress": "node scripts/compress.js",
"capture": "node capture.js",
+ "capture:previews": "node scripts/capture-previews.mjs",
+ "capture:pdf-thumbs": "node scripts/capture-pdf-thumbs.mjs",
+ "capture:card-thumbs": "node scripts/capture-card-thumbs.mjs",
"open": "node scripts/open.js",
"validate": "node scripts/validate.js",
"update-demo": "bash scripts/update-demo.sh"
},
"dependencies": {
"ajv": "^8.18.0",
+ "js-yaml": "^5.2.3",
"open": "^10.0.0",
"playwright": "^1.50.0",
"sharp": "^0.33.0"
+ },
+ "allowScripts": {
+ "sharp@0.33.5": true
}
}
diff --git a/_tools/screenshots/scripts/PREVIEWS.md b/_tools/screenshots/scripts/PREVIEWS.md
new file mode 100644
index 0000000000..e801f7a0ad
--- /dev/null
+++ b/_tools/screenshots/scripts/PREVIEWS.md
@@ -0,0 +1,91 @@
+# Gallery previews and thumbnails
+
+## Featured video previews
+
+`capture-previews.mjs` generates the short, muted, looping clips that featured
+gallery cards play on hover or keyboard focus. The rendering,
+interaction, and reduced-motion handling live in the gallery, not here:
+`docs/gallery/assets/_featured.ejs.md` and
+`_extensions/quartoorg/scss/partials/_gallery.scss`.
+
+This script is separate from the still-screenshot manifest (`capture.js`): it
+records motion rather than a single frame, and is driven by gallery data rather
+than `manifest.json`.
+
+### How it works
+
+- Driven by `docs/gallery/data/featured.yml`: every card with both a `live` URL
+ and a `preview` base path gets a clip. `preview:` is the output path without
+ extension, e.g. `thumbnails/featured/software-documentation-positron`.
+- Optional `preview-url:` overrides the page that is recorded when the card's
+ `live` link is not the best source (e.g. a landing page vs a richer subpage). The
+ card's `live` link is unchanged; only the capture source differs.
+- Output: `.webm` (VP9) and `.mp4` (H.264) under
+ `docs/gallery/thumbnails/featured/` (animated previews are a featured-only
+ asset), beside the still PNG (`image:`), which stays the `` poster.
+- Capture mode comes from the card's `categories`:
+ - **reveal.js** (`revealjs`/`presentation`) → step through a few slides with
+ ArrowRight.
+ - **everything else** → scroll the page top to bottom.
+- The blank page-load lead-in is measured and trimmed from the encode, so clips
+ open on real content and loop without a white flash.
+- Each file is size-budgeted; the script warns above 500 KB.
+
+Cards without a `preview:` field keep the static PNG. Leave it off for pages that
+do not benefit: single-screen dashboards, PDF/blob `live` URLs, or sites that block
+headless capture.
+
+### Prerequisites
+
+- **ffmpeg** on `PATH` (`brew install ffmpeg`). Playwright records VP8 webm only;
+ ffmpeg re-encodes to a smaller VP9 webm and an H.264 mp4 for Safari/broad support.
+- **A full Playwright Chromium** — the headless shell cannot record video. The
+ script defaults to the installed `chromium-*/chrome-mac-arm64` build; set
+ `PREVIEW_CHROME` to override the path (`npx playwright install chromium`).
+- **This tool's dependencies installed** — `npm install` in `_tools/screenshots`
+ (the script uses the tool's `playwright` and `js-yaml`).
+
+### Usage
+
+From `_tools/screenshots`:
+
+```bash
+npm run capture:previews # every preview card
+npm run capture:previews -- --name whr # match by name or preview path
+npm run capture:previews -- --limit 2 # first N matches (staging)
+```
+
+After capturing, re-render the landing (`quarto render docs/gallery/index.qmd`) and
+check the clips in the browser in both themes.
+
+## PDF card thumbnails
+
+`capture-pdf-thumbs.mjs` builds the still `image` for cards whose `live` URL is a
+PDF, rendering the PDF's first two pages (or the first page alone when it has only
+one) into a side-by-side spread that overwrites the card's existing thumbnail.
+
+- Driven by `docs/gallery/data/*.yml`: every card with a `.pdf` `live` URL. GitHub
+ `blob` URLs are rewritten to `raw.githubusercontent.com` before download.
+- Output: overwrites the card's `image` PNG under `docs/gallery/thumbnails/`.
+- Prerequisites: **poppler** (`pdfinfo`, `pdftoppm`) and **ImageMagick** (`magick`)
+ on `PATH` (`brew install poppler imagemagick`).
+
+```bash
+npm run capture:pdf-thumbs # every PDF-linked card
+npm run capture:pdf-thumbs -- --name whr # match by name or image path
+npm run capture:pdf-thumbs -- --limit 1 # first N matches (staging)
+```
+
+## Card thumbnails for image-less entries
+
+`capture-card-thumbs.mjs` fills the `image` for cards that have none yet and whose
+`live` URL is a normal web page (PDF-linked cards go through `capture-pdf-thumbs.mjs`).
+It screenshots the page top to `docs/gallery/thumbnails//.png`,
+dismissing a cookie/consent banner first, then prints the `image:` and a placeholder
+`alt:` line to add to the card (it does not edit the YAML).
+
+```bash
+npm run capture:card-thumbs # every image-less web card
+npm run capture:card-thumbs -- --name rap # match by name
+npm run capture:card-thumbs -- --limit 1 # first N matches (staging)
+```
diff --git a/_tools/screenshots/scripts/capture-card-thumbs.mjs b/_tools/screenshots/scripts/capture-card-thumbs.mjs
new file mode 100644
index 0000000000..d2fa56f921
--- /dev/null
+++ b/_tools/screenshots/scripts/capture-card-thumbs.mjs
@@ -0,0 +1,143 @@
+// Capture still card thumbnails for gallery entries that have no `image` yet.
+//
+// Data-driven from docs/gallery/data/*.yml: every card that is missing an `image`
+// and whose `live` URL is a normal web page (not a PDF) gets a screenshot of that
+// page, written to docs/gallery/thumbnails//.png. The script prints
+// the `image:` (and a placeholder `alt:`) line to add to the card; it does not edit
+// the YAML itself.
+//
+// PDF-linked cards are handled by capture-pdf-thumbs.mjs instead.
+//
+// Usage (from _tools/screenshots):
+// npm run capture:card-thumbs # every image-less web card
+// npm run capture:card-thumbs -- --name rap # match by name
+// npm run capture:card-thumbs -- --limit 1 # first N matches (staging)
+//
+// Prerequisites: this tool's dependencies (`npm install`); Playwright's chromium.
+
+import { readFileSync, existsSync, mkdirSync } from "node:fs";
+import { join, dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { chromium } from "playwright";
+import { load as yamlLoad } from "js-yaml";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = resolve(HERE, "..", "..", "..");
+const GALLERY_DIR = join(REPO_ROOT, "docs", "gallery");
+const DATA_DIR = join(GALLERY_DIR, "data");
+
+const VIEWPORT = { width: 1200, height: 760 };
+
+// Reuse the installed full chrome-for-testing build (same as capture-previews);
+// override with PREVIEW_CHROME. Falls back to Playwright's default resolution.
+const CHROME =
+ process.env.PREVIEW_CHROME ||
+ join(process.env.HOME || "", "Library/Caches/ms-playwright/chromium-1234/chrome-mac-arm64", "Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing");
+
+function parseArgs(argv) {
+ const args = { name: null, limit: Infinity };
+ for (let i = 0; i < argv.length; i++) {
+ if (argv[i] === "--name") args.name = argv[++i];
+ else if (argv[i] === "--limit") args.limit = Number(argv[++i]);
+ }
+ return args;
+}
+
+function isPdf(url) {
+ return typeof url === "string" && /\.pdf(\?|#|$)/i.test(url);
+}
+
+function slugify(s) {
+ return String(s)
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, "-")
+ .replace(/^-+|-+$/g, "");
+}
+
+function missingCards() {
+ const out = [];
+ const files = ["dashboards-monitoring.yml", "reports-analytics.yml", "research-scholarship.yml", "teaching-learning.yml", "software-documentation.yml", "personal-community.yml"];
+ for (const file of files) {
+ const path = join(DATA_DIR, file);
+ if (!existsSync(path)) continue;
+ const category = file.replace(/\.yml$/, "");
+ const doc = yamlLoad(readFileSync(path, "utf8"));
+ for (const card of doc || []) {
+ if (!card || card.image || !card.live || isPdf(card.live)) continue;
+ out.push({ name: card.name || card.title, url: card.live, category, image: `thumbnails/${category}/${slugify(card.name || card.title)}.png` });
+ }
+ }
+ return out;
+}
+
+// Dismiss a cookie/consent banner if one is covering the page, so it does not
+// end up in the thumbnail. Clicks the first visible consent button (buttons only,
+// never links, to avoid navigating away).
+async function dismissConsent(page) {
+ const clicked = await page
+ .evaluate(() => {
+ const re = /^(i agree|agree|accept all|accept|got it|allow all|allow|i decline|decline|reject all|reject)\b/i;
+ const els = [...document.querySelectorAll('button, [role="button"], input[type="button"], input[type="submit"]')];
+ const hit = els.find((e) => e.offsetParent !== null && re.test((e.textContent || e.value || "").trim()));
+ if (hit) {
+ hit.click();
+ return true;
+ }
+ return false;
+ })
+ .catch(() => false);
+ if (clicked) await page.waitForTimeout(600);
+}
+
+async function main() {
+ const args = parseArgs(process.argv.slice(2));
+ let cards = missingCards();
+ if (args.name) {
+ const q = args.name.toLowerCase();
+ cards = cards.filter((c) => (c.name || "").toLowerCase().includes(q));
+ }
+ cards = cards.slice(0, args.limit);
+ if (cards.length === 0) {
+ console.log("No image-less web cards found.");
+ return;
+ }
+ console.log(`Capturing ${cards.length} card thumbnail(s).`);
+
+ const browser = await chromium.launch(existsSync(CHROME) ? { executablePath: CHROME } : {});
+ const toAdd = [];
+ for (const card of cards) {
+ process.stdout.write(`- ${card.name} … `);
+ const ctx = await browser.newContext({ viewport: VIEWPORT, deviceScaleFactor: 2 });
+ const page = await ctx.newPage();
+ try {
+ await page.goto(card.url, { waitUntil: "domcontentloaded", timeout: 60000 });
+ await page.waitForLoadState("networkidle", { timeout: 8000 }).catch(() => {});
+ await page.waitForTimeout(1200);
+ await dismissConsent(page);
+ const out = join(GALLERY_DIR, card.image);
+ mkdirSync(dirname(out), { recursive: true });
+ await page.screenshot({ path: out }); // viewport only (top of the page)
+ console.log(card.image);
+ toAdd.push(card);
+ } catch (err) {
+ console.log(`FAILED: ${err.message}`);
+ } finally {
+ await ctx.close();
+ }
+ }
+ await browser.close();
+
+ if (toAdd.length) {
+ console.log("\nAdd to each card's YAML (fill in a real alt):");
+ for (const c of toAdd) {
+ console.log(` # ${c.name} (${c.category})`);
+ console.log(` image: ${c.image}`);
+ console.log(` alt: TODO describe the ${c.name} page.`);
+ }
+ }
+}
+
+main().catch((e) => {
+ console.error(e);
+ process.exit(1);
+});
diff --git a/_tools/screenshots/scripts/capture-pdf-thumbs.mjs b/_tools/screenshots/scripts/capture-pdf-thumbs.mjs
new file mode 100644
index 0000000000..8e7675cd9e
--- /dev/null
+++ b/_tools/screenshots/scripts/capture-pdf-thumbs.mjs
@@ -0,0 +1,170 @@
+// Build gallery card thumbnails for PDF-linked examples from the PDF itself.
+//
+// Data-driven from docs/gallery/data/*.yml: every card whose `live` URL is a PDF
+// gets its `image` regenerated as a spread of the first two pages (or the first
+// page alone when the PDF has a single page). The output overwrites the card's
+// existing `image` PNG under docs/gallery/thumbnails/, so nothing else changes.
+//
+// Pipeline per card: resolve the raw PDF URL (GitHub blob -> raw.githubusercontent),
+// download it, read the page count with pdfinfo, render the first one or two pages
+// with pdftoppm, then composite them side by side with ImageMagick.
+//
+// Usage (from _tools/screenshots):
+// npm run capture:pdf-thumbs # every PDF-linked card
+// npm run capture:pdf-thumbs -- --name whr # match by name or image path
+// npm run capture:pdf-thumbs -- --limit 1 # first N matches (staging)
+//
+// Prerequisites: poppler (`pdfinfo`, `pdftoppm`) and ImageMagick (`magick`) on PATH
+// (`brew install poppler imagemagick`). See scripts/PREVIEWS.md.
+
+import { readFileSync, existsSync, mkdtempSync, rmSync, statSync, writeFileSync, readdirSync } from "node:fs";
+import { join, dirname, resolve } from "node:path";
+import { tmpdir } from "node:os";
+import { execFileSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { load as yamlLoad } from "js-yaml";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = resolve(HERE, "..", "..", "..");
+const GALLERY_DIR = join(REPO_ROOT, "docs", "gallery");
+const DATA_DIR = join(GALLERY_DIR, "data");
+
+const RENDER_DPI = 150; // pdftoppm render resolution before downscaling
+const OUT_WIDTH = 1000; // final composite width (keeps PNG small)
+const GUTTER = 12; // px gap between the two page images
+const SIZE_BUDGET = 500 * 1024;
+
+function parseArgs(argv) {
+ const args = { name: null, limit: Infinity };
+ for (let i = 0; i < argv.length; i++) {
+ if (argv[i] === "--name") args.name = argv[++i];
+ else if (argv[i] === "--limit") args.limit = Number(argv[++i]);
+ }
+ return args;
+}
+
+function isPdf(url) {
+ return typeof url === "string" && /\.pdf(\?|#|$)/i.test(url);
+}
+
+// GitHub "blob" viewer URLs are HTML; rewrite to the raw file host.
+function rawUrl(url) {
+ const m = url.match(/^https?:\/\/github\.com\/([^/]+)\/([^/]+)\/blob\/(.+)$/i);
+ if (m) return `https://raw.githubusercontent.com/${m[1]}/${m[2]}/${m[3]}`;
+ return url;
+}
+
+function pdfCards() {
+ const out = new Map(); // dedupe by output image path (shared across featured + list)
+ for (const file of ["featured.yml", "reports-analytics.yml", "dashboards-monitoring.yml", "research-scholarship.yml", "teaching-learning.yml", "software-documentation.yml", "personal-community.yml"]) {
+ const path = join(DATA_DIR, file);
+ if (!existsSync(path)) continue;
+ const doc = yamlLoad(readFileSync(path, "utf8"));
+ const cards = [];
+ for (const node of doc || []) {
+ if (node && Array.isArray(node.cards)) cards.push(...node.cards);
+ else cards.push(node);
+ }
+ for (const card of cards) {
+ if (!card || !isPdf(card.live) || !card.image) continue;
+ if (!out.has(card.image)) out.set(card.image, { name: card.name || card.title, url: card.live, image: card.image });
+ }
+ }
+ return [...out.values()];
+}
+
+async function download(url, dest) {
+ const res = await fetch(url, { redirect: "follow" });
+ if (!res.ok) throw new Error(`HTTP ${res.status} for ${url}`);
+ const buf = Buffer.from(await res.arrayBuffer());
+ writeFileSync(dest, buf);
+}
+
+function pageCount(pdf) {
+ const out = execFileSync("pdfinfo", [pdf], { encoding: "utf8" });
+ const m = out.match(/^Pages:\s*(\d+)/m);
+ return m ? Number(m[1]) : 1;
+}
+
+function renderPages(pdf, count, dir) {
+ // pdftoppm zero-pads the page suffix to the document's page-count width
+ // (page-1.png for short PDFs, page-01.png for longer ones), so glob whatever
+ // it actually wrote and take the first two in order.
+ const prefix = join(dir, "page");
+ execFileSync("pdftoppm", ["-png", "-r", String(RENDER_DPI), "-f", "1", "-l", String(Math.min(2, count)), pdf, prefix]);
+ return readdirSync(dir)
+ .filter((f) => /^page-\d+\.png$/.test(f))
+ .sort()
+ .slice(0, 2)
+ .map((f) => join(dir, f));
+}
+
+function composite(pages, out) {
+ if (pages.length === 1) {
+ execFileSync("magick", [pages[0], "-resize", `${OUT_WIDTH}x`, "-strip", out]);
+ } else {
+ // Side-by-side spread with a thin white gutter, then downscale the whole thing.
+ execFileSync("magick", [pages[0], pages[1], "-background", "white", "+smush", String(GUTTER), "-resize", `${OUT_WIDTH}x`, "-strip", out]);
+ }
+}
+
+function kb(bytes) {
+ return `${(bytes / 1024).toFixed(0)} KB`;
+}
+
+async function main() {
+ const args = parseArgs(process.argv.slice(2));
+ for (const bin of ["pdfinfo", "pdftoppm", "magick"]) {
+ try {
+ execFileSync(bin, ["-h"], { stdio: "ignore" }); // usage exits non-zero; only ENOENT means missing
+ } catch (e) {
+ if (e && e.code === "ENOENT") {
+ console.error(`Missing '${bin}'. Install poppler + imagemagick. See scripts/PREVIEWS.md.`);
+ process.exit(1);
+ }
+ }
+ }
+
+ let cards = pdfCards();
+ if (args.name) {
+ const q = args.name.toLowerCase();
+ cards = cards.filter((c) => (c.name || "").toLowerCase().includes(q) || c.image.toLowerCase().includes(q));
+ }
+ cards = cards.slice(0, args.limit);
+ if (cards.length === 0) {
+ console.log("No matching PDF-linked cards.");
+ return;
+ }
+ console.log(`Building ${cards.length} PDF thumbnail(s).`);
+
+ const report = [];
+ for (const card of cards) {
+ process.stdout.write(`- ${card.name} … `);
+ const dir = mkdtempSync(join(tmpdir(), "gal-pdf-"));
+ try {
+ const pdf = join(dir, "in.pdf");
+ await download(rawUrl(card.url), pdf);
+ const count = pageCount(pdf);
+ const pages = renderPages(pdf, count, dir);
+ const out = join(GALLERY_DIR, card.image);
+ composite(pages, out);
+ const size = statSync(out).size;
+ report.push({ name: card.name, size });
+ const warn = size > SIZE_BUDGET ? " ⚠ over budget" : "";
+ console.log(`${pages.length} page(s), ${kb(size)}${warn}`);
+ } catch (err) {
+ console.log(`FAILED: ${err.message}`);
+ report.push({ name: card.name, error: err.message });
+ } finally {
+ rmSync(dir, { recursive: true, force: true });
+ }
+ }
+ const ok = report.filter((r) => !r.error);
+ console.log(`\nDone: ${ok.length}/${report.length} built.`);
+ if (report.some((r) => r.error)) process.exitCode = 1;
+}
+
+main().catch((e) => {
+ console.error(e);
+ process.exit(1);
+});
diff --git a/_tools/screenshots/scripts/capture-previews.mjs b/_tools/screenshots/scripts/capture-previews.mjs
new file mode 100644
index 0000000000..f977592759
--- /dev/null
+++ b/_tools/screenshots/scripts/capture-previews.mjs
@@ -0,0 +1,267 @@
+// Capture short, muted, looping preview clips for the gallery featured cards.
+//
+// Data-driven from docs/gallery/data/featured.yml: every featured card with both
+// a `live` URL and a `preview` base path gets a short recording of its live page,
+// encoded to .webm (VP9) and .mp4 (H.264) under docs/gallery/.
+// The `preview` path points at thumbnails/featured/ (animated previews are a
+// featured-only asset); the still PNG (`image`) stays the poster, untouched.
+//
+// Capture mode is chosen from the card's `categories`: reveal.js decks step through
+// a few slides; everything else scrolls the page top to bottom. The blank page-load
+// lead-in is measured and trimmed from the encode so clips open on real content (no
+// white flash, including on loop).
+//
+// Usage (from _tools/screenshots):
+// npm run capture:previews # every preview card
+// npm run capture:previews -- --name whr # match by name or preview path
+// npm run capture:previews -- --limit 2 # first N matches (staging)
+//
+// Prerequisites and details: see scripts/PREVIEWS.md.
+
+import { readFileSync, existsSync, mkdtempSync, mkdirSync, readdirSync, rmSync, statSync } from "node:fs";
+import { join, dirname, resolve } from "node:path";
+import { tmpdir } from "node:os";
+import { execFileSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { chromium } from "playwright";
+import { load as yamlLoad } from "js-yaml";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const TOOLS_DIR = resolve(HERE, "..");
+const REPO_ROOT = resolve(TOOLS_DIR, "..", "..");
+const GALLERY_DIR = join(REPO_ROOT, "docs", "gallery");
+const FEATURED_YML = join(GALLERY_DIR, "data", "featured.yml");
+
+// A full browser build is required for recordVideo; the headless shell cannot
+// screencast. Point at the installed chrome-for-testing (override per platform).
+const CHROME =
+ process.env.PREVIEW_CHROME ||
+ join(
+ process.env.HOME,
+ "Library/Caches/ms-playwright/chromium-1234/chrome-mac-arm64",
+ "Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing",
+ );
+
+const RECORD = { width: 1280, height: 720 };
+const SCROLL_MS = 9000;
+const SLIDE_STEPS = 5; // reveal.js: number of ArrowRight presses
+const SLIDE_HOLD_MS = 1500; // dwell on each slide
+const SIZE_BUDGET = 500 * 1024; // warn above 500 KB per file
+
+function parseArgs(argv) {
+ const args = { name: null, limit: Infinity };
+ for (let i = 0; i < argv.length; i++) {
+ if (argv[i] === "--name") args.name = argv[++i];
+ else if (argv[i] === "--limit") args.limit = Number(argv[++i]);
+ }
+ return args;
+}
+
+function modeFor(card) {
+ const cats = (card.categories || []).map((c) => String(c).toLowerCase());
+ if (cats.includes("revealjs") || cats.includes("presentation")) return "slides";
+ return "scroll";
+}
+
+function featuredCards() {
+ const doc = yamlLoad(readFileSync(FEATURED_YML, "utf8"));
+ const cards = [];
+ for (const cat of doc || []) {
+ for (const card of cat.cards || []) {
+ if (card.live && card.preview) {
+ cards.push({
+ name: card.name || card.title,
+ // `preview-url` overrides the capture source when the card's `live`
+ // link is not the best page to record (e.g. a landing vs a rich subpage).
+ captureUrl: card["preview-url"] || card.live,
+ preview: card.preview,
+ mode: modeFor(card),
+ });
+ }
+ }
+ }
+ return cards;
+}
+
+function ffmpeg(args) {
+ execFileSync("ffmpeg", ["-y", "-hide_banner", "-loglevel", "error", ...args], { stdio: "inherit" });
+}
+
+function kb(bytes) {
+ return `${(bytes / 1024).toFixed(0)} KB`;
+}
+
+function scrollMax(page) {
+ // The real scroll distance, read from the scrolling root. Works whether the
+ // document itself scrolls or a smooth-scroll library drives a taller body.
+ return page.evaluate(() => {
+ const root = document.scrollingElement || document.documentElement;
+ return Math.max(0, root.scrollHeight - window.innerHeight);
+ });
+}
+
+async function scrollThrough(page) {
+ // Drive the scroll with trusted wheel events rather than `window.scrollTo`:
+ // some sites hijack scrolling with a smooth-scroll library (Lenis/Locomotive)
+ // that ignores programmatic scroll and only reacts to real wheel input.
+ const max = await scrollMax(page);
+ if (max === 0) {
+ await page.waitForTimeout(1500);
+ return;
+ }
+ await page.mouse.move(RECORD.width / 2, RECORD.height / 2);
+ const FRAMES = 60;
+ const dt = SCROLL_MS / FRAMES;
+ let prev = 0;
+ for (let i = 1; i <= FRAMES; i++) {
+ const t = i / FRAMES;
+ const eased = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+ const target = max * eased;
+ await page.mouse.wheel(0, target - prev);
+ prev = target;
+ await page.waitForTimeout(dt);
+ }
+ await page.mouse.wheel(0, 600); // nudge past any smooth-scroll easing shortfall
+ await page.waitForTimeout(400);
+}
+
+async function warmUp(page) {
+ // Wheel through once to trigger lazy-loaded images, wait for them to decode,
+ // then hard-reset to the top. Runs before the recorded scroll (and before the
+ // lead offset) so images are painted and we open at the top when it begins.
+ // Uses trusted wheel events for the same reason scrollThrough does.
+ const max = await scrollMax(page);
+ if (max === 0) {
+ await page.waitForTimeout(500);
+ return;
+ }
+ await page.mouse.move(RECORD.width / 2, RECORD.height / 2);
+ const step = Math.round(RECORD.height * 0.8) || 1;
+ const steps = Math.min(40, Math.ceil(max / step));
+ for (let i = 0; i < steps; i++) {
+ await page.mouse.wheel(0, step);
+ await page.waitForTimeout(150);
+ }
+ await page.waitForTimeout(400);
+ await page.evaluate(async () => {
+ const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+ const untilLoaded = Promise.all(
+ Array.from(document.images).map((img) =>
+ img.complete
+ ? Promise.resolve()
+ : new Promise((r) => {
+ img.addEventListener("load", r, { once: true });
+ img.addEventListener("error", r, { once: true });
+ }),
+ ),
+ );
+ await Promise.race([untilLoaded, sleep(4000)]); // don't hang on a stuck image
+ });
+ // Overshoot upward so a smooth-scroll library settles hard at the very top.
+ await page.mouse.wheel(0, -(max + steps * step + 2000));
+ await page.waitForTimeout(700);
+}
+
+async function advanceSlides(page) {
+ // Reveal.js: step through a few slides with ArrowRight (slide-level, not fragments).
+ for (let i = 0; i < SLIDE_STEPS; i++) {
+ await page.waitForTimeout(SLIDE_HOLD_MS);
+ await page.keyboard.press("ArrowRight");
+ }
+ await page.waitForTimeout(SLIDE_HOLD_MS);
+}
+
+async function record(browser, url, mode) {
+ const dir = mkdtempSync(join(tmpdir(), "gal-preview-"));
+ const context = await browser.newContext({
+ viewport: { width: RECORD.width, height: RECORD.height },
+ recordVideo: { dir, size: RECORD },
+ });
+ const recordStart = Date.now();
+ const page = await context.newPage();
+ await page.goto(url, { waitUntil: "domcontentloaded", timeout: 60000 });
+ // Best-effort settle; heavy sites may never reach full load, so don't block on it.
+ await page.waitForLoadState("networkidle", { timeout: 8000 }).catch(() => {});
+ await page.waitForTimeout(800); // let fonts/images paint on the first frame
+
+ // Pre-load lazy images with a warm-up scroll (scroll cards only), then reset to top.
+ if (mode !== "slides") await warmUp(page).catch(() => {});
+
+ // Everything before this point is the blank/white page load and warm-up; record the
+ // offset so the encode trims it and opens on real content (no white flash, incl. on loop).
+ const lead = Math.max(0, (Date.now() - recordStart) / 1000 - 0.2);
+
+ if (mode === "slides") await advanceSlides(page);
+ else await scrollThrough(page);
+
+ await page.close();
+ await context.close(); // flushes the .webm
+
+ const raw = readdirSync(dir)
+ .filter((f) => f.endsWith(".webm"))
+ .map((f) => join(dir, f))[0];
+ return { raw, dir, lead };
+}
+
+async function main() {
+ const args = parseArgs(process.argv.slice(2));
+ if (!existsSync(CHROME)) {
+ console.error(`Full Chromium not found at:\n ${CHROME}\nInstall it or set PREVIEW_CHROME. See scripts/PREVIEWS.md.`);
+ process.exit(1);
+ }
+
+ let cards = featuredCards();
+ if (args.name) {
+ const q = args.name.toLowerCase();
+ cards = cards.filter((c) => c.name.toLowerCase().includes(q) || c.preview.toLowerCase().includes(q));
+ }
+ cards = cards.slice(0, args.limit);
+
+ if (cards.length === 0) {
+ console.log("No matching featured cards with both `live` and `preview`.");
+ return;
+ }
+ console.log(`Capturing ${cards.length} preview(s).`);
+
+ const browser = await chromium.launch({ executablePath: CHROME });
+ const report = [];
+ for (const card of cards) {
+ const webmOut = join(GALLERY_DIR, `${card.preview}.webm`);
+ const mp4Out = join(GALLERY_DIR, `${card.preview}.mp4`);
+ mkdirSync(dirname(webmOut), { recursive: true }); // e.g. thumbnails/featured/
+
+ process.stdout.write(`- ${card.name} … `);
+ let tmp;
+ try {
+ const rec = await record(browser, card.captureUrl, card.mode);
+ tmp = rec.dir;
+ if (!rec.raw) throw new Error("no video produced");
+ // Re-encode from the raw capture, trimming the blank page-load lead-in so the
+ // clip opens on real content (fast `-ss` before `-i`).
+ const ss = ["-ss", rec.lead.toFixed(2)];
+ ffmpeg([...ss, "-i", rec.raw, "-an", "-vf", "scale=640:-2", "-c:v", "libvpx-vp9", "-crf", "40", "-b:v", "0", webmOut]);
+ ffmpeg([...ss, "-i", rec.raw, "-an", "-vf", "scale=640:-2", "-c:v", "libx264", "-pix_fmt", "yuv420p", "-crf", "30", "-movflags", "+faststart", mp4Out]);
+ const wb = statSync(webmOut).size;
+ const mb = statSync(mp4Out).size;
+ report.push({ name: card.name, webm: wb, mp4: mb });
+ const warn = wb > SIZE_BUDGET || mb > SIZE_BUDGET ? " ⚠ over budget" : "";
+ console.log(`webm ${kb(wb)}, mp4 ${kb(mb)}${warn}`);
+ } catch (err) {
+ console.log(`FAILED: ${err.message}`);
+ report.push({ name: card.name, error: err.message });
+ } finally {
+ if (tmp) rmSync(tmp, { recursive: true, force: true });
+ }
+ }
+ await browser.close();
+
+ const ok = report.filter((r) => !r.error);
+ const total = ok.reduce((s, r) => s + r.webm + r.mp4, 0);
+ console.log(`\nDone: ${ok.length}/${report.length} captured, total ${kb(total)} added.`);
+ if (report.some((r) => r.error)) process.exitCode = 1;
+}
+
+main().catch((e) => {
+ console.error(e);
+ process.exit(1);
+});
diff --git a/_tools/screenshots/scripts/help.js b/_tools/screenshots/scripts/help.js
index bce3554352..ab18c1a403 100644
--- a/_tools/screenshots/scripts/help.js
+++ b/_tools/screenshots/scripts/help.js
@@ -14,6 +14,10 @@ Commands (run from _tools/screenshots/):
npm run capture -- --no-compress Skip oxipng compression
npm run capture -- --verify Open each image for visual review
+ npm run capture:previews Gallery hover previews (webm + mp4)
+ npm run capture:pdf-thumbs Gallery thumbnails for PDF-linked cards
+ npm run capture:card-thumbs Gallery thumbnails for image-less cards
+
npm run list List manifest entries (formatted)
npm run render -- Render a Quarto example project
npm run serve -- Serve a rendered site locally
@@ -25,5 +29,6 @@ Commands (run from _tools/screenshots/):
npm run help Show this help
Source of truth: manifest.json
-Docs: CLAUDE.md (workflow), SETUP.md (setup guide)
+Docs: README.md (overview), SETUP.md (setup guide), CLAUDE.md (workflow),
+ scripts/PREVIEWS.md (gallery video/image capture)
`.trim());
diff --git a/assets/ejs/links.ejs b/assets/ejs/links.ejs
index 74a702ed80..8d1b0c7b5f 100644
--- a/assets/ejs/links.ejs
+++ b/assets/ejs/links.ejs
@@ -5,6 +5,9 @@
::: {.card}
::: {.card-body}
+<% if (item.icon) { %>
+[[]{.bi .bi-<%- item.icon %>}]{.card-glyph aria-hidden="true"}
+<% } %>
::: {.card-title}
## <%- item.title %>
diff --git a/docs/advanced/_metadata.yml b/docs/advanced/_metadata.yml
new file mode 100644
index 0000000000..56a192e6e0
--- /dev/null
+++ b/docs/advanced/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-advanced
diff --git a/docs/authoring/_metadata.yml b/docs/authoring/_metadata.yml
new file mode 100644
index 0000000000..60b7583924
--- /dev/null
+++ b/docs/authoring/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-authoring
diff --git a/docs/blog/_metadata.yml b/docs/blog/_metadata.yml
new file mode 100644
index 0000000000..247cf98076
--- /dev/null
+++ b/docs/blog/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-blog
diff --git a/docs/books/_metadata.yml b/docs/books/_metadata.yml
new file mode 100644
index 0000000000..cb4f657759
--- /dev/null
+++ b/docs/books/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-books
diff --git a/docs/cli/_metadata.yml b/docs/cli/_metadata.yml
index 0ede0e08a6..12f8b72451 100644
--- a/docs/cli/_metadata.yml
+++ b/docs/cli/_metadata.yml
@@ -1 +1,2 @@
-tbl-colwidths: [35,20,45]
\ No newline at end of file
+body-classes: sec-reference
+tbl-colwidths: [35,20,45]
diff --git a/docs/computations/_metadata.yml b/docs/computations/_metadata.yml
new file mode 100644
index 0000000000..5a2cbca73e
--- /dev/null
+++ b/docs/computations/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-computations
diff --git a/docs/dashboards/_metadata.yml b/docs/dashboards/_metadata.yml
index 797b0389c4..91df8d068b 100644
--- a/docs/dashboards/_metadata.yml
+++ b/docs/dashboards/_metadata.yml
@@ -1,3 +1,4 @@
+body-classes: sec-guide topic-dashboards
sidebar: dashboards
code-overflow: scroll
css: styles.css
diff --git a/docs/download/_metadata.yml b/docs/download/_metadata.yml
new file mode 100644
index 0000000000..10626b61d0
--- /dev/null
+++ b/docs/download/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-getstarted
diff --git a/docs/extensions/_metadata.yml b/docs/extensions/_metadata.yml
index 73a491ef92..35017537ac 100644
--- a/docs/extensions/_metadata.yml
+++ b/docs/extensions/_metadata.yml
@@ -1,3 +1,4 @@
+body-classes: sec-extensions
page-choosers:
categories:
label: Extension categories
diff --git a/docs/extensions/nbfilter.qmd b/docs/extensions/nbfilter.qmd
index af309c5e5c..e169fc08a4 100644
--- a/docs/extensions/nbfilter.qmd
+++ b/docs/extensions/nbfilter.qmd
@@ -1,5 +1,6 @@
---
title: "Notebook Filters"
+body-classes: sec-guide topic-advanced
---
## Overview
diff --git a/docs/gallery/README.md b/docs/gallery/README.md
new file mode 100644
index 0000000000..db142b321a
--- /dev/null
+++ b/docs/gallery/README.md
@@ -0,0 +1,65 @@
+# Gallery data
+
+How to add examples to the Quarto gallery.
+
+The gallery has one landing page (`index.qmd`) and six category spoke pages (`reports-analytics.qmd`, `dashboards-monitoring.qmd`, `research-scholarship.qmd`, `teaching-learning.qmd`, `software-documentation.qmd`, `personal-community.qmd`).
+Every card is driven by YAML under `data/` and rendered through the EJS templates in `assets/`.
+
+## Data model
+
+`data/.yml` is the full list for one category, a flat sequence of cards.
+The spoke page renders it through `assets/_card.ejs.md` with filtering, sorting, and category facets.
+The first three cards in each list are the category's landing featured set.
+
+`data/featured.yml` is the curated landing file, grouped by category.
+Each category is an object with meta (`category`, `slug`, `anchor`, `page`, `icon`, `gap`, `tagline`, `capabilities`) and a `cards:` list.
+`assets/_featured.ejs.md` renders up to three cards per category on the landing.
+
+Both files use the same card shape.
+
+| Field | Required | Purpose |
+| ------------- | -------- | ------------------------------------------------------------------------------------------------ |
+| `name` | yes | Internal identifier, also the fallback title. |
+| `slug` | yes | Category slug (`reports`, `dashboards`, `research`, `teaching`, `docs`, `personal`). |
+| `title` | yes | Headline shown on the card. |
+| `author` | no | Credit line. |
+| `live` | yes | URL to the live example or PDF. |
+| `code` | no | URL to the source. |
+| `categories` | yes | Facet chips: format, project type, language; also the clickable filters. |
+| `features` | no | Display-only capability chips, for example `Listings` or `brand.yml`. |
+| `image` | yes | Thumbnail path, relative to `docs/gallery/`, for example `thumbnails/reports-analytics/whr.png`. |
+| `alt` | no | Alt text for the thumbnail. |
+| `description` | yes | One-line summary. |
+| `preview` | no | Featured only: hover-video base path with no extension. |
+| `preview-url` | no | Featured only: page to record when `live` is not the best source. |
+
+Thumbnails live under `thumbnails//.png`.
+Featured hover clips live under `thumbnails/featured/-.{webm,mp4}`.
+
+## Add a normal entry
+
+Append a card to the matching `data/.yml` and set `slug` to that category's slug.
+
+Add a thumbnail at `thumbnails//.png`, or generate one from `_tools/screenshots`.
+Use `npm run capture:card-thumbs -- --name ` for a normal web page.
+Use `npm run capture:pdf-thumbs -- --name ` when `live` points at a PDF.
+
+The card appears on the spoke page automatically.
+If it is one of the first three in the list it also becomes that category's landing featured card.
+
+## Add a featured entry
+
+Add or curate a card under the category's `cards:` in `data/featured.yml`; only the first three render on the landing.
+
+For a hover video, set `preview:` to `thumbnails/featured/-`, add `preview-url:` if the `live` link is not the richest page to record, then run `npm run capture:previews -- --name ` from `_tools/screenshots`.
+Leave `preview:` off to keep the still `image` as the poster with no motion.
+
+The `capabilities` list on each category is the single source for the "Learn the Quarto features used" links, shown on the landing and pulled onto the spoke page.
+
+Featured cards currently mirror the first entries of the matching `data/.yml`, so keep the two in sync when curating.
+
+## Related
+
+`../../_tools/screenshots/README.md` is the capture tooling for thumbnails and previews.
+`assets/` holds the EJS templates that render these YAML files.
+`legacy/` holds the previous gallery implementation, kept for reference.
diff --git a/docs/gallery/_metadata.yml b/docs/gallery/_metadata.yml
new file mode 100644
index 0000000000..b90719654a
--- /dev/null
+++ b/docs/gallery/_metadata.yml
@@ -0,0 +1,14 @@
+# Applies to every page under docs/gallery/.
+#
+# Live-link hover preview:
+# DISABLE — delete (or rename) this file; the include stops site-wide.
+# REMOVE — delete this file and assets/_preview.html. Nothing else references them.
+body-classes: gallery sec-gallery
+toc: false
+include-after-body: assets/_preview.html
+# Widen the card grid and shrink the listing category facet (default
+# margin-width is 300px). Replaces per-page `page-layout: full`: grid
+# body-width governs the content band on its own.
+grid:
+ body-width: 1200px
+ margin-width: 180px
diff --git a/docs/gallery/articles/advanced-layout-pdf.png b/docs/gallery/articles/advanced-layout-pdf.png
deleted file mode 100644
index ad4acc1e4a..0000000000
Binary files a/docs/gallery/articles/advanced-layout-pdf.png and /dev/null differ
diff --git a/docs/gallery/articles/articles-pdf.png b/docs/gallery/articles/articles-pdf.png
deleted file mode 100644
index e3e0ec84b8..0000000000
Binary files a/docs/gallery/articles/articles-pdf.png and /dev/null differ
diff --git a/docs/gallery/assets/_browse-chips.ejs.md b/docs/gallery/assets/_browse-chips.ejs.md
new file mode 100644
index 0000000000..3336bdaaae
--- /dev/null
+++ b/docs/gallery/assets/_browse-chips.ejs.md
@@ -0,0 +1,19 @@
+```{=html}
+<%
+ // Collect every distinct `categories` value across the browse listings and
+ // render one chip per category, so the set stays in sync with the data and
+ // nothing is hand-maintained. Each chip deep-links to the browse listing
+ // pre-filtered on that category.
+ const seen = [];
+ for (const item of items) {
+ for (const c of (item.categories || [])) {
+ const v = String(c).trim();
+ if (v && seen.indexOf(v) === -1) seen.push(v);
+ }
+ }
+ seen.sort();
+%>
+
+<% for (const c of seen) { %>
<%= c %> <% } %>
+
Learn the Quarto features used:
+ <% for (const c of cat.capabilities) { %><%= c.text %> <% } %>
+
+<% } %>
+<% } %>
+```
diff --git a/docs/gallery/assets/_card.ejs.md b/docs/gallery/assets/_card.ejs.md
new file mode 100644
index 0000000000..f1054fd92e
--- /dev/null
+++ b/docs/gallery/assets/_card.ejs.md
@@ -0,0 +1,36 @@
+```{=html}
+
+```
diff --git a/docs/gallery/assets/_chooser.ejs.md b/docs/gallery/assets/_chooser.ejs.md
new file mode 100644
index 0000000000..2a6a02debf
--- /dev/null
+++ b/docs/gallery/assets/_chooser.ejs.md
@@ -0,0 +1,15 @@
+```{=html}
+
+```
diff --git a/docs/gallery/assets/_featured.ejs.md b/docs/gallery/assets/_featured.ejs.md
new file mode 100644
index 0000000000..f709f67161
--- /dev/null
+++ b/docs/gallery/assets/_featured.ejs.md
@@ -0,0 +1,111 @@
+<% /* The chooser and the section rail render from the same featured.yml items, so pull them in as partials before the featured sections below. */ %>
+<% partial("_chooser.ejs.md", { items }); %>
+
+<% partial("_jumpnav.ejs.md", { items }); %>
+
+```{=html}
+
+
Need inspiration?
+
Browse a few examples we curated below.
+
+
+
+ <% if (cat.capabilities && cat.capabilities.length) { %>
+ Learn the Quarto features used:
+ <% for (const c of cat.capabilities) { %><%= c.text %> <% } %>
+
+ <% } %>
+
+
+
+<% } %>
+
+```
diff --git a/docs/gallery/assets/_jumpnav.ejs.md b/docs/gallery/assets/_jumpnav.ejs.md
new file mode 100644
index 0000000000..dcb0cc0af4
--- /dev/null
+++ b/docs/gallery/assets/_jumpnav.ejs.md
@@ -0,0 +1,109 @@
+```{=html}
+
+
+
+
+```
diff --git a/docs/gallery/assets/_preview.html b/docs/gallery/assets/_preview.html
new file mode 100644
index 0000000000..29c42ea9d3
--- /dev/null
+++ b/docs/gallery/assets/_preview.html
@@ -0,0 +1,188 @@
+
+
+
diff --git a/docs/gallery/browse.qmd b/docs/gallery/browse.qmd
new file mode 100644
index 0000000000..f6cf18fee5
--- /dev/null
+++ b/docs/gallery/browse.qmd
@@ -0,0 +1,26 @@
+---
+pagetitle: "Browse by format — Gallery"
+title: "Browse by project, format, and language"
+subtitle: "Every Quarto gallery example in one filterable listing."
+description: Every Quarto gallery example, filterable by format, project type, and language.
+listing:
+ - id: browse
+ template: assets/_card.ejs.md
+ contents:
+ - data/reports-analytics.yml
+ - data/dashboards-monitoring.yml
+ - data/research-scholarship.yml
+ - data/teaching-learning.yml
+ - data/software-documentation.yml
+ - data/personal-community.yml
+ filter-ui: [title, author, description]
+ sort-ui: [name, title, author]
+ field-display-names:
+ name: Name
+ categories: true
+---
+
+Every example in the gallery, across all categories. Filter by project type (website, book, dashboard, presentation, …), by output format (`pdf`, `typst`, `html`, `revealjs`, `docx`), or by language (R, Python, Julia, …).
+
+::: {#browse}
+:::
diff --git a/docs/gallery/carousel.R b/docs/gallery/carousel.R
deleted file mode 100644
index 92cbd9c5d0..0000000000
--- a/docs/gallery/carousel.R
+++ /dev/null
@@ -1,64 +0,0 @@
-library(htmltools)
-library(yaml)
-
-# carousel displays a list of items w/ nav buttons
-carousel <- function(id, duration, items) {
- index <- -1
- items <- lapply(items, function(item) {
- index <<- index + 1
- carouselItem(item$caption, item$image, item$link, item$alt, index, duration)
- })
-
- indicators <- div(class = "carousel-indicators",
- tagList(lapply(items, function(item) item$button))
- )
- items <- div(class = "carousel-inner",
- tagList(lapply(items, function(item) item$item))
- )
- div(id = id, class="carousel carousel-dark slide", `data-bs-ride`="carousel",
- indicators,
- items,
- navButton(id, "prev", "Prevoius"),
- navButton(id, "next", "Next")
- )
-}
-
-# carousel item
-carouselItem <- function(caption, image, link, alt, index, interval) {
- id <- paste0("gallery-carousel-item-", index)
- button <- tags$button(type = "button",
- `data-bs-target` = "#gallery-carousel",
- `data-bs-slide-to` = index,
- `aria-label` = paste("Slide", index + 1)
- )
- if (index == 0) {
- button <- tagAppendAttributes(button,
- class = "active",
- `aria-current` = "true"
- )
- }
- item <- div(class = paste0("carousel-item", ifelse(index == 0, " active", "")),
- `data-bs-interval` = interval,
- a(href = link, img(src = image, alt = alt, class = "d-block mx-auto border")),
- div(class = "carousel-caption d-none d-md-block",
- tags$p(class = "fw-light", caption)
- )
- )
- list(
- button = button,
- item = item
- )
-}
-
-# nav button
-navButton <- function(targetId, type, text) {
- tags$button(class = paste0("carousel-control-", type),
- type = "button",
- `data-bs-target` = paste0("#", targetId),
- `data-bs-slide` = type,
- span(class = paste0("carousel-control-", type, "-icon"),
- `aria-hidden` = "true"),
- span(class = "visually-hidden", text)
- )
-}
-
diff --git a/docs/gallery/carousel.yml b/docs/gallery/carousel.yml
deleted file mode 100644
index 10ac18f750..0000000000
--- a/docs/gallery/carousel.yml
+++ /dev/null
@@ -1,25 +0,0 @@
-
-- caption: "Articles and reports with Python and R"
- image: "articles/advanced-layout-pdf.png"
- link: "#articles-reports"
- alt: "A Tufte-style PDF page with margin notes and a full-width faceted plot"
-
-- caption: "Create data-driven presentations"
- image: "presentations/presentations.png"
- link: "#presentations"
- alt: "A presentation slide titled MPG and Horsepower with a ggplot2 code block above a scatterplot of mileage versus horsepower with a fitted loess curve"
-
-- caption: "Engage readers with interactivity"
- image: "interactive/interactive-jupyter.png"
- link: "#interactive-docs"
- alt: "A Python ipyleaflet code block above a cloud-covered satellite map of Europe with a blue location pin"
-
-- caption: "Publish collections of articles as a website"
- image: "websites/websites-quarto.png"
- link: "#websites"
- alt: "Documentation page with left sidebar navigation and a numbered introduction to the publishing system"
-
-- caption: "Create multi-format books"
- image: "websites/websites-jupyter.png"
- link: "#books"
- alt: "A curriculum site with a blue and orange histogram logo and interactive-notebook introduction text"
diff --git a/docs/gallery/dashboards-monitoring.qmd b/docs/gallery/dashboards-monitoring.qmd
new file mode 100644
index 0000000000..4d88f7fbc0
--- /dev/null
+++ b/docs/gallery/dashboards-monitoring.qmd
@@ -0,0 +1,28 @@
+---
+pagetitle: "Dashboards & Monitoring — Gallery"
+title: "Dashboards & Monitoring"
+subtitle: "Watch operations and live data at a glance."
+description: Quarto examples for watching operations and live data at a glance.
+listing:
+ - id: dashboards-caps
+ template: assets/_caps.ejs.md
+ contents: data/featured.yml
+ include:
+ slug: dashboards
+ - id: dashboards
+ template: assets/_card.ejs.md
+ contents: data/dashboards-monitoring.yml
+ filter-ui: [title, author, description]
+ sort-ui: [name, title, author]
+ field-display-names:
+ name: Name
+ categories: true
+---
+
+::: {.cat-dashboards}
+::: {#dashboards-caps}
+:::
+
+::: {#dashboards}
+:::
+:::
diff --git a/docs/gallery/dashboards/ggplotly-dashboard.png b/docs/gallery/dashboards/ggplotly-dashboard.png
deleted file mode 100644
index 50946f10d2..0000000000
Binary files a/docs/gallery/dashboards/ggplotly-dashboard.png and /dev/null differ
diff --git a/docs/gallery/dashboards/ojs-flights.jpg b/docs/gallery/dashboards/ojs-flights.jpg
deleted file mode 100644
index fd908fb1ec..0000000000
Binary files a/docs/gallery/dashboards/ojs-flights.jpg and /dev/null differ
diff --git a/docs/gallery/dashboards/waste-sites-dashboard.png b/docs/gallery/dashboards/waste-sites-dashboard.png
deleted file mode 100644
index 2811246fb4..0000000000
Binary files a/docs/gallery/dashboards/waste-sites-dashboard.png and /dev/null differ
diff --git a/docs/gallery/data/dashboards-monitoring.yml b/docs/gallery/data/dashboards-monitoring.yml
new file mode 100644
index 0000000000..ffbfed1279
--- /dev/null
+++ b/docs/gallery/data/dashboards-monitoring.yml
@@ -0,0 +1,191 @@
+# Full listing: Dashboards & Monitoring. First entries are the curated cards on the landing.
+- name: MyNorfolk
+ slug: dashboards
+ title: Monitor your operations
+ author: Garrick Aden-Buie
+ live: https://grrrck.quarto.pub/mynorfolk-dash/
+ code: https://github.com/gadenbuie/mynorfolk-dash/blob/main/index.qmd
+ image: thumbnails/dashboards-monitoring/mynorfolk.png
+ alt: MyNorfolk operations dashboard with request value boxes and bar charts.
+ categories: [dashboard, r]
+ features: [Value boxes]
+ description: Civic-request operations dashboard.
+- name: gh-dashboard
+ slug: dashboards
+ title: Monitor open-source project health
+ author: David Schoch
+ live: https://schochastics.github.io/gh-dashboard/
+ code: https://github.com/schochastics/gh-dashboard
+ categories: [dashboard, r]
+ features: [GitHub API]
+ image: thumbnails/dashboards-monitoring/gh-dashboard.png
+ alt: Open-source project-health dashboard with repository value boxes and weekly activity bars.
+ description: Tracks repo health, CRAN status, and weekly activity.
+- name: Stock Explorer
+ slug: dashboards
+ title: Track live financial data
+ author: J.J. Allaire
+ live: https://jjallaire.github.io/stock-explorer-dashboard/
+ code: https://github.com/jjallaire/stock-explorer-dashboard/blob/main/dashboard.qmd
+ image: thumbnails/dashboards-monitoring/stock-explorer.png
+ alt: Stock Explorer dashboard with price value boxes and a candlestick chart.
+ categories: [dashboard, python]
+ features: [Value boxes]
+ description: Value boxes and candlestick charts.
+- name: pyOpenSci software review
+ slug: dashboards
+ title: Monitor a review pipeline
+ author: James Balamuta / pyOpenSci
+ live: https://dashboard.thecoatlessprofessor.com/pyopensci-software-review/
+ categories: [dashboard, python]
+ image: thumbnails/dashboards-monitoring/pyopensci-software-review.png
+ alt: pyOpenSci software-review dashboard with submission value boxes and a monthly submission-and-completion trends chart.
+ description: "Software-review pipeline monitoring (note: data may be out of date)."
+- name: Restaurant Inspections
+ slug: dashboards
+ title: Monitor a deployed model
+ author: Isabel Zimmerman
+ live: https://www.isabelizimm.me/vetiverdashboard/
+ code: https://github.com/isabelizimm/vetiverdashboard/blob/main/index.qmd
+ image: thumbnails/dashboards-monitoring/restaurant-dashboard.png
+ categories: [dashboard, python]
+ features: [vetiver]
+ description: Model card and metrics via vetiver; MLOps monitoring.
+- name: Gapminder
+ slug: dashboards
+ title: Explore multi-view data
+ author: J.J. Allaire
+ live: https://jjallaire.github.io/gapminder-dashboard/
+ code: https://github.com/jjallaire/gapminder-dashboard/blob/main/gapminder.qmd
+ image: thumbnails/dashboards-monitoring/gapminder-dashboard.png
+ categories: [dashboard, python]
+ description: GDP-versus-life-expectancy scatterplots and line charts by continent.
+- name: Customer Churn
+ slug: dashboards
+ title: Report KPIs to the business
+ author: J.J. Allaire
+ live: https://jjallaire.github.io/customer-churn-dashboard/
+ code: https://github.com/jjallaire/customer-churn-dashboard/blob/main/dashboard.qmd
+ image: thumbnails/dashboards-monitoring/customer-churn-dashboard.png
+ categories: [dashboard, python]
+ features: [Value boxes]
+ description: Churn KPIs with a line chart, box plots, and a data table.
+- name: NFL Injuries
+ slug: dashboards
+ title: Track a weekly metric
+ author: J.J. Allaire
+ live: https://jjallaire.github.io/nfl-injuries-dashboard/
+ code: https://github.com/jjallaire/nfl-injuries-dashboard/blob/main/nfl-injuries.qmd
+ image: thumbnails/dashboards-monitoring/nfl-injuries-dashboard.png
+ categories: [dashboard, python]
+ features: [Value boxes]
+ description: Injury value boxes above a status line chart and a yearly bar chart.
+- name: Housing Market at a Glance
+ slug: dashboards
+ title: Map a market indicator
+ author: Isabel Velásquez
+ live: https://ivelasq.github.io/mortgage-dashboard/
+ code: https://github.com/ivelasq/mortgage-dashboard/blob/main/index.qmd
+ image: thumbnails/dashboards-monitoring/housing-market-dashboard.png
+ categories: [dashboard, python]
+ features: [Value boxes]
+ description: Mortgage-rate value boxes beside an animated US choropleth map.
+- name: Penguins (Shiny)
+ slug: dashboards
+ title: Filter data interactively
+ author: J.J. Allaire
+ live: https://jjallaire.shinyapps.io/penguins-dashboard/
+ code: https://github.com/jjallaire/penguins-dashboard/blob/main/penguins.qmd
+ image: thumbnails/dashboards-monitoring/penguins-dashboard.png
+ categories: [dashboard, shiny, python]
+ features: [interactive]
+ description: Species and island filters beside penguin density-curve plots.
+- name: Retirement
+ slug: dashboards
+ title: Simulate scenarios in the browser
+ author: Winston Chang
+ live: https://wch.github.io/retirement-simulation-dashboard/
+ code: https://github.com/wch/retirement-simulation-dashboard
+ image: thumbnails/dashboards-monitoring/retirement-gallery.png
+ categories: [dashboard, shiny, python]
+ features: [shinylive, interactive]
+ description: Investment sliders driving Monte Carlo projection charts, in-browser.
+- name: New Zealand Earthquakes
+ slug: dashboards
+ title: Map live sensor data
+ author: Charlotte Wickham
+ live: https://pub.demo.posit.team/public/nz-quakes/
+ code: https://github.com/cwickham/quakes/blob/main/quakes.qmd
+ image: thumbnails/dashboards-monitoring/nz-quakes-dashboard.png
+ categories: [dashboard, r]
+ features: [Value boxes]
+ description: Earthquake value boxes and a magnitude table beside a Leaflet map.
+- name: Labor and Delivery
+ slug: dashboards
+ title: Report clinical activity
+ author: Mine Çetinkaya-Rundel
+ live: https://mine-cetinkaya-rundel.github.io/ld-dashboard/
+ code: https://github.com/mine-cetinkaya-rundel/ld-dashboard/blob/main/dashboard.qmd
+ image: thumbnails/dashboards-monitoring/ld-dashboard.png
+ categories: [dashboard, r]
+ features: [Value boxes]
+ description: Birth-stat value boxes above a delivery table and charts.
+- name: Diamonds (Shiny)
+ slug: dashboards
+ title: Explore a dataset with controls
+ author: J.J. Allaire
+ live: https://jjallaire.shinyapps.io/diamonds/
+ code: https://github.com/jjallaire/diamonds-dashboard/blob/main/diamonds.qmd
+ image: thumbnails/dashboards-monitoring/diamonds-dashboard.png
+ categories: [dashboard, shiny, r]
+ features: [interactive]
+ description: Plot controls beside a jittered diamond scatterplot.
+- name: Penguins (Observable)
+ slug: dashboards
+ title: Build a client-side dashboard
+ author: J.J. Allaire
+ live: https://jjallaire.github.io/ojs-penguins-dashboard/
+ code: https://github.com/jjallaire/ojs-penguins-dashboard/blob/main/penguins.qmd
+ image: thumbnails/dashboards-monitoring/ojs-penguins-dashboard.png
+ categories: [dashboard, observable]
+ features: [interactive]
+ description: Sidebar filters beside faceted penguin body-mass histograms.
+- name: Clickable Weather Forecast Map
+ slug: dashboards
+ title: Link a map to a table
+ author: Carlos Scheidegger
+ live: https://cscheid.github.io/quarto-dashboard-ojs-examples/weather.html
+ code: https://github.com/cscheid/quarto-dashboard-ojs-examples/blob/main/weather.qmd
+ image: thumbnails/dashboards-monitoring/weather-ojs-dashboard.jpg
+ categories: [dashboard, observable]
+ features: [interactive]
+ description: A clickable US map beside a weekly forecast table.
+- name: Interactive Linked Views
+ slug: dashboards
+ title: Cross-filter linked charts
+ author: Carlos Scheidegger
+ live: https://cscheid.github.io/quarto-dashboard-ojs-examples/flights.html
+ code: https://github.com/cscheid/quarto-dashboard-ojs-examples/blob/main/flights.qmd
+ image: thumbnails/dashboards-monitoring/ojs-flights.png
+ categories: [dashboard, observable]
+ features: [interactive]
+ description: Three linked flight histograms with drag-selection.
+- name: Dashing Through the Snow
+ slug: dashboards
+ title: Tell a seasonal data story
+ author: Mine Çetinkaya-Rundel
+ live: https://mine.quarto.pub/dashing-through-snow-py/
+ code: https://github.com/mine-cetinkaya-rundel/dashing-through-snow/
+ image: thumbnails/dashboards-monitoring/dashing-through-snow.png
+ categories: [dashboard, python]
+ features: [Value boxes]
+ description: Snowfall, depth, and temperature line charts with value boxes.
+- name: Olympic Games
+ slug: dashboards
+ title: Compare across categories
+ author: Mine Çetinkaya-Rundel
+ live: https://mine.quarto.pub/olympic-games-py
+ code: https://github.com/posit-conf-2024/olympicdash
+ image: thumbnails/dashboards-monitoring/olympics-game.png
+ categories: [dashboard, r, python]
+ description: Medal bar charts, value boxes, a yearly line chart, and a table.
diff --git a/docs/gallery/data/featured.yml b/docs/gallery/data/featured.yml
new file mode 100644
index 0000000000..f668444a5f
--- /dev/null
+++ b/docs/gallery/data/featured.yml
@@ -0,0 +1,293 @@
+# Landing-page data: 6 categories, meta + up to 3 curated cards each.
+# Hand-written and fully curated; _featured.ejs.md renders the first 3 cards.
+# Each category's `capabilities` are the single source for the "Learn the Quarto
+# features used" links, shown on the landing (_featured.ejs.md) and pulled onto the
+# matching spoke page via a _caps.ejs.md listing filtered by `slug`.
+# NOTE (scaffold): these cards mirror the first entries in the per-category
+# lists (.yml); a later pass can single-source those too.
+
+- category: Reports & Analytics
+ slug: reports
+ anchor: reports-analytics
+ page: reports-analytics.qmd
+ icon: "bar-chart-line"
+ gap: "finance · government report"
+ tagline: Communicate analysis so a decision-maker can act.
+ capabilities:
+ - text: Parameters
+ href: /docs/computations/parameters.qmd
+ - text: Typst
+ href: /docs/output-formats/typst.qmd
+ - text: Dashboards
+ href: /docs/dashboards/index.qmd
+ cards:
+ - name: World Happiness Report
+ title: Report annually to stakeholders
+ author: Isabel Velásquez
+ live: https://github.com/ivelasq/whr-typst-template/blob/main/template.pdf
+ code: https://github.com/ivelasq/whr-typst-template
+ categories: [report, pdf, typst, r]
+ features: [brand.yml]
+ image: thumbnails/reports-analytics/whr.png
+ alt: World Happiness Report branded Typst cover page.
+ description: Branded front page and branded computational outputs.
+ - name: TFFF · OBTN 2025
+ title: Generate many customised reports
+ author: David Keyes / Clarity Data Studio
+ live: https://www.tfff.org/wp-content/uploads/Linn_OBTN-2025_EN.pdf
+ code: https://claritydatastudio.com
+ categories: [report, pdf]
+ features: [Parameters, brand.yml]
+ image: thumbnails/reports-analytics/tfff.png
+ alt: Branded Linn County report page with parameterised statistics, a map, and charts.
+ description: Parameterised, branded PDF reports produced at scale.
+ - name: Closeread story
+ title: Walk a reader through findings
+ author: Nicola Rennie
+ live: https://nrennie.rbind.io/scrollytelling/
+ code: https://github.com/nrennie/scrollytelling
+ categories: [article, html, r]
+ features: [Closeread, interactive]
+ image: thumbnails/reports-analytics/closeread.png
+ preview: thumbnails/featured/reports-analytics-closeread
+ preview-url: https://nrennie.rbind.io/scrollytelling/posts/chart-styling/
+ alt: Closeread scrollytelling story with a sticky narrative beside linked small-multiple charts.
+ description: Scrollytelling data story with the Closeread extension.
+
+- category: Dashboards & Monitoring
+ slug: dashboards
+ anchor: dashboards-monitoring
+ page: dashboards-monitoring.qmd
+ icon: "speedometer2"
+ gap: "pharma · healthcare vertical"
+ tagline: Watch operations and live data at a glance.
+ capabilities:
+ - text: Dashboards
+ href: /docs/dashboards/index.qmd
+ - text: Layout
+ href: /docs/dashboards/layout.qmd
+ - text: Data display
+ href: /docs/dashboards/data-display.qmd
+ cards:
+ - name: MyNorfolk
+ title: Monitor your operations
+ author: Garrick Aden-Buie
+ live: https://grrrck.quarto.pub/mynorfolk-dash/
+ code: https://github.com/gadenbuie/mynorfolk-dash/blob/main/index.qmd
+ image: thumbnails/dashboards-monitoring/mynorfolk.png
+ alt: MyNorfolk operations dashboard with request value boxes and bar charts.
+ categories: [dashboard, r]
+ features: [Value boxes]
+ description: Civic-request operations dashboard.
+ - name: gh-dashboard
+ title: Monitor open-source project health
+ author: David Schoch
+ live: https://schochastics.github.io/gh-dashboard/
+ code: https://github.com/schochastics/gh-dashboard
+ categories: [dashboard, r]
+ features: [GitHub API]
+ image: thumbnails/dashboards-monitoring/gh-dashboard.png
+ alt: Open-source project-health dashboard with repository value boxes and weekly activity bars.
+ description: Tracks repo health, CRAN status, and weekly activity.
+ - name: Stock Explorer
+ title: Track live financial data
+ author: J.J. Allaire
+ live: https://jjallaire.github.io/stock-explorer-dashboard/
+ code: https://github.com/jjallaire/stock-explorer-dashboard/blob/main/dashboard.qmd
+ image: thumbnails/dashboards-monitoring/stock-explorer.png
+ alt: Stock Explorer dashboard with price value boxes and a candlestick chart.
+ categories: [dashboard, python]
+ features: [Value boxes]
+ description: Value boxes and candlestick charts.
+
+- category: Research & Scholarship
+ slug: research
+ anchor: research-scholarship
+ page: research-scholarship.qmd
+ icon: "mortarboard"
+ gap: "manuscript · Typst · thesis"
+ tagline: Publish papers, books, and scholarship.
+ capabilities:
+ - text: Citations
+ href: /docs/authoring/citations.qmd
+ - text: Cross-references
+ href: /docs/authoring/cross-references.qmd
+ - text: Books
+ href: /docs/books/book-basics.qmd
+ cards:
+ - name: Causal Inference in R
+ title: Publish a scholarly book
+ author: Barrett, McGowan, Gerke
+ live: https://www.r-causal.org/
+ code: https://github.com/malcolmbarrett/causal-inference-in-r
+ image: thumbnails/research-scholarship/causal-inference.png
+ preview: thumbnails/featured/research-scholarship-causal-inference
+ alt: Causal Inference in R chapter with cross-referenced text and a stacked risk-set figure.
+ categories: [book, r]
+ features: [Citations, Cross-references]
+ description: Citations and cross-references across a full monograph.
+ - name: AffCom Lab
+ title: Share a lab's publications
+ author: Jeffrey Girard
+ live: https://affcom.ku.edu/
+ code: https://github.com/jmgirard/affcomlab
+ categories: [website, r]
+ features: [Listings, Publications]
+ image: thumbnails/research-scholarship/affcom.png
+ preview: thumbnails/featured/research-scholarship-affcom
+ alt: AffCom Lab publications listing page.
+ description: Research-lab site with custom listing pages for people and publications.
+ - name: Telling Stories with Data
+ title: Write up reproducible research
+ author: Rohan Alexander
+ live: https://tellingstorieswithdata.com/
+ code: https://github.com/RohanAlexander/telling_stories
+ image: thumbnails/research-scholarship/telling-stories.png
+ alt: Telling Stories with Data graphs chapter showing the datasauRus four-panel scatterplot with ggplot code and a chapter sidebar.
+ categories: [book, r]
+ features: [Citations]
+ description: End-to-end reproducible research workflow.
+
+- category: Teaching & Learning
+ slug: teaching
+ anchor: teaching-learning
+ page: teaching-learning.qmd
+ icon: "book"
+ gap: "embedded exercises"
+ tagline: Talks, courses, and textbooks.
+ capabilities:
+ - text: RevealJS
+ href: /docs/presentations/revealjs/index.qmd
+ - text: Code annotation
+ href: /docs/authoring/code-annotation.qmd
+ - text: Books
+ href: /docs/books/book-basics.qmd
+ cards:
+ - name: Feature engineering talk
+ title: Present your work
+ author: Emil Hvitfeldt
+ live: https://emilhvitfeldt.github.io/talk-pfizer-posit-summit-feature-engineering/
+ categories: [presentation, revealjs, r]
+ features: [Themes]
+ image: thumbnails/teaching-learning/feature-eng.png
+ preview: thumbnails/featured/teaching-learning-feature-eng
+ alt: Feature-engineering RevealJS title slide with a custom theme.
+ description: RevealJS with polished theming and code chunks.
+ - name: textrecipes talk
+ title: Present your work
+ author: Emil Hvitfeldt
+ live: https://emilhvitfeldt.github.io/talk-useR2022-textrecipes/
+ code: https://github.com/EmilHvitfeldt/talk-useR2022-textrecipes
+ image: thumbnails/teaching-learning/textrecipes.png
+ preview: thumbnails/featured/teaching-learning-textrecipes
+ alt: textrecipes RevealJS title slide with a custom theme.
+ categories: [presentation, revealjs, r]
+ features: [interactive]
+ description: RevealJS with theming and animated elements.
+ - name: Data viz course
+ title: Organise your learning resources
+ author: Andrew Heiss
+ live: https://datavizsp26.classes.andrewheiss.com/content/01-content.html
+ categories: [course, website, r]
+ features: [Inline slides]
+ image: thumbnails/teaching-learning/dataviz-course.png
+ preview: thumbnails/featured/teaching-learning-dataviz-course
+ alt: Data-visualisation course lecture page with a schedule and inline slides.
+ description: Lecture page with inline slides.
+
+- category: Software Documentation
+ slug: docs
+ anchor: software-documentation
+ page: software-documentation.qmd
+ icon: "tools"
+ gap: "versioned docs"
+ tagline: Document packages, tools, and APIs.
+ capabilities:
+ - text: Websites
+ href: /docs/websites/website-basics.qmd
+ - text: Tabsets
+ href: /docs/output-formats/html-basics.qmd
+ - text: Typst
+ href: /docs/output-formats/typst.qmd
+ cards:
+ - name: Positron
+ title: Document a large product
+ author: Posit
+ live: https://positron.posit.co/
+ code: https://github.com/posit-dev/positron
+ categories: [documentation, website]
+ features: [Search]
+ image: thumbnails/software-documentation/positron.png
+ preview: thumbnails/featured/software-documentation-positron
+ alt: Positron documentation page with a navigation sidebar, on-page contents, and search.
+ description: Polished, product-scale documentation site.
+ - name: great-docs
+ title: Generate an API reference
+ author: Posit
+ live: https://posit-dev.github.io/great-docs/
+ code: https://github.com/posit-dev/great-docs
+ categories: [documentation, website, python]
+ features: [quartodoc]
+ image: thumbnails/software-documentation/great-docs.png
+ preview: thumbnails/featured/software-documentation-great-docs
+ alt: great-docs API reference page generated with quartodoc.
+ description: A quartodoc-based framework for beautiful Python API documentation.
+ - name: Quarto Wizard
+ title: Document an editor extension
+ author: Mickaël Canouil
+ live: https://m.canouil.dev/quarto-wizard/
+ code: https://github.com/mcanouil/quarto-wizard
+ categories: [documentation, website]
+ features: [brand.yml]
+ image: thumbnails/software-documentation/quarto-wizard.png
+ preview: thumbnails/featured/software-documentation-quarto-wizard
+ alt: Quarto Wizard landing page with install buttons for VS Code and Positron.
+ description: Docs for the Quarto Wizard extension for VS Code and Positron.
+
+- category: Personal & Community
+ slug: personal
+ anchor: personal-community
+ page: personal-community.qmd
+ icon: "globe2"
+ gap: "brand.yml re-skin"
+ tagline: Personal sites, blogs, and group sites.
+ capabilities:
+ - text: Websites
+ href: /docs/websites/website-basics.qmd
+ - text: Listings
+ href: /docs/websites/website-listings.qmd
+ - text: Blogs
+ href: /docs/websites/website-blog.qmd
+ cards:
+ - name: isabelizimm.me
+ title: Publish a personal site and blog
+ author: Isabel Zimmerman
+ live: https://isabelizimm.me/
+ categories: [website]
+ features: [Listings]
+ image: thumbnails/personal-community/isabelizimm.png
+ preview: thumbnails/featured/personal-community-isabelizimm
+ alt: Personal blog listing with a category sidebar and dated posts.
+ description: Clean personal site with blog listings.
+ - name: mickael.canouil.fr
+ title: Theme a site end to end
+ author: Mickaël Canouil
+ live: https://mickael.canouil.fr/
+ code: https://github.com/mcanouil/mickael.canouil.fr
+ categories: [website]
+ features: [Custom project type, Listing templates, SCSS]
+ image: thumbnails/personal-community/mcanouil.png
+ preview: thumbnails/featured/personal-community-mcanouil
+ alt: Dark-theme portfolio landing page with a profile photo, tagline, and social links.
+ description: Portfolio and blog built on a custom project type with its own listing templates.
+ - name: rainbowr.org
+ title: Run a community site
+ author: rainbowR
+ live: https://rainbowr.org/
+ code: https://github.com/r-lgbtq/rainbowr.org
+ categories: [website]
+ features: [Community]
+ image: thumbnails/personal-community/rainbowr.png
+ preview: thumbnails/featured/personal-community-rainbowr
+ alt: rainbowR community-site home with a rainbow banner and mission statement.
+ description: Community mission and resources with a themed design.
diff --git a/docs/gallery/data/personal-community.yml b/docs/gallery/data/personal-community.yml
new file mode 100644
index 0000000000..a7287fa3e6
--- /dev/null
+++ b/docs/gallery/data/personal-community.yml
@@ -0,0 +1,200 @@
+# Full listing: Personal & Community. First entries are the curated cards on the landing.
+- name: isabelizimm.me
+ slug: personal
+ title: Publish a personal site and blog
+ author: Isabel Zimmerman
+ live: https://isabelizimm.me/
+ categories: [website]
+ features: [Listings]
+ image: thumbnails/personal-community/isabelizimm.png
+ alt: Personal blog listing with a category sidebar and dated posts.
+ description: Clean personal site with blog listings.
+- name: mickael.canouil.fr
+ slug: personal
+ title: Theme a site end to end
+ author: Mickaël Canouil
+ live: https://mickael.canouil.fr/
+ code: https://github.com/mcanouil/mickael.canouil.fr
+ image: thumbnails/personal-community/mcanouil.png
+ alt: Dark-theme portfolio landing page with a profile photo, tagline, and social links.
+ categories: [website]
+ features: [Custom project type, Listing templates, SCSS]
+ description: Portfolio and blog built on a custom project type with its own listing templates.
+- name: rainbowr.org
+ slug: personal
+ title: Run a community site
+ author: rainbowR
+ live: https://rainbowr.org/
+ code: https://github.com/r-lgbtq/rainbowr.org
+ categories: [website]
+ features: [Community]
+ image: thumbnails/personal-community/rainbowr.png
+ alt: rainbowR community-site home with a rainbow banner and mission statement.
+ description: Community mission and resources with a themed design.
+- name: faculty.washington.edu/masiello
+ slug: personal
+ title: Share research group publications
+ author: Masiello Group
+ live: https://faculty.washington.edu/masiello/publications/
+ code: https://github.com/MasielloGroup/MasielloGroupWebsite
+ image: thumbnails/personal-community/masiello-group.png
+ categories: [website]
+ features: [Listings, Publications]
+ description: Research-group publication listing.
+- name: nascent-peru.github.io
+ slug: personal
+ title: Build a multilingual site
+ author: NASCENT-PERU
+ live: https://nascent-peru.github.io/
+ categories: [website]
+ features: [Multilingual]
+ image: thumbnails/personal-community/nascent-peru.png
+ alt: NASCENT Peru project home with the colourful NASCENT logo beside the project title.
+ description: English and Spanish via the babelquarto package.
+- name: beamilz.com
+ slug: personal
+ title: Run a bilingual blog
+ author: Beatriz Milz
+ live: https://beamilz.com/
+ code: https://github.com/beatrizmilz/blog-en
+ image: thumbnails/personal-community/bea-milz.png
+ categories: [website]
+ features: [Multilingual]
+ description: English/Portuguese blog with a category cloud.
+- name: mm218.dev
+ slug: personal
+ title: Combine a portfolio and blog
+ author: Mike Mahoney
+ live: https://www.mm218.dev/
+ code: https://github.com/mikemahoney218/mm218.dev
+ image: thumbnails/personal-community/mike-mahoney.png
+ categories: [website]
+ description: A personal site with a portfolio and writing.
+- name: chrisvoncsefalvay.com
+ slug: personal
+ title: Publish a professional bio site
+ author: Chris von Csefalvay
+ live: https://chrisvoncsefalvay.com/
+ code: https://github.com/chrisvoncsefalvay/chrisvoncsefalvay.github.io
+ image: thumbnails/personal-community/chris-von-csefalvay.png
+ categories: [website]
+ description: A personal bio and writing site.
+- name: ForBo7 // Salman Naqvi
+ slug: personal
+ title: Build a minimal landing page
+ author: Salman Naqvi
+ live: https://forbo7.github.io
+ code: https://github.com/ForBo7/forbo7.github.io
+ image: thumbnails/personal-community/forbo7-landing.png
+ categories: [website]
+ description: A minimal landing page with blog and project columns.
+- name: The MockUp
+ slug: personal
+ title: Run a technical blog
+ author: Thomas Mock
+ live: https://themockup.blog/
+ code: https://github.com/jthomasmock/themockup-blog
+ image: thumbnails/personal-community/mockup.png
+ categories: [website, r]
+ description: A blog with post cards and a category sidebar.
+- name: Quarto tip a day
+ slug: personal
+ title: Run a tips blog
+ author: Mine Çetinkaya-Rundel
+ live: https://mine-cetinkaya-rundel.github.io/quarto-tip-a-day/
+ code: https://github.com/mine-cetinkaya-rundel/quarto-tip-a-day
+ image: thumbnails/personal-community/quartotip.png
+ categories: [website]
+ features: [Listings]
+ description: A daily-tip blog with post cards.
+- name: Wannabe Rstats-fu
+ slug: personal
+ title: Run a developer blog
+ author: Hiroaki Yutani
+ live: https://yutani.rbind.io/
+ code: https://github.com/rbind/yutani
+ image: thumbnails/personal-community/wannabe-rstats-fu.png
+ categories: [website, r]
+ description: An R blog on Rust and extendr.
+- name: hamel.dev
+ slug: personal
+ title: Combine a blog and notes
+ author: Hamel Husain
+ live: https://hamel.dev
+ code: https://github.com/hamelsmu/hamel/
+ image: thumbnails/personal-community/hamel.png
+ categories: [website]
+ description: A dark personal site with a blog and notes.
+- name: fluidsyndicate
+ slug: personal
+ title: Publish open performance material
+ live: https://fluidsyndicate.com
+ code: https://codeberg.org/jcolomb/fluidsyndicate
+ image: thumbnails/personal-community/fluidsyndicate.png
+ categories: [website]
+ description: Open-source material for performances, as a photo gallery.
+- name: Real World Data Science
+ slug: personal
+ title: Run an organisation site
+ author: Royal Statistical Society
+ live: https://realworlddatascience.net/
+ code: https://github.com/realworlddatascience/realworlddatascience.github.io
+ image: thumbnails/personal-community/real-world-data-science.png
+ categories: [website]
+ features: [Community]
+ description: The RSS data-science site with a custom design.
+- name: kapitan.net
+ slug: personal
+ title: Publish a long-scroll portfolio
+ author: Daniel Kapitan
+ live: https://kapitan.net
+ code: https://github.com/dkapitan/dkapitan.github.io
+ image: thumbnails/personal-community/dkapitan.png
+ categories: [website]
+ description: A long-scroll portfolio and blog.
+- name: iPardalis
+ slug: personal
+ title: Build an e-commerce site
+ live: https://ipardalis.com/
+ code: https://github.com/Dripdrop12/ipardalis
+ image: thumbnails/personal-community/ipardalis.png
+ categories: [website]
+ description: An e-commerce site with a product photo grid.
+- name: Vistales
+ slug: personal
+ title: Tell data stories as a site
+ live: https://vistales.github.io/vistales
+ code: https://github.com/Vistales/Home
+ image: thumbnails/personal-community/vistales.png
+ categories: [website]
+ description: A data-insights site with a bold wordmark landing.
+- name: ALA Labs
+ slug: personal
+ title: Publish a research-group site
+ author: Atlas of Living Australia
+ live: https://labs.ala.org.au/
+ code: https://github.com/AtlasOfLivingAustralia/ala-labs
+ image: thumbnails/personal-community/website-ala-labs.png
+ categories: [website]
+ features: [Community]
+ description: An ecological data-viz, analysis, and research site.
+- name: nhsrcommunity.com
+ slug: personal
+ title: Run a health-analytics community
+ author: NHS-R community
+ live: https://nhsrcommunity.com
+ code: https://github.com/nhs-r-community/nhs-r-community
+ image: thumbnails/personal-community/nhs-r-website.png
+ categories: [website, r]
+ features: [Community]
+ description: Promoting R and open analytics in health and care.
+- name: nasa-openscapes.github.io
+ slug: personal
+ title: Run a project community site
+ author: NASA Openscapes
+ live: https://nasa-openscapes.github.io/
+ code: https://github.com/NASA-Openscapes/NASA-Openscapes.github.io
+ image: thumbnails/personal-community/nasa-openscapes.png
+ categories: [website]
+ features: [Community]
+ description: An Earth-science open-science project site.
diff --git a/docs/gallery/data/reports-analytics.yml b/docs/gallery/data/reports-analytics.yml
new file mode 100644
index 0000000000..391f2334fb
--- /dev/null
+++ b/docs/gallery/data/reports-analytics.yml
@@ -0,0 +1,97 @@
+# Full listing: Reports & Analytics. First 3 = landing featured.
+# categories = format / project type / language (facet + clickable filter)
+# features = capabilities (display-only chips)
+- name: World Happiness Report
+ slug: reports
+ title: Report annually to stakeholders
+ author: Isabel Velásquez
+ live: https://github.com/ivelasq/whr-typst-template/blob/main/template.pdf
+ code: https://github.com/ivelasq/whr-typst-template
+ categories: [report, pdf, typst, r]
+ features: [brand.yml]
+ image: thumbnails/reports-analytics/whr.png
+ alt: World Happiness Report branded Typst cover page.
+ description: Branded front page and branded computational outputs.
+- name: TFFF · OBTN 2025
+ slug: reports
+ title: Generate many customised reports
+ author: David Keyes / Clarity Data Studio
+ live: https://www.tfff.org/wp-content/uploads/Linn_OBTN-2025_EN.pdf
+ code: https://claritydatastudio.com
+ categories: [report, pdf]
+ features: [Parameters, brand.yml]
+ image: thumbnails/reports-analytics/tfff.png
+ alt: Branded Linn County report page with parameterised statistics, a map, and charts.
+ description: Parameterised, branded PDF reports produced at scale.
+- name: Closeread story
+ slug: reports
+ title: Walk a reader through findings
+ author: Nicola Rennie
+ live: https://nrennie.rbind.io/scrollytelling/
+ code: https://github.com/nrennie/scrollytelling
+ categories: [article, html, r]
+ features: [Closeread, interactive]
+ image: thumbnails/reports-analytics/closeread.png
+ alt: Closeread scrollytelling story with a sticky narrative beside linked small-multiple charts.
+ description: Scrollytelling data story with the Closeread extension.
+- name: HTML article
+ slug: reports
+ title: Publish an article to the web
+ live: https://quarto-dev.github.io/quarto-gallery/articles/html/html.html
+ code: https://github.com/quarto-dev/quarto-gallery/blob/main/articles/html/html.qmd
+ image: thumbnails/reports-analytics/html.png
+ categories: [article, html]
+ description: An HTML article with an interactive chart and a table-of-contents sidebar.
+- name: MS Word article
+ slug: reports
+ title: Produce an Office document
+ live: https://quarto-dev.github.io/quarto-gallery/articles/msword/msword.docx
+ code: https://github.com/quarto-dev/quarto-gallery/blob/main/articles/msword/msword.qmd
+ image: thumbnails/reports-analytics/msword.png
+ categories: [article, docx, python]
+ description: A Word document with a code block and a plot for Office workflows.
+- name: Tufte HTML
+ slug: reports
+ title: Lay figures out in the margin
+ live: https://quarto-dev.github.io/quarto-gallery/page-layout/tufte.html
+ code: https://github.com/quarto-dev/quarto-gallery/blob/main/page-layout/tufte.qmd
+ image: thumbnails/reports-analytics/advanced-layout-html.png
+ categories: [article, html]
+ features: [Layout]
+ description: A Tufte-style article with figures and notes in the right margin.
+- name: Tufte PDF
+ slug: reports
+ title: Lay figures out in the margin (print)
+ live: https://quarto-dev.github.io/quarto-gallery/page-layout/tufte.pdf
+ code: https://github.com/quarto-dev/quarto-gallery/blob/main/page-layout/tufte.qmd
+ image: thumbnails/reports-analytics/advanced-layout-pdf.png
+ categories: [article, pdf]
+ features: [Layout]
+ description: A Tufte-style PDF with margin notes and a full-width faceted plot.
+- name: Observable penguins
+ slug: reports
+ title: Add reactive interactivity
+ live: ../interactive/ojs/examples/penguins.html
+ code: https://github.com/quarto-dev/quarto-web/blob/main/docs/interactive/ojs/examples/penguins.qmd
+ image: thumbnails/reports-analytics/ojs.png
+ categories: [article, observable]
+ features: [interactive]
+ description: Reactive JavaScript histograms with a filter slider and checkboxes.
+- name: Shiny diamonds explorer
+ slug: reports
+ title: Embed a Shiny app
+ live: https://jjallaire.shinyapps.io/diamonds-explorer/
+ code: https://github.com/quarto-dev/quarto-web/blob/main/docs/interactive/shiny/_examples/diamonds/shiny-diamonds.qmd
+ image: thumbnails/reports-analytics/shiny.png
+ categories: [article, shiny, r]
+ features: [interactive]
+ description: A faceted diamond scatterplot with sliders and dropdowns.
+- name: Jupyter widgets
+ slug: reports
+ title: Use interactive widgets
+ live: ../interactive/widgets/jupyter.html
+ code: https://github.com/quarto-dev/quarto-web/blob/main/docs/interactive/widgets/jupyter.qmd
+ image: thumbnails/reports-analytics/jupyter.png
+ categories: [article, jupyter, python]
+ features: [interactive]
+ description: An ipyleaflet map driven by a Python code block.
diff --git a/docs/gallery/data/research-scholarship.yml b/docs/gallery/data/research-scholarship.yml
new file mode 100644
index 0000000000..c82e59d0c9
--- /dev/null
+++ b/docs/gallery/data/research-scholarship.yml
@@ -0,0 +1,104 @@
+# Full listing: Research & Scholarship. First entries are the curated cards on the landing.
+- name: Causal Inference in R
+ slug: research
+ title: Publish a scholarly book
+ author: Barrett, McGowan, Gerke
+ live: https://www.r-causal.org/
+ code: https://github.com/malcolmbarrett/causal-inference-in-r
+ image: thumbnails/research-scholarship/causal-inference.png
+ alt: Causal Inference in R chapter with cross-referenced text and a stacked risk-set figure.
+ categories: [book, r]
+ features: [Citations, Cross-references]
+ description: Citations and cross-references across a full monograph.
+- name: AffCom Lab
+ slug: research
+ title: Share a lab's publications
+ author: Jeffrey Girard
+ live: https://affcom.ku.edu/
+ code: https://github.com/jmgirard/affcomlab
+ categories: [website, r]
+ features: [Listings, Publications]
+ image: thumbnails/research-scholarship/affcom.png
+ alt: AffCom Lab publications listing page.
+ description: Research-lab site with custom listing pages for people and publications.
+- name: Telling Stories with Data
+ slug: research
+ title: Write up reproducible research
+ author: Rohan Alexander
+ live: https://tellingstorieswithdata.com/
+ code: https://github.com/RohanAlexander/telling_stories
+ image: thumbnails/research-scholarship/telling-stories.png
+ alt: Telling Stories with Data graphs chapter showing the datasauRus four-panel scatterplot with ggplot code and a chapter sidebar.
+ categories: [book, r]
+ features: [Citations]
+ description: End-to-end reproducible research workflow.
+- name: NOAA title-page article
+ slug: research
+ title: Format a journal-style article
+ author: NOAA NMFS
+ live: https://github.com/nmfs-opensci/quarto_titlepages/blob/main/example_1.pdf
+ code: https://github.com/nmfs-opensci/quarto_titlepages
+ image: thumbnails/research-scholarship/pdf.png
+ categories: [article, pdf]
+ features: [Title page]
+ description: Formatted title page with authors and affiliations.
+- name: Time Series Analysis
+ slug: research
+ title: Publish lecture notes as a book
+ author: Vyacheslav Lyubchich
+ live: https://vlyubchich.github.io/tsar/
+ code: https://github.com/vlyubchich/tsar/
+ image: thumbnails/research-scholarship/tsar.png
+ categories: [book, r]
+ features: [Cross-references]
+ description: Time-series lecture notes as a Quarto book.
+- name: R for Clinical Study Reports
+ slug: research
+ title: Write a regulated clinical report
+ author: Yilong Zhang et al.
+ live: https://r4csr.org/
+ code: https://github.com/elong0527/r4csr
+ image: thumbnails/research-scholarship/r4csr.png
+ categories: [book, r]
+ features: [Tables]
+ description: Clinical study reporting and submission workflow in R.
+- name: R for Plant Disease Epidemiology
+ slug: research
+ title: Teach a research method as a book
+ author: Emerson Del Ponte
+ live: https://r4pde.netlify.app/
+ code: https://github.com/emdelponte/epidemiology-R
+ image: thumbnails/research-scholarship/r4pde.png
+ categories: [book, r]
+ description: Applied epidemiology methods as a reproducible book.
+- name: Cleaning Biodiversity Data in R
+ slug: research
+ title: Document a data workflow
+ author: Atlas of Living Australia
+ live: https://cleaning-data-r.ala.org.au/
+ code: https://github.com/AtlasOfLivingAustralia/cleaning_data/
+ image: thumbnails/research-scholarship/cleaning-bd-in-r.png
+ categories: [book, r]
+ description: Cleaning and standardising biodiversity data.
+- name: Andrew Heiss — Publications
+ slug: research
+ title: List your publications
+ author: Andrew Heiss
+ live: https://www.andrewheiss.com/research/
+ code: https://github.com/andrewheiss/ath-quarto
+ categories: [website, r]
+ features: [Listings, Publications]
+ image: thumbnails/research-scholarship/heiss-publications.png
+ alt: Filterable academic publications listing with category tags.
+ description: A filterable publications listing over BibTeX metadata.
+- name: Mickaël Canouil — Publications
+ slug: research
+ title: List your publications
+ author: Mickaël Canouil
+ live: https://mickael.canouil.fr/publications/
+ code: https://github.com/mcanouil/mickael.canouil.fr
+ categories: [website, r]
+ features: [Listings, Publications]
+ image: thumbnails/research-scholarship/mcanouil-publications.png
+ alt: Publications listing with a year timeline and newest-first entries showing titles, authors, and dates.
+ description: A publications listing generated from citation metadata.
diff --git a/docs/gallery/data/software-documentation.yml b/docs/gallery/data/software-documentation.yml
new file mode 100644
index 0000000000..f63289ff78
--- /dev/null
+++ b/docs/gallery/data/software-documentation.yml
@@ -0,0 +1,138 @@
+# Full listing: Software Documentation. First entries are the curated cards on the landing.
+- name: Positron
+ slug: docs
+ title: Document a large product
+ author: Posit
+ live: https://positron.posit.co/
+ code: https://github.com/posit-dev/positron
+ categories: [documentation, website]
+ features: [Search]
+ image: thumbnails/software-documentation/positron.png
+ alt: Positron documentation page with a navigation sidebar, on-page contents, and search.
+ description: Polished, product-scale documentation site.
+- name: great-docs
+ slug: docs
+ title: Generate an API reference
+ author: Posit
+ live: https://posit-dev.github.io/great-docs/
+ code: https://github.com/posit-dev/great-docs
+ categories: [documentation, website, python]
+ features: [quartodoc]
+ image: thumbnails/software-documentation/great-docs.png
+ alt: great-docs API reference page generated with quartodoc.
+ description: A quartodoc-based framework for beautiful Python API documentation.
+- name: Quarto Wizard
+ slug: docs
+ title: Document an editor extension
+ author: Mickaël Canouil
+ live: https://m.canouil.dev/quarto-wizard/
+ code: https://github.com/mcanouil/quarto-wizard
+ categories: [documentation, website]
+ features: [brand.yml]
+ image: thumbnails/software-documentation/quarto-wizard.png
+ alt: Quarto Wizard landing page with install buttons for VS Code and Positron.
+ description: Docs for the Quarto Wizard extension for VS Code and Positron.
+- name: gribouille
+ slug: docs
+ title: Document a Typst package
+ author: Mickaël Canouil
+ live: https://m.canouil.dev/gribouille/
+ code: https://github.com/mcanouil/gribouille
+ categories: [documentation, website, typst]
+ features: [Extension]
+ image: thumbnails/software-documentation/gribouille.png
+ alt: gribouille documentation home showing a Typst plotting example.
+ description: Quarto docs for the gribouille Typst plotting package.
+- name: Ibis
+ slug: docs
+ title: Document a data library
+ author: Ibis project
+ live: https://ibis-project.org
+ code: https://github.com/ibis-project/ibis
+ image: thumbnails/software-documentation/ibis.png
+ categories: [documentation, website, python]
+ features: [quartodoc]
+ description: Python OSS docs with a quartodoc API reference.
+- name: nbdev
+ slug: docs
+ title: Document from notebooks
+ author: fast.ai
+ live: https://nbdev.fast.ai/
+ code: https://github.com/fastai/nbdev
+ image: thumbnails/software-documentation/nbdev.png
+ categories: [documentation, website, python]
+ features: [Notebooks]
+ description: Package docs generated from Jupyter notebooks.
+- name: quarto.org
+ slug: docs
+ title: Document a publishing system
+ author: Quarto team
+ live: https://quarto.org
+ code: https://github.com/quarto-dev/quarto-web
+ image: thumbnails/software-documentation/quarto.png
+ categories: [documentation, website]
+ description: The dogfooded Quarto documentation website.
+- name: devito
+ slug: docs
+ title: Document a scientific library
+ live: https://www.devitoproject.org
+ image: thumbnails/software-documentation/devito.png
+ categories: [documentation, website, python]
+ description: Documentation for a finite-difference / seismic-imaging library.
+- name: mrgsolve
+ slug: docs
+ title: Document an R package
+ author: Metrum Research Group
+ live: https://mrgsolve.org/
+ code: https://github.com/metrumresearchgroup/mrgsolve
+ image: thumbnails/software-documentation/mrgsolve.png
+ categories: [documentation, website, r]
+ description: Documentation homepage for the mrgsolve R package.
+- name: R-Manuals
+ slug: docs
+ title: Re-publish reference manuals
+ author: Posit
+ live: https://rstudio.github.io/r-manuals/
+ code: https://github.com/rstudio/r-manuals
+ image: thumbnails/software-documentation/r-manuals.png
+ categories: [documentation, website, r]
+ description: The R manuals rewritten with Quarto.
+- name: Quarto Extensions
+ slug: docs
+ title: List a directory from an API
+ author: Mickaël Canouil
+ live: https://m.canouil.dev/quarto-extensions/
+ code: https://github.com/mcanouil/quarto-extensions
+ image: thumbnails/software-documentation/quarto-extensions.png
+ alt: Quarto Extensions directory with a search box, category filters, and a grid of extension cards.
+ categories: [website]
+ features: [Listings, Extension]
+ description: An extensions directory built from the GitHub API.
+- name: R Packages (2e)
+ slug: docs
+ title: Write a developer handbook
+ author: Wickham, Bryan
+ live: https://r-pkgs.org/
+ code: https://github.com/hadley/r-pkgs/
+ image: thumbnails/software-documentation/r-pkgs.png
+ categories: [book, r]
+ description: The canonical R-package developer handbook.
+- name: R Development Guide
+ slug: docs
+ title: Document a contribution process
+ author: R Project
+ live: https://contributor.r-project.org/rdevguide/
+ code: https://github.com/r-devel/rdevguide
+ image: thumbnails/software-documentation/r-development-guide.png
+ categories: [book, r]
+ description: A guide for contributing to R itself.
+- name: utilitR
+ slug: docs
+ title: Document tooling in another language
+ author: INSEE
+ live: https://book.utilitr.org/
+ code: https://github.com/InseeFrLab/utilitR
+ image: thumbnails/software-documentation/utilitr.png
+ categories: [book, r]
+ features: [Multilingual]
+ description: French-language documentation for a toolbox of R utilities.
diff --git a/docs/gallery/data/teaching-learning.yml b/docs/gallery/data/teaching-learning.yml
new file mode 100644
index 0000000000..7215b365b0
--- /dev/null
+++ b/docs/gallery/data/teaching-learning.yml
@@ -0,0 +1,304 @@
+# Full listing: Teaching & Learning. First entries are the curated cards on the landing.
+- name: Feature engineering talk
+ slug: teaching
+ title: Present your work
+ author: Emil Hvitfeldt
+ live: https://emilhvitfeldt.github.io/talk-pfizer-posit-summit-feature-engineering/
+ categories: [presentation, revealjs, r]
+ features: [Themes]
+ image: thumbnails/teaching-learning/feature-eng.png
+ alt: Feature-engineering RevealJS title slide with a custom theme.
+ description: RevealJS with polished theming and code chunks.
+- name: textrecipes talk
+ slug: teaching
+ title: Present your work
+ author: Emil Hvitfeldt
+ live: https://emilhvitfeldt.github.io/talk-useR2022-textrecipes/
+ code: https://github.com/EmilHvitfeldt/talk-useR2022-textrecipes
+ image: thumbnails/teaching-learning/textrecipes.png
+ alt: textrecipes RevealJS title slide with a custom theme.
+ categories: [presentation, revealjs, r]
+ features: [interactive]
+ description: RevealJS with theming and animated elements.
+- name: Data viz course
+ slug: teaching
+ title: Organise your learning resources
+ author: Andrew Heiss
+ live: https://datavizsp26.classes.andrewheiss.com/content/01-content.html
+ categories: [course, website, r]
+ features: [Inline slides]
+ image: thumbnails/teaching-learning/dataviz-course.png
+ alt: Data-visualisation course lecture page with a schedule and inline slides.
+ description: Lecture page with inline slides.
+- name: R for Data Science (2e)
+ slug: teaching
+ title: Teach with a book
+ author: Wickham, Çetinkaya-Rundel, Grolemund
+ live: https://r4ds.hadley.nz/
+ code: https://github.com/hadley/r4ds
+ image: thumbnails/teaching-learning/r4ds.png
+ categories: [book, r]
+ description: Canonical multi-format teaching book.
+- name: "Quarto: The Practical Guide"
+ slug: teaching
+ title: Learn Quarto from a book
+ author: Çetinkaya-Rundel & Wickham
+ live: https://quarto-tdg.org/
+ code: https://github.com/mine-cetinkaya-rundel/quarto-tdg
+ categories: [book]
+ image: thumbnails/teaching-learning/quarto-the-practical-guide.png
+ alt: "Quarto: The Practical Guide book welcome page with a chapter sidebar, table of contents, and the book cover."
+ description: Concept-first Quarto guide complementing the reference docs.
+- name: DES RAP Book
+ slug: teaching
+ title: Teach in two languages
+ author: Python Health Data Science
+ live: https://pythonhealthdatascience.github.io/des_rap_book/
+ categories: [book, r, python]
+ features: [Multilingual]
+ image: thumbnails/teaching-learning/des-rap-book.png
+ alt: DES RAP Book home with a hero banner over an introduction to reproducible discrete-event simulation in Python and R.
+ description: Per-page R/Python toggle; discrete-event simulation for health.
+- name: RevealJS demo
+ slug: teaching
+ title: Build HTML slides
+ author: Quarto team
+ live: https://quarto.org/docs/presentations/revealjs/demo/
+ code: https://github.com/quarto-dev/quarto-web/blob/main/docs/presentations/revealjs/demo/index.qmd
+ image: thumbnails/teaching-learning/revealjs.png
+ categories: [presentation, revealjs, html]
+ description: Beautiful interactive slide decks with Reveal.js.
+- name: Beamer
+ slug: teaching
+ title: Build PDF slides
+ live: https://quarto-dev.github.io/quarto-gallery/presentations/beamer/beamer.pdf
+ code: https://github.com/quarto-dev/quarto-gallery/blob/main/presentations/beamer/beamer.qmd
+ image: thumbnails/teaching-learning/beamer.png
+ categories: [presentation, beamer, pdf]
+ description: A LaTeX Beamer title slide and deck.
+- name: PowerPoint
+ slug: teaching
+ title: Build PowerPoint slides
+ live: https://quarto-dev.github.io/quarto-gallery/presentations/powerpoint/powerpoint.pptx
+ code: https://github.com/quarto-dev/quarto-gallery/blob/main/presentations/powerpoint/powerpoint.qmd
+ image: thumbnails/teaching-learning/powerpoint.png
+ categories: [presentation, powerpoint]
+ description: A native PowerPoint deck from Quarto.
+- name: Streamlining with R
+ slug: teaching
+ title: Give a workshop talk
+ author: Meghan Hall
+ live: https://meghan.rbind.io/slides/neair/neair.html
+ code: https://github.com/meghall06/personal-website/blob/master/static/slides/NEAIR/NEAIR.qmd
+ image: thumbnails/teaching-learning/streamlining-with-r.png
+ categories: [presentation, revealjs, r]
+ description: A conference talk deck with a custom title design.
+- name: An educator's perspective of the tidyverse
+ slug: teaching
+ title: Give a conference talk
+ author: Mine Çetinkaya-Rundel
+ live: https://mine-cetinkaya-rundel.github.io/tidyperspective/talks/dagstat-2022.html
+ code: https://github.com/mine-cetinkaya-rundel/tidyperspective/blob/main/talks/dagstat-2022.qmd
+ image: thumbnails/teaching-learning/educators-perspective-tidyverse.png
+ categories: [presentation, revealjs, r]
+ description: A talk on teaching with the tidyverse.
+- name: An anthology of experimental designs
+ slug: teaching
+ title: Present academic material
+ author: Emi Tanaka
+ live: https://emitanaka.org/slides/toronto2022/
+ code: https://github.com/emitanaka/talks/tree/master/Toronto2022
+ image: thumbnails/teaching-learning/anthology-experimental-designs.png
+ categories: [presentation, revealjs, r]
+ description: A statistics talk on experimental designs.
+- name: The untold story of palmerpenguins
+ slug: teaching
+ title: Tell a story in slides
+ author: Alison Presmanes Hill
+ live: https://apreshill.github.io/palmerpenguins-useR-2022/
+ code: https://github.com/apreshill/palmerpenguins-useR-2022
+ image: thumbnails/teaching-learning/penguins-story.png
+ categories: [presentation, revealjs, r]
+ description: Image-led storytelling slides.
+- name: Outrageously efficient EDA
+ slug: teaching
+ title: Teach a data workflow
+ author: Thomas Mock
+ live: https://jthomasmock.github.io/arrow-dplyr/
+ code: https://github.com/jthomasmock/arrow-dplyr
+ image: thumbnails/teaching-learning/arrow-dplyr.png
+ categories: [presentation, revealjs, r]
+ description: Efficient exploratory analysis with Arrow and dplyr.
+- name: Practical Deep Learning
+ slug: teaching
+ title: Run an online course
+ author: fast.ai
+ live: https://course.fast.ai/
+ code: https://github.com/fastai/course22/
+ image: thumbnails/teaching-learning/practical-deep-learning.png
+ categories: [course, website, python]
+ description: A full deep-learning course website.
+- name: Julia Workshop for Data Science
+ slug: teaching
+ title: Run a workshop site
+ author: Claudia Solís-Lemus
+ live: https://crsl4.github.io/julia-workshop/
+ code: https://github.com/crsl4/julia-workshop
+ image: thumbnails/teaching-learning/julia-workshop.png
+ categories: [course, website, julia]
+ description: A data-science workshop website.
+- name: LTM Data Workflows with Arrow
+ slug: teaching
+ title: Host workshop materials
+ author: Danielle Navarro
+ live: https://arrow-user2022.netlify.app/
+ code: https://github.com/djnavarro/arrow-user2022
+ image: thumbnails/teaching-learning/arrow-workshop.png
+ categories: [course, website, r]
+ description: A workshop site on large-data workflows with Arrow.
+- name: STA 210 - Regression Analysis
+ slug: teaching
+ title: Run a university course
+ author: Mine Çetinkaya-Rundel
+ live: https://sta210-s22.github.io/website/
+ code: https://github.com/sta210-s22/website
+ image: thumbnails/teaching-learning/sta210.png
+ categories: [course, website, r]
+ description: A course schedule and materials site.
+- name: Data Science in a Box
+ slug: teaching
+ title: Reuse a course platform
+ author: Mine Çetinkaya-Rundel
+ live: https://datasciencebox.org/
+ code: https://github.com/rstudio-education/datascience-box
+ image: thumbnails/teaching-learning/datascienceinabox.png
+ categories: [course, website, r]
+ description: A complete, reusable course infrastructure.
+- name: Python for Data Science
+ slug: teaching
+ title: Publish a course with notebooks
+ author: Lino Galiana
+ live: https://pythonds.linogaliana.fr/
+ code: https://github.com/linogaliana/python-datascientist
+ image: thumbnails/teaching-learning/linogaliana.png
+ categories: [course, website, python]
+ description: A French data-science course website with notebooks.
+- name: Hertie Coding Club
+ slug: teaching
+ title: Build a learning platform
+ author: Jorge Roa
+ live: https://www.hertiecodingclub.com/
+ code: https://github.com/jurjoroa/hcc-website
+ image: thumbnails/teaching-learning/hertie-coding-club.png
+ categories: [course, website]
+ description: A platform to learn coding skills.
+- name: 2021 Cloud Hackathon
+ slug: teaching
+ title: Run an event site
+ author: NASA Openscapes
+ live: https://nasa-openscapes.github.io/2021-Cloud-Hackathon/
+ code: https://github.com/nasa-openscapes/2021-Cloud-Hackathon
+ image: thumbnails/teaching-learning/2021-cloud-hackathon.png
+ categories: [course, website]
+ features: [Event]
+ description: An event site with agency logos and materials.
+- name: Making shareable docs with Quarto
+ slug: teaching
+ title: Publish a tutorial
+ author: Openscapes
+ live: https://openscapes.github.io/quarto-website-tutorial/
+ code: https://github.com/openscapes/quarto-website-tutorial
+ image: thumbnails/teaching-learning/opescapes-quarto-tutorial.png
+ categories: [course, website]
+ features: [Tutorial]
+ description: A tutorial site on building shareable docs.
+- name: Modern Polars
+ slug: teaching
+ title: Teach a library with a book
+ author: Kevin Heavey
+ live: https://kevinheavey.github.io/modern-polars/
+ code: https://github.com/kevinheavey/modern-polars
+ image: thumbnails/teaching-learning/modern-polars.png
+ categories: [book, python]
+ description: A Polars-versus-Pandas book with side-by-side code.
+- name: Hands on Programming with R
+ slug: teaching
+ title: Publish an intro textbook
+ author: Garrett Grolemund
+ live: https://jjallaire.github.io/hopr/
+ code: https://github.com/jjallaire/hopr/
+ image: thumbnails/teaching-learning/hopr.png
+ categories: [book, r]
+ description: An introductory R programming book.
+- name: Visualization Curriculum
+ slug: teaching
+ title: Teach with notebooks
+ live: https://jjallaire.github.io/visualization-curriculum
+ code: https://github.com/jjallaire/visualization-curriculum
+ image: thumbnails/teaching-learning/jupyter.png
+ categories: [book, jupyter]
+ features: [Notebooks]
+ description: An interactive data-visualisation curriculum.
+- name: Python for Data Analysis, 3E
+ slug: teaching
+ title: Publish an O'Reilly book
+ author: Wes McKinney
+ live: https://wesmckinney.com/book/
+ image: thumbnails/teaching-learning/python-for-data.png
+ categories: [book, python]
+ description: The third edition of Python for Data Analysis.
+- name: mlr3book
+ slug: teaching
+ title: Document an ML ecosystem
+ author: mlr-org
+ live: https://mlr3book.mlr-org.com/
+ code: https://github.com/mlr-org/mlr3book/tree/main/book/
+ image: thumbnails/teaching-learning/mlr3book.png
+ categories: [book, r]
+ description: A book on the mlr3 machine-learning ecosystem.
+- name: Geocomputation with Python
+ slug: teaching
+ title: Teach a domain with a book
+ author: geocompx
+ live: https://py.geocompx.org/
+ code: https://github.com/geocompx/py
+ image: thumbnails/teaching-learning/geocompy.png
+ categories: [book, python]
+ description: A geographic-data-science book in Python.
+- name: Cookbook Polars for R
+ slug: teaching
+ title: Publish a cookbook
+ author: Damien Dotta
+ live: https://ddotta.github.io/cookbook-rpolars/
+ code: https://github.com/ddotta/cookbook-rpolars
+ image: thumbnails/teaching-learning/cookbook-rpolars.png
+ categories: [book, r]
+ description: A recipe-style Polars-for-R cookbook.
+- name: Introduction to NFL Analytics with R
+ slug: teaching
+ title: Teach analytics with a book
+ author: Brad Congelio
+ live: https://bradcongelio.com/nfl-analytics-with-r-book/
+ code: https://github.com/bcongelio/nfl-analytics-with-r-book
+ image: thumbnails/teaching-learning/nfl-analytics-with-r.PNG
+ categories: [book, r]
+ description: An applied sports-analytics book.
+- name: learning statistics with jamovi
+ slug: teaching
+ title: Publish an open textbook
+ author: Danielle Navarro & David Foxcroft
+ live: https://davidfoxcroft.github.io/lsj-book/
+ code: https://github.com/davidfoxcroft/lsj-book
+ image: thumbnails/teaching-learning/books_lsj.png
+ categories: [book]
+ description: An open statistics textbook using jamovi.
+- name: Analyse et conception de logiciels
+ slug: teaching
+ title: Teach in another language
+ author: Christopher Fuhrman
+ live: https://fuhrmanator.github.io/log210-ndc-quarto/
+ code: https://github.com/fuhrmanator/log210-ndc-quarto/
+ image: thumbnails/teaching-learning/book-analyse-conceptions-french.png
+ categories: [book]
+ features: [Multilingual]
+ description: A French software-design course book.
diff --git a/docs/gallery/index.qmd b/docs/gallery/index.qmd
index 0545448db6..66c78d6e6b 100644
--- a/docs/gallery/index.qmd
+++ b/docs/gallery/index.qmd
@@ -1,130 +1,42 @@
---
-pagetitle: "Gallery"
-toc: false
-image: articles/advanced-layout-pdf.png
+title: "Gallery"
+body-classes: gallery gallery-landing sec-gallery
+sidebar: false
search: false
-execute:
- echo: false
-listing:
- - id: gallery
- template: gallery.ejs
- contents: gallery.yml
description: |
- A gallery of example documents, websites, books, and presentations created with Quarto.
+ A gallery of real-world examples created with Quarto, organised by what you want to make.
+listing:
+ - id: featured
+ template: assets/_featured.ejs.md
+ contents: data/featured.yml
+ - id: browse-chips
+ template: assets/_browse-chips.ejs.md
+ contents:
+ - data/reports-analytics.yml
+ - data/dashboards-monitoring.yml
+ - data/research-scholarship.yml
+ - data/teaching-learning.yml
+ - data/software-documentation.yml
+ - data/personal-community.yml
aliases:
- /docs/dashboards/examples/index.html
- /docs/dashboards/examples/
---
-::: {#hero-banner .column-screen}
-::: {.grid .column-page}
-::: {.headline .g-col-lg-6 .g-col-12 .g-col-md-12}
-::: {.h1 role="heading" aria-level="1"}
-Gallery
-:::
-
-
-Quarto can produce a wide variety of output formats. Here are some examples:
-
-- [Articles & Reports](#articles-reports)
-- [Presentations](#presentations)
-- [Dashboards](#dashboards)
-- [Websites](#websites)
-- [Books](#books)
-- [Interactive Docs](#interactive-docs)
-:::
+::: {.gal-hero}
+## What do you want to make? {.no-anchor}
-```{r}
-#| classes: '.g-col-lg-6 .g-col-12 .g-col-md-12'
-#| warning: false
-source("carousel.R")
-carousel("gallery-carousel", 5000,
- yaml.load_file("carousel.yml"))
-```
+::: {.lede}
+Ready to make something with Quarto? If you already know the kind of content you want, choose a category below and browse its examples.
:::
:::
-::: {#gallery .column-page}
+::: {#featured}
:::
-```{=html}
-
-```
+::: {#browse-chips}
+:::
diff --git a/docs/gallery/legacy/README.md b/docs/gallery/legacy/README.md
new file mode 100644
index 0000000000..b84e7f8da2
--- /dev/null
+++ b/docs/gallery/legacy/README.md
@@ -0,0 +1,8 @@
+# Legacy gallery
+
+`gallery.ejs` and `gallery.yml` are the previous gallery implementation, kept only as the worked example for the custom-listings documentation.
+
+`docs/websites/website-listings-custom.qmd` links to both files on GitHub as the reference template and metadata for a custom listing.
+
+Do not delete this directory.
+Removing it would break those links, even though nothing here is rendered as part of the site.
diff --git a/docs/gallery/gallery.ejs b/docs/gallery/legacy/gallery.ejs
similarity index 100%
rename from docs/gallery/gallery.ejs
rename to docs/gallery/legacy/gallery.ejs
diff --git a/docs/gallery/gallery.yml b/docs/gallery/legacy/gallery.yml
similarity index 81%
rename from docs/gallery/gallery.yml
rename to docs/gallery/legacy/gallery.yml
index fe4fe2944d..965fcaca72 100644
--- a/docs/gallery/gallery.yml
+++ b/docs/gallery/legacy/gallery.yml
@@ -7,31 +7,31 @@
subtitle: for web publishing
href: https://quarto-dev.github.io/quarto-gallery/articles/html/html.html
code: https://github.com/quarto-dev/quarto-gallery/blob/main/articles/html/html.qmd
- thumbnail: articles/articles-html.png
+ thumbnail: thumbnails/reports-analytics/html.png
alt: An HTML article page showing an interactive time-series chart with a table-of-contents sidebar
- title: PDF
subtitle: for high quality print
href: https://github.com/nmfs-opensci/quarto_titlepages/blob/main/example_1.pdf
code: https://github.com/nmfs-opensci/quarto_titlepages/blob/main/example_1.qmd
- thumbnail: articles/articles-pdf.png
+ thumbnail: thumbnails/research-scholarship/pdf.png
alt: A formatted PDF title page with a logo, article title, authors, and affiliations
- title: MS Word
subtitle: for Office workflows
href: https://quarto-dev.github.io/quarto-gallery/articles/msword/msword.docx
code: https://github.com/quarto-dev/quarto-gallery/blob/main/articles/msword/msword.qmd
- thumbnail: articles/articles-msword.png
+ thumbnail: thumbnails/reports-analytics/msword.png
alt: A Word document page showing a Python code block and a polar line plot
- title: HTML
subtitle: with advanced layout
href: https://quarto-dev.github.io/quarto-gallery/page-layout/tufte.html
code: https://github.com/quarto-dev/quarto-gallery/blob/main/page-layout/tufte.qmd
- thumbnail: articles/advanced-layout-html.png
+ thumbnail: thumbnails/reports-analytics/advanced-layout-html.png
alt: A Tufte-style HTML article with figures and notes laid out in the right margin
- title: PDF
subtitle: with advanced layout
href: https://quarto-dev.github.io/quarto-gallery/page-layout/tufte.pdf
code: https://github.com/quarto-dev/quarto-gallery/blob/main/page-layout/tufte.qmd
- thumbnail: articles/advanced-layout-pdf.png
+ thumbnail: thumbnails/reports-analytics/advanced-layout-pdf.png
alt: A Tufte-style PDF page with margin notes and a full-width faceted plot
- category: Presentations
@@ -42,49 +42,49 @@
subtitle: HTML presentations
href: https://quarto.org/docs/presentations/revealjs/demo/
code: https://github.com/quarto-dev/quarto-web/blob/main/docs/presentations/revealjs/demo/index.qmd
- thumbnail: presentations/presentations-revealjs.png
+ thumbnail: thumbnails/teaching-learning/revealjs.png
alt: "Minimal title slide reading Quarto Presentations, subtitled create beautiful interactive slide decks with Reveal.js"
- title: Beamer
subtitle: PDF presentations
href: https://quarto-dev.github.io/quarto-gallery/presentations/beamer/beamer.pdf
code: https://github.com/quarto-dev/quarto-gallery/blob/main/presentations/beamer/beamer.qmd
- thumbnail: presentations/presentations-beamer.png
+ thumbnail: thumbnails/teaching-learning/beamer.png
alt: "Beamer title slide for Pop Songs and Political Science with an orange Clemson University logo"
- title: PowerPoint
subtitle: presentations
href: https://quarto-dev.github.io/quarto-gallery/presentations/powerpoint/powerpoint.pptx
code: https://github.com/quarto-dev/quarto-gallery/blob/main/presentations/powerpoint/powerpoint.qmd
- thumbnail: presentations/presentations-powerpoint.png
+ thumbnail: thumbnails/teaching-learning/powerpoint.png
alt: "PowerPoint title slide on administering RStudio in production, blue hex-pattern sidebar and RStudio logo"
- title: Streamlining with R
href: https://meghan.rbind.io/slides/neair/neair.html
code: https://github.com/meghall06/personal-website/blob/master/static/slides/NEAIR/NEAIR.qmd
- thumbnail: presentations/presentations-streamlining-with-r.png
+ thumbnail: thumbnails/teaching-learning/streamlining-with-r.png
alt: "Bold red title Streamlining with R centered on a muted tan background with author details"
- title: An educator's perspective of the tidyverse
href: https://mine-cetinkaya-rundel.github.io/tidyperspective/talks/dagstat-2022.html
code: https://github.com/mine-cetinkaya-rundel/tidyperspective/blob/main/talks/dagstat-2022.qmd
- thumbnail: presentations/presentations-educators-perspective-tidyverse.png
+ thumbnail: thumbnails/teaching-learning/educators-perspective-tidyverse.png
alt: "Large blue lowercase title an educator's perspective of the tidyverse with author and link"
- title: An anthology of experimental designs
href: https://emitanaka.org/slides/toronto2022/
code: https://github.com/emitanaka/talks/tree/master/Toronto2022
- thumbnail: presentations/presentations-anthology-experimental-designs.png
+ thumbnail: thumbnails/teaching-learning/anthology-experimental-designs.png
alt: "Centered title An anthology of experimental designs by Emi Tanaka with Monash University logo"
- title: The untold story of palmerpenguins
href: https://apreshill.github.io/palmerpenguins-useR-2022/
code: https://github.com/apreshill/palmerpenguins-useR-2022
- thumbnail: presentations/presentations-penguins-story.png
+ thumbnail: thumbnails/teaching-learning/penguins-story.png
alt: "Title over a moody Antarctic photo of penguins on dark rocks under grey clouds"
- title: Outrageously efficient EDA
href: https://jthomasmock.github.io/arrow-dplyr/
code: https://github.com/jthomasmock/arrow-dplyr
- thumbnail: presentations/presentations-arrow-dplyr.png
+ thumbnail: thumbnails/teaching-learning/arrow-dplyr.png
alt: "Efficient exploratory data analysis title beside black Apache Arrow and dplyr hex logos"
- title: Improvements in textrecipes
href: https://emilhvitfeldt.github.io/talk-useR2022-textrecipes/
code: https://github.com/EmilHvitfeldt/talk-useR2022-textrecipes
- thumbnail: presentations/presentations-textrecipes.png
+ thumbnail: thumbnails/legacy/presentations-textrecipes.png
alt: "Tan title on slate grey reading improvements in text preprocessing using textrecipes, last word in newsprint texture"
- category: Dashboards
@@ -93,119 +93,119 @@
subtitle: Python
href: https://jjallaire.github.io/stock-explorer-dashboard/
code: https://github.com/jjallaire/stock-explorer-dashboard/blob/main/dashboard.qmd
- thumbnail: dashboards/stock-explorer-dashboard.png
+ thumbnail: thumbnails/legacy/stock-explorer-dashboard.png
alt: "Stock tracker with price and change value boxes above a candlestick chart and quote table"
- title: Gapminder
subtitle: Python
href: https://jjallaire.github.io/gapminder-dashboard/
code: https://github.com/jjallaire/gapminder-dashboard/blob/main/gapminder.qmd
- thumbnail: dashboards/gapminder-dashboard.png
+ thumbnail: thumbnails/dashboards-monitoring/gapminder-dashboard.png
alt: "GDP-versus-life-expectancy bubble scatterplots by continent above population and life expectancy line charts"
- title: Customer Churn
subtitle: Python
href: https://jjallaire.github.io/customer-churn-dashboard/
code: https://github.com/jjallaire/customer-churn-dashboard/blob/main/dashboard.qmd
- thumbnail: dashboards/customer-churn-dashboard.png
+ thumbnail: thumbnails/dashboards-monitoring/customer-churn-dashboard.png
alt: "Churn dashboard with three percentage value boxes, a line chart, box plots, and a data table"
- title: NFL Injuries
subtitle: Python
href: https://jjallaire.github.io/nfl-injuries-dashboard/
code: https://github.com/jjallaire/nfl-injuries-dashboard/blob/main/nfl-injuries.qmd
- thumbnail: dashboards/nfl-injuries-dashboard.png
+ thumbnail: thumbnails/dashboards-monitoring/nfl-injuries-dashboard.png
alt: "Three colored injury value boxes above a status line chart and a yearly bar chart"
- title: Housing Market at a Glance
subtitle: Python
href: https://ivelasq.github.io/mortgage-dashboard/
code: https://github.com/ivelasq/mortgage-dashboard/blob/main/index.qmd
- thumbnail: dashboards/housing-market-dashboard.png
+ thumbnail: thumbnails/dashboards-monitoring/housing-market-dashboard.png
alt: "Mortgage-rate value boxes beside an animated US choropleth map, data table, and interest-rate line charts"
- title: Restaurant Inspections
subtitle: Python
href: https://www.isabelizimm.me/vetiverdashboard/
code: https://github.com/isabelizimm/vetiverdashboard/blob/main/index.qmd
- thumbnail: dashboards/restaurant-dashboard.png
+ thumbnail: thumbnails/dashboards-monitoring/restaurant-dashboard.png
alt: "Model card page with blue and green title tiles above scikit-learn model details and code"
- title: Penguins
subtitle: Python (Shiny)
href: https://jjallaire.shinyapps.io/penguins-dashboard/
code: https://github.com/jjallaire/penguins-dashboard/blob/main/penguins.qmd
- thumbnail: dashboards/penguins-dashboard.png
+ thumbnail: thumbnails/dashboards-monitoring/penguins-dashboard.png
alt: "Sidebar of species and island filters beside two overlapping penguin density curve plots"
- title: Retirement
subtitle: Python (Shiny w/ Pyodide)
href: https://wch.github.io/retirement-simulation-dashboard/
code: https://github.com/wch/retirement-simulation-dashboard
- thumbnail: dashboards/retirement-gallery.png
+ thumbnail: thumbnails/dashboards-monitoring/retirement-gallery.png
alt: "Side-by-side scenarios with investment sliders above Monte Carlo capital projection and depletion line charts"
- title: New Zealand Earthquakes
subtitle: R
href: https://pub.demo.posit.team/public/nz-quakes/
code: https://github.com/cwickham/quakes/blob/main/quakes.qmd
- thumbnail: dashboards/nz-quakes-dashboard.png
+ thumbnail: thumbnails/dashboards-monitoring/nz-quakes-dashboard.png
alt: "Earthquake value boxes and a color-coded magnitude table beside a Leaflet map of New Zealand"
- title: MyNorfolk Requests
subtitle: R
href: https://grrrck.quarto.pub/mynorfolk-dash/
code: https://github.com/gadenbuie/mynorfolk-dash/blob/main/index.qmd
- thumbnail: dashboards/mynorfolk-dash.png
+ thumbnail: thumbnails/legacy/mynorfolk-dash.png
alt: "Four status value boxes above a horizontal bar chart of requests and two stacked hourly histograms"
- title: Labor and Delivery
subtitle: R
href: https://mine-cetinkaya-rundel.github.io/ld-dashboard/
code: https://github.com/mine-cetinkaya-rundel/ld-dashboard/blob/main/dashboard.qmd
- thumbnail: dashboards/ld-dashboard.png
+ thumbnail: thumbnails/dashboards-monitoring/ld-dashboard.png
alt: "Hospital sidebar and three birth-stat value boxes above a delivery table, line chart, and stacked bar charts"
- title: Diamonds
subtitle: R (Shiny)
href: https://jjallaire.shinyapps.io/diamonds/
code: https://github.com/jjallaire/diamonds-dashboard/blob/main/diamonds.qmd
- thumbnail: dashboards/diamonds-dashboard.png
+ thumbnail: thumbnails/dashboards-monitoring/diamonds-dashboard.png
alt: "Sidebar of plot controls beside a jittered scatterplot of diamond carat by cut colored by clarity"
- title: Penguins
subtitle: Observable
href: https://jjallaire.github.io/ojs-penguins-dashboard/
code: https://github.com/jjallaire/ojs-penguins-dashboard/blob/main/penguins.qmd
- thumbnail: dashboards/ojs-penguins-dashboard.png
+ thumbnail: thumbnails/dashboards-monitoring/ojs-penguins-dashboard.png
alt: "Sidebar filters beside a grid of penguin body-mass histograms faceted by species and sex"
- title: Clickable Weather Forecast Map
subtitle: Observable
href: https://cscheid.github.io/quarto-dashboard-ojs-examples/weather.html
code: https://github.com/cscheid/quarto-dashboard-ojs-examples/blob/main/weather.qmd
- thumbnail: dashboards/weather-ojs-dashboard.jpg
+ thumbnail: thumbnails/dashboards-monitoring/weather-ojs-dashboard.jpg
alt: "Clickable grey US map beside a weekly weather forecast table for Trenton, New Jersey"
- title: Interactive Linked Views
subtitle: Observable
href: https://cscheid.github.io/quarto-dashboard-ojs-examples/flights.html
code: https://github.com/cscheid/quarto-dashboard-ojs-examples/blob/main/flights.qmd
- thumbnail: dashboards/ojs-flights.png
+ thumbnail: thumbnails/dashboards-monitoring/ojs-flights.png
alt: "Three linked flight histograms of arrival time, delay, and distance with drag selections highlighted"
- title: Dashing Through the Snow
subtitle: Python
href: https://mine.quarto.pub/dashing-through-snow-py/
code: https://github.com/mine-cetinkaya-rundel/dashing-through-snow/
- thumbnail: dashboards/dashing-through-snow.png
+ thumbnail: thumbnails/dashboards-monitoring/dashing-through-snow.png
alt: "Weather sidebar and three date and snow value boxes above snowfall, depth, and temperature line charts"
- title: Olympic Games
subtitle: R & Python
href: https://mine.quarto.pub/olympic-games-py
code: https://github.com/posit-conf-2024/olympicdash
- thumbnail: dashboards/olympics-game.png
+ thumbnail: thumbnails/dashboards-monitoring/olympics-game.png
alt: "Stacked medal-by-sport bar chart, medal value boxes, a yearly line chart, and a country medal table"
- category: Websites
@@ -216,210 +216,210 @@
subtitle: from fast.ai
href: https://course.fast.ai/
code: https://github.com/fastai/course22/
- thumbnail: websites/websites-practical-deep-learning.png
+ thumbnail: thumbnails/teaching-learning/practical-deep-learning.png
alt: "Course landing page with blue header and a pencil sketch of a bunny at a computer"
- title: "Ibis"
subtitle: Documentation
href: https://ibis-project.org
code: https://github.com/ibis-project/ibis
- thumbnail: websites/websites-ibis.png
+ thumbnail: thumbnails/software-documentation/ibis.png
alt: "Centered hero with a black ink ibis bird sketch above install commands and dark buttons"
- title: quarto.org
subtitle: documentation
href: https://quarto.org
code: https://github.com/quarto-dev/quarto-web/
- thumbnail: websites/websites-quarto.png
+ thumbnail: thumbnails/software-documentation/quarto.png
alt: "Documentation page with left sidebar navigation and a numbered introduction to the publishing system"
- title: NASA & OpenScapes
subtitle: website
href: https://nasa-openscapes.github.io/
code: https://github.com/NASA-Openscapes/NASA-Openscapes.github.io
- thumbnail: websites/websites-nasa-openscapes.png
+ thumbnail: thumbnails/personal-community/nasa-openscapes.png
alt: "Centered NASA meatball and orange Openscapes hexagon logos above Earth science project text"
- title: nbdev
subtitle: from fast.ai
href: https://nbdev.fast.ai/
code: https://github.com/fastai/nbdev
- thumbnail: websites/websites-nbdev.png
+ thumbnail: thumbnails/software-documentation/nbdev.png
alt: "Dark landing page with bold blue headline and a colorful diagram linking GitHub, Jupyter, and Quarto"
- title: Julia Workshop for Data Science
subtitle: course
href: https://crsl4.github.io/julia-workshop/
code: https://github.com/crsl4/julia-workshop
- thumbnail: websites/websites-julia-workshop.png
+ thumbnail: thumbnails/teaching-learning/julia-workshop.png
alt: "Course page with left contents sidebar and a bulleted welcome to the data science workshop"
- title: "devito"
subtitle: devito documentation
href: https://www.devitoproject.org
- thumbnail: websites/websites-devito.png
+ thumbnail: thumbnails/software-documentation/devito.png
alt: "Documentation page showing two 3D seismic imaging volumes on black backgrounds side by side"
- title: Beatriz Milz
subtitle: personal website + blog
href: https://beamilz.com/
code: https://github.com/beatrizmilz/blog-en
- thumbnail: websites/websites-bea-milz.png
+ thumbnail: thumbnails/personal-community/bea-milz.png
alt: "Purple-header blog listing posts in English with a category word cloud on the right"
- title: Masiello Group
subtitle: academic research group website
href: https://faculty.washington.edu/masiello/
code: https://github.com/MasielloGroup/MasielloGroupWebsite
- thumbnail: websites/websites-masiello-group.png
+ thumbnail: thumbnails/personal-community/masiello-group.png
alt: "Research group page with a child drawing physics equations on a large whiteboard"
- title: Mike Mahoney
subtitle: personal website + blog
href: https://www.mm218.dev/
code: https://github.com/mikemahoney218/mm218.dev
- thumbnail: websites/websites-mike-mahoney.png
+ thumbnail: thumbnails/personal-community/mike-mahoney.png
alt: "Personal site with a photo of a man seated on rocks beside a bio and education"
- title: Chris von Csefalvay
subtitle: personal website & blog
href: https://chrisvoncsefalvay.com/
code: https://github.com/chrisvoncsefalvay/chrisvoncsefalvay.github.io
- thumbnail: websites/websites-chris-von-csefalvay.png
+ thumbnail: thumbnails/personal-community/chris-von-csefalvay.png
alt: "Personal bio page with a large headshot of a man in glasses beside biography text"
- title: ForBo7 // Salman Naqvi
subtitle: personal site + blog + works
href: https://forbo7.github.io
code: https://github.com/ForBo7/forbo7.github.io
- thumbnail: websites/websites-forbo7-landing.png
+ thumbnail: thumbnails/personal-community/forbo7-landing.png
alt: "Minimal landing page with a purple cartoon avatar above blog and playground project columns"
- title: LTM Data Workflows w/ Arrow
subtitle: workshop
href: https://arrow-user2022.netlify.app/
code: https://github.com/djnavarro/arrow-user2022
- thumbnail: websites/websites-arrow-workshop.png
+ thumbnail: thumbnails/teaching-learning/arrow-workshop.png
alt: "Workshop page with dark header and the black Apache Arrow hexagon logo on the right"
- title: STA 210 - Regression Analysis
subtitle: course
href: https://sta210-s22.github.io/website/
code: https://github.com/sta210-s22/website
- thumbnail: websites/websites-sta210.png
+ thumbnail: thumbnails/teaching-learning/sta210.png
alt: "Course schedule page with a hexagon logo and a weekly table of topics and icons"
- title: The MockUp
subtitle: blog
href: https://themockup.blog/
code: https://github.com/jthomasmock/themockup-blog
- thumbnail: websites/websites-mockup.png
+ thumbnail: thumbnails/personal-community/mockup.png
alt: "Blog listing posts with dog and camera thumbnails and a category list on the right"
- title: mrgsolve
subtitle: documentation
href: https://mrgsolve.org/
code: https://github.com/metrumresearchgroup/mrgsolve
- thumbnail: websites/websites-mrgsolve.png
+ thumbnail: thumbnails/software-documentation/mrgsolve.png
alt: "Documentation homepage with green headline and a teal MRGSOLVE hexagon logo describing the R package"
- title: 2021 Cloud Hackathon
subtitle: event
href: https://nasa-openscapes.github.io/2021-Cloud-Hackathon/
code: https://github.com/nasa-openscapes/2021-Cloud-Hackathon
- thumbnail: websites/websites-2021-cloud-hackathon.png
+ thumbnail: thumbnails/teaching-learning/2021-cloud-hackathon.png
alt: "Event page with sidebar, agency logos, and a strip of satellite Earth imagery below the title"
- title: R-Manuals
subtitle: documentation
href: https://rstudio.github.io/r-manuals/
code: https://github.com/rstudio/r-manuals
- thumbnail: websites/websites-r-manuals.png
+ thumbnail: thumbnails/software-documentation/r-manuals.png
alt: "Documentation homepage with blue header and a bulleted list of linked R manual titles"
- title: Quarto tip a day
subtitle: blog
href: https://mine-cetinkaya-rundel.github.io/quarto-tip-a-day/
code: https://github.com/mine-cetinkaya-rundel/quarto-tip-a-day
- thumbnail: websites/websites-quartotip.png
+ thumbnail: thumbnails/personal-community/quartotip.png
alt: "A blog listing page with three post cards above a right-hand category sidebar"
- title: Making shareable docs with Quarto
subtitle: tutorial
href: https://openscapes.github.io/quarto-website-tutorial/
code: https://github.com/openscapes/quarto-website-tutorial
- thumbnail: websites/websites-opescapes-quarto-tutorial.png
+ thumbnail: thumbnails/teaching-learning/opescapes-quarto-tutorial.png
alt: "A tutorial site with an orange Openscapes hexagon logo beside a welcome section"
- title: Data Science in a Box
subtitle: course website
href: https://datasciencebox.org/
code: https://github.com/rstudio-education/datascience-box
- thumbnail: websites/websites-datascienceinabox.png
+ thumbnail: thumbnails/teaching-learning/datascienceinabox.png
alt: "A course welcome page with an isometric pink and blue Data Science in a Box cube"
- title: Wannabe Rstats-fu
subtitle: blog
href: https://yutani.rbind.io/
code: https://github.com/rbind/yutani
- thumbnail: websites/websites-wannabe-rstats-fu.png
+ thumbnail: thumbnails/personal-community/wannabe-rstats-fu.png
alt: "A teal-headed R blog listing posts on Rust and extendr beside a category sidebar"
- title: Hamel Husain's Professional Site
subtitle: blog + notes
href: https://hamel.dev
code: https://github.com/hamelsmu/hamel/
- thumbnail: websites/websites-hamel.png
+ thumbnail: thumbnails/personal-community/hamel.png
alt: "A dark personal site with a headshot, bio, and a table of blog posts"
- title: Python for Data Science
subtitle: course website + notebooks
href: https://pythonds.linogaliana.fr/
code: https://github.com/linogaliana/python-datascientist
- thumbnail: websites/websites-linogaliana.png
+ thumbnail: thumbnails/teaching-learning/linogaliana.png
alt: "A dark French data-science course page with a Python-logo word cloud and post cards"
- title: fluidsyndicate
subtitle: open source material for performances
href: https://fluidsyndicate.com
code: https://codeberg.org/jcolomb/fluidsyndicate
- thumbnail: websites/websites-fluidsyndicate.png
+ thumbnail: thumbnails/personal-community/fluidsyndicate.png
alt: "A recipe gallery of photo tiles showing hands stretching translucent slime"
- title: Real World Data Science
subtitle: Ethical, impactful data science by the RSS
href: https://realworlddatascience.net/
code: https://github.com/realworlddatascience/realworlddatascience.github.io
- thumbnail: websites/websites-real-world-data-science.png
+ thumbnail: thumbnails/personal-community/real-world-data-science.png
alt: "A hero with an illustrated woman writing beside an AI-classifier headline block"
- title: Hertie Coding Club
subtitle: Website platform to learn coding skills
href: https://www.hertiecodingclub.com/
code: https://github.com/jurjoroa/hcc-website
- thumbnail: websites/websites-hertie-coding-club.png
+ thumbnail: thumbnails/teaching-learning/hertie-coding-club.png
alt: "A full-bleed dark blue starfield hero welcoming visitors to Hertie Coding Club"
- title: Daniel Kapitan's professional site
subtitle: Homepage with long-scroll, project portfolio and blog
code: https://github.com/dkapitan/dkapitan.github.io
href: https://kapitan.net
- thumbnail: websites/websites-dkapitan.png
+ thumbnail: thumbnails/personal-community/dkapitan.png
alt: "A minimal portfolio with a large smiling headshot and a data-and-AI tagline"
- title: iPardalis
subtitle: Ecommerce Website
href: https://ipardalis.com/
code: https://github.com/Dripdrop12/ipardalis
- thumbnail: websites/websites-ipardalis.png
+ thumbnail: thumbnails/personal-community/ipardalis.png
alt: "An ecommerce page with a grid of vivid panther chameleon photos and a social feed"
- title: Vistales
subtitle: "Pakistan’s Data Insights: Unveiling the Stories Behind Numbers"
href: https://vistales.github.io/vistales
code: https://github.com/Vistales/Home
- thumbnail: websites/websites-vistales.png
+ thumbnail: thumbnails/personal-community/vistales.png
alt: "A pink gradient landing page with the huge serif wordmark Vistales centered"
- title: ALA Labs
subtitle: Website for ecological dataviz, analysis & research
href: https://labs.ala.org.au/
code: https://github.com/AtlasOfLivingAustralia/ala-labs
- thumbnail: websites/website-ala-labs.png
+ thumbnail: thumbnails/personal-community/website-ala-labs.png
alt: "A tree frog peering through green reeds behind the large ALA Labs title"
- title: NHS-R community
subtitle: Promoting the use of R and open analytics in health and care
href: https://nhsrcommunity.com
code: https://github.com/nhs-r-community/nhs-r-community
- thumbnail: websites/nhs-r-website.png
+ thumbnail: thumbnails/personal-community/nhs-r-website.png
alt: "A homepage with an SPC control chart and card grids for blog and book links"
- title: Mickaël CANOUIL
subtitle: A data science blog and portfolio by Mickaël CANOUIL
href: https://mickael.canouil.fr
code: https://github.com/mcanouil/mickael.canouil.fr
- thumbnail: websites/website-mickael.canouil.fr.png
+ thumbnail: thumbnails/personal-community/mcanouil.png
alt: "A dark navy about page with a gold-framed headshot and biostatistician bio"
- title: Quarto Extensions
subtitle: Quarto Extensions listing via GitHub API
href: https://m.canouil.dev/quarto-extensions/
code: https://github.com/mcanouil/quarto-extensions
- thumbnail: websites/website-m.canouil.dev_quarto-extensions.png
- alt: "A dark extensions directory with a search bar and three-column grid of listing cards"
+ thumbnail: thumbnails/software-documentation/quarto-extensions.png
+ alt: "An extensions directory with a search bar and three-column grid of listing cards"
- title: rainbowR
subtitle: Community for LGBTQ+ folks who code in R
href: https://rainbowr.org/
code: https://github.com/r-lgbtq/rainbowr.org
- thumbnail: websites/websites-rainbowr.png
+ thumbnail: thumbnails/legacy/websites-rainbowr.png
alt: "A mission statement in bold rainbow words between two diagonal rainbow banners"
- category: Books
@@ -429,101 +429,101 @@
- title: Modern Polars
href: https://kevinheavey.github.io/modern-polars/
code: https://github.com/kevinheavey/modern-polars
- thumbnail: books/modern-polars.png
+ thumbnail: thumbnails/teaching-learning/modern-polars.png
alt: "A book landing page with a cartoon polar bear logo and Polars-versus-Pandas preface text"
- title: Hands on Programming with R
href: https://jjallaire.github.io/hopr/
code: https://github.com/jjallaire/hopr/
- thumbnail: websites/websites-hopr.png
+ thumbnail: thumbnails/teaching-learning/hopr.png
alt: "A website welcome page beside the red O'Reilly vulture cover of Hands-On Programming with R"
- title: Visualization Curriculum
href: https://jjallaire.github.io/visualization-curriculum
code: https://github.com/jjallaire/visualization-curriculum
- thumbnail: websites/websites-jupyter.png
+ thumbnail: thumbnails/teaching-learning/jupyter.png
alt: "A curriculum site with a blue and orange histogram logo and interactive-notebook introduction text"
- title: Python for Data Analysis, 3E
href: https://wesmckinney.com/book/
- thumbnail: books/books-python-for-data.png
+ thumbnail: thumbnails/teaching-learning/python-for-data.png
alt: "A book page showing the O'Reilly cover with a brown rodent for Python for Data Analysis"
- title: R for Data Science, 2E
href: https://r4ds.hadley.nz/
code: https://github.com/hadley/r4ds/
- thumbnail: books/books-r4ds.png
+ thumbnail: thumbnails/teaching-learning/r4ds.png
alt: "A welcome page beside the red O'Reilly cover featuring a green kakapo parrot"
- title: R Packages
href: https://r-pkgs.org/
code: https://github.com/hadley/r-pkgs/
- thumbnail: books/books-r-pkgs.png
+ thumbnail: thumbnails/software-documentation/r-pkgs.png
alt: "A welcome page next to the red O'Reilly R Packages cover showing a perched eagle"
- title: mlr3book
href: https://mlr3book.mlr-org.com/
code: https://github.com/mlr-org/mlr3book/tree/main/book/
- thumbnail: books/books-mlr3book.png
+ thumbnail: thumbnails/teaching-learning/mlr3book.png
alt: "A machine-learning book quickstart page listing many authors above R code examples"
- title: Telling Stories with Data
href: https://tellingstorieswithdata.com/
code: https://github.com/RohanAlexander/telling_stories
- thumbnail: books/books-telling-stories.png
+ thumbnail: thumbnails/legacy/books-telling-stories.png
alt: "A preface page beside a black book cover showing a blazing campfire at night"
- title: Geocomputation with Python
href: https://py.geocompx.org/
code: https://github.com/geocompx/py
- thumbnail: books/geocompy.png
+ thumbnail: thumbnails/teaching-learning/geocompy.png
alt: "A welcome page for a Python geographic-data book with chapter list and GitHub build badges"
- title: utilitR documentation (French)
href: https://book.utilitr.org/
code: https://github.com/InseeFrLab/utilitR
- thumbnail: books/utilitr.png
+ thumbnail: thumbnails/software-documentation/utilitr.png
alt: "A French documentation page with a teal hexagon logo of an orange toolbox of tools"
- title: Analyse et conception de logiciels (French)
href: https://fuhrmanator.github.io/log210-ndc-quarto/
code: https://github.com/fuhrmanator/log210-ndc-quarto/
- thumbnail: books/book-analyse-conceptions-french.png
+ thumbnail: thumbnails/teaching-learning/book-analyse-conceptions-french.png
alt: "A blue-banner French software-design book page beside a word-cloud cover emphasizing CONCEPTION"
- title: Time Series Analysis
href: https://vlyubchich.github.io/tsar/
code: https://github.com/vlyubchich/tsar/
- thumbnail: books/tsar.png
+ thumbnail: thumbnails/research-scholarship/tsar.png
alt: "A time series lecture-notes preface beside a blue geometric book cover"
- title: Causal Inference in R
href: https://www.r-causal.org/
code: https://github.com/malcolmbarrett/causal-inference-in-r
- thumbnail: books/ci-in-r.png
+ thumbnail: thumbnails/legacy/ci-in-r.png
alt: "A causal inference preface page with numbered learning goals in large serif type"
- title: R for Clinical Study Reports and Submission
href: https://r4csr.org/
code: https://github.com/elong0527/r4csr
- thumbnail: books/books-r4csr.png
+ thumbnail: thumbnails/research-scholarship/r4csr.png
alt: "A welcome page beside a teal cover showing a scientist with data charts for clinical reporting"
- title: Cookbook Polars for R
href: https://ddotta.github.io/cookbook-rpolars/
code: https://github.com/ddotta/cookbook-rpolars
- thumbnail: books/books-cookbook-rpolars.png
+ thumbnail: thumbnails/teaching-learning/cookbook-rpolars.png
alt: "A cookbook preface with a circular logo of a blue bear reading, and a polars/dplyr comparison tabset"
- title: Introduction to NFL Analytics with R
href: https://bradcongelio.com/nfl-analytics-with-r-book/
code: https://github.com/bcongelio/nfl-analytics-with-r-book
- thumbnail: books/nfl-analytics-with-r.PNG
+ thumbnail: thumbnails/teaching-learning/nfl-analytics-with-r.PNG
alt: "A preface page beside a dark CRC Press cover with a pixelated American football"
- title: learning statistics with jamovi
href: https://davidfoxcroft.github.io/lsj-book/
code: https://github.com/davidfoxcroft/lsj-book
- thumbnail: books/books_lsj.png
+ thumbnail: thumbnails/teaching-learning/books_lsj.png
alt: "A statistics textbook page beside a light-blue cover with a jamovi 'v' logo underwater"
- title: R for Plant Disease Epidemiology
href: https://r4pde.netlify.app/
code: https://github.com/emdelponte/epidemiology-R
- thumbnail: books/r4pde.png
+ thumbnail: thumbnails/research-scholarship/r4pde.png
alt: "A welcome page beside a white cover illustrating a disease-spotted green plant leaf"
- title: Cleaning Biodiversity Data in R
href: https://cleaning-data-r.ala.org.au/
code: https://github.com/AtlasOfLivingAustralia/cleaning_data/
- thumbnail: books/books-cleaning-bd-in-r.png
+ thumbnail: thumbnails/research-scholarship/cleaning-bd-in-r.png
alt: "A welcome page beside a navy cover illustrating an orange cleaner shrimp"
- title: R Development Guide
href: https://contributor.r-project.org/rdevguide/
code: https://github.com/r-devel/rdevguide
- thumbnail: books/books-r-development-guide.png
+ thumbnail: thumbnails/software-documentation/r-development-guide.png
alt: "A guide page with a whimsical pop-up-book illustration of an orange city and tiny people"
@@ -535,18 +535,18 @@
subtitle: reactive JavaScript
href: ../interactive/ojs/examples/penguins.html
code: https://github.com/quarto-dev/quarto-web/blob/main/docs/interactive/ojs/examples/penguins.qmd
- thumbnail: interactive/interactive-ojs.png
+ thumbnail: thumbnails/reports-analytics/ojs.png
alt: "Penguin body-mass histograms in a grid by sex and species, with filter slider and island checkboxes above"
- title: Shiny
subtitle: web framework for R
href: https://jjallaire.shinyapps.io/diamonds-explorer/
code: https://github.com/quarto-dev/quarto-web/blob/main/docs/interactive/shiny/_examples/diamonds/shiny-diamonds.qmd
- thumbnail: interactive/interactive-shiny.png
+ thumbnail: thumbnails/reports-analytics/shiny.png
alt: "A faceted grid of diamond scatterplots by clarity and color, with sample-size slider and variable dropdowns below"
- title: Jupyter
subtitle: interactive widgets
href: ../interactive/widgets/jupyter.html
code: https://github.com/quarto-dev/quarto-web/blob/main/docs/interactive/widgets/jupyter.qmd
- thumbnail: interactive/interactive-jupyter.png
+ thumbnail: thumbnails/reports-analytics/jupyter.png
alt: "A Python ipyleaflet code block above a cloud-covered satellite map of Europe with a blue location pin"
diff --git a/docs/gallery/personal-community.qmd b/docs/gallery/personal-community.qmd
new file mode 100644
index 0000000000..c4907d5833
--- /dev/null
+++ b/docs/gallery/personal-community.qmd
@@ -0,0 +1,28 @@
+---
+pagetitle: "Personal & Community — Gallery"
+title: "Personal & Community"
+subtitle: "Personal sites, blogs, and group sites."
+description: Quarto examples for personal sites, blogs, and group sites.
+listing:
+ - id: personal-caps
+ template: assets/_caps.ejs.md
+ contents: data/featured.yml
+ include:
+ slug: personal
+ - id: personal
+ template: assets/_card.ejs.md
+ contents: data/personal-community.yml
+ filter-ui: [title, author, description]
+ sort-ui: [name, title, author]
+ field-display-names:
+ name: Name
+ categories: true
+---
+
+::: {.cat-personal}
+::: {#personal-caps}
+:::
+
+::: {#personal}
+:::
+:::
diff --git a/docs/gallery/presentations/presentations-beamer.png b/docs/gallery/presentations/presentations-beamer.png
deleted file mode 100644
index e39710282e..0000000000
Binary files a/docs/gallery/presentations/presentations-beamer.png and /dev/null differ
diff --git a/docs/gallery/presentations/presentations.png b/docs/gallery/presentations/presentations.png
deleted file mode 100644
index 3433e48d48..0000000000
Binary files a/docs/gallery/presentations/presentations.png and /dev/null differ
diff --git a/docs/gallery/reports-analytics.qmd b/docs/gallery/reports-analytics.qmd
new file mode 100644
index 0000000000..43c5beb10a
--- /dev/null
+++ b/docs/gallery/reports-analytics.qmd
@@ -0,0 +1,28 @@
+---
+pagetitle: "Reports & Analytics — Gallery"
+title: "Reports & Analytics"
+subtitle: "Communicate analysis so a decision-maker can act."
+description: Quarto examples for communicating analysis to decision-makers.
+listing:
+ - id: reports-caps
+ template: assets/_caps.ejs.md
+ contents: data/featured.yml
+ include:
+ slug: reports
+ - id: reports
+ template: assets/_card.ejs.md
+ contents: data/reports-analytics.yml
+ filter-ui: [title, author, description]
+ sort-ui: [name, title, author]
+ field-display-names:
+ name: Name
+ categories: true
+---
+
+::: {.cat-reports}
+::: {#reports-caps}
+:::
+
+::: {#reports}
+:::
+:::
diff --git a/docs/gallery/research-scholarship.qmd b/docs/gallery/research-scholarship.qmd
new file mode 100644
index 0000000000..079eafcbb8
--- /dev/null
+++ b/docs/gallery/research-scholarship.qmd
@@ -0,0 +1,28 @@
+---
+pagetitle: "Research & Scholarship — Gallery"
+title: "Research & Scholarship"
+subtitle: "Publish papers, books, and scholarship."
+description: Quarto examples for publishing papers, books, and scholarship.
+listing:
+ - id: research-caps
+ template: assets/_caps.ejs.md
+ contents: data/featured.yml
+ include:
+ slug: research
+ - id: research
+ template: assets/_card.ejs.md
+ contents: data/research-scholarship.yml
+ filter-ui: [title, author, description]
+ sort-ui: [name, title, author]
+ field-display-names:
+ name: Name
+ categories: true
+---
+
+::: {.cat-research}
+::: {#research-caps}
+:::
+
+::: {#research}
+:::
+:::
diff --git a/docs/gallery/software-documentation.qmd b/docs/gallery/software-documentation.qmd
new file mode 100644
index 0000000000..4f998ed7a5
--- /dev/null
+++ b/docs/gallery/software-documentation.qmd
@@ -0,0 +1,28 @@
+---
+pagetitle: "Software Documentation — Gallery"
+title: "Software Documentation"
+subtitle: "Document packages, tools, and APIs."
+description: Quarto examples for documenting packages, tools, and APIs.
+listing:
+ - id: docs-caps
+ template: assets/_caps.ejs.md
+ contents: data/featured.yml
+ include:
+ slug: docs
+ - id: docs
+ template: assets/_card.ejs.md
+ contents: data/software-documentation.yml
+ filter-ui: [title, author, description]
+ sort-ui: [name, title, author]
+ field-display-names:
+ name: Name
+ categories: true
+---
+
+::: {.cat-docs}
+::: {#docs-caps}
+:::
+
+::: {#docs}
+:::
+:::
diff --git a/docs/gallery/teaching-learning.qmd b/docs/gallery/teaching-learning.qmd
new file mode 100644
index 0000000000..bdeb83fc0c
--- /dev/null
+++ b/docs/gallery/teaching-learning.qmd
@@ -0,0 +1,28 @@
+---
+pagetitle: "Teaching & Learning — Gallery"
+title: "Teaching & Learning"
+subtitle: "Talks, courses, and textbooks."
+description: Quarto examples for talks, courses, and textbooks.
+listing:
+ - id: teaching-caps
+ template: assets/_caps.ejs.md
+ contents: data/featured.yml
+ include:
+ slug: teaching
+ - id: teaching
+ template: assets/_card.ejs.md
+ contents: data/teaching-learning.yml
+ filter-ui: [title, author, description]
+ sort-ui: [name, title, author]
+ field-display-names:
+ name: Name
+ categories: true
+---
+
+::: {.cat-teaching}
+::: {#teaching-caps}
+:::
+
+::: {#teaching}
+:::
+:::
diff --git a/docs/gallery/dashboards/customer-churn-dashboard.png b/docs/gallery/thumbnails/dashboards-monitoring/customer-churn-dashboard.png
similarity index 100%
rename from docs/gallery/dashboards/customer-churn-dashboard.png
rename to docs/gallery/thumbnails/dashboards-monitoring/customer-churn-dashboard.png
diff --git a/docs/gallery/dashboards/dashing-through-snow.png b/docs/gallery/thumbnails/dashboards-monitoring/dashing-through-snow.png
similarity index 100%
rename from docs/gallery/dashboards/dashing-through-snow.png
rename to docs/gallery/thumbnails/dashboards-monitoring/dashing-through-snow.png
diff --git a/docs/gallery/dashboards/diamonds-dashboard.png b/docs/gallery/thumbnails/dashboards-monitoring/diamonds-dashboard.png
similarity index 100%
rename from docs/gallery/dashboards/diamonds-dashboard.png
rename to docs/gallery/thumbnails/dashboards-monitoring/diamonds-dashboard.png
diff --git a/docs/gallery/dashboards/gapminder-dashboard.png b/docs/gallery/thumbnails/dashboards-monitoring/gapminder-dashboard.png
similarity index 100%
rename from docs/gallery/dashboards/gapminder-dashboard.png
rename to docs/gallery/thumbnails/dashboards-monitoring/gapminder-dashboard.png
diff --git a/docs/gallery/thumbnails/dashboards-monitoring/gh-dashboard.png b/docs/gallery/thumbnails/dashboards-monitoring/gh-dashboard.png
new file mode 100644
index 0000000000..8d82d07678
Binary files /dev/null and b/docs/gallery/thumbnails/dashboards-monitoring/gh-dashboard.png differ
diff --git a/docs/gallery/dashboards/housing-market-dashboard.png b/docs/gallery/thumbnails/dashboards-monitoring/housing-market-dashboard.png
similarity index 100%
rename from docs/gallery/dashboards/housing-market-dashboard.png
rename to docs/gallery/thumbnails/dashboards-monitoring/housing-market-dashboard.png
diff --git a/docs/gallery/dashboards/ld-dashboard.png b/docs/gallery/thumbnails/dashboards-monitoring/ld-dashboard.png
similarity index 100%
rename from docs/gallery/dashboards/ld-dashboard.png
rename to docs/gallery/thumbnails/dashboards-monitoring/ld-dashboard.png
diff --git a/docs/gallery/thumbnails/dashboards-monitoring/mynorfolk.png b/docs/gallery/thumbnails/dashboards-monitoring/mynorfolk.png
new file mode 100644
index 0000000000..80b248597c
Binary files /dev/null and b/docs/gallery/thumbnails/dashboards-monitoring/mynorfolk.png differ
diff --git a/docs/gallery/dashboards/nfl-injuries-dashboard.png b/docs/gallery/thumbnails/dashboards-monitoring/nfl-injuries-dashboard.png
similarity index 100%
rename from docs/gallery/dashboards/nfl-injuries-dashboard.png
rename to docs/gallery/thumbnails/dashboards-monitoring/nfl-injuries-dashboard.png
diff --git a/docs/gallery/dashboards/nz-quakes-dashboard.png b/docs/gallery/thumbnails/dashboards-monitoring/nz-quakes-dashboard.png
similarity index 100%
rename from docs/gallery/dashboards/nz-quakes-dashboard.png
rename to docs/gallery/thumbnails/dashboards-monitoring/nz-quakes-dashboard.png
diff --git a/docs/gallery/dashboards/ojs-flights.png b/docs/gallery/thumbnails/dashboards-monitoring/ojs-flights.png
similarity index 100%
rename from docs/gallery/dashboards/ojs-flights.png
rename to docs/gallery/thumbnails/dashboards-monitoring/ojs-flights.png
diff --git a/docs/gallery/dashboards/ojs-penguins-dashboard.png b/docs/gallery/thumbnails/dashboards-monitoring/ojs-penguins-dashboard.png
similarity index 100%
rename from docs/gallery/dashboards/ojs-penguins-dashboard.png
rename to docs/gallery/thumbnails/dashboards-monitoring/ojs-penguins-dashboard.png
diff --git a/docs/gallery/dashboards/olympics-game.png b/docs/gallery/thumbnails/dashboards-monitoring/olympics-game.png
similarity index 100%
rename from docs/gallery/dashboards/olympics-game.png
rename to docs/gallery/thumbnails/dashboards-monitoring/olympics-game.png
diff --git a/docs/gallery/dashboards/penguins-dashboard.png b/docs/gallery/thumbnails/dashboards-monitoring/penguins-dashboard.png
similarity index 100%
rename from docs/gallery/dashboards/penguins-dashboard.png
rename to docs/gallery/thumbnails/dashboards-monitoring/penguins-dashboard.png
diff --git a/docs/gallery/thumbnails/dashboards-monitoring/pyopensci-software-review.png b/docs/gallery/thumbnails/dashboards-monitoring/pyopensci-software-review.png
new file mode 100644
index 0000000000..11a9c99c56
Binary files /dev/null and b/docs/gallery/thumbnails/dashboards-monitoring/pyopensci-software-review.png differ
diff --git a/docs/gallery/dashboards/restaurant-dashboard.png b/docs/gallery/thumbnails/dashboards-monitoring/restaurant-dashboard.png
similarity index 100%
rename from docs/gallery/dashboards/restaurant-dashboard.png
rename to docs/gallery/thumbnails/dashboards-monitoring/restaurant-dashboard.png
diff --git a/docs/gallery/dashboards/retirement-gallery.png b/docs/gallery/thumbnails/dashboards-monitoring/retirement-gallery.png
similarity index 100%
rename from docs/gallery/dashboards/retirement-gallery.png
rename to docs/gallery/thumbnails/dashboards-monitoring/retirement-gallery.png
diff --git a/docs/gallery/thumbnails/dashboards-monitoring/stock-explorer.png b/docs/gallery/thumbnails/dashboards-monitoring/stock-explorer.png
new file mode 100644
index 0000000000..f7b3e71d90
Binary files /dev/null and b/docs/gallery/thumbnails/dashboards-monitoring/stock-explorer.png differ
diff --git a/docs/gallery/dashboards/weather-ojs-dashboard.jpg b/docs/gallery/thumbnails/dashboards-monitoring/weather-ojs-dashboard.jpg
similarity index 100%
rename from docs/gallery/dashboards/weather-ojs-dashboard.jpg
rename to docs/gallery/thumbnails/dashboards-monitoring/weather-ojs-dashboard.jpg
diff --git a/docs/gallery/thumbnails/featured/personal-community-isabelizimm.mp4 b/docs/gallery/thumbnails/featured/personal-community-isabelizimm.mp4
new file mode 100644
index 0000000000..560b01235a
Binary files /dev/null and b/docs/gallery/thumbnails/featured/personal-community-isabelizimm.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/personal-community-isabelizimm.webm b/docs/gallery/thumbnails/featured/personal-community-isabelizimm.webm
new file mode 100644
index 0000000000..b2761b0243
Binary files /dev/null and b/docs/gallery/thumbnails/featured/personal-community-isabelizimm.webm differ
diff --git a/docs/gallery/thumbnails/featured/personal-community-mcanouil.mp4 b/docs/gallery/thumbnails/featured/personal-community-mcanouil.mp4
new file mode 100644
index 0000000000..080d97e50b
Binary files /dev/null and b/docs/gallery/thumbnails/featured/personal-community-mcanouil.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/personal-community-mcanouil.webm b/docs/gallery/thumbnails/featured/personal-community-mcanouil.webm
new file mode 100644
index 0000000000..232658f043
Binary files /dev/null and b/docs/gallery/thumbnails/featured/personal-community-mcanouil.webm differ
diff --git a/docs/gallery/thumbnails/featured/personal-community-rainbowr.mp4 b/docs/gallery/thumbnails/featured/personal-community-rainbowr.mp4
new file mode 100644
index 0000000000..24af84e366
Binary files /dev/null and b/docs/gallery/thumbnails/featured/personal-community-rainbowr.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/personal-community-rainbowr.webm b/docs/gallery/thumbnails/featured/personal-community-rainbowr.webm
new file mode 100644
index 0000000000..eee48aabda
Binary files /dev/null and b/docs/gallery/thumbnails/featured/personal-community-rainbowr.webm differ
diff --git a/docs/gallery/thumbnails/featured/reports-analytics-closeread.mp4 b/docs/gallery/thumbnails/featured/reports-analytics-closeread.mp4
new file mode 100644
index 0000000000..889b847291
Binary files /dev/null and b/docs/gallery/thumbnails/featured/reports-analytics-closeread.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/reports-analytics-closeread.webm b/docs/gallery/thumbnails/featured/reports-analytics-closeread.webm
new file mode 100644
index 0000000000..5eaa749703
Binary files /dev/null and b/docs/gallery/thumbnails/featured/reports-analytics-closeread.webm differ
diff --git a/docs/gallery/thumbnails/featured/research-scholarship-affcom.mp4 b/docs/gallery/thumbnails/featured/research-scholarship-affcom.mp4
new file mode 100644
index 0000000000..9b655fb1f4
Binary files /dev/null and b/docs/gallery/thumbnails/featured/research-scholarship-affcom.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/research-scholarship-affcom.webm b/docs/gallery/thumbnails/featured/research-scholarship-affcom.webm
new file mode 100644
index 0000000000..a9549365bd
Binary files /dev/null and b/docs/gallery/thumbnails/featured/research-scholarship-affcom.webm differ
diff --git a/docs/gallery/thumbnails/featured/research-scholarship-causal-inference.mp4 b/docs/gallery/thumbnails/featured/research-scholarship-causal-inference.mp4
new file mode 100644
index 0000000000..dbc334aeda
Binary files /dev/null and b/docs/gallery/thumbnails/featured/research-scholarship-causal-inference.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/research-scholarship-causal-inference.webm b/docs/gallery/thumbnails/featured/research-scholarship-causal-inference.webm
new file mode 100644
index 0000000000..65b5065fa9
Binary files /dev/null and b/docs/gallery/thumbnails/featured/research-scholarship-causal-inference.webm differ
diff --git a/docs/gallery/thumbnails/featured/software-documentation-great-docs.mp4 b/docs/gallery/thumbnails/featured/software-documentation-great-docs.mp4
new file mode 100644
index 0000000000..b2ba69a2e0
Binary files /dev/null and b/docs/gallery/thumbnails/featured/software-documentation-great-docs.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/software-documentation-great-docs.webm b/docs/gallery/thumbnails/featured/software-documentation-great-docs.webm
new file mode 100644
index 0000000000..ddcc8a5ebe
Binary files /dev/null and b/docs/gallery/thumbnails/featured/software-documentation-great-docs.webm differ
diff --git a/docs/gallery/thumbnails/featured/software-documentation-positron.mp4 b/docs/gallery/thumbnails/featured/software-documentation-positron.mp4
new file mode 100644
index 0000000000..e870e4262e
Binary files /dev/null and b/docs/gallery/thumbnails/featured/software-documentation-positron.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/software-documentation-positron.webm b/docs/gallery/thumbnails/featured/software-documentation-positron.webm
new file mode 100644
index 0000000000..06aa090eec
Binary files /dev/null and b/docs/gallery/thumbnails/featured/software-documentation-positron.webm differ
diff --git a/docs/gallery/thumbnails/featured/software-documentation-quarto-wizard.mp4 b/docs/gallery/thumbnails/featured/software-documentation-quarto-wizard.mp4
new file mode 100644
index 0000000000..fdc13f5c1b
Binary files /dev/null and b/docs/gallery/thumbnails/featured/software-documentation-quarto-wizard.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/software-documentation-quarto-wizard.webm b/docs/gallery/thumbnails/featured/software-documentation-quarto-wizard.webm
new file mode 100644
index 0000000000..772bb9efb8
Binary files /dev/null and b/docs/gallery/thumbnails/featured/software-documentation-quarto-wizard.webm differ
diff --git a/docs/gallery/thumbnails/featured/teaching-learning-dataviz-course.mp4 b/docs/gallery/thumbnails/featured/teaching-learning-dataviz-course.mp4
new file mode 100644
index 0000000000..1c03a07dc2
Binary files /dev/null and b/docs/gallery/thumbnails/featured/teaching-learning-dataviz-course.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/teaching-learning-dataviz-course.webm b/docs/gallery/thumbnails/featured/teaching-learning-dataviz-course.webm
new file mode 100644
index 0000000000..47f3372ef3
Binary files /dev/null and b/docs/gallery/thumbnails/featured/teaching-learning-dataviz-course.webm differ
diff --git a/docs/gallery/thumbnails/featured/teaching-learning-feature-eng.mp4 b/docs/gallery/thumbnails/featured/teaching-learning-feature-eng.mp4
new file mode 100644
index 0000000000..0f2cce4082
Binary files /dev/null and b/docs/gallery/thumbnails/featured/teaching-learning-feature-eng.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/teaching-learning-feature-eng.webm b/docs/gallery/thumbnails/featured/teaching-learning-feature-eng.webm
new file mode 100644
index 0000000000..7fab909ee1
Binary files /dev/null and b/docs/gallery/thumbnails/featured/teaching-learning-feature-eng.webm differ
diff --git a/docs/gallery/thumbnails/featured/teaching-learning-textrecipes.mp4 b/docs/gallery/thumbnails/featured/teaching-learning-textrecipes.mp4
new file mode 100644
index 0000000000..201f90bcae
Binary files /dev/null and b/docs/gallery/thumbnails/featured/teaching-learning-textrecipes.mp4 differ
diff --git a/docs/gallery/thumbnails/featured/teaching-learning-textrecipes.webm b/docs/gallery/thumbnails/featured/teaching-learning-textrecipes.webm
new file mode 100644
index 0000000000..021b144e67
Binary files /dev/null and b/docs/gallery/thumbnails/featured/teaching-learning-textrecipes.webm differ
diff --git a/docs/gallery/books/books-telling-stories.png b/docs/gallery/thumbnails/legacy/books-telling-stories.png
similarity index 100%
rename from docs/gallery/books/books-telling-stories.png
rename to docs/gallery/thumbnails/legacy/books-telling-stories.png
diff --git a/docs/gallery/books/ci-in-r.png b/docs/gallery/thumbnails/legacy/ci-in-r.png
similarity index 100%
rename from docs/gallery/books/ci-in-r.png
rename to docs/gallery/thumbnails/legacy/ci-in-r.png
diff --git a/docs/gallery/dashboards/mynorfolk-dash.png b/docs/gallery/thumbnails/legacy/mynorfolk-dash.png
similarity index 100%
rename from docs/gallery/dashboards/mynorfolk-dash.png
rename to docs/gallery/thumbnails/legacy/mynorfolk-dash.png
diff --git a/docs/gallery/presentations/presentations-textrecipes.png b/docs/gallery/thumbnails/legacy/presentations-textrecipes.png
similarity index 100%
rename from docs/gallery/presentations/presentations-textrecipes.png
rename to docs/gallery/thumbnails/legacy/presentations-textrecipes.png
diff --git a/docs/gallery/dashboards/stock-explorer-dashboard.png b/docs/gallery/thumbnails/legacy/stock-explorer-dashboard.png
similarity index 100%
rename from docs/gallery/dashboards/stock-explorer-dashboard.png
rename to docs/gallery/thumbnails/legacy/stock-explorer-dashboard.png
diff --git a/docs/gallery/websites/websites-rainbowr.png b/docs/gallery/thumbnails/legacy/websites-rainbowr.png
similarity index 100%
rename from docs/gallery/websites/websites-rainbowr.png
rename to docs/gallery/thumbnails/legacy/websites-rainbowr.png
diff --git a/docs/gallery/websites/websites-bea-milz.png b/docs/gallery/thumbnails/personal-community/bea-milz.png
similarity index 100%
rename from docs/gallery/websites/websites-bea-milz.png
rename to docs/gallery/thumbnails/personal-community/bea-milz.png
diff --git a/docs/gallery/websites/websites-chris-von-csefalvay.png b/docs/gallery/thumbnails/personal-community/chris-von-csefalvay.png
similarity index 100%
rename from docs/gallery/websites/websites-chris-von-csefalvay.png
rename to docs/gallery/thumbnails/personal-community/chris-von-csefalvay.png
diff --git a/docs/gallery/websites/websites-dkapitan.png b/docs/gallery/thumbnails/personal-community/dkapitan.png
similarity index 100%
rename from docs/gallery/websites/websites-dkapitan.png
rename to docs/gallery/thumbnails/personal-community/dkapitan.png
diff --git a/docs/gallery/websites/websites-fluidsyndicate.png b/docs/gallery/thumbnails/personal-community/fluidsyndicate.png
similarity index 100%
rename from docs/gallery/websites/websites-fluidsyndicate.png
rename to docs/gallery/thumbnails/personal-community/fluidsyndicate.png
diff --git a/docs/gallery/websites/websites-forbo7-landing.png b/docs/gallery/thumbnails/personal-community/forbo7-landing.png
similarity index 100%
rename from docs/gallery/websites/websites-forbo7-landing.png
rename to docs/gallery/thumbnails/personal-community/forbo7-landing.png
diff --git a/docs/gallery/websites/websites-hamel.png b/docs/gallery/thumbnails/personal-community/hamel.png
similarity index 100%
rename from docs/gallery/websites/websites-hamel.png
rename to docs/gallery/thumbnails/personal-community/hamel.png
diff --git a/docs/gallery/websites/websites-ipardalis.png b/docs/gallery/thumbnails/personal-community/ipardalis.png
similarity index 100%
rename from docs/gallery/websites/websites-ipardalis.png
rename to docs/gallery/thumbnails/personal-community/ipardalis.png
diff --git a/docs/gallery/thumbnails/personal-community/isabelizimm.png b/docs/gallery/thumbnails/personal-community/isabelizimm.png
new file mode 100644
index 0000000000..917347de76
Binary files /dev/null and b/docs/gallery/thumbnails/personal-community/isabelizimm.png differ
diff --git a/docs/gallery/websites/websites-masiello-group.png b/docs/gallery/thumbnails/personal-community/masiello-group.png
similarity index 100%
rename from docs/gallery/websites/websites-masiello-group.png
rename to docs/gallery/thumbnails/personal-community/masiello-group.png
diff --git a/docs/gallery/thumbnails/personal-community/mcanouil.png b/docs/gallery/thumbnails/personal-community/mcanouil.png
new file mode 100644
index 0000000000..f09c2da2e6
Binary files /dev/null and b/docs/gallery/thumbnails/personal-community/mcanouil.png differ
diff --git a/docs/gallery/websites/websites-mike-mahoney.png b/docs/gallery/thumbnails/personal-community/mike-mahoney.png
similarity index 100%
rename from docs/gallery/websites/websites-mike-mahoney.png
rename to docs/gallery/thumbnails/personal-community/mike-mahoney.png
diff --git a/docs/gallery/websites/websites-mockup.png b/docs/gallery/thumbnails/personal-community/mockup.png
similarity index 100%
rename from docs/gallery/websites/websites-mockup.png
rename to docs/gallery/thumbnails/personal-community/mockup.png
diff --git a/docs/gallery/websites/websites-nasa-openscapes.png b/docs/gallery/thumbnails/personal-community/nasa-openscapes.png
similarity index 100%
rename from docs/gallery/websites/websites-nasa-openscapes.png
rename to docs/gallery/thumbnails/personal-community/nasa-openscapes.png
diff --git a/docs/gallery/thumbnails/personal-community/nascent-peru.png b/docs/gallery/thumbnails/personal-community/nascent-peru.png
new file mode 100644
index 0000000000..924095b63c
Binary files /dev/null and b/docs/gallery/thumbnails/personal-community/nascent-peru.png differ
diff --git a/docs/gallery/websites/nhs-r-website.png b/docs/gallery/thumbnails/personal-community/nhs-r-website.png
similarity index 100%
rename from docs/gallery/websites/nhs-r-website.png
rename to docs/gallery/thumbnails/personal-community/nhs-r-website.png
diff --git a/docs/gallery/websites/websites-quartotip.png b/docs/gallery/thumbnails/personal-community/quartotip.png
similarity index 100%
rename from docs/gallery/websites/websites-quartotip.png
rename to docs/gallery/thumbnails/personal-community/quartotip.png
diff --git a/docs/gallery/thumbnails/personal-community/rainbowr.png b/docs/gallery/thumbnails/personal-community/rainbowr.png
new file mode 100644
index 0000000000..9075996c92
Binary files /dev/null and b/docs/gallery/thumbnails/personal-community/rainbowr.png differ
diff --git a/docs/gallery/websites/websites-real-world-data-science.png b/docs/gallery/thumbnails/personal-community/real-world-data-science.png
similarity index 100%
rename from docs/gallery/websites/websites-real-world-data-science.png
rename to docs/gallery/thumbnails/personal-community/real-world-data-science.png
diff --git a/docs/gallery/websites/websites-vistales.png b/docs/gallery/thumbnails/personal-community/vistales.png
similarity index 100%
rename from docs/gallery/websites/websites-vistales.png
rename to docs/gallery/thumbnails/personal-community/vistales.png
diff --git a/docs/gallery/websites/websites-wannabe-rstats-fu.png b/docs/gallery/thumbnails/personal-community/wannabe-rstats-fu.png
similarity index 100%
rename from docs/gallery/websites/websites-wannabe-rstats-fu.png
rename to docs/gallery/thumbnails/personal-community/wannabe-rstats-fu.png
diff --git a/docs/gallery/websites/website-ala-labs.png b/docs/gallery/thumbnails/personal-community/website-ala-labs.png
similarity index 100%
rename from docs/gallery/websites/website-ala-labs.png
rename to docs/gallery/thumbnails/personal-community/website-ala-labs.png
diff --git a/docs/gallery/articles/advanced-layout-html.png b/docs/gallery/thumbnails/reports-analytics/advanced-layout-html.png
similarity index 100%
rename from docs/gallery/articles/advanced-layout-html.png
rename to docs/gallery/thumbnails/reports-analytics/advanced-layout-html.png
diff --git a/docs/gallery/thumbnails/reports-analytics/advanced-layout-pdf.png b/docs/gallery/thumbnails/reports-analytics/advanced-layout-pdf.png
new file mode 100644
index 0000000000..77874d517d
Binary files /dev/null and b/docs/gallery/thumbnails/reports-analytics/advanced-layout-pdf.png differ
diff --git a/docs/gallery/thumbnails/reports-analytics/closeread.png b/docs/gallery/thumbnails/reports-analytics/closeread.png
new file mode 100644
index 0000000000..2167057a67
Binary files /dev/null and b/docs/gallery/thumbnails/reports-analytics/closeread.png differ
diff --git a/docs/gallery/articles/articles-html.png b/docs/gallery/thumbnails/reports-analytics/html.png
similarity index 100%
rename from docs/gallery/articles/articles-html.png
rename to docs/gallery/thumbnails/reports-analytics/html.png
diff --git a/docs/gallery/interactive/interactive-jupyter.png b/docs/gallery/thumbnails/reports-analytics/jupyter.png
similarity index 100%
rename from docs/gallery/interactive/interactive-jupyter.png
rename to docs/gallery/thumbnails/reports-analytics/jupyter.png
diff --git a/docs/gallery/articles/articles-msword.png b/docs/gallery/thumbnails/reports-analytics/msword.png
similarity index 100%
rename from docs/gallery/articles/articles-msword.png
rename to docs/gallery/thumbnails/reports-analytics/msword.png
diff --git a/docs/gallery/interactive/interactive-ojs.png b/docs/gallery/thumbnails/reports-analytics/ojs.png
similarity index 100%
rename from docs/gallery/interactive/interactive-ojs.png
rename to docs/gallery/thumbnails/reports-analytics/ojs.png
diff --git a/docs/gallery/interactive/interactive-shiny.png b/docs/gallery/thumbnails/reports-analytics/shiny.png
similarity index 100%
rename from docs/gallery/interactive/interactive-shiny.png
rename to docs/gallery/thumbnails/reports-analytics/shiny.png
diff --git a/docs/gallery/thumbnails/reports-analytics/tfff.png b/docs/gallery/thumbnails/reports-analytics/tfff.png
new file mode 100644
index 0000000000..dc6679534c
Binary files /dev/null and b/docs/gallery/thumbnails/reports-analytics/tfff.png differ
diff --git a/docs/gallery/thumbnails/reports-analytics/whr.png b/docs/gallery/thumbnails/reports-analytics/whr.png
new file mode 100644
index 0000000000..6897a7b782
Binary files /dev/null and b/docs/gallery/thumbnails/reports-analytics/whr.png differ
diff --git a/docs/gallery/thumbnails/research-scholarship/affcom.png b/docs/gallery/thumbnails/research-scholarship/affcom.png
new file mode 100644
index 0000000000..a817feee43
Binary files /dev/null and b/docs/gallery/thumbnails/research-scholarship/affcom.png differ
diff --git a/docs/gallery/thumbnails/research-scholarship/causal-inference.png b/docs/gallery/thumbnails/research-scholarship/causal-inference.png
new file mode 100644
index 0000000000..9222ffd466
Binary files /dev/null and b/docs/gallery/thumbnails/research-scholarship/causal-inference.png differ
diff --git a/docs/gallery/books/books-cleaning-bd-in-r.png b/docs/gallery/thumbnails/research-scholarship/cleaning-bd-in-r.png
similarity index 100%
rename from docs/gallery/books/books-cleaning-bd-in-r.png
rename to docs/gallery/thumbnails/research-scholarship/cleaning-bd-in-r.png
diff --git a/docs/gallery/thumbnails/research-scholarship/heiss-publications.png b/docs/gallery/thumbnails/research-scholarship/heiss-publications.png
new file mode 100644
index 0000000000..2df466b14a
Binary files /dev/null and b/docs/gallery/thumbnails/research-scholarship/heiss-publications.png differ
diff --git a/docs/gallery/thumbnails/research-scholarship/mcanouil-publications.png b/docs/gallery/thumbnails/research-scholarship/mcanouil-publications.png
new file mode 100644
index 0000000000..498dc03ee5
Binary files /dev/null and b/docs/gallery/thumbnails/research-scholarship/mcanouil-publications.png differ
diff --git a/docs/gallery/thumbnails/research-scholarship/pdf.png b/docs/gallery/thumbnails/research-scholarship/pdf.png
new file mode 100644
index 0000000000..d1e37a551c
Binary files /dev/null and b/docs/gallery/thumbnails/research-scholarship/pdf.png differ
diff --git a/docs/gallery/books/books-r4csr.png b/docs/gallery/thumbnails/research-scholarship/r4csr.png
similarity index 100%
rename from docs/gallery/books/books-r4csr.png
rename to docs/gallery/thumbnails/research-scholarship/r4csr.png
diff --git a/docs/gallery/books/r4pde.png b/docs/gallery/thumbnails/research-scholarship/r4pde.png
similarity index 100%
rename from docs/gallery/books/r4pde.png
rename to docs/gallery/thumbnails/research-scholarship/r4pde.png
diff --git a/docs/gallery/thumbnails/research-scholarship/telling-stories.png b/docs/gallery/thumbnails/research-scholarship/telling-stories.png
new file mode 100644
index 0000000000..c14b5d8c80
Binary files /dev/null and b/docs/gallery/thumbnails/research-scholarship/telling-stories.png differ
diff --git a/docs/gallery/books/tsar.png b/docs/gallery/thumbnails/research-scholarship/tsar.png
similarity index 100%
rename from docs/gallery/books/tsar.png
rename to docs/gallery/thumbnails/research-scholarship/tsar.png
diff --git a/docs/gallery/websites/websites-devito.png b/docs/gallery/thumbnails/software-documentation/devito.png
similarity index 100%
rename from docs/gallery/websites/websites-devito.png
rename to docs/gallery/thumbnails/software-documentation/devito.png
diff --git a/docs/gallery/thumbnails/software-documentation/great-docs.png b/docs/gallery/thumbnails/software-documentation/great-docs.png
new file mode 100644
index 0000000000..cc131b586e
Binary files /dev/null and b/docs/gallery/thumbnails/software-documentation/great-docs.png differ
diff --git a/docs/gallery/thumbnails/software-documentation/gribouille.png b/docs/gallery/thumbnails/software-documentation/gribouille.png
new file mode 100644
index 0000000000..cc2356cf7e
Binary files /dev/null and b/docs/gallery/thumbnails/software-documentation/gribouille.png differ
diff --git a/docs/gallery/websites/websites-ibis.png b/docs/gallery/thumbnails/software-documentation/ibis.png
similarity index 100%
rename from docs/gallery/websites/websites-ibis.png
rename to docs/gallery/thumbnails/software-documentation/ibis.png
diff --git a/docs/gallery/websites/websites-mrgsolve.png b/docs/gallery/thumbnails/software-documentation/mrgsolve.png
similarity index 100%
rename from docs/gallery/websites/websites-mrgsolve.png
rename to docs/gallery/thumbnails/software-documentation/mrgsolve.png
diff --git a/docs/gallery/websites/websites-nbdev.png b/docs/gallery/thumbnails/software-documentation/nbdev.png
similarity index 100%
rename from docs/gallery/websites/websites-nbdev.png
rename to docs/gallery/thumbnails/software-documentation/nbdev.png
diff --git a/docs/gallery/thumbnails/software-documentation/positron.png b/docs/gallery/thumbnails/software-documentation/positron.png
new file mode 100644
index 0000000000..2c95af974c
Binary files /dev/null and b/docs/gallery/thumbnails/software-documentation/positron.png differ
diff --git a/docs/gallery/thumbnails/software-documentation/quarto-extensions.png b/docs/gallery/thumbnails/software-documentation/quarto-extensions.png
new file mode 100644
index 0000000000..3225c1d710
Binary files /dev/null and b/docs/gallery/thumbnails/software-documentation/quarto-extensions.png differ
diff --git a/docs/gallery/thumbnails/software-documentation/quarto-wizard.png b/docs/gallery/thumbnails/software-documentation/quarto-wizard.png
new file mode 100644
index 0000000000..c4797b9e8e
Binary files /dev/null and b/docs/gallery/thumbnails/software-documentation/quarto-wizard.png differ
diff --git a/docs/gallery/websites/websites-quarto.png b/docs/gallery/thumbnails/software-documentation/quarto.png
similarity index 100%
rename from docs/gallery/websites/websites-quarto.png
rename to docs/gallery/thumbnails/software-documentation/quarto.png
diff --git a/docs/gallery/books/books-r-development-guide.png b/docs/gallery/thumbnails/software-documentation/r-development-guide.png
similarity index 100%
rename from docs/gallery/books/books-r-development-guide.png
rename to docs/gallery/thumbnails/software-documentation/r-development-guide.png
diff --git a/docs/gallery/websites/websites-r-manuals.png b/docs/gallery/thumbnails/software-documentation/r-manuals.png
similarity index 100%
rename from docs/gallery/websites/websites-r-manuals.png
rename to docs/gallery/thumbnails/software-documentation/r-manuals.png
diff --git a/docs/gallery/books/books-r-pkgs.png b/docs/gallery/thumbnails/software-documentation/r-pkgs.png
similarity index 100%
rename from docs/gallery/books/books-r-pkgs.png
rename to docs/gallery/thumbnails/software-documentation/r-pkgs.png
diff --git a/docs/gallery/books/utilitr.png b/docs/gallery/thumbnails/software-documentation/utilitr.png
similarity index 100%
rename from docs/gallery/books/utilitr.png
rename to docs/gallery/thumbnails/software-documentation/utilitr.png
diff --git a/docs/gallery/websites/websites-2021-cloud-hackathon.png b/docs/gallery/thumbnails/teaching-learning/2021-cloud-hackathon.png
similarity index 100%
rename from docs/gallery/websites/websites-2021-cloud-hackathon.png
rename to docs/gallery/thumbnails/teaching-learning/2021-cloud-hackathon.png
diff --git a/docs/gallery/presentations/presentations-anthology-experimental-designs.png b/docs/gallery/thumbnails/teaching-learning/anthology-experimental-designs.png
similarity index 100%
rename from docs/gallery/presentations/presentations-anthology-experimental-designs.png
rename to docs/gallery/thumbnails/teaching-learning/anthology-experimental-designs.png
diff --git a/docs/gallery/presentations/presentations-arrow-dplyr.png b/docs/gallery/thumbnails/teaching-learning/arrow-dplyr.png
similarity index 100%
rename from docs/gallery/presentations/presentations-arrow-dplyr.png
rename to docs/gallery/thumbnails/teaching-learning/arrow-dplyr.png
diff --git a/docs/gallery/websites/websites-arrow-workshop.png b/docs/gallery/thumbnails/teaching-learning/arrow-workshop.png
similarity index 100%
rename from docs/gallery/websites/websites-arrow-workshop.png
rename to docs/gallery/thumbnails/teaching-learning/arrow-workshop.png
diff --git a/docs/gallery/thumbnails/teaching-learning/beamer.png b/docs/gallery/thumbnails/teaching-learning/beamer.png
new file mode 100644
index 0000000000..b2c371b951
Binary files /dev/null and b/docs/gallery/thumbnails/teaching-learning/beamer.png differ
diff --git a/docs/gallery/books/book-analyse-conceptions-french.png b/docs/gallery/thumbnails/teaching-learning/book-analyse-conceptions-french.png
similarity index 100%
rename from docs/gallery/books/book-analyse-conceptions-french.png
rename to docs/gallery/thumbnails/teaching-learning/book-analyse-conceptions-french.png
diff --git a/docs/gallery/books/books_lsj.png b/docs/gallery/thumbnails/teaching-learning/books_lsj.png
similarity index 100%
rename from docs/gallery/books/books_lsj.png
rename to docs/gallery/thumbnails/teaching-learning/books_lsj.png
diff --git a/docs/gallery/books/books-cookbook-rpolars.png b/docs/gallery/thumbnails/teaching-learning/cookbook-rpolars.png
similarity index 100%
rename from docs/gallery/books/books-cookbook-rpolars.png
rename to docs/gallery/thumbnails/teaching-learning/cookbook-rpolars.png
diff --git a/docs/gallery/websites/websites-datascienceinabox.png b/docs/gallery/thumbnails/teaching-learning/datascienceinabox.png
similarity index 100%
rename from docs/gallery/websites/websites-datascienceinabox.png
rename to docs/gallery/thumbnails/teaching-learning/datascienceinabox.png
diff --git a/docs/gallery/thumbnails/teaching-learning/dataviz-course.png b/docs/gallery/thumbnails/teaching-learning/dataviz-course.png
new file mode 100644
index 0000000000..4a667223eb
Binary files /dev/null and b/docs/gallery/thumbnails/teaching-learning/dataviz-course.png differ
diff --git a/docs/gallery/thumbnails/teaching-learning/des-rap-book.png b/docs/gallery/thumbnails/teaching-learning/des-rap-book.png
new file mode 100644
index 0000000000..750f310db3
Binary files /dev/null and b/docs/gallery/thumbnails/teaching-learning/des-rap-book.png differ
diff --git a/docs/gallery/presentations/presentations-educators-perspective-tidyverse.png b/docs/gallery/thumbnails/teaching-learning/educators-perspective-tidyverse.png
similarity index 100%
rename from docs/gallery/presentations/presentations-educators-perspective-tidyverse.png
rename to docs/gallery/thumbnails/teaching-learning/educators-perspective-tidyverse.png
diff --git a/docs/gallery/thumbnails/teaching-learning/feature-eng.png b/docs/gallery/thumbnails/teaching-learning/feature-eng.png
new file mode 100644
index 0000000000..4189ef7740
Binary files /dev/null and b/docs/gallery/thumbnails/teaching-learning/feature-eng.png differ
diff --git a/docs/gallery/books/geocompy.png b/docs/gallery/thumbnails/teaching-learning/geocompy.png
similarity index 100%
rename from docs/gallery/books/geocompy.png
rename to docs/gallery/thumbnails/teaching-learning/geocompy.png
diff --git a/docs/gallery/websites/websites-hertie-coding-club.png b/docs/gallery/thumbnails/teaching-learning/hertie-coding-club.png
similarity index 100%
rename from docs/gallery/websites/websites-hertie-coding-club.png
rename to docs/gallery/thumbnails/teaching-learning/hertie-coding-club.png
diff --git a/docs/gallery/websites/websites-hopr.png b/docs/gallery/thumbnails/teaching-learning/hopr.png
similarity index 100%
rename from docs/gallery/websites/websites-hopr.png
rename to docs/gallery/thumbnails/teaching-learning/hopr.png
diff --git a/docs/gallery/websites/websites-julia-workshop.png b/docs/gallery/thumbnails/teaching-learning/julia-workshop.png
similarity index 100%
rename from docs/gallery/websites/websites-julia-workshop.png
rename to docs/gallery/thumbnails/teaching-learning/julia-workshop.png
diff --git a/docs/gallery/websites/websites-jupyter.png b/docs/gallery/thumbnails/teaching-learning/jupyter.png
similarity index 100%
rename from docs/gallery/websites/websites-jupyter.png
rename to docs/gallery/thumbnails/teaching-learning/jupyter.png
diff --git a/docs/gallery/websites/websites-linogaliana.png b/docs/gallery/thumbnails/teaching-learning/linogaliana.png
similarity index 100%
rename from docs/gallery/websites/websites-linogaliana.png
rename to docs/gallery/thumbnails/teaching-learning/linogaliana.png
diff --git a/docs/gallery/books/books-mlr3book.png b/docs/gallery/thumbnails/teaching-learning/mlr3book.png
similarity index 100%
rename from docs/gallery/books/books-mlr3book.png
rename to docs/gallery/thumbnails/teaching-learning/mlr3book.png
diff --git a/docs/gallery/books/modern-polars.png b/docs/gallery/thumbnails/teaching-learning/modern-polars.png
similarity index 100%
rename from docs/gallery/books/modern-polars.png
rename to docs/gallery/thumbnails/teaching-learning/modern-polars.png
diff --git a/docs/gallery/books/nfl-analytics-with-r.PNG b/docs/gallery/thumbnails/teaching-learning/nfl-analytics-with-r.PNG
similarity index 100%
rename from docs/gallery/books/nfl-analytics-with-r.PNG
rename to docs/gallery/thumbnails/teaching-learning/nfl-analytics-with-r.PNG
diff --git a/docs/gallery/websites/websites-opescapes-quarto-tutorial.png b/docs/gallery/thumbnails/teaching-learning/opescapes-quarto-tutorial.png
similarity index 100%
rename from docs/gallery/websites/websites-opescapes-quarto-tutorial.png
rename to docs/gallery/thumbnails/teaching-learning/opescapes-quarto-tutorial.png
diff --git a/docs/gallery/presentations/presentations-penguins-story.png b/docs/gallery/thumbnails/teaching-learning/penguins-story.png
similarity index 100%
rename from docs/gallery/presentations/presentations-penguins-story.png
rename to docs/gallery/thumbnails/teaching-learning/penguins-story.png
diff --git a/docs/gallery/presentations/presentations-powerpoint.png b/docs/gallery/thumbnails/teaching-learning/powerpoint.png
similarity index 100%
rename from docs/gallery/presentations/presentations-powerpoint.png
rename to docs/gallery/thumbnails/teaching-learning/powerpoint.png
diff --git a/docs/gallery/websites/websites-practical-deep-learning.png b/docs/gallery/thumbnails/teaching-learning/practical-deep-learning.png
similarity index 100%
rename from docs/gallery/websites/websites-practical-deep-learning.png
rename to docs/gallery/thumbnails/teaching-learning/practical-deep-learning.png
diff --git a/docs/gallery/books/books-python-for-data.png b/docs/gallery/thumbnails/teaching-learning/python-for-data.png
similarity index 100%
rename from docs/gallery/books/books-python-for-data.png
rename to docs/gallery/thumbnails/teaching-learning/python-for-data.png
diff --git a/docs/gallery/thumbnails/teaching-learning/quarto-the-practical-guide.png b/docs/gallery/thumbnails/teaching-learning/quarto-the-practical-guide.png
new file mode 100644
index 0000000000..0617b179af
Binary files /dev/null and b/docs/gallery/thumbnails/teaching-learning/quarto-the-practical-guide.png differ
diff --git a/docs/gallery/books/books-r4ds.png b/docs/gallery/thumbnails/teaching-learning/r4ds.png
similarity index 100%
rename from docs/gallery/books/books-r4ds.png
rename to docs/gallery/thumbnails/teaching-learning/r4ds.png
diff --git a/docs/gallery/presentations/presentations-revealjs.png b/docs/gallery/thumbnails/teaching-learning/revealjs.png
similarity index 100%
rename from docs/gallery/presentations/presentations-revealjs.png
rename to docs/gallery/thumbnails/teaching-learning/revealjs.png
diff --git a/docs/gallery/websites/websites-sta210.png b/docs/gallery/thumbnails/teaching-learning/sta210.png
similarity index 100%
rename from docs/gallery/websites/websites-sta210.png
rename to docs/gallery/thumbnails/teaching-learning/sta210.png
diff --git a/docs/gallery/presentations/presentations-streamlining-with-r.png b/docs/gallery/thumbnails/teaching-learning/streamlining-with-r.png
similarity index 100%
rename from docs/gallery/presentations/presentations-streamlining-with-r.png
rename to docs/gallery/thumbnails/teaching-learning/streamlining-with-r.png
diff --git a/docs/gallery/thumbnails/teaching-learning/textrecipes.png b/docs/gallery/thumbnails/teaching-learning/textrecipes.png
new file mode 100644
index 0000000000..e565017a54
Binary files /dev/null and b/docs/gallery/thumbnails/teaching-learning/textrecipes.png differ
diff --git a/docs/gallery/websites/website-m.canouil.dev_quarto-extensions.png b/docs/gallery/websites/website-m.canouil.dev_quarto-extensions.png
deleted file mode 100644
index 5b42245f01..0000000000
Binary files a/docs/gallery/websites/website-m.canouil.dev_quarto-extensions.png and /dev/null differ
diff --git a/docs/gallery/websites/website-mickael.canouil.fr.png b/docs/gallery/websites/website-mickael.canouil.fr.png
deleted file mode 100644
index 2e593be8d6..0000000000
Binary files a/docs/gallery/websites/website-mickael.canouil.fr.png and /dev/null differ
diff --git a/docs/get-started/_metadata.yml b/docs/get-started/_metadata.yml
index 0d0b3f4027..c0b35a2c9a 100644
--- a/docs/get-started/_metadata.yml
+++ b/docs/get-started/_metadata.yml
@@ -1,4 +1,4 @@
-
+body-classes: sec-getstarted
sidebar: get-started
css: tutorial.css
search: false
diff --git a/docs/guide/_metadata.yml b/docs/guide/_metadata.yml
new file mode 100644
index 0000000000..ce484acca9
--- /dev/null
+++ b/docs/guide/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide
diff --git a/docs/guide/guide.yml b/docs/guide/guide.yml
index 65fdb290e3..a70ed4a492 100644
--- a/docs/guide/guide.yml
+++ b/docs/guide/guide.yml
@@ -1,5 +1,6 @@
- title: Authoring
+ icon: pencil-square
subtitle: Create content with markdown
links:
- text: Markdown Basics
@@ -20,6 +21,7 @@
href: ../authoring/shortcodes.qmd
- title: Computations
+ icon: cpu
subtitle: Execute code and display its output
links:
- text: "Using Python"
@@ -36,6 +38,7 @@
href: ../computations/parameters.qmd
- title: Tools
+ icon: tools
subtitle: "Use your favorite tools with Quarto"
links:
- text: JupyterLab
@@ -54,6 +57,7 @@
href: ../visual-editor/index.qmd
- title: Documents
+ icon: file-earmark-text
subtitle: Generate output in many formats
links:
- text: HTML
@@ -70,6 +74,7 @@
href: ../output-formats/all-formats.qmd
- title: Presentations
+ icon: easel
subtitle: Present code and technical content
links:
- text: "Presentation Basics"
@@ -82,6 +87,7 @@
href: ../presentations/beamer.qmd
- title: Dashboards
+ icon: speedometer2
subtitle: Publish data with dashboards
links:
- text: "Dashboard Basics"
@@ -96,6 +102,7 @@
href: ../dashboards/deployment.qmd
- title: Websites
+ icon: globe2
subtitle: Create websites and blogs
links:
- text: "Creating a Website"
@@ -110,6 +117,7 @@
href: ../websites/website-listings.qmd
- title: Books
+ icon: book
subtitle: Create books and manuscripts
links:
- text: "Creating a Book"
@@ -122,6 +130,7 @@
href: ../books/book-output.qmd
- title: Manuscripts
+ icon: journal-text
subtitle: Write and publish notebook-first scholarly articles
links:
- text: Getting Started
@@ -134,6 +143,7 @@
href: /docs/manuscripts/components.qmd
- title: Interactivity
+ icon: hand-index
subtitle: Engage readers with interactivity
links:
- text: Overview
@@ -148,6 +158,7 @@
href: ../interactive/layout.qmd
- title: Publishing
+ icon: cloud-upload
subtitle: Publishing documents and sites
links:
- text: Publishing Basics
@@ -168,6 +179,7 @@
href: ../publishing/other.qmd
- title: Projects
+ icon: folder2-open
subtitle: Scale up your work with projects
links:
- text: Project Basics
@@ -184,6 +196,7 @@
href: ../projects/virtual-environments.qmd
- title: Advanced
+ icon: sliders
subtitle: Refine documents with advanced tools
links:
- text: "Includes"
diff --git a/docs/interactive/_metadata.yml b/docs/interactive/_metadata.yml
new file mode 100644
index 0000000000..19bef3349e
--- /dev/null
+++ b/docs/interactive/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-interactivity
diff --git a/docs/journals/_metadata.yml b/docs/journals/_metadata.yml
new file mode 100644
index 0000000000..ad1113e546
--- /dev/null
+++ b/docs/journals/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-extensions
diff --git a/docs/manuscripts/_metadata.yml b/docs/manuscripts/_metadata.yml
index b67c01cdf2..32a9866f05 100644
--- a/docs/manuscripts/_metadata.yml
+++ b/docs/manuscripts/_metadata.yml
@@ -1,3 +1,4 @@
+body-classes: sec-guide topic-manuscripts
page-navigation: false
css: tutorial.css
execute:
diff --git a/docs/output-formats/_metadata.yml b/docs/output-formats/_metadata.yml
new file mode 100644
index 0000000000..f1f385de98
--- /dev/null
+++ b/docs/output-formats/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-documents
diff --git a/docs/presentations/_metadata.yml b/docs/presentations/_metadata.yml
new file mode 100644
index 0000000000..a214e26620
--- /dev/null
+++ b/docs/presentations/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-presentations
diff --git a/docs/projects/_metadata.yml b/docs/projects/_metadata.yml
new file mode 100644
index 0000000000..b9e1d3a858
--- /dev/null
+++ b/docs/projects/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-projects
diff --git a/docs/publishing/_metadata.yml b/docs/publishing/_metadata.yml
new file mode 100644
index 0000000000..07487cb0bd
--- /dev/null
+++ b/docs/publishing/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-publishing
diff --git a/docs/reference/_metadata.yml b/docs/reference/_metadata.yml
index 8b8c575e46..1895f8af0b 100644
--- a/docs/reference/_metadata.yml
+++ b/docs/reference/_metadata.yml
@@ -1,6 +1,7 @@
+body-classes: sec-reference
filters:
- reference.lua
code-copy: false
css: reference.css
-search: false
\ No newline at end of file
+search: false
diff --git a/docs/reference/cells/reference.yml b/docs/reference/cells/reference.yml
index b6b1e5954e..2bfb7539c1 100644
--- a/docs/reference/cells/reference.yml
+++ b/docs/reference/cells/reference.yml
@@ -1,4 +1,5 @@
- title: "Code Cells"
+ icon: code-square
links:
- text: Jupyter
href: cells-jupyter.qmd
diff --git a/docs/reference/formats/reference.yml b/docs/reference/formats/reference.yml
index 4fe68e794e..767fb51370 100644
--- a/docs/reference/formats/reference.yml
+++ b/docs/reference/formats/reference.yml
@@ -1,4 +1,5 @@
- title: "Documents"
+ icon: file-earmark-text
links:
- text: HTML
href: html.qmd
@@ -14,6 +15,7 @@
href: epub.qmd
- title: "Presentations"
+ icon: easel
links:
- text: Revealjs
href: presentations/revealjs.qmd
@@ -23,6 +25,7 @@
href: presentations/beamer.qmd
- title: "Markdown"
+ icon: markdown
links:
- text: GitHub
href: markdown/gfm.qmd
@@ -34,6 +37,7 @@
href: markdown/markua.qmd
- title: "Wikis"
+ icon: journals
links:
- text: MediaWiki
href: wiki/mediawiki.qmd
@@ -47,6 +51,7 @@
href: wiki/xwiki.qmd
- title: "More Formats"
+ icon: grid-3x3-gap
links:
- text: JATS
href: jats.qmd
diff --git a/docs/reference/metadata/reference.yml b/docs/reference/metadata/reference.yml
index fb243e3600..0024351053 100644
--- a/docs/reference/metadata/reference.yml
+++ b/docs/reference/metadata/reference.yml
@@ -1,4 +1,5 @@
- title: "Metadata"
+ icon: tags
links:
- text: Dates
href: ../dates.qmd
diff --git a/docs/reference/projects/reference.yml b/docs/reference/projects/reference.yml
index bfe31d79fd..1494789041 100644
--- a/docs/reference/projects/reference.yml
+++ b/docs/reference/projects/reference.yml
@@ -1,4 +1,5 @@
- title: "Projects"
+ icon: folder2-open
links:
- text: Options
href: options.qmd
diff --git a/docs/reference/reference.yml b/docs/reference/reference.yml
index f2ed136492..e23a351f8c 100644
--- a/docs/reference/reference.yml
+++ b/docs/reference/reference.yml
@@ -1,4 +1,5 @@
- title: "Documents"
+ icon: file-earmark-text
links:
- text: HTML
href: formats/html.qmd
@@ -14,6 +15,7 @@
href: formats/epub.qmd
- title: "Presentations"
+ icon: easel
links:
- text: Revealjs
href: formats/presentations/revealjs.qmd
@@ -23,6 +25,7 @@
href: formats/presentations/beamer.qmd
- title: "Markdown"
+ icon: markdown
links:
- text: GitHub
href: formats/markdown/gfm.qmd
@@ -34,6 +37,7 @@
href: formats/markdown/markua.qmd
- title: "Wikis"
+ icon: journals
links:
- text: MediaWiki
href: formats/wiki/mediawiki.qmd
@@ -47,6 +51,7 @@
href: formats/wiki/xwiki.qmd
- title: "Code Cells"
+ icon: code-square
links:
- text: Jupyter
href: cells/cells-jupyter.qmd
@@ -56,6 +61,7 @@
href: cells/cells-ojs.qmd
- title: "Projects"
+ icon: folder2-open
links:
- text: "Options"
href: projects/options.qmd
@@ -67,6 +73,7 @@
href: projects/manuscripts.qmd
- title: "Metadata"
+ icon: tags
links:
- text: "Dates"
href: dates.qmd
@@ -80,6 +87,7 @@
href: metadata/brand.qmd
- title: "Command Line"
+ icon: terminal
links:
- text: "`quarto render`"
href: /docs/cli/render.qmd
diff --git a/docs/tools/_metadata.yml b/docs/tools/_metadata.yml
new file mode 100644
index 0000000000..485bbd8367
--- /dev/null
+++ b/docs/tools/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-tools
diff --git a/docs/visual-editor/_metadata.yml b/docs/visual-editor/_metadata.yml
new file mode 100644
index 0000000000..485bbd8367
--- /dev/null
+++ b/docs/visual-editor/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-tools
diff --git a/docs/websites/_metadata.yml b/docs/websites/_metadata.yml
new file mode 100644
index 0000000000..35a5d65634
--- /dev/null
+++ b/docs/websites/_metadata.yml
@@ -0,0 +1 @@
+body-classes: sec-guide topic-websites
diff --git a/docs/websites/website-listings-custom.qmd b/docs/websites/website-listings-custom.qmd
index 569c64d3fd..92a7f8cf2b 100644
--- a/docs/websites/website-listings-custom.qmd
+++ b/docs/websites/website-listings-custom.qmd
@@ -137,9 +137,9 @@ Portions of this website are built using custom listings. The best place to star
| File | Description |
|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------|
-| [gallery.yml](https://github.com/quarto-dev/quarto-web/blob/main/docs/gallery/gallery.yml) | The metadata that controls what items are displayed in the gallery listing. |
-| [gallery.ejs](https://github.com/quarto-dev/quarto-web/blob/main/docs/gallery/gallery.ejs) | The template used to display the items on the page. |
-| [index.qmd](https://github.com/quarto-dev/quarto-web/blob/main/docs/gallery/index.qmd) | The Quarto document that configures and positions the listing in the `#gallery` div. |
+| [gallery.yml](https://github.com/quarto-dev/quarto-web/blob/main/docs/gallery/legacy/gallery.yml) | The metadata that controls what items are displayed in the gallery listing. |
+| [gallery.ejs](https://github.com/quarto-dev/quarto-web/blob/main/docs/gallery/legacy/gallery.ejs) | The template used to display the items on the page. |
+| [index.qmd](https://github.com/quarto-dev/quarto-web/blob/main/docs/gallery/index.qmd) | The Quarto document that configures and positions the listing. |
: {tbl-colwidths="\[30,70\]"}
diff --git a/index.qmd b/index.qmd
index 6aa9a8370f..09948eceb4 100644
--- a/index.qmd
+++ b/index.qmd
@@ -5,7 +5,7 @@ section-divs: false
toc: false
body-classes: quarto-home
editor: source
-description: |
+description: |
An open source technical publishing system for creating beautiful articles, websites, blogs, books, slides, and more. Supports Python, R, Julia, and JavaScript.
hide-description: true
image: assets/images/quarto-dark-bg.jpeg
@@ -25,10 +25,10 @@ resources:
::: {.hero-banner}
-
::: {.content-block .py-4}
::: {.hero-text}
+
# Welcome to Quarto^[®]{.trademark}^ {.mt-1}
::: {.h3}
@@ -38,7 +38,7 @@ An open-source scientific and technical publishing system
- Author using [Jupyter](https://jupyter.org) notebooks or with plain text markdown in your favorite editor.
- Create dynamic content with [Python](/docs/computations/python.qmd), [R](/docs/computations/r.qmd), [Julia](/docs/computations/julia.qmd), and [Observable](/docs/computations/ojs.qmd).
- Publish reproducible, production quality articles, presentations, dashboards, websites, blogs, and books in HTML, PDF, MS Word, ePub, and more.
-- Share knowledge and insights organization-wide by publishing to [Posit Connect](/docs/publishing/rstudio-connect.qmd), [Confluence](/docs/publishing/confluence.qmd), or other publishing systems.
+- Share knowledge and insights organization-wide by publishing to [Posit Connect](/docs/publishing/rstudio-connect.qmd), [Confluence](/docs/publishing/confluence.qmd), or other publishing systems.
- Write using [Pandoc](https://pandoc.org) markdown, including equations, citations, crossrefs, figure panels, callouts, advanced layout, and more.
::: {.h3}
@@ -51,8 +51,8 @@ Analyze. Share. Reproduce. You have a story to tell with data---tell it with Qua
:::
::: {.g-col-12 .g-col-sm-4 .mb-2}
[Guide](/docs/guide/){#btn-guide .btn-action .btn-secondary .btn .btn-lg .w-100 role="button"}
-:::
-:::
+:::
+:::
:::
::: {.hero-animation}
@@ -103,20 +103,30 @@ Analyze. Share. Reproduce. You have a story to tell with data---tell it with Qua
:::
+:::
+::: {.content-block .home-chooser}
+
+## Where do you want to go?
+
+::: {.choices}
+
+- [[[]{.bi .bi-rocket-takeoff}]{.choice-glyph aria-hidden="true"} [Get Started]{.choice-name} [Install Quarto and follow the tutorials.]{.choice-tagline}](/docs/get-started/index.qmd){.choice .sec-getstarted}
+- [[[]{.bi .bi-signpost-split}]{.choice-glyph aria-hidden="true"} [Guide]{.choice-name} [Learn authoring, computations, formats and publishing.]{.choice-tagline}](/docs/guide/index.qmd){.choice .sec-guide}
+- [[[]{.bi .bi-braces}]{.choice-glyph aria-hidden="true"} [Reference]{.choice-name} [Every option for formats, cells and projects.]{.choice-tagline}](/docs/reference/index.qmd){.choice .sec-reference}
+- [[[]{.bi .bi-puzzle}]{.choice-glyph aria-hidden="true"} [Extensions]{.choice-name} [Find, use and create extensions.]{.choice-tagline}](/docs/extensions/index.qmd){.choice .sec-extensions}
+- [[[]{.bi .bi-images}]{.choice-glyph aria-hidden="true"} [Gallery]{.choice-name} [Real-world examples, by what you want to make.]{.choice-tagline}](/docs/gallery/index.qmd){.choice .sec-gallery}
+- [[[]{.bi .bi-newspaper}]{.choice-glyph aria-hidden="true"} [Blog [[]{.bi .bi-box-arrow-up-right}]{aria-hidden="true"} [(external site)]{.visually-hidden}]{.choice-name} [Release notes and news from the Quarto team.]{.choice-tagline}](https://opensource.posit.co/blog/q/quarto/){.choice .sec-blog}
:::
+:::
::: {.hello-quarto .alt-background}
-::: {.content-block .mt-2 .pt-4 .pb-2}
+::: {.content-block}
-::: {.hello-quarto-banner}
-::: {.grid .gap-1}
-::: {.g-col-lg-4 .g-col-12}
## Hello, Quarto
-:::
-::: {.g-col-lg-8 .g-col-12}
+
Python
@@ -131,35 +141,45 @@ Analyze. Share. Reproduce. You have a story to tell with data---tell it with Qua
Observable
-:::
-:::
-:::
-
+
+
+
-
-::: {.grid .gap-3}
-::: {.g-col-md-11 .g-col-12 .mb-0}
-Combine Jupyter notebooks with flexible options to produce production quality output in a wide variety of formats. Author using traditional notebook UIs or with a plain text markdown representation of notebooks.
+::: {.demo}
+
+::: {.demo-head}
+[[]{.bi .bi-filetype-py}]{.demo-glyph aria-hidden="true"} Combine Jupyter notebooks with flexible options to produce production quality output in a wide variety of formats.
:::
-::: {.g-col-sm-6 .g-col-12}
+
+::: {.demo-grid}
+
+::: {.demo-cell}
{fig-alt="Example Jupyter notebook entitled Palmer Penguins with code cells, text, and a scatterplot."}
:::
-::: {.g-col-sm-6 .g-col-12}
+::: {.demo-cell}
{fig-alt="Output of example Jupyter notebook, Palmer Penguins, in HTML showing title, metadata, text, code, and scatterplot. At the top there is a dropdown option to show or hide the code."}
:::
+
+:::
+
:::
-::: {.grid}
-::: {.g-col-md-11 .g-col-12}
-Quarto is a multi-language, next generation version of R Markdown from Posit, with many new features and capabilities. Like R Markdown, Quarto uses [knitr](https://yihui.org/knitr/) to execute R code, and is therefore able to render most existing Rmd files without modification.
+::: {.demo}
+
+::: {.demo-head}
+[[]{.bi .bi-r-circle}]{.demo-glyph aria-hidden="true"} Quarto is a multi-language, next generation version of R Markdown from Posit, with many new features and capabilities.
:::
-::: {.g-col-md-6 .g-col-12}
+
+::: {.demo-grid}
+
+::: {.demo-cell}
+
````markdown
---
title: "ggplot2 demo"
@@ -189,21 +209,31 @@ ggplot(airquality, aes(Temp, Ozone)) +
````
+
:::
-::: {.g-col-md-6 .g-col-12}
-{.hello-output fig-alt="Example output with title (ggplot2 demo), author (Norah Jones), and date (5/22/2021). Below is a header reading Air Quality followed by body text (Figure 1 further explores the impact of temperature on ozone level.) with a toggleable code field, and figure with caption Figure 1 Temperature and ozone level."}
+
+::: {.demo-cell}
+{fig-alt="Example output with title (ggplot2 demo), author (Norah Jones), and date (5/22/2021). Below is a header reading Air Quality followed by body text (Figure 1 further explores the impact of temperature on ozone level.) with a toggleable code field, and figure with caption Figure 1 Temperature and ozone level."}
:::
+
+:::
+
:::
-::: {.grid}
-::: {.g-col-md-11 .g-col-12}
-Combine markdown and Julia code to create dynamic documents that are fully reproducible. Quarto executes Julia code either via the [`julia` engine](#using-the-julia-engine) using [QuartoNotebookRunner.jl](https://github.com/PumasAI/QuartoNotebookRunner.jl/) or via the [`jupyter` engine](#using-the-jupyter-engine) using the [IJulia](https://github.com/JuliaLang/IJulia.jl) Jupyter kernel, enabling you to author in plain text (as shown below) or render existing Jupyter notebooks.
+::: {.demo}
+
+::: {.demo-head}
+[[]{.bi .bi-file-earmark-code}]{.demo-glyph aria-hidden="true"} Combine markdown and Julia code to create dynamic documents that are fully reproducible.
:::
-::: {.g-col-md-6 .g-col-12}
+
+::: {.demo-grid}
+
+::: {.demo-cell}
+
````markdown
---
title: "Plots Demo"
@@ -236,22 +266,31 @@ plot(sin,
````
+
+:::
+
+::: {.demo-cell}
+{fig-alt="Example Plots Demo output with title, author, date published and main section on Parametric plots which contains text, a toggleable code field, and the output of the plot, with the caption Figure 1 Parametric Plots."}
:::
-::: {.g-col-md-6 .g-col-12}
-{.hello-output fig-alt="Example Plots Demo output with title, author, date published and main section on Parametric plots which contains text, a toggleable code field, and the output of the plot, with the caption Figure 1 Parametric Plots."}
:::
+
:::
-::: {.grid}
-::: {.g-col-md-11 .g-col-12}
-Quarto includes native support for Observable JS, a set of JavaScript enhancements created by Mike Bostock (the author of D3). Observable JS uses a reactive execution model, and is especially well suited for interactive data exploration and analysis.
+::: {.demo}
+
+::: {.demo-head}
+[[]{.bi .bi-filetype-js}]{.demo-glyph aria-hidden="true"} Quarto includes native support for Observable JS, a set of JavaScript enhancements created by Mike Bostock (the author of D3).
:::
-::: {.g-col-md-6 .g-col-12}
+
+::: {.demo-grid}
+
+::: {.demo-cell}
+
````markdown
---
title: "observable plot"
@@ -282,11 +321,13 @@ Plot.plot({
})
```
````
+
:::
+::: {.demo-cell}
+{fig-alt="Example output with title, author, and date. Below, the main section reads Seattle Precipitation by Day (2012 to 2016) with a toggleable section to show code and a heatmap of the precipitation by day."}
+:::
-::: {.g-col-md-6 .g-col-12}
-{style="" fig-alt="Example output with title, author, and date. Below, the main section reads Seattle Precipitation by Day (2012 to 2016) with a toggleable section to show code and a heatmap of the precipitation by day."}
:::
:::
@@ -295,76 +336,90 @@ Plot.plot({
-
-
-::: {.grid}
-
-
-:::
:::
:::
+::: {.content-block .home-features}
+
+## Features
-::: {.content-block .py-4}
::: {.features}
::: {.feature}
-## Dynamic Documents
+
+### [[]{.bi .bi-cpu}]{.feature-glyph aria-hidden="true"} Dynamic Documents
+
Generate dynamic output using Python, R, Julia, and Observable. Create reproducible documents that can be regenerated when underlying assumptions or data change.
::: {.learn-more}
[Learn more »](/docs/computations/python.qmd)
:::
+
:::
::: {.feature}
-## Beautiful Publications
+
+### [[]{.bi .bi-file-earmark-text}]{.feature-glyph aria-hidden="true"} Beautiful Publications
+
Publish high-quality articles, reports, presentations, websites, and books in HTML, PDF, MS Word, ePub, and more. Use a single source document to target multiple formats.
::: {.learn-more}
[Learn more »](/docs/output-formats/all-formats.qmd)
:::
+
:::
::: {.feature}
-## Scientific Markdown
+
+### [[]{.bi .bi-pencil-square}]{.feature-glyph aria-hidden="true"} Scientific Markdown
+
Pandoc markdown has excellent support for LaTeX equations and citations. Quarto adds extensions for cross-references, figure panels, callouts, advanced page layout, and more.
::: {.learn-more}
[Learn more »](/docs/authoring/markdown-basics.qmd)
:::
+
:::
::: {.feature}
-## Authoring Tools
+
+### [[]{.bi .bi-tools}]{.feature-glyph aria-hidden="true"} Authoring Tools
+
Use your favorite tools including Positron, VS Code, RStudio, Jupyter Lab, or any text editor. Use the Quarto visual markdown editor for long-form documents.
::: {.learn-more}
[Learn more »](/docs/get-started/index.qmd)
:::
+
:::
::: {.feature}
-## Interactivity
+
+### [[]{.bi .bi-hand-index}]{.feature-glyph aria-hidden="true"} Interactivity
+
Engage readers by adding interactive data exploration to your documents using Jupyter Widgets, htmlwidgets for R, Observable JS, and Shiny.
::: {.learn-more}
[Learn more »](/docs/interactive/)
:::
+
:::
::: {.feature}
-## Websites and Books
+
+### [[]{.bi .bi-globe2}]{.feature-glyph aria-hidden="true"} Websites and Books
+
Publish collections of documents as a blog or full website. Create books and manuscripts in both print formats (PDF and MS Word) and online formats (HTML and ePub).
::: {.learn-more}
[Learn more »](/docs/websites/)
:::
-:::
:::
+
:::
+:::
::: {.get-started .alt-background}
::: {.content-block .py-5 .grid}