Skip to content

Docs site: switch to Just the Docs with OS dark mode - #420

Merged
Tomasz Naumowicz (tnaum-ms) merged 24 commits into
mainfrom
dev/tnaum/docs-config-update
Oct 16, 2026
Merged

Tomasz Naumowicz (tnaum-ms) merged 24 commits into
mainfrom
dev/tnaum/docs-config-update

Conversation

@tnaum-ms

@tnaum-ms Tomasz Naumowicz (tnaum-ms) commented Dec 11, 2025 •

Copy link
Copy Markdown
Collaborator

What changed

The documentation site at https://microsoft.github.io/vscode-documentdb/ gets a new theme, cleaner navigation, and a dark mode that follows the OS.

Site and navigation

  • Switches from the experimental Minima setup to Just the Docs (remote_theme, v0.12.0): sidebar, search, breadcrumbs, and Microsoft styling (Segoe UI, #0067b8, semibold headings).
  • Publishes only the landing page, user-manual/ and release-notes/. Everything else in docs/ (plans, blog drafts, data-flow notes) is excluded.
  • Groups the user manual into Connecting to Databases, Data Management, Querying and AI Features. No file moves, so every existing URL still works.
  • Replaces the "Back to ..." header on each page with front matter; breadcrumbs take over. Release notes sort newest first.
  • Adds an "On this page" panel on the right (starting with Introduction), the documentdb.io favicon, and the DocumentDB icon in the sidebar title.

Dark mode

  • The site follows the OS light or dark setting.
  • Every screenshot has a _dark variant, swapped with <picture> and prefers-color-scheme. They are rendered from the same framing settings as the light images (the light re-renders match the published images pixel for pixel).
  • The two copy-and-paste diagrams in the user manual are redrawn for both themes. The 0.7 release notes now reuse the 1.0 copy-and-paste screenshot.

Readability fixes

  • Code blocks: the theme kept the 16px body line height around 12px code, which pulled ASCII diagrams apart. Box-drawing lines now connect.
  • #### headings (for example "Step 1: Select an Account") were tiny uppercase labels; they are now body-sized and semibold.

Tooling

  • New previewing-docs-site skill: scripts/preview.ps1 serves the site locally with live reload, keeps all build output outside the repository, and fixes the Windows path-casing issue that silently drops the custom styles.
  • ESLint treats docs/assets/js as browser code.
  • writing-release-notes skill and CONTRIBUTING.md updated for the release notes front matter.

Why

The site is an interim home until the user manual moves to learn.microsoft.com, so the goal is a site that looks right and costs little to maintain, without rewriting content into a site-specific format.

Rejected: PR previews in CI. The old gh-pages preview workflow was removed in c8ad1900; bringing it back would need write access to gh-pages, cleanup, and would leak unreleased pages into the live sidebar and search. A downloadable artifact build was also tried in this PR and dropped: matching the GitHub Pages build closely enough was not worth the extra moving parts. Reviewers preview locally with the previewing-docs-site skill.

Scope

Not in this PR:

  • Content rewrites. Pages keep their text; only navigation, styling and images change.
  • The landing page still carries its own table of contents, kept in sync with the sidebar by hand.
  • Pages now excluded (blog drafts, data-flow notes, localization) will return 404 after deploy. Nothing links to them.

Validation

  • Built and reviewed locally with the github-pages gem (the same build GitHub Pages uses), in light and dark mode.
  • ESLint and Prettier pass; CI is green.
  • Needs a human: the first live GitHub Pages build after merge.

Links

  • Design and history: docs/ai-and-plans/features/docs-site/ (README.md, iterations/02-just-the-docs.md)

@tnaum-ms
Tomasz Naumowicz (tnaum-ms) requested a review from a team as a code owner December 11, 2025 12:59
Copilot AI review requested due to automatic review settings December 11, 2025 12:59

This comment was marked as outdated.

@tnaum-ms
Tomasz Naumowicz (tnaum-ms) changed the base branch from next to main May 21, 2026 10:37
…-update

# Conflicts:
#	.github/workflows/deploy-documentation-preview.yml
@github-actions

github-actions Bot commented Oct 16, 2026 •

Copy link
Copy Markdown
Contributor

✅ CI passed: standard tier (ready PR)

Commit 752f367, workflow run.

Layer Result Ran or skipped because
Static checks ✅ passed every push
Unit tests ✅ passed every push
npm packages: verify tarballs ⏭️ skipped no change to packages/**, package-lock.json or the CI workflow
VSIX: inspect contents ✅ passed ready PR
VSIX: self-test of the checks ⏭️ skipped no change to build/verification/**, build/vite/**, the Vite configs, package-lock.json or the CI workflow
VSIX: activate in VS Code ✅ passed ready PR
VSIX: self-test of the activation check ⏭️ skipped no change to build/verification/**, build/vite/**, the Vite configs, package-lock.json or the CI workflow
Webview host in unbundled extensions ⏭️ skipped no change to packages/vscode-ext-webview/**, package-lock.json or the CI workflow
E2E ⏭️ not available yet arrives with the E2E iteration (full tier)

Full run: add the ci:full-requested label to run every layer once on the current commit.
No full run yet.

Code quality

Check Status How to fix
Localization (l10n) ✅ Passed Nothing to fix
ESLint ✅ Passed Nothing to fix
Prettier formatting ✅ Passed Nothing to fix

Build size

No page, activation, VSIX or other bundle size changed by 5% or 50 KiB or more against main. VSIX: 8.2 MiB.

Artifacts: VSIX | Bundle-reports-38887904126 | L1-manifest-report-38887904126

All graphs (exact bytes)
Graph PR bytes Base bytes Delta bytes Delta %
Collection View page (collectionView) 6,035,539 6,035,539 ✅ 0 0.0%
Document View page (documentView) 4,808,032 4,808,032 ✅ 0 0.0%
Local Quick Start page (localQuickStart) 1,550,255 1,550,255 ✅ 0 0.0%
Atlas Credentials page (atlasCredentials) 1,503,880 1,503,880 ✅ 0 0.0%
Cluster Dashboard page (clusterDashboard) 1,550,095 1,550,095 ✅ 0 0.0%
Activation (mainStartup) 3,447,288 3,447,288 ✅ 0 0.0%
Extension host (main) 9,974,006 9,974,006 ✅ 0 0.0%
Playground worker (playgroundWorker) 5,384,565 5,384,565 ✅ 0 0.0%
VSIX (vsix) 8,635,116 8,635,116 ✅ 0 0.0%
playgroundTsPlugin 6,175 6,175 ✅ 0 0.0%
viewsEntry 1,455,863 1,455,863 ✅ 0 0.0%
viewsAssets 80,340 80,340 ✅ 0 0.0%
editorWorker 259,528 259,528 ✅ 0 0.0%
jsonWorker 389,389 389,389 ✅ 0 0.0%

Packaged bytes. Shared chunks count in every graph that loads them, so rows do not add up.

Updated in place on every run.

Move THEME_CUSTOMIZATION.md out of the published docs root into a new
docs-site feature entry (README, design, iteration 01). Refresh the guide
against current GitHub Pages (github-pages v232, Actions deploy, previews
still alpha) and record open gaps (nav key mismatch, ai-and-plans published).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Exclude ai-and-plans, blog-posts and internal top-level docs from the
GitHub Pages build. No published or in-product link points to them.
Remove the stale PR-preview warning from _config.yml and update the
docs-site feature entry.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the experimental Minima setup with Just the Docs (remote_theme,
v0.12.0): sidebar for the user manual and release notes, search,
breadcrumbs, and light/dark that follows the OS. Navigation lives in
_config.yml defaults, so no content file changes. Light Microsoft styling
(Segoe UI, #0067b8, semibold headings). Interim until the user manual
moves to learn.microsoft.com.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Group the user manual into Connecting to Databases, Data Management,
Querying and AI Features (four new category pages), nested as in the
landing page's table of contents. No existing file moves, so all URLs
stay valid.

Replace the 'Back to ...' header on every user manual and release notes
page with front matter (title, parent, nav_order); breadcrumbs take over.
Navigation moves out of _config.yml. Release notes sort newest first via
nav_order = major*1000 + minor*10. Update the writing-release-notes skill
and strip front matter when posting release notes as a discussion.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Use the documentdb.io favicon. Show the DocumentDB icon next to the
sidebar title, swapping the light and dark variants with the OS theme
(copies of resources/documentdb icons with a viewBox so they scale).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add a sticky right-side panel listing the article's h2/h3 sections with
the current one highlighted (assets/js/page-toc.js), shown on wide
screens. Put the landing page's three links on one line.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…ing levels

The panel gets a first 'Introduction' entry that returns to the top, and
tracks the current section on scroll. The overview page had extra H1s
(Features, Table of Contents), so the panel skipped them; they are now
H2, with User Manual promoted in place of 'Table of Contents'.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add a dark-framed variant rendered with the documentation-screenshots
skill and serve it through <picture> with prefers-color-scheme.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Render _dark companions with the approved framing settings (light re-renders
match the published images pixel for pixel) and wrap each image in a <picture>
element with a prefers-color-scheme: dark source. 0.11.0 reuses the 1.0
Cluster Dashboard dark frame; the 0.4.0 logo gets a recolored dark variant.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the user manual copy-and-paste illustrations with Fluent-style
diagrams drawn natively for each theme, and fix their alt text. The 0.7
release notes now reuse the 1.0 copy-and-paste screenshot.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The theme kept the 16px body line box around 12px code, which left gaps
between box-drawing lines. Size the <pre> like its code and use a 1.25 line
height. Also align one row of the Azure VMs filter diagram.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The theme styled h4 as small uppercase labels, so step headings such as
'Step 1: Select an Account' were hard to spot.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
preview.ps1 builds and serves docs/ the way GitHub Pages does, keeps the
Gemfile, lock file and _site outside the repository, and fixes --source
path casing so docs/_sass is not silently dropped on Windows.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@tnaum-ms Tomasz Naumowicz (tnaum-ms) changed the title tweak: design of github pages Docs site: switch to Just the Docs with OS dark mode and a PR preview build Oct 16, 2026
page-toc.js runs in the browser on GitHub Pages, so give docs/assets/js the
browser globals instead of Node's, and add the license header. This fixes
the Static checks failure on #420.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Builds the site the way GitHub Pages does, uploads it as an artifact and
keeps one docs-preview comment on same-repository PRs with the download
link and the changed pages. Read-only, deploys nothing, and catches a broken
Pages build before merge instead of after.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The GitHub Pages plugins load rake, which Bundler on the Linux runner does
not provide. Also soften the build-failure comment: not every failure means
GitHub Pages would fail.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The preview artifact had no theme layout. Also fail the build when pages
come out without the layout, instead of uploading a broken preview.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The downloaded artifact did not render like the live site, and matching the
GitHub Pages build is not worth the extra moving parts. Local previews stay
with the previewing-docs-site skill. Keeps rake in its Gemfile, which
Bundler needs on Linux and macOS.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@tnaum-ms Tomasz Naumowicz (tnaum-ms) changed the title Docs site: switch to Just the Docs with OS dark mode and a PR preview build Docs site: switch to Just the Docs with OS dark mode Oct 16, 2026
@tnaum-ms
Tomasz Naumowicz (tnaum-ms) merged commit 0a3008d into main Oct 16, 2026
14 checks passed
@tnaum-ms
Tomasz Naumowicz (tnaum-ms) deleted the dev/tnaum/docs-config-update branch October 16, 2026 10:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Development

Successfully merging this pull request may close these issues.

3 participants