feat: share button

Author: brettkolodny

src/client/App.tsx

@@ -66,7 +66,7 @@ export const App = () => {
 					fetch(
 						import.meta.env.PROD
 							? "/assets/build/preview.wasm"
-							: "build/preview.wasm",
+							: "/build/preview.wasm",
 					),
 					goWasm.importObject,
 				);

src/client/Editor.tsx

@@ -8,7 +8,11 @@ import {
 } from "@/client/components/DropdownMenu";
 import { ResizablePanel } from "@/client/components/Resizable";
 import * as Tabs from "@/client/components/Tabs";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/client/components/Tooltip";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/client/components/Tooltip";
 import { useStore } from "@/client/store";
 import {
 	BookIcon,
@@ -31,6 +35,8 @@ import { highlight, languages } from "prismjs/components/prism-core";
 import "prismjs/components/prism-hcl";
 import "prismjs/themes/prism.css";
 import { cn } from "@/utils/cn";
+import { rpc } from "@/utils/rpc";
+import { useParams } from "react-router";
 
 // Adds line numbers to the highlight.
 const hightlightWithLineNumbers = (input: string, language: unknown) =>
@@ -43,6 +49,7 @@ const hightlightWithLineNumbers = (input: string, language: unknown) =>
 		.join("\n");
 
 export const Editor: FC = () => {
+	const params = useParams();
 	const $code = useStore((state) => state.code);
 	const $setCode = useStore((state) => state.setCode);
 
@@ -58,6 +65,28 @@ export const Editor: FC = () => {
 		setCodeCopied(() => true);
 	};
 
+	useEffect(() => {
+		const loadCode = async () => {
+			const { id } = params;
+			if (!id) {
+				return;
+			}
+
+			try {
+				const res = await rpc.parameters[":id"].$get({ param: { id } });
+				if (res.ok) {
+					const { code } = await res.json();
+					$setCode(code);
+				}
+			} catch (e) {
+				console.error(`Error loading playground: ${e}`);
+				return;
+			}
+		};
+
+		loadCode();
+	}, [params, $setCode]);
+
 	useEffect(() => {
 		if (!codeCopied) {
 			return;
@@ -136,7 +165,12 @@ export const Editor: FC = () => {
 						tab !== "code" && "hidden",
 					)}
 				>
-					<Button className="pointer-events-auto z-10" variant="subtle" size="sm" onClick={onCopy}>
+					<Button
+						className="pointer-events-auto z-10"
+						variant="subtle"
+						size="sm"
+						onClick={onCopy}
+					>
 						{codeCopied ? <CheckIcon /> : <CopyIcon />} Copy
 					</Button>
 				</div>

src/client/index.tsx

@@ -2,24 +2,35 @@ import { TooltipProvider } from "@/client/components/Tooltip";
 import { ThemeProvider } from "@/client/contexts/theme.tsx";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router";
+import { RouterProvider, createBrowserRouter, redirect } from "react-router";
 import { App } from "./App.tsx";
 import "@/client/index.css";
 
+const router = createBrowserRouter([
+	{
+		path: "/parameters/:id?",
+		Component: App,
+	},
+	{
+		path: "*",
+		loader: () => {
+			return redirect("/parameters");
+		},
+	},
+]);
+
 const root = document.getElementById("root");
 
 if (!root) {
 	console.error("An element with the id `root` does not exist");
 } else {
 	createRoot(root).render(
 		<StrictMode>
-			<BrowserRouter>
-				<ThemeProvider>
-					<TooltipProvider>
-						<App />
-					</TooltipProvider>
-				</ThemeProvider>
-			</BrowserRouter>
+			<ThemeProvider>
+				<TooltipProvider>
+					<RouterProvider router={router} />
+				</TooltipProvider>
+			</ThemeProvider>
 		</StrictMode>,
 	);
 }

src/server/api.ts

@@ -1,8 +1,8 @@
-import * as v from "valibot";
 import { vValidator } from "@hono/valibot-validator";
-import { nanoid } from "nanoid";
+import { head, put } from "@vercel/blob";
 import { Hono } from "hono";
-import { put, head } from "@vercel/blob";
+import { nanoid } from "nanoid";
+import * as v from "valibot";
 
 const BLOG_PATH = "parameters/share";
 
@@ -17,7 +17,7 @@ const parameters = new Hono()
 			return c.json({ code });
 		} catch (e) {
 			console.error(`Failed to load playground with id ${id}: ${e}`);
-			return c.notFound();
+			return c.json({ code: "" }, 404);
 		}
 	})
 	.post(

src/server/index.tsx

@@ -28,10 +28,10 @@ app.get("*", (c) => {
 	// The production paths are hard coded based on the output of the build script.
 	const cssPath = import.meta.env.PROD
 		? "/assets/index.css"
-		: "src/client/index.css";
+		: "/src/client/index.css";
 	const clientScriptPath = import.meta.env.PROD
 		? "/assets/client.js"
-		: "src/client/index.tsx";
+		: "/src/client/index.tsx";
 	const wasmExecScriptPath = import.meta.env.PROD
 		? "/assets/wasm_exec.js"
 		: "/wasm_exec.js";