refactor: move the site theme and chrome into a local extension (#2222)

Move the site theme, scripts, Lua filters and page chrome into a local
extension at _extensions/quartoorg/, used through a quartoorg project
type. Pages inherit quartoorg-html from the project instead of naming
it, so the theme is set in one place and a page cannot drop it
silently. This centralises the themes and makes the site easier to
maintain, and it lets #2140 pick up the same chrome.

- Move the page chooser shortcode and the accessibility fixes from
  main into the extension, with their CSS in the theme SCSS.
- Move brand images to assets/images/ and redirect the old root URLs
  that other sites and docs still load: /quarto.png, /favicon.png, the
  og:image files, and the hero and Posit logo images. Files the home
  page still serves from images/ stay where they are.
- Add _tools/check-site-format.ts to CI and the pre-commit hook. It
  fails when a format: html page drops the site theme.
- Dark mode borders use $gray-400, which is 3.70:1 against the page
  instead of 1.08:1. The main banner is brand blue in dark mode too,
  and the prerelease banner moves to #e60033 (white text 4.76:1).

Notebook preview pages still render with the built-in html format, so
they lose the Posit badge, code copy buttons and site grid widths.

See quarto-dev/quarto-cli#14954

Author: mcanouil

.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/page-chooser/_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/_extension.yml

@@ -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>

js.html …uartoorg/assets/scripts/page-tweaks.htmljs.html renamed to _extensions/quartoorg/assets/scripts/page-tweaks.html js.html renamed to _extensions/quartoorg/assets/scripts/page-tweaks.html

@@ -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