refactor: move image setup to new page, add elevated card type, other…

… misc refactors
blue-build · Apr 10, 2024 · 537892f · 537892f
1 parent 7e53368
commit 537892f
Show file tree

Hide file tree

Showing 10 changed files with 769 additions and 63 deletions.
diff --git a/src/lib/ui/components/ui/card/card-header.svelte b/src/lib/ui/components/ui/card/card-header.svelte
@@ -1,13 +1,29 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/ui/utils.js";
+    import type { HTMLAttributes } from "svelte/elements";
+    import { cn } from "$lib/ui/utils.js";
+    import { tv } from "tailwind-variants";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+    type $$Props = HTMLAttributes<HTMLDivElement> | { variant: "normal" | "elevated" };
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+    let className: $$Props["class"] = undefined;
+    export { className as class };
+
+    export let variant: "normal" | "elevated" = "normal";
+
+    const headerVariants = tv({
+        base: "flex flex-col space-y-1.5",
+        variants: {
+            variant: {
+                normal: "px-6 pt-4 pb-9",
+                elevated: "bg-card border-2 p-5 -translate-x-8 -translate-y-10 shadow-subtle"
+            }
+        },
+        defaultVariants: {
+            variant: "normal"
+        }
+    });
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
-	<slot />
+<div class={cn(headerVariants({ variant, className }), className)} {...$$restProps}>
+    <slot />
 </div>
diff --git a/src/lib/ui/components/ui/card/card-title.svelte b/src/lib/ui/components/ui/card/card-title.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from "./index.js";
-	import { cn } from "$lib/ui/utils.js";
+    import type { HTMLAttributes } from "svelte/elements";
+    import type { HeadingLevel } from "./index.js";
+    import { cn } from "$lib/ui/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-		tag?: HeadingLevel;
-	};
+    type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+        tag?: HeadingLevel;
+    };
 
-	let className: $$Props["class"] = undefined;
-	export let tag: $$Props["tag"] = "h3";
-	export { className as class };
+    let className: $$Props["class"] = undefined;
+    export let tag: $$Props["tag"] = "h3";
+    export { className as class };
 </script>
 
 <svelte:element
-	this={tag}
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
-	{...$$restProps}
+    this={tag}
+    class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...$$restProps}
 >
-	<slot />
+    <slot />
 </svelte:element>
diff --git a/src/lib/ui/components/ui/input/input.svelte b/src/lib/ui/components/ui/input/input.svelte
@@ -1,35 +1,35 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import type { InputEvents } from "./index.js";
-	import { cn } from "$lib/ui/utils.js";
+    import type { HTMLInputAttributes } from "svelte/elements";
+    import type { InputEvents } from "./index.js";
+    import { cn } from "$lib/ui/utils.js";
 
-	type $$Props = HTMLInputAttributes;
-	type $$Events = InputEvents;
+    type $$Props = HTMLInputAttributes;
+    type $$Events = InputEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
+    let className: $$Props["class"] = undefined;
+    export let value: $$Props["value"] = undefined;
+    export { className as class };
 </script>
 
 <input
-	class={cn(
-		"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:focusin
-	on:focusout
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:paste
-	on:input
-	{...$$restProps}
+    class={cn(
+        "flex h-10 w-full rounded-md border-2 border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+    )}
+    bind:value
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:focusin
+    on:focusout
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:paste
+    on:input
+    {...$$restProps}
 />
diff --git a/src/lib/ui/components/ui/label/index.ts b/src/lib/ui/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};
diff --git a/src/lib/ui/components/ui/label/label.svelte b/src/lib/ui/components/ui/label/label.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/ui/utils.js";
+
+	type $$Props = LabelPrimitive.Props;
+	type $$Events = LabelPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<LabelPrimitive.Root
+	class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+	{...$$restProps}
+	on:mousedown
+>
+	<slot />
+</LabelPrimitive.Root>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,20 +1,9 @@
 <script lang="ts">
-    import * as Card from "$lib/ui/components/ui/card";
     import { Button } from "$lib/ui/components/ui/button";
-    import Input from "$lib/ui/components/ui/input/input.svelte";
 </script>
 
-<div class="min-w-screen font-m">
-    <Card.Root class="mx-auto mt-[10%] max-w-xl px-4 py-6">
-        <Card.Header>
-            <Card.Title>Card Title</Card.Title>
-            <Card.Description>Card Description</Card.Description>
-        </Card.Header>
-        <Card.Content class="flex max-w-lg flex-col items-start justify-stretch gap-6">
-            <Input type="text" placeholder="weird-os" class="font-mono" required></Input>
-            <Button href="/signin" size="lg" variant="default">
-                Sign in with GitHub to continue...
-            </Button>
-        </Card.Content>
-    </Card.Root>
+<div class="min-w-screen font-m flex min-h-screen">
+    <Button href="/new" size="lg" variant="default" class="mx-auto mt-[25%]"
+        >Create a new custom image repository</Button
+    >
 </div>
diff --git a/src/routes/new/+page.svelte b/src/routes/new/+page.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import * as Card from "$lib/ui/components/ui/card";
+    import { Button } from "$lib/ui/components/ui/button";
+    import Input from "$lib/ui/components/ui/input/input.svelte";
+    import { Label } from "$lib/ui/components/ui/label";
+
+    type SetupStep = "start" | "inprogress" | "cosign" | "done";
+    let setupStep = "start" as SetupStep;
+
+    function generateCosignKeys() {
+        // @ts-ignore
+        const go = new Go();
+
+        WebAssembly.instantiateStreaming(fetch("/cosign.wasm"), go.importObject).then(
+            async (obj) => {
+                const wasm = obj.instance;
+                go.run(wasm);
+                // @ts-ignore
+                console.log(cosignPublicKey);
+                // @ts-ignore
+                console.log(cosignPrivateKey);
+            }
+        );
+    }
+</script>
+
+<svelte:head>
+    <script src="/wasm_exec.js" defer></script>
+    <link rel="prefetch" href="/cosign.wasm" />
+</svelte:head>
+
+<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">
+                {#if setupStep === "start"}
+                    Set up a new image repository
+                {:else if setupStep === "inprogress"}
+                    Setting up your repository...
+                {:else if setupStep === "cosign"}
+                    Set up container signing
+                {:else}
+                    Done!
+                {/if}
+            </Card.Title>
+        </Card.Header>
+        <Card.Content class="flex max-w-lg flex-col items-start justify-stretch gap-6">
+            <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>
+            <Button on:click={generateCosignKeys} size="lg" variant="default" class="mt-6">
+                Sign in with GitHub to continue...
+            </Button>
+        </Card.Content>
+    </Card.Root>
+</div>
diff --git a/static/cosign.wasm b/static/cosign.wasm