90 Commits
Author SHA1 Message Date
Alexa KristensenandCursor e44889768c ux: improve Mermaid rendering and theme switching (#26304)
## 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>
2026-10-08 10:41:05 -05:00
David Karlsson c93c72c7c2 Merge pull request #25979 from dvdksn/codex/sandbox-interactive-diagram
docs: prototype interactive Sandboxes diagram
2026-09-21 16:23:46 +02:00
David KarlssonandClaude Sonnet 4.6 f02e2a5633 Revamp the guides section: taxonomy, single-page structure, and new landing/filter UX (#25338)
## What

A full revamp of the `/guides` section — taxonomy, structure, and UX.

Preview: https://deploy-preview-25338--docsdocker.netlify.app/guides/

### Taxonomy & structure
- Replaces the sprawling 24-tag set with a focused 9-tag taxonomy
aligned to use case / SDLC: **Languages & frameworks, AI, Testing,
CI/CD, Security, Databases, Deployment, Admin, Hands-on labs**.
- Removes the languages taxonomy entirely (`data/languages.yaml` and all
`languages:` front matter).
- Collapses all multi-page guide series into single pages, with aliases
so old sub-page URLs continue to resolve.
- Deletes redirect-only shim pages and flattens directory-wrapped single
pages.

### Landing page (`/guides/`)
- A clean index: hero, then category sections listing each guide as a
plain **title / summary** row.
- **Browse rail** (sticky, left): click a topic to filter the page to
just that topic's guides; "All guides" resets. A count + Clear bar
appears while filtering.
- **Text filter**: instant client-side search over title, summary, and
tags. Topic filter and text search are mutually exclusive and share the
same flat-list view.
- No more "Featured guides" section.

### Guide content pages
- Removes the left sidebar for the guides section (mobile drawer kept).
- Centered reading column (`92ch`) with the TOC taking the remaining
width.
- Summary rendered as a lead paragraph under the h1.
- TOC scrollbar auto-hides until hover; breadcrumbs render at a
consistent size inside and outside `prose`.

## Notes
- Deep full-text search across guide bodies is still handled by the
existing site-wide Pagefind (⌘K); the landing filter is the fast
metadata-narrowing surface.
- `series.html` is retained — it's still used by `get-started` pages.

## Validation
- Site builds clean locally (Hugo dev server, no errors / broken refs).
- All collapsed sub-page URLs redirect via aliases.

## Follow-ups

- Prune guides that we no longer need/want
- Tighten the guides that span too many concepts (e.g. language guides;
remove cicd/deploy/sscs)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-01 10:47:10 +02:00
David KarlssonandClaude Sonnet 4.6 ee71c80562 chore: migrate icons from Material Symbols to Heroicons
Replaces @material-symbols/svg-400 (5.5 MB) with heroicons (488 KB) — an
11x reduction in icon asset size. Heroicons uses a single consistent
distribution format (24px solid SVGs, fill="currentColor") eliminating
the need for the separate utils/svg.html partial, the icon-svg-stroke CSS
utility, and the dual-path resolution logic in icon.html.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2026-05-18 12:05:54 +02:00
David KarlssonandClaude Sonnet 4.6 db740fe266 docs: add auto/system theme option to theme toggle (#24519)
> 🤖 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>
2026-04-02 06:19:52 +02:00
David Karlsson f929b8f1ed site: implement pagefind component ui for search modal
- Add pagefind-component-ui.css and .js assets
- Replace search bar with custom button that opens modal
- Add custom result template with Tailwind classes
- Add dark mode styling for modal and result highlights
- Support Cmd/Ctrl+K keyboard shortcut

Assisted-By: cagent
2026-02-09 15:43:37 +01:00
David Karlsson dac9999c44 site: update footer styling
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2026-01-21 15:56:23 +01:00
David Karlsson 2c59158bc3 site: update landing page layout
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2026-01-21 15:56:23 +01:00
David Karlsson d3a595ef6a site: use gordon for ask ai
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2026-01-13 12:21:28 +01:00
David Karlsson 88c600157b fix: improve contrast in code blocks where language is unrecognized
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2026-01-07 10:11:23 +01:00
David Karlsson 4cc579f17b site: improve header buttons, remove support link
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2025-12-12 17:43:34 +01:00
Arthur 81c1094570 ux: improve release notes formatting (#23293)
Improve formatting of dowload links in release notes.
2025-08-22 12:34:28 +02:00
Arthur 20492f8441 mcp: various touch ups (#23251)
Reorder pages in MCP TOC, touch up content, add summary bars, use tabs
where appropriate, etc.
2025-08-20 15:44:19 +02:00
Arthur 00da2c5f7f ux: clean up footer (#23261)
Simplify the footer.

<img width="1238" height="516" alt="screen"
src="https://github.com/user-attachments/assets/fe397763-28ab-4ad4-84d5-ba3fc9767885"
/>
2025-08-19 11:07:03 +02:00
Arthur 39ff715091 ux: move support and theme buttons to topnav (#23243)
Move the contact support button and the theme switch button to the top
nav bar.
2025-08-15 10:51:55 +02:00
Arthur b427433371 ux: copy search term to AI widget (#23212)
Harmonize buttons in the nav and automatically copy the search term to
the AI widget.
Uses "cmd k" to open the AI widget instead of search.
Touch up search results.
2025-08-11 09:33:02 +02:00
Arthur 158aa8e833 fix: better support for unrecognized languages (#23188)
<!--Delete sections as needed -->

## Description

Degrade nicely when a code fence uses an unrecognized language.

<img width="1865" height="628" alt="Frame 35"
src="https://github.com/user-attachments/assets/e819a128-4025-404b-a421-51f571382d2e"
/>
2025-07-30 16:55:18 +02:00
Arthur c7f64f3ee1 ui: add 'open in Claude/Chatgpt' to page options (#23110) 2025-07-18 15:16:24 +02:00
Arthur b6c022761b add MCP Gateway (#22935)
<!--Delete sections as needed -->

## Description

<!-- Tell us what you did and why -->

## Related issues or tickets

<!-- Related issues, pull requests, or Jira tickets -->

## Reviews

<!-- Notes for reviewers here -->
<!-- List applicable reviews (optionally @tag reviewers) -->

- [ ] Technical review
- [ ] Editorial review
- [ ] Product review
2025-07-09 16:56:49 +02:00
Arthur a949a7335a fix: visual touch-ups (#23012)
- **increase h2 mt**
- **tabs: remove rounded border**
- **fix page action icons**
- **increase article width**
- **reduce breadcrumb font size**
2025-07-07 12:41:58 +02:00
Arthur 21b9a3f8bc chore: reduce font size (#22968) 2025-07-01 11:19:01 -04:00
Arthur 03ae6f16f8 chore: fix search result color (#22962)
Some parts of the search results window are hard to read. Let's fix
this.

Before: see live website
After: 

![Screenshot 2025-07-01 at 12 45
40](https://github.com/user-attachments/assets/34e8e10c-d2ab-4c8b-9d83-07299915464e)
![Screenshot 2025-07-01 at 12 45
49](https://github.com/user-attachments/assets/a851dcdb-5423-40bc-9a8b-19cd949c408c)
2025-07-01 13:00:56 +02:00
Arthur 5d9bf839f1 fix: codeblock line nums (#22866) 2025-06-18 15:38:16 +02:00
Sarah Sanders a4d2113313 fix: highlighting in code blocks (#22836)
## Description
- Highlighted lines for code blocks in dark mode are not rendering
correctly

## Related issues or tickets
https://docker.atlassian.net/browse/ENGDOCS-2731

## Reviews
- [ ] Technical review
- [ ] Editorial review
- [ ] Product review
2025-06-16 11:15:12 -04:00
Arthur f60a4283a7 ux: touch up tabs (#22783) 2025-06-05 10:12:35 +01:00
Allie Sadler 5485c9f412 Revert "ux: touch up tabs" (#22779)
Reverts docker/docs#22774
2025-06-05 08:21:51 +01:00
Arthur 17ef8a68a3 ux: touch up tabs (#22774)
Reduce magins, add hover effect, add light background

![Frame
31](https://github.com/user-attachments/assets/1b028adf-3baf-4588-9161-329b272ffb8e)
2025-06-05 09:01:58 +02:00
Arthur 6a940f3b2a ux: update code block styling (#22761)
![export](https://github.com/user-attachments/assets/9a9df60b-22db-42b9-9b5d-3d2c7812bb0e)
2025-06-04 15:38:11 +02:00
Arthur 9eff1ba5fc theme: extract more styles (#22734)
Extract shared styling into appropriate utilities.
Improve toc width.
2025-05-30 09:20:56 -07:00
Arthur 1686e58dd1 fix: various theme improvements (#22725)
Harmonize various areas of the theme.
2025-05-30 11:57:20 +02:00
Arthur 038e6dc682 chore: update Tailwind to v4 (#22666)
- Extract classes to utilities and components.
- Reduce number of colors used.
- Harmonize button colors.
- Restyle admonitions.
- Move **Page options** button to main article.
- Various color tweaks.
2025-05-28 08:37:10 +01:00
Craig Osterhout 6827d48e39 style: update nested ol (#22057)
<!--Delete sections as needed -->

## Description

Update style for nested ordered lists to use numbers, then letters, then
roman numerals.

Example:

https://deploy-preview-22057--docsdocker.netlify.app/contribute/components/lists/
https://docs.docker.com/contribute/components/lists/


![image](https://github.com/user-attachments/assets/bdcaf793-e970-402a-8e8a-3c18d5554584)

## Related issues or tickets

<!-- Related issues, pull requests, or Jira tickets -->

## Reviews


- [ ] Editorial review

Signed-off-by: Craig <craig.osterhout@docker.com>
2025-02-21 08:06:46 -08:00
David Karlsson d252d1af82 site: remove kapa css overrides/hacks
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2025-01-30 13:25:23 +01:00
David Karlsson ffd3ccd072 hugo: use render hook for markdown tables
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-10-10 10:46:11 +02:00
David Karlsson cc9890f036 hugo: minimize width of lineno column for code blocks
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-09-20 11:32:42 +02:00
David Karlsson 4443d3640a hugo: update layout architecture
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-09-16 14:43:05 +02:00
David Karlsson 58aa02924d site: improve search ux, add /search page
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-09-12 17:14:01 +02:00
David Karlsson c36309ed8a hugo: render site navigation using sections
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-09-09 10:51:38 +02:00
David Karlsson ea6246b059 hugo: use render hook for callouts
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-08-16 10:28:48 +02:00
David Karlsson 97307d4c66 search: pagefind v1.1.0
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-05-23 14:05:59 +02:00
David Karlsson 7e45b410c9 css: fix rendering issue for code with numbered lines
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-05-08 14:04:08 +02:00
David Karlsson 4e168bc9b2 fix: whitespace breaks for code spans in tables
A regression caused by a bad rebase in #18803

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-05-06 11:33:38 +02:00
David Karlsson 6ccbfa3f64 hugo: use fuse.js search instead of algolia
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-04-26 14:36:13 +02:00
David Karlsson f41c08f3bd Revert "Revert "kapa ai 🤖"" 2024-04-25 20:11:53 +02:00
David Karlsson 5b511f126c Revert "kapa ai 🤖" 2024-04-25 19:54:40 +02:00
David Karlsson aeb11961b6 feat: add Kapa.ai
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-04-25 18:43:35 +02:00
David Karlsson 28e23d9ccb css: apply basic styles to indented code blocks
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-04-25 15:35:45 +02:00
David Karlsson cbb8988cb8 css: fix line wraps for code spans
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-04-25 15:35:37 +02:00
David Karlsson 46a3512a54 hugo: css overhaul
- Remove manual breakpoint definitions and use tailwind defaults
- Fix various overflow and other rendering issues

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-04-24 18:14:02 +02:00
David Karlsson ccb50a8467 hugo: add tags
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2024-04-23 10:47:54 +02:00