From 1e7c9a5f400554a22dd7cc09917e5eff35bd8ccb Mon Sep 17 00:00:00 2001 From: Guanzhou Song Date: Mon, 24 Aug 2026 15:14:52 -0400 Subject: [PATCH] feat(home): offer VS Code alongside Docker in the quick start 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 --- app/components/QuickStartTabs.tsx | 159 ++++++++++++++++++++++++++++++ app/page.tsx | 56 ++++++----- app/services/externalLinks.ts | 14 +++ 3 files changed, 207 insertions(+), 22 deletions(-) create mode 100644 app/components/QuickStartTabs.tsx diff --git a/app/components/QuickStartTabs.tsx b/app/components/QuickStartTabs.tsx new file mode 100644 index 0000000..bf0a1df --- /dev/null +++ b/app/components/QuickStartTabs.tsx @@ -0,0 +1,159 @@ +"use client"; + +import Link from "next/link"; +import { useRef, useState } from "react"; +import CommandSnippet from "./CommandSnippet"; + +export type QuickStartStep = { + step: string; + description: string; +}; + +type QuickStartTabsProps = { + dockerCommand: string; + dockerSteps: QuickStartStep[]; + vscodeSteps: QuickStartStep[]; + /** Deep link that opens the extension's DocumentDB Local setup wizard. */ + vscodeDeepLinkUrl: string; + /** Marketplace page, for visitors who do not have the extension yet. */ + vscodeMarketplaceUrl: string; +}; + +const TABS = [ + { id: "docker", label: "Docker" }, + { id: "vscode", label: "VS Code" }, +] as const; + +type TabId = (typeof TABS)[number]["id"]; + +function StepList({ steps }: { steps: QuickStartStep[] }) { + return ( +
    + {steps.map((item) => ( +
  1. + + {item.step} + +

    {item.description}

    +
    2. + ))} +
+ ); +} + +/** + * The home page quick start, offering the two ways to get a local DocumentDB running. + * + * Docker stays first because it is the path that works everywhere and needs nothing installed + * beyond Docker itself. The VS Code path is newer and shorter — the extension provisions the + * container itself — but only pays off for people who already work in VS Code, so it is offered + * rather than assumed. + */ +export default function QuickStartTabs({ + dockerCommand, + dockerSteps, + vscodeSteps, + vscodeDeepLinkUrl, + vscodeMarketplaceUrl, +}: QuickStartTabsProps) { + const [activeTab, setActiveTab] = useState("docker"); + const tabRefs = useRef>({}); + + // Arrow keys move between tabs, which is what a tablist is expected to do; without it the + // only way through is Tab, and that leaves the panel. + const onTabKeyDown = (event: React.KeyboardEvent) => { + if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") { + return; + } + + event.preventDefault(); + const currentIndex = TABS.findIndex((tab) => tab.id === activeTab); + const delta = event.key === "ArrowRight" ? 1 : -1; + const next = TABS[(currentIndex + delta + TABS.length) % TABS.length]; + + setActiveTab(next.id); + tabRefs.current[next.id]?.focus(); + }; + + return ( +
+
+ {TABS.map((tab) => { + const isActive = tab.id === activeTab; + + return ( + + ); + })} +
+ + + + +
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index a8a7098..54306ea 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,7 +1,11 @@ import Image from "next/image"; import Link from "next/link"; -import CommandSnippet from "./components/CommandSnippet"; -import { documentdbKubernetesOperatorQuickStartUrl } from "./services/externalLinks"; +import QuickStartTabs from "./components/QuickStartTabs"; +import { + documentdbKubernetesOperatorQuickStartUrl, + documentdbVsCodeExtensionMarketplaceUrl, + documentdbVsCodeLocalQuickStartDeepLink, +} from "./services/externalLinks"; import { getMetadata } from "./services/metadataService"; import { documentdbGitHubForks, @@ -39,7 +43,7 @@ const quickRunCommand = `docker run -dt --name documentdb \\ --username \\ --password `; -const quickStartSteps = [ +const dockerQuickStartSteps = [ { step: "01", description: "Run DocumentDB Local with Docker.", @@ -54,6 +58,23 @@ const quickStartSteps = [ }, ]; +const vscodeQuickStartSteps = [ + { + step: "01", + description: "Install the DocumentDB extension for Visual Studio Code.", + }, + { + step: "02", + description: + "Open the DocumentDB Local setup and let the extension create and start the container for you.", + }, + { + step: "03", + description: + "Browse databases, run queries, and edit documents without leaving the editor.", + }, +]; + const kubernetesOperatorEntryPoints = [ { title: "Local clusters", @@ -372,29 +393,20 @@ export default function Home() { Quick start

- Run locally with Docker + Run DocumentDB locally

- Start DocumentDB Local with Docker, then connect on port - 10260. + Start DocumentDB Local with Docker, or let the VS Code + extension set it up for you.

- -
    - {quickStartSteps.map((item) => ( -
  1. - - {item.step} - -

    - {item.description} -

    -
    2. - ))} -
+