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";