Merge pull request #15 from blue-build/repo-editing

feat: add initial repo editing scaffolding

src/routes/+page.svelte

@@ -29,7 +29,7 @@
                 Found {data.bluebuildRepos.length} repositories with the
                 <span class="font-mono">bluebuild-image</span> GitHub topic.
             </p>
-            <div class="grid grid-cols-4">
+            <div class="grid grid-cols-4 gap-4">
                 {#each data.bluebuildRepos as repo}
                     <Card.Root
                         title="This is placeholder content that will receive functionality in the future."
@@ -42,6 +42,7 @@
                             <Button variant="link" href={repo.html_url}>
                                 {repo.html_url}
                             </Button>
+                            <Button variant="link" href={`/edit/${repo.full_name}`}>Edit</Button>
                         </Card.Content>
                     </Card.Root>
                 {/each}

src/routes/edit/[user]/[repo]/+page.server.ts

@@ -0,0 +1,19 @@
+import { redirect } from "@sveltejs/kit";
+import { ghApiGet } from "$lib/ts/github/api.js";
+import type { Endpoints } from "@octokit/types";
+
+export async function load({ locals, cookies, params }) {
+    if (locals.githubUser === undefined) {
+        redirect(303, "/");
+    } else {
+        const token = cookies.get("github_oauth_token");
+        const repos = await ghApiGet(token, `/repos/${params.user}/${params.repo}`);
+        if (!repos.ok) return {};
+
+        const repoData = repos.data as Endpoints["GET /repos/{owner}/{repo}"]["response"]["data"];
+
+        return {
+            repoData
+        };
+    }
+}

src/routes/edit/[user]/[repo]/+page.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import { Button } from "$lib/ui/components/ui/button";
+    import * as Card from "$lib/ui/components/ui/card";
+    import * as Alert from "$lib/ui/components/ui/alert";
+
+    let { data } = $props();
+
+    let repoData = data.repoData;
+    console.log(repoData);
+</script>
+
+<div class="min-w-screen font-m">
+    <Card.Root class="mx-auto mt-[10%] max-w-xl px-4 py-6">
+        <Card.Header variant="elevated">
+            <Card.Title class="text-2xl">{repoData?.name}</Card.Title>
+        </Card.Header>
+        <Card.Content>
+            <Alert.Root class="mb-6">
+                <Alert.Title>Sorry!</Alert.Title>
+                <Alert.Description class="text-md">
+                    This feature is a WIP. Features for editing your custom image might be added in
+                    the future.
+                </Alert.Description>
+            </Alert.Root>
+            <div class="flex flex-row flex-wrap gap-4">
+                <Button href={repoData?.html_url} target="_blank" class="px-6">
+                    GitHub README
+                </Button>
+                <Button
+                    href={repoData?.html_url + "/actions/workflows/build.yml"}
+                    target="_blank"
+                    class="px-6"
+                >
+                    GitHub Actions
+                </Button>
+            </div>
+        </Card.Content>
+    </Card.Root>
+</div>