Skip to content

feat(home): offer VS Code alongside Docker in the quick start - #150

Closed
guanzhousongmicrosoft wants to merge 7 commits into
mainfrom
dev/guanzhousong/hero-quickstart-vscode
Closed

feat(home): offer VS Code alongside Docker in the quick start#150
guanzhousongmicrosoft wants to merge 7 commits into
mainfrom
dev/guanzhousong/hero-quickstart-vscode

Conversation

@guanzhousongmicrosoft

@guanzhousongmicrosoft guanzhousongmicrosoft commented Aug 24, 2026

Copy link
Copy Markdown
Member

What changed

The homepage quick start offers two paths to the same local database, as Terminal and VS Code tabs. Terminal is selected by default and keeps the original command and the public run-with-docker anchor.

The VS Code tab installs the extension and opens its DocumentDB Local setup wizard via vscode://ms-azuretools.vscode-documentdb/local.

Design review changes

A design and product review of the first version found the VS Code panel was written for someone who had already seen the wizard. The changes that came out of it:

Copy. The prerequisite now states plainly that the VS Code path still uses Docker and that the extension never installs Docker or changes the user's system, replacing the jargon "in your VS Code environment". Step 01 names what gets installed rather than pinning extension version 0.10.1, which is maintenance debt on a homepage and is noise for a new installer who gets the latest anyway. Step 02 was a four-action transcript of wizard buttons and is now click, allow, follow the wizard. Step 03 states the outcome, port and generated credentials, so the reader knows what they got. The fallback names the likely cause instead of treating "no VS Code", "no extension", and "old extension" identically.

The Docker steps were tightened in the same pass: the step that restated the command directly above it is gone, first-run pull time is called out, and the vague "continue with the docs or Linux packages for the setup you need" is now a concrete connect-and-query.

Structure. The tabs are Terminal and VS Code; labelling one "Docker" implied the other avoided Docker, when both start the same container. Install the extension is now the primary action and the deep link is secondary, matching the order of the steps — previously the most prominent control was the one that silently does nothing for a visitor without the extension. The card footer link follows the active tab and points at that path's full guide; "Download packages" is gone, since the hero already has "Download" pointing at the same page. Each panel links across to the other path, so neither is fully hidden behind a tab.

Presentation. The tablist gets a solid active state and larger hit targets (previously ~30px, under the 44px guideline), so it reads as a control rather than as a third row of small blue pills between the "Quick start" chip and the numbered step markers. The hero grid is now items-start: it was items-center, and because the card is the taller column, every tab switch nudged the DocumentDB headline vertically. Home and End keys move between tabs, completing the ARIA authoring practices for the pattern.

Known gap: the VS Code guide

The review surfaced a contradiction this PR cannot fix on its own. /docs/getting-started/vscode-quickstart still describes only the manual flow — run the container yourself, then create a New Local Connection and disable TLS — and never mentions the setup wizard. A reader who follows this homepage tab and then opens the guide finds instructions that disagree with it.

That page is not in this repository. articles/** is gitignored and cloned at build time from documentdb/docs per content.config.json, so the fix has to land there. documentdb/docs#77 rewrites that guide to lead with the wizard, keeping the manual flow as an explicit alternative (its hardened commands from documentdb/docs#75 are preserved byte-for-byte). This PR already links the VS Code tab at that page, so the two should merge together — or this one can wait on it.

Extension compatibility

Verified against microsoft/vscode-documentdb main (013e429f) and published releases on 2026-09-10, reading extension source rather than release notes:

  • vscodeUriHandler.ts routes /local as shorthand for /local/documentdb, so the published URL needs no change or query parameters, and it shows a modal confirmation before anything opens.
  • LocalQuickStart.tsx drives introductionContinueconfigureStart DocumentDB LocalOpen Connection.
  • quickStartTypes.ts confirms the container name, persistent volume, port 10260, and generated credentials the steps now promise.
  • package.json contributes Set up DocumentDB Local under the DocumentDB category, so the Command Palette fallback string is exact.
  • "Linux containers required" is a real Docker readiness state, so the prerequisite is accurate.

The deep link shipped in v0.10.1, still the latest published release. 0.10.2 exists only on main; nothing on this page depends on it shipping.

Validation

Regression coverage asserts the terminal default and public anchor, tab/panel relationships, the tab labels, link order and URLs, the Docker prerequisite and no-system-changes promise, the setup outcome, the absence of a pinned version number, the per-path guide link, and the fallback command. 91 tests across 5 files pass through the project's own vitest.config.ts, with the latest main merged in.

npm install still fails in this environment with a 404 for Vite's pinned postcss@8.5.28 on the configured package-feed proxy. Runtime dependencies were installed into a scratch directory and linked in for the test run; no dependency versions, package.json, or lockfiles were modified. GitHub Actions remains the authority.

Browser-to-VS-Code handoff and Docker provisioning have not been exercised end to end; the compatibility claims are verified from extension source and the released tag.

DocumentDB Local shipped in the VS Code extension's 0.10.0 release: the
extension now creates and starts the container itself, so someone already
working in VS Code no longer needs to run Docker by hand and then type a port,
username, password and TLS choice back into a connection wizard.

The home page only offered the Docker command, so that path was invisible to
the people it was built for -- the ones who arrive at the site without the
extension and leave with a terminal command.

Docker stays selected by default. It works everywhere and needs nothing beyond
Docker itself, while the VS Code path only pays off for people who already live
in that editor, so it is offered rather than assumed.

The install link comes before the deep link, and neither appears alone. A
vscode:// URL for an extension that is not installed does nothing visible at
all -- no error, no navigation -- so presenting it on its own would leave a
first-time visitor clicking a button that silently does nothing.

The heading moves from 'Run locally with Docker' to 'Run DocumentDB locally',
since it now covers both. The run-with-docker anchor is kept: nothing in the
repository links to it, but it is a public URL and it still lands on the right
card.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Signed-off-by: Guanzhou Song <guanzhousong@microsoft.com>
@guanzhousongmicrosoft
guanzhousongmicrosoft force-pushed the dev/guanzhousong/hero-quickstart-vscode branch from 24f38c0 to 1e7c9a5 Compare September 1, 2026 14:22
@guanzhousongmicrosoft
guanzhousongmicrosoft marked this pull request as ready for review September 10, 2026 02:50
Signed-off-by: Guanzhou Song <guanzhousong@microsoft.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Require extension 0.10.1 or later, explain the Docker prerequisite and wizard actions, and provide the Command Palette fallback. The /local deep link shipped in microsoft/vscode-documentdb#898 and no longer needs a release blocker. Preserve the Docker default and add rendered-homepage regression coverage.

Signed-off-by: Guanzhou Song <guanzhousong@microsoft.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Use Vite's automatic JSX runtime for Vitest without changing Next.js's preserve setting or adding dependencies.

Signed-off-by: Guanzhou Song <guanzhousong@microsoft.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: b2b0079f-68de-4316-8592-64ccfa495ee3
The setup step said "confirm if prompted" without naming what to confirm.
The extension's deep-link handler shows a modal whose confirm button is
labeled "Open setup", so name it, matching how the remaining steps already
name Continue, Start DocumentDB Local, and Open Connection.

Verified against microsoft/vscode-documentdb main (013e429f):
src/vscodeUriHandler.ts shows the confirmation, and LocalQuickStart.tsx
drives introduction -> Continue -> configure -> Start DocumentDB Local ->
Open Connection.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017dU6YABKoUxKLU2AB1qeH1
A design and product review of the tabbed quick start found the VS Code
panel narrated a wizard the reader has never seen, and led with a deep
link that silently does nothing for the very person the tab is for.

Copy:
- The prerequisite now says the VS Code path still uses Docker, and that
  the extension never installs Docker or changes the user's system,
  rather than the jargon "in your VS Code environment".
- Step 01 names what gets installed instead of pinning extension version
  0.10.1, which is maintenance debt on a homepage and is noise for a new
  installer who gets the latest anyway.
- Step 02 was a four-action transcript of wizard buttons; it now says
  click, allow, and follow the wizard.
- Step 03 states the outcome, port and generated credentials, so the
  reader knows what they got.
- The fallback names the likely cause instead of treating "no VS Code",
  "no extension", and "old extension" as the same thing.
- The Docker steps drop the one that restated the command above it, add a
  first-run time expectation, and end on a concrete connect-and-query
  instead of "the setup you need".

Structure:
- Tabs are Terminal and VS Code. Labelling one "Docker" implied the other
  avoided Docker, when both start the same container.
- Install the extension is now the primary action; the deep link is
  secondary, matching the order of the steps.
- The card footer link follows the active tab and points at that path's
  full guide. Download packages is gone, since the hero already has
  Download pointing at the same page.
- Each panel links to the other path so neither is hidden behind a tab.

Presentation:
- The tablist gets a solid active state and larger hit targets, so it
  reads as a control rather than as another badge between the Quick start
  chip and the numbered step markers.
- The hero grid is items-start. It was items-center, and since the card is
  the taller column, switching tabs moved the DocumentDB headline.
- Home and End keys move between tabs, per the ARIA authoring practices.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017dU6YABKoUxKLU2AB1qeH1
@guanzhousongmicrosoft

Copy link
Copy Markdown
Member Author

Closing in favor of #179, which carries identical commits from my personal account. Continue review there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant