feat: add setup for examples

brettkolodny · brettkolodny · commit d22dc31a32b5 · 2025-06-18T15:16:20.000Z
diff --git a/src/client/App.tsx b/src/client/App.tsx
@@ -20,11 +20,13 @@ import {
 } from "@/client/components/Tooltip";
 import { useTheme } from "@/client/contexts/theme";
 import { defaultCode } from "@/client/snippets";
+import { examples } from "@/examples";
 import type {
 	ParameterWithSource,
 	PreviewOutput,
 	WorkspaceOwner,
 } from "@/gen/types";
+import { mockUsers } from "@/owner";
 import { rpc } from "@/utils/rpc";
 import {
 	type WasmLoadState,
@@ -36,7 +38,6 @@ import { MoonIcon, ShareIcon, SunIcon, SunMoonIcon } from "lucide-react";
 import { type FC, useEffect, useMemo, useRef, useState } from "react";
 import { type LoaderFunctionArgs, useLoaderData } from "react-router";
 import { useDebouncedValue } from "./hooks/debounce";
-import { mockUsers } from "@/owner";
 
 /**
  * Load the shared code if present.
@@ -67,7 +68,9 @@ export const App = () => {
 		return "loading";
 	});
 	const loadedCode = useLoaderData<typeof loader>();
-	const [code, setCode] = useState(loadedCode ?? defaultCode);
+	const [code, setCode] = useState(
+		loadedCode ?? window.EXAMPLE_CODE ?? defaultCode,
+	);
 	const [debouncedCode, isDebouncing] = useDebouncedValue(code, 1000);
 	const [parameterValues, setParameterValues] = useState<
 		Record<string, string>
@@ -203,14 +206,7 @@ export const App = () => {
 					>
 						Docs
 					</a>
-					<a
-						href="https://coder.com"
-						target="_blank"
-						rel="noreferrer"
-						className="font-light text-content-secondary text-sm hover:text-content-primary"
-					>
-						Support
-					</a>
+					<ExampleSelector />
 					<ThemeSelector />
 				</div>
 			</nav>
@@ -330,3 +326,31 @@ const ShareButton: FC<ShareButtonProps> = ({ code }) => {
 		</Tooltip>
 	);
 };
+
+const ExampleSelector: FC = () => {
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger className="font-light text-content-secondary text-sm hover:text-content-primary">
+				Examples
+			</DropdownMenuTrigger>
+
+			<DropdownMenuPortal>
+				<DropdownMenuContent>
+					{examples.map(({ title, slug }) => {
+						const params = new URLSearchParams();
+						params.append("example", slug);
+
+						const href = `${window.location.origin}/parameters?${params.toString()}`;
+						return (
+							<DropdownMenuItem key={slug} asChild={true}>
+								<a href={href} target="_blank" rel="noreferrer">
+									{title}
+								</a>
+							</DropdownMenuItem>
+						);
+					})}
+				</DropdownMenuContent>
+			</DropdownMenuPortal>
+		</DropdownMenu>
+	);
+};
diff --git a/src/examples.ts b/src/examples.ts
@@ -0,0 +1,23 @@
+type Example = {
+	title: string;
+	slug: string;
+	code: string;
+};
+
+export const examples: Example[] = [
+	{
+		title: "Example 1",
+		slug: "example-1",
+		code: "// Example 1",
+	},
+	{
+		title: "Example 2",
+		slug: "example-2",
+		code: "// Example 2",
+	},
+	{
+		title: "Example 3",
+		slug: "example-4",
+		code: "// Example 3",
+	},
+];
diff --git a/src/server/index.tsx b/src/server/index.tsx
@@ -1,3 +1,4 @@
+import { examples } from "@/examples";
 import { api } from "@/server/api";
 import { Hono } from "hono";
 import { renderToString } from "react-dom/server";
@@ -17,6 +18,15 @@ app.route("/api", api);
 
 // Serves the main web application. This must come after the API route.
 app.get("*", (c) => {
+	const getExampleCode = () => {
+		const { example } = c.req.query();
+		if (!example) {
+			return;
+		}
+
+		return examples.find((e) => e.slug === example)?.code;
+	};
+
 	// Along with the vite React plugin this enables HMR within react while
 	// running the dev server.
 	const { url } = c.req;
@@ -45,6 +55,9 @@ app.get("*", (c) => {
 		: "/wasm_exec.js";
 	const iconPath = import.meta.env.PROD ? "/assets/logo.svg" : "/logo.svg";
 
+	const exampleCode = getExampleCode();
+	const loadExampleCodeScript = `window.EXAMPLE_CODE = "${exampleCode}"`;
+
 	return c.html(
 		[
 			"<!doctype html>",
@@ -64,6 +77,9 @@ app.get("*", (c) => {
 					</head>
 					<body>
 						<div id="root"></div>
+						{exampleCode ? (
+							<script type="module">{loadExampleCodeScript}</script>
+						) : null}
 						<script type="module" src={clientScriptPath}></script>
 					</body>
 				</html>,
diff --git a/src/utils/wasm.ts b/src/utils/wasm.ts
@@ -20,7 +20,7 @@ declare global {
 		// Loaded from wasm
 		go_preview?: GoPreviewDef;
 		Go: { new (): Go };
-		CODE?: string;
+		EXAMPLE_CODE?: string;
 	}
 }
 

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ declare global {`
`20`	`20`	`// Loaded from wasm`
`21`	`21`	`go_preview?: GoPreviewDef;`
`22`	`22`	`Go: { new (): Go };`
`23`		`- CODE?: string;`
	`23`	`+ EXAMPLE_CODE?: string;`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`