## Summary
**Problem:** Mermaid diagrams briefly showed their raw source before the
SVG appeared, stayed on the wrong palette after a light/dark theme
toggle, and could leave Mermaid's error graphic in the page when a
diagram failed to parse.
**Why this change:** Diagrams are used more often in the docs, so the
renderer needs to match the site theme and avoid flashing source text
while SVGs load.
**Solution:** Replace `mermaid.run()` with a controlled
`mermaid.render()` loop that caches each block's source, skips stale
async results, re-renders when the `<html>` dark class changes,
suppresses Mermaid's default error SVG, and hides `pre.mermaid` until an
SVG is present (or a render error sets `data-error` so the source can
still be inspected).
@netlify /get-started/docker-concepts/the-basics/what-is-a-registry/
Preview:
https://deploy-preview-26304--docsdocker.netlify.app/get-started/docker-concepts/the-basics/what-is-a-registry/
Example of pre-fix behavior:
https://deploy-preview-26283--docsdocker.netlify.app/accounts/organization/
Generated by Cursor
---------
Co-authored-by: Cursor <cursoragent@cursor.com>
Adds a Hugo codeblock render hook that turns ```mermaid fences into
<pre class="mermaid"> containers, plus a lazily-loaded mermaid bundle
that only ships on pages that actually contain a diagram. Mirrors the
existing YouTube embed pattern (Store flag + conditional script tag in
baseof) so the main scripts.js bundle stays unchanged.
Hugo's html/template JS-escapes string values inside <script> blocks.
Calling jsonify per-field produced quoted strings like "https://..."
which were then re-escaped, embedding literal quote characters in the
endpoint value passed to the SDK.
Fix by jsonifying the whole config dict at once and marking it safeJS
so html/template does not apply a second round of escaping.
Also extract the environment ternary out of the Marlin constructor call
for readability.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Introduces @docker/marlin-sdk-web-public for first-party pageview and
click analytics, bundled into scripts.js via Hugo's existing js.Build
pipeline. Config is emitted to window.__marlinConfig from head.html and
gated to prod/staging only.
Renames data-heap-id attributes on the markdown-dropdown buttons to
marlin-action so they are picked up by the SDK's auto-click tracking.
TODO: replace the REPLACE-ME endpoint placeholders in hugo.yaml with
the canonical Marlin ingestion URLs from the data-platform team.
TODO: heap.track() calls in youtube-script.html are left in place —
the public SDK exposes no equivalent track() method, so video
play/pause events cannot be migrated yet.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
> 🤖 Generated with [Claude Code](https://claude.com/claude-code)
## Summary
`theme.js` unconditionally wrote the resolved preference to
`localStorage` on every page load, permanently locking in a concrete
`"light"` or `"dark"` value even for first-time visitors — making it
impossible to track OS preference changes after any site visit. Removed
the unconditional `localStorage.setItem` from `theme.js` so the early
script only reads (never writes); the Alpine.js toggle in `header.html`
now cycles through three states (light → dark → auto), with "auto"
removing the `theme-preference` key and resolving from
`prefers-color-scheme` with a live `matchMedia` change listener so the
theme updates immediately when the OS preference changes. A contrast
icon indicates auto mode; all three icon spans are driven by Alpine
`x-show` directives rather than pure CSS dark-mode classes.
**Verified:** logic matches the standard three-state pattern;
`prefers-color-scheme` media query and `matchMedia` change listener are
the canonical browser APIs for system-preference tracking.
**Checked:** no other files reference `theme-preference` or the theme
toggle; no CSS changes required.
Closes#23177
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Configure marked.js to escape HTML entities in text tokens while
preserving code blocks. This allows angle brackets like <target-name>
to display correctly in regular text without being interpreted as HTML
tags, while keeping code examples intact.
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
By enabling ignoreLocation and useExtendedSearch, we ensure
space-delimited keywords are not matched as a single phrase, and the
location of those individual matches does not matter
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
When accessing a page that's far down the left-hand sidebar, we have a
script that would scroll the sidebar position down so that the selected
item is visible. In some cases, this would cause some confusion and
jittery rendering on page load.
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Removes the alpine.js components for the sidebar, and uses vanilla
eventlisteners instead. Also moved off javascript for handling the
expanse/collapse display, in favor of using css only.
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Before this change, the Dockerfile tooltip script marked all occurences
of keywords, as defined by the lexer, as Dockerfile instructions in a
`dockerfile` code block. This meant some tokens parsed from heredocs
would be included. The matched keyword token is now compared against a
hard-coded list of actual Dockerfile instructions before they're
annotated.
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Search results include the hostname by default.
This change strips the hostname which makes it
possible to search when the site is deployed on
other domains, such as netlify and localhost.
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
* POC image modal
* standardize image size
* fixes
* fixes
* reverse an earlier commit and tweak further
* experiments
* more playing around
* simplify
* David's magic
* david fix
* test
* test 2
* Final fix
* now the final fix
