refactor: move the site theme and chrome into a local extension

.claude/skills/blog-post/references/thumbnail-guide.md

@@ -35,7 +35,7 @@ quarto.org / Open Graph standard) — don't copy dimensions from those examples.
 
 ## Quarto Brand Colors
 
-Sourced from the website CSS (`index.css`):
+Sourced from the website SCSS (`_extensions/quartoorg/scss/partials/_home.scss`):
 
 | Color | Hex | Usage |
 |-------|-----|-------|
@@ -148,7 +148,7 @@ SVGs don't center properly in listing cards or social card previews — the
 HTML uses flexbox for centering which SVG can't replicate without duplicating all
 the layout logic. The SVG is only a source file for regenerating the PNG.
 
-The Quarto logo SVG is at the quarto-web repo root: `quarto-icon.svg` (fill color `#74AADB`
+The Quarto logo SVG is in the quarto-web repo at `assets/images/quarto-icon.svg` (fill color `#74AADB`
 — recolor to `#5286AB` for thumbnails or `white` for dark backgrounds).
 
 ### Attribution

.githooks/README.md

@@ -9,3 +9,5 @@ git config core.hooksPath .githooks
 ## Hooks
 
 **`pre-commit`** — Blocks commits where a `.qmd` file with a `_freeze/` entry was edited but `_freeze/` was not updated. Fix: `quarto render <file.qmd>`, then commit the updated `_freeze/` output alongside the source.
+It first runs `_tools/check-site-format.ts`, which blocks a page or a `_metadata.yml` that sets `format: html`, since that drops the site theme.
+Remove the `format` key, or use `quartoorg-html` when the page lists several formats.

.githooks/pre-commit

@@ -1,6 +1,13 @@
 #!/bin/bash
-# Git pre-commit hook: verify _freeze/ is current for staged .qmd files.
+# Git pre-commit hook: check page formats, then verify _freeze/ is current for
+# staged .qmd files.
 # Setup: git config core.hooksPath .githooks
+set -euo pipefail
 
 HOOK_DIR="$(cd "$(dirname "$0")" && pwd)"
+if command -v quarto >/dev/null 2>&1; then
+	quarto run "$HOOK_DIR/../_tools/check-site-format.ts" --staged
+else
+	echo "pre-commit: quarto not found, skipping the page format check (CI still runs it)." >&2
+fi
 exec bash "$HOOK_DIR/check-freeze.sh" commit

.github/workflows/preview.yml

@@ -29,6 +29,25 @@ jobs:
           echo "::error title=Manual action required for preview::PR from fork can't be deployed as preview to Netlify automatically. Use '/deploy-preview' command in comments to trigger the preview manually."
         shell: bash
 
+  check-site-format:
+    # Runs on pull requests, forks included: a page with `format: html`
+    # renders without the site theme and gives no error.
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+      - name: Set up Quarto
+        uses: quarto-dev/quarto-actions/setup@v2
+      - name: Test the page format check
+        run: quarto run _tools/check-site-format.test.ts
+      - name: Check page formats
+        run: quarto run _tools/check-site-format.ts
+
   build-deploy-preview:
     # Deploy a preview only if 
     # - the PR is not from a fork,

_extensions/quartoorg/_extension.yml

@@ -0,0 +1,53 @@
+title: quarto.org website
+author: Quarto
+version: 1.0.0
+quarto-required: ">=1.9.0"
+contributes:
+  formats:
+    html:
+      toc: true
+      theme:
+        light: [cosmo, scss/quartoorg.scss]
+        dark: [cosmo, scss/quartoorg-dark.scss]
+      code-copy: true
+      code-overflow: wrap
+      include-in-header:
+        - assets/scripts/supported-by-posit.html
+      include-after-body:
+        - assets/scripts/page-tweaks.html
+      grid:
+        sidebar-width: 250px
+        body-width: 900px
+        margin-width: 300px
+      shortcodes:
+        - shortcodes/page-chooser.lua
+      filters:
+        - filters/tools-tabset.lua
+        - filters/color-box.lua
+        - filters/shift-headings.lua
+        - at: post-quarto
+          path: filters/include-dark.lua
+  project:
+    project:
+      type: website
+    website:
+      image: /assets/images/quarto-dark-bg.jpeg
+      plausible-analytics:
+        path: assets/scripts/plausible.html
+      open-graph: true
+      twitter-card: true
+      repo-actions: [edit, issue]
+      page-navigation: true
+      bread-crumbs: true
+      search:
+        show-item-context: true
+        type: overlay
+      navbar:
+        background: light
+        logo: /assets/images/quarto.png
+        logo-alt: "Quarto logo."
+        title: false
+        collapse-below: lg
+    syntax-highlighting: a11y
+    respect-user-color-scheme: true
+    format: quartoorg-html

_extensions/quartoorg/assets/scripts/supported-by-posit.html

@@ -0,0 +1,8 @@
+<script src="https://cdn.jsdelivr.net/gh/posit-dev/supported-by-posit/js/badge.min.js"
+  data-light-bg="#E8EDF2"
+  data-light-text="#404041"
+  data-light-lt="#ee6331"
+  data-light-gt="#447099"
+  data-dark-bg="#333333"
+  data-dark-lt="#ffffff"
+  data-dark-gt="#ffffff"></script>

filters/color-box.lua → _extensions/quartoorg/filters/color-box.lua

@@ -5,7 +5,6 @@ Span = function(s)
   if s.classes:includes('color-box') then
     local color
     if  s.attributes['color'] then
-      quarto.log.output("HERE")
       color = s.attributes['color']
       s.attributes.color = nil
     elseif #s.content == 1 and s.content[1] and s.content[1].t == "Code" and s.content[1].text and s.content[1].text:sub(1, 1) == '#' then

_extensions/quartoorg/scss/partials/_buttons.scss

@@ -0,0 +1,16 @@
+.btn-action-primary {
+  color: white;
+  background-color: #447099;
+}
+
+.btn-action-primary:hover {
+  background-color: #305775;
+  color: white;
+}
+
+.btn-action {
+  min-width: 165px;
+  border-radius: 30px;
+  border: none;
+}
+

_extensions/quartoorg/scss/partials/_cards.scss

@@ -0,0 +1,105 @@
+
+@media (max-width: 575px) {
+
+.link-cards .card {
+  margin-bottom: 20px;
+  margin-right: 35px;
+}
+
+}
+
+@media (min-width: 576px) { 
+.link-cards {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.link-cards .card {
+  width: 190px;
+  margin: 0 20px 12px 0;
+}
+
+
+}
+
+
+.link-cards .card {
+  border: none;
+  padding: 0;
+}
+
+/* Card titles are h2 for heading order; keep the old h4 look */
+.link-cards .card-title h2 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.2;
+  opacity: 0.9;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.link-cards .card-title p {
+  margin-bottom: 0;
+}
+
+.link-cards .card-subtitle p {
+  line-height: 1.2;
+  opacity: 0.9;
+  margin-bottom: 0.5rem;
+}
+
+.link-cards .card-subtitle {
+  margin-bottom: 0.7rem;
+}
+
+.link-cards .card-body {
+  padding: 0.5rem;
+  padding-left: 0.1rem;
+}
+
+.link-cards .card-body ul {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: none;
+}
+
+.link-cards .card-body ul a {
+  text-decoration: none;
+}
+
+.link-cards .card-body ul li {
+  padding-bottom: 0.2rem;
+}
+
+
+.card .source-code {
+  margin-top: 3px;
+}
+
+.carousel.card {
+  font-size: 16px;
+  padding-top: 2em;
+}
+
+.carousel.card a {
+  text-decoration: none;
+}
+
+.carousel img {
+  width: 70%;
+  margin-bottom: 110px;
+}
+
+.carousel .carousel-control-prev-icon, 
+.carousel .carousel-control-next-icon {
+  margin-bottom: 110px;
+}
+
+
+.gallery-category {
+  column-gap: 10px;
+}
+

_extensions/quartoorg/scss/partials/_color-box.scss

@@ -0,0 +1,12 @@
+span.color-box-container {
+  display: inline-flex;
+  align-items: center; /* Align vertically */
+}
+
+span.color-box {
+  display: inline-block;
+  width: 1em; /* Width of the color box */
+  height: 1em; /* Height of the color box */
+  margin-right: 0.2em; /* Space between box and text */
+  border: 1px solid #000; /* Border color */
+}

_extensions/quartoorg/scss/partials/_content.scss

@@ -0,0 +1,72 @@
+
+.platform-table td {
+  vertical-align: middle;
+}
+
+.platform-table td > div.sourceCode {
+  margin-top: 0.3rem;
+  margin-bottom: 0.3rem;
+}
+
+
+.document-example {
+  opacity: 0.9;
+  padding: 6px; 
+  font-weight: 500;
+  margin-bottom: 1rem;
+}
+
+.document-example div {
+  padding: 5px;
+}
+
+
+.document-example .citation {
+  color: blue;
+}
+
+body.quarto-dark .document-example .citation {
+  color: var(--bs-link-color);
+}
+
+.trademark {
+  font-size: 0.6rem;
+  display: inline-block;
+  margin-left: -3px;
+}
+
+.search-attribution {
+  margin-top: 20px;
+  padding-bottom: 20px;
+  height: 40px;
+}
+
+// Toolbar icons in prose: shown as a key cap, without <kbd> (see _style-guide.md).
+// Extends Quarto's .kbd so light and dark themes each pick up their own colors.
+img.ui-icon {
+  @extend .kbd;
+  padding: 0.15rem 0.3rem;
+  vertical-align: middle;
+  box-sizing: content-box;
+}
+
+// Quarto's title-block.scss sets `.quarto-category { opacity: 0.6 }`.
+// That drops the category chips below 4.5:1 (2.77 light, 3.43 dark).
+.quarto-title .quarto-categories .quarto-category {
+  opacity: 1;
+}
+
+/* Quarto's listing-table styles remove link underlines, so links inside
+   a description are marked by color alone: 2.23:1 against the body text,
+   short of the 3:1 WCAG 1.4.1 needs (axe link-in-text-block). */
+table.quarto-listing-table .listing-description a {
+  text-decoration: underline;
+}
+
+/* Screen-reader-only code blocks (get-started Jupyter pages). Quarto's
+   `pre.sourceCode { overflow-y: visible !important }` beats Bootstrap's
+   `.visually-hidden { overflow: hidden !important }`, which leaves a 1px
+   box that scrolls and fails axe's scrollable-region-focusable. */
+pre.sourceCode.visually-hidden {
+  overflow: hidden !important;
+}