feat: add initial github api call scaffolding, and logstream for stre…

…aming logs to the frontend

README.md

@@ -48,7 +48,7 @@ pnpm tauri dev
 
 ### GitHub OAuth
 
-For testing features requiring GitHub OAuth, create a `.env` file with the `GITHUB_CLIENT_ID` abd `GITHUB_CLIENT_SECRET` of your development OAuth app. The callback URL should be `http://localhost:5173/login/callback`.
+For testing features requiring GitHub OAuth, create a `.env` file with the `GITHUB_CLIENT_ID` abd `GITHUB_CLIENT_SECRET` of your development OAuth app. The callback URL should be `http://localhost:5173/api/login/callback`.
 
 ## Building
 

src/lib/ts/misc/logStream.ts

@@ -0,0 +1,25 @@
+export async function createLogStream(
+    func: (logStream: ReadableStreamDefaultController<string>) => void
+): Promise<Response> {
+    const logStream = new ReadableStream({
+        async start(logStream) {
+            await func(logStream);
+        }
+    });
+
+    return new Response(logStream, {
+        headers: {
+            "Content-Type": "text/event-stream"
+        }
+    });
+}
+
+export async function readLogStream(res: Response, onNewValue: (value: string) => void) {
+    const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        onNewValue(value);
+    }
+}

src/routes/+layout.svelte

@@ -19,7 +19,7 @@
 
 <div class="min-h-screen bg-background text-foreground">
     <header class="flex flex-row border-b border-muted px-8 py-4">
-        <h1 class="place-self-center text-xl">BlueBuild Workshop</h1>
+        <h1 class="place-self-center text-xl"><a href="/">BlueBuild Workshop</a></h1>
         <div class="ml-auto flex flex-row gap-2">
             <Button
                 on:click={toggleMode}

src/routes/+page.svelte

@@ -12,7 +12,7 @@
         My repositories
     </h2>
     {#if !data.githubUser.login}
-        <Button href="/login" size="lg" variant="default" class="mx-auto max-w-xl">
+        <Button href="/api/login" size="lg" variant="default" class="mx-auto max-w-xl">
             Log in with GitHub</Button
         >
     {:else}

src/routes/api/github/createRepo/+server.ts

@@ -0,0 +1,24 @@
+import { createLogStream } from "$lib/ts/misc/logStream.js";
+
+export async function POST({ request, cookies }): Promise<Response> {
+    return await createLogStream(async (logStream) => {
+        const token = cookies.get("github_oauth_token");
+        const { login, name } = await request.json();
+
+        logStream.enqueue("Creating repo: " + login + "/" + name);
+        const res = await fetch(`https://api.github.com/repos/blue-build/template/generate`, {
+            method: "post",
+            headers: { Authorization: `Bearer ${token}` },
+            body: JSON.stringify({
+                owner: login,
+                name: name
+            })
+        });
+        const repo = await res.json();
+        if (!res.ok) {
+            logStream.enqueue("Repo creation failed: " + JSON.stringify(repo));
+        } else {
+            logStream.enqueue("Repo created successfully!");
+        }
+    });
+}

src/routes/new/+page.svelte

@@ -5,10 +5,29 @@
     import { Label } from "$lib/ui/components/ui/label";
     import { Progress } from "$lib/ui/components/ui/progress";
     import Log from "$lib/ui/components/newImage/log.svelte";
+    import { readLogStream } from "$lib/ts/misc/logStream.js";
 
     type SetupStep = "start" | "inprogress" | "cosign" | "done" | "failed";
     let setupStep = "start" as SetupStep;
     let log: Array<string> = [];
+    export let data;
+
+    async function createRepo() {
+        setupStep = "inprogress";
+        const res = await fetch("/api/github/createRepo", {
+            method: "POST",
+            body: JSON.stringify({
+                name: document.getElementById("reponame").value,
+                login: data.githubUser.login
+            }),
+            headers: {
+                "content-type": "application/json"
+            }
+        });
+        readLogStream(res, (value) => {
+            log = [...log, value];
+        });
+    }
 
     function generateCosignKeys() {
         // @ts-ignore
@@ -25,11 +44,6 @@
             }
         );
     }
-    // add to log something random every second
-    setInterval(testLog, 500);
-    function testLog() {
-        log = [...log, Math.random().toPrecision(10)];
-    }
 </script>
 
 <svelte:head>
@@ -59,14 +73,15 @@
                 <Label for="reponame">
                     Please enter a name for your new custom image repository:
                 </Label>
-                <Input id="reponame" type="text" placeholder="weird-os" class="font-mono" required
+                <Input
+                    id="reponame"
+                    name="reponame"
+                    type="text"
+                    placeholder="weird-os"
+                    class="font-mono"
+                    required
                 ></Input>
-                <Button
-                    on:click={() => (setupStep = "inprogress")}
-                    size="lg"
-                    variant="default"
-                    class="mt-6"
-                >
+                <Button on:click={createRepo} size="lg" variant="default" class="mt-6">
                     Create repository
                 </Button>
             {:else if setupStep === "inprogress"}