feat: share backend

Author: brettkolodny

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 .vercel
+.env*.local

package.json

@@ -22,6 +22,7 @@
     "@tailwindcss/typography": "^0.5.16",
     "@universal-middleware/core": "^0.4.7",
     "@universal-middleware/hono": "^0.4.12",
+    "@vercel/blob": "^1.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "hono": "^4.7.11",

pnpm-lock.yaml

@@ -2,21 +2,23 @@ import * as v from "valibot";
 import { vValidator } from "@hono/valibot-validator";
 import { nanoid } from "nanoid";
 import { Hono } from "hono";
+import { put, head } from "@vercel/blob";
 
-const sharedCode: Map<string, Uint8Array> = new Map();
+const BLOG_PATH = "parameters/share";
 
 const parameters = new Hono()
-	.get("/:id", (c) => {
+	.get("/:id", async (c) => {
 		const { id } = c.req.param();
-		const bytes = sharedCode.get(id);
-
-		if (!bytes) {
-			throw new Error("Foo");
+		try {
+			const { url } = await head(`${BLOG_PATH}/${id}.txt`);
+			const res = await fetch(url);
+			const code = new TextDecoder().decode(await res.arrayBuffer());
+
+			return c.json({ code });
+		} catch (e) {
+			console.error(`Failed to load playground with id ${id}: ${e}`);
+			return c.notFound();
 		}
-
-		const code = new TextDecoder().decode(bytes);
-
-		return c.json({ code });
 	})
 	.post(
 		"/",
@@ -26,7 +28,7 @@ const parameters = new Hono()
 				code: v.string(),
 			}),
 		),
-		(c) => {
+		async (c) => {
 			const { code } = c.req.valid("json");
 			const bytes = new TextEncoder().encode(code);
 
@@ -35,7 +37,10 @@ const parameters = new Hono()
 			}
 
 			const id = nanoid();
-			sharedCode.set(id, bytes);
+			await put(`${BLOG_PATH}/${id}.txt`, code, {
+				addRandomSuffix: false,
+				access: "public",
+			});
 
 			return c.json({ id });
 		},

src/server/api.ts

@@ -7,6 +7,42 @@ import { defineConfig, mergeConfig, type Plugin } from "vite";
 
 const OUT_DIR = ".vercel";
 
+/**
+ * Load .env files in dev.
+ * This is naive implementation but I wanted to avoid adding a dependency.
+ */
+const dotenv = (envFile?: string | string[]): Plugin => ({
+	name: "dotenv",
+	async buildStart() {
+		const files = () => {
+			if (!envFile) {
+				return [".env.local"];
+			}
+
+			if (typeof envFile === "string") {
+				return [envFile];
+			}
+
+			return envFile;
+		};
+
+		const contents = await Promise.all(
+			files().flatMap((path) => fs.readFile(path, "utf-8").catch(() => "")),
+		);
+		contents
+			.flatMap((line) => line.split("\n"))
+			.map((line) => line.trim())
+			.filter((line) => !line.startsWith("#") && line !== "")
+			.map((line) => line.split("="))
+			.map(([key, value]) => {
+				if (key.startsWith("VITE_")) {
+					return;
+				}
+				process.env[key] = value.replaceAll('"', "");
+			});
+	},
+});
+
 /**
  * Create the [config.json][1] and [vc-config.json][2] files required in the final output.
  *
@@ -180,6 +216,7 @@ export default defineConfig(({ mode, command }) => {
 			allowedHosts: [".coder", ".ngrok"],
 		},
 		plugins: [
+			dotenv(),
 			react(),
 			devServer({
 				entry: "./src/server/index.tsx",