Add basic file upload and proxy

proxy.js

···
+import { createServer } from "node:http";
+
+import { Client, simpleFetchHandler } from "@atcute/client";
+
+const did = "did:plc:vrrdgcidwpvn4omvn7uuufoo";
+const pds = "https://bsky.social";
+
+const handler = simpleFetchHandler({ service: pds });
+const rpc = new Client({ handler });
+
+const server = createServer(async (req, res) => {
+	// TODO: keep leading slash
+	const path = req.url.slice(1);
+
+	const { data } = await rpc.get("com.atproto.repo.getRecord", {
+		params: {
+			repo: did,
+			collection: "com.jakelazaroff.test",
+			rkey: "jakelazaroff.com",
+		},
+	});
+
+	for (const asset of data.value.assets) {
+		if (asset.path !== path) continue;
+
+		const url = `${pds}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${asset.file.ref.$link}`;
+		const response = await fetch(url);
+
+		if (!response.ok) {
+			res.statusCode = response.status;
+			res.end(`Failed to fetch blob: ${response.statusText}`);
+			return;
+		}
+
+		const contentType = response.headers.get("content-type");
+		if (contentType) res.setHeader("content-type", contentType);
+
+		if (response.body) {
+			const reader = response.body.getReader();
+
+			try {
+				while (true) {
+					const { done, value } = await reader.read();
+					if (done) break;
+					res.write(value);
+				}
+				res.end();
+				return;
+			} catch (error) {
+				res.statusCode = 500;
+				res.end("Error streaming blob");
+				return;
+			}
+		} else {
+			res.statusCode = 500;
+			res.end("No response body");
+			return;
+		}
+	}
+
+	res.statusCode = 404;
+	res.end("Not Found");
+});
+
+const PORT = 3000;
+
+server.listen(PORT, () => {
+	console.log(`Server running at http://localhost:${PORT}/`);
+});

src/lib/oauth.ts

···
 import { PUBLIC_HOST, PUBLIC_REDIRECT_HOST } from "$env/static/public";
 
-import { configureOAuth } from "@atcute/oauth-browser-client";
+import { Client } from "@atcute/client";
+import { configureOAuth, OAuthUserAgent, type Session } from "@atcute/oauth-browser-client";
 
 export const CLIENT_ID = `${PUBLIC_HOST}/client-metadata.json`;
 export const REDIRECT_URI = `${PUBLIC_REDIRECT_HOST || PUBLIC_HOST}/oauth/callback`;
···
 export function configure() {
 	configureOAuth({ metadata: { client_id: CLIENT_ID, redirect_uri: REDIRECT_URI } });
 }
+
+export function client(session: Session) {
+	const handler = new OAuthUserAgent(session);
+	return new Client({ handler });
+}

src/routes/~/+layout.svelte

···
 	}
 </script>
 
-<header>
-	<h1>hello, {data.name}</h1>
+<header class="header">
+	<h1><a href="/~/">hello, {data.name}</a></h1>
 	<button onclick={logOut}>log out</button>
 </header>
 
 <div class="body">
 	{@render children?.()}
 </div>
+
+<style>
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+</style>

src/routes/~/+page.svelte

···
 <script lang="ts">
+	import { invalidate } from "$app/navigation";
+
 	import type {} from "@atcute/atproto";
 	import { Client } from "@atcute/client";
 	import { OAuthUserAgent } from "@atcute/oauth-browser-client";
···
 
 	async function createWebsite(e: SubmitEvent & { currentTarget: HTMLFormElement }) {
 		e.preventDefault();
-		const form = new FormData(e.currentTarget);
+		const form = e.currentTarget;
+		const formdata = new FormData(e.currentTarget);
 
-		const name = form.get("name");
+		const name = formdata.get("name");
 		if (typeof name !== "string") throw new Error("invalid name");
 
-		await rpc.post("com.atproto.repo.putRecord", {
-			input: {
-				repo: data.did,
-				collection: "com.jakelazaroff.test",
-				rkey: name,
-				record: {},
-			},
+		const record = {
+			assets: [],
+			createdAt: new Date().toISOString(),
+		};
+
+		await rpc.post("com.atproto.repo.createRecord", {
+			input: { repo: data.did, collection: "com.jakelazaroff.test", rkey: name, record },
 		});
+		await invalidate("collection:com.jakelazaroff.test");
+		form.reset();
 	}
 </script>
 
 <form onsubmit={createWebsite}>
-	<input type="text" name="name" />
+	<input type="text" name="name" minlength={1} maxlength={512} pattern="[A-Za-z0-9.\-]+" />
 	<button>create</button>
 </form>
 
 <ul>
 	{#each data.records as record}
-		<li>{record.uri}</li>
+		{@const rkey = record.uri.split("/").at(-1) || ""}
+		<li>
+			<a href="/~/sites/{rkey}">{rkey}</a>
+		</li>
 	{/each}
 </ul>

src/routes/~/+page.ts

···
 import type {} from "@atcute/atproto";
 import { Client, isXRPCErrorPayload } from "@atcute/client";
-import { getSession, OAuthUserAgent } from "@atcute/oauth-browser-client";
+import { OAuthUserAgent } from "@atcute/oauth-browser-client";
 
 import { configure } from "~/lib/oauth";
 
···
 
 configure();
 
-export const load: PageLoad = async ({ parent }) => {
+export const load: PageLoad = async ({ parent, depends }) => {
+	depends("collection:com.jakelazaroff.test");
+
 	try {
 		const { did, session } = await parent();
 

src/routes/~/sites/[name]/+page.svelte

···
+<script lang="ts">
+	import { invalidate } from "$app/navigation";
+
+	import type {} from "@atcute/atproto";
+	import { isXRPCErrorPayload } from "@atcute/client";
+
+	import { client } from "~/lib/oauth";
+
+	let { params, data } = $props();
+
+	const rpc = client(data.session);
+
+	async function deleteWebsite(rkey: string) {
+		await rpc.post("com.atproto.repo.deleteRecord", {
+			input: { repo: data.did, collection: "com.jakelazaroff.test", rkey },
+		});
+	}
+
+	async function deployBundle(e: SubmitEvent & { currentTarget: HTMLFormElement }) {
+		e.preventDefault();
+		const form = e.currentTarget;
+		const formdata = new FormData(form);
+
+		const name = formdata.get("name");
+		if (typeof name !== "string") throw new Error("invalid name");
+
+		const files = formdata.getAll("files");
+		const assets: { path: string; file: any }[] = [];
+		for (const file of files) {
+			if (!(file instanceof File)) continue;
+
+			const { data } = await rpc.post("com.atproto.repo.uploadBlob", { input: file });
+			if (isXRPCErrorPayload(data)) throw new Error("couldn't upload file");
+
+			assets.push({
+				path: file.name,
+				file: { $type: "blob", ref: data.blob.ref, mimeType: file.type, size: file.size },
+			});
+		}
+
+		const record = { assets, createdAt: new Date().toISOString() };
+		await rpc.post("com.atproto.repo.putRecord", {
+			input: { repo: data.did, collection: "com.jakelazaroff.test", rkey: name, record },
+		});
+		if (isXRPCErrorPayload(data)) throw new Error("couldn't deploy");
+	}
+</script>
+
+<header class="header">
+	<h2>{params.name}</h2>
+	<button onclick={() => deleteWebsite(params.name)}>delete</button>
+</header>
+
+<ul>
+	{#each data.record.value.assets as asset}
+		<li>{asset.path}</li>
+	{/each}
+</ul>
+
+<form onsubmit={deployBundle}>
+	<input type="hidden" name="name" value={params.name} />
+	<input type="file" name="files" />
+	<button>upload</button>
+</form>

src/routes/~/sites/[name]/+page.ts

···
+import type {} from "@atcute/atproto";
+import { isXRPCErrorPayload } from "@atcute/client";
+
+import { client, configure } from "~/lib/oauth";
+
+import type { PageLoad } from "./$types";
+import { redirect } from "@sveltejs/kit";
+
+configure();
+
+export const load: PageLoad = async ({ parent, params, depends }) => {
+	depends("collection:com.jakelazaroff.test");
+
+	try {
+		const { did, session } = await parent();
+
+		const rpc = client(session);
+
+		const { data } = await rpc.get("com.atproto.repo.getRecord", {
+			params: { repo: did, collection: "com.jakelazaroff.test", rkey: params.name },
+		});
+
+		if (isXRPCErrorPayload(data)) throw new Error("couldn't load records");
+
+		return { record: data };
+	} catch (e) {
+		console.error(e);
+		redirect(303, "/");
+	}
+};