From 3e6e7a8409555e0228a92e12dc9fb7fdc6d236c1 Mon Sep 17 00:00:00 2001
From: Frank Noirot <frank@kittycad.io>
Date: Wed, 18 Oct 2023 15:34:51 -0400
Subject: [PATCH] Start working on auth, add Nav and ListItem

---
 src/components/GenerationListItem.svelte  | 14 +++++++
 src/components/Logo.svelte                | 46 +++++++++++++++++++++++
 src/components/Nav.svelte                 | 28 ++++++++++++++
 src/lib/endpoints.ts                      |  2 +-
 src/lib/index.ts                          |  1 -
 src/lib/paths.ts                          |  3 ++
 src/routes/+layout.server.ts              | 11 ++++++
 src/routes/+layout.svelte                 |  9 ++++-
 src/routes/+page.server.ts                |  6 ---
 src/routes/view/[modelId]/+page.server.ts |  0
 svelte.config.js                          |  4 +-
 vite.config.ts                            |  8 ++++
 12 files changed, 120 insertions(+), 12 deletions(-)
 create mode 100644 src/components/GenerationListItem.svelte
 create mode 100644 src/components/Logo.svelte
 create mode 100644 src/components/Nav.svelte
 delete mode 100644 src/lib/index.ts
 create mode 100644 src/lib/paths.ts
 create mode 100644 src/routes/+layout.server.ts
 create mode 100644 src/routes/view/[modelId]/+page.server.ts

diff --git a/src/components/GenerationListItem.svelte b/src/components/GenerationListItem.svelte
new file mode 100644
index 0000000..65f0d13
--- /dev/null
+++ b/src/components/GenerationListItem.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { CADFormat, PromptResponse } from '$lib/endpoints'
+
+	export let data: PromptResponse
+	let outputFormat: CADFormat = 'step'
+
+	$: dataUrl = `data:text/${outputFormat};base64,${data.outputs ? data.outputs[outputFormat] : ''}`
+</script>
+
+<pre class="border p-4 my-12 first-of-type:mt-0 overflow-auto">
+    {JSON.stringify(data, null, 2)}
+</pre>
+<a href={`view/${data.id}`}>View model</a>
+<a href={dataUrl} download>Download model</a>
diff --git a/src/components/Logo.svelte b/src/components/Logo.svelte
new file mode 100644
index 0000000..61d5b5b
--- /dev/null
+++ b/src/components/Logo.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	export let className = ''
+</script>
+
+<svg
+	width="240"
+	height="27"
+	class={className}
+	viewBox="0 0 240 27"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M111.109 0.679559L123.681 14.6107V26.7296H130.816V15.0637C130.816 15.0637 143.049 1.58565 143.728 0.679559H135.234C135.234 1.15932 129.706 7.00392 128.017 8.77926C127.751 9.05809 127.311 9.05936 127.043 8.78222C125.35 7.025 119.83 1.25486 119.83 0.679559H111.109Z"
+		fill="currentcolor"
+	/>
+	<path
+		d="M78.7164 0.679559V7.58848H90.1557V26.7296H97.2912V7.58848H108.731V0.679559H78.7164Z"
+		fill="currentcolor"
+	/>
+	<path
+		d="M45.1911 0.679559V7.58848H56.6305V26.7296H63.7659V7.58848H75.2053V0.679559H45.1911Z"
+		fill="currentcolor"
+	/>
+	<path
+		d="M0 0.566298V26.7296H7.2487V15.2902L20.84 26.7296H31.26L14.6097 13.277C14.3802 13.0916 14.3786 12.7455 14.6142 12.568C17.1382 10.6664 29.2921 1.49132 29.9009 0.679559H20.0472C19.8207 1.47239 7.2487 11.2128 7.2487 11.2128V0.566298H0Z"
+		fill="currentcolor"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M226.975 0.679566C228.685 0.679566 230.379 1.01647 231.959 1.67104C233.54 2.3256 234.976 3.28502 236.185 4.4945C237.395 5.70399 238.354 7.13985 239.009 8.72012C239.663 10.3004 240 11.9941 240 13.7046C240 15.415 239.663 17.1088 239.009 18.689C238.354 20.2693 237.395 21.7052 236.185 22.9147C234.976 24.1241 233.54 25.0836 231.959 25.7381C230.379 26.3927 228.685 26.7296 226.975 26.7296H210.212V3.05804L212.591 0.67956L226.975 0.679566ZM229.3 19.3175C228.563 19.6228 227.773 19.78 226.975 19.78H217.574V7.62919H226.975C227.773 7.62919 228.563 7.78634 229.3 8.09165C230.037 8.39697 230.707 8.84448 231.271 9.40863C231.835 9.97278 232.283 10.6425 232.588 11.3796C232.893 12.1167 233.05 12.9067 233.05 13.7046C233.05 14.5024 232.893 15.2924 232.588 16.0295C232.283 16.7666 231.835 17.4364 231.271 18.0005C230.707 18.5647 230.037 19.0122 229.3 19.3175Z"
+		fill="currentcolor"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M199.453 26.7296H207.268C207.268 26.7296 197.754 5.88957 197.126 4.60591C196.521 3.36681 195.613 2.09038 194.292 1.25081C192.971 0.411244 191.333 -0.0302299 189.656 0.00160921C187.979 0.0334483 186.368 0.536631 185.097 1.42542C183.826 2.31421 183.024 3.62504 182.458 4.87586C181.897 6.11609 172.496 26.7296 172.496 26.7296H180.538L183.491 19.78H196.391L199.453 26.7296ZM193.896 14.1169L190.881 7.27109C190.481 6.36329 189.19 6.37174 188.802 7.2847L185.898 14.1169H189.825H193.896Z"
+		fill="currentcolor"
+	/>
+	<path d="M41.68 26.7296V0.679559H34.5446V24.3511L36.9231 26.7296H41.68Z" fill="currentcolor" />
+	<path
+		d="M155.054 0.679566C153.344 0.679566 151.65 1.01647 150.07 1.67104C148.49 2.3256 147.054 3.28502 145.844 4.4945C144.635 5.70399 143.675 7.13985 143.021 8.72012C142.366 10.3004 142.029 11.9941 142.029 13.7046C142.029 15.415 142.366 17.1088 143.021 18.689C143.675 20.2693 144.635 21.7052 145.844 22.9147C147.054 24.1241 148.49 25.0836 150.07 25.7381C151.65 26.3927 153.344 26.7296 155.054 26.7296H169.665V19.78H155.054C154.256 19.78 153.466 19.6228 152.729 19.3175C151.992 19.0122 151.322 18.5647 150.758 18.0005C150.194 17.4364 149.747 16.7666 149.441 16.0295C149.136 15.2924 148.979 14.5024 148.979 13.7046C148.979 12.9067 149.136 12.1167 149.441 11.3796C149.747 10.6425 150.194 9.97278 150.758 9.40863C151.322 8.84448 151.992 8.39697 152.729 8.09165C153.466 7.78634 154.256 7.62919 155.054 7.62919H169.665V0.679559L155.054 0.679566Z"
+		fill="currentcolor"
+	/>
+</svg>
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
new file mode 100644
index 0000000..8bbbda7
--- /dev/null
+++ b/src/components/Nav.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import Logo from './Logo.svelte'
+	import { page } from '$app/stores'
+	import { paths } from '$lib/paths'
+	import type { User_type } from '@kittycad/lib/dist/types/src/models'
+
+	export let user: User_type | undefined
+</script>
+
+<nav class="nav">
+	<a href="/">
+		<Logo className="h-6 md:h-12" />
+	</a>
+	<a
+		href={import.meta.env.VITE_SITE_BASE_URL +
+			paths.SIGN_IN +
+			'/?callbackUrl=' +
+			encodeURIComponent($page.url.href)}>Sign in</a
+	>
+</nav>
+
+<style lang="postcss">
+	.nav {
+		@apply mx-2 lg:mx-auto mt-2 lg:mt-4 max-w-5xl;
+		@apply sticky top-0 flex justify-between items-center;
+		@apply border px-4 py-1;
+	}
+</style>
diff --git a/src/lib/endpoints.ts b/src/lib/endpoints.ts
index 373476b..a8e3db5 100644
--- a/src/lib/endpoints.ts
+++ b/src/lib/endpoints.ts
@@ -1,4 +1,4 @@
-import { Models } from '@kittycad/lib'
+import type { Models } from '@kittycad/lib'
 
 export type CADFormat = Models['FileExportFormat_type']
 
diff --git a/src/lib/index.ts b/src/lib/index.ts
deleted file mode 100644
index 856f2b6..0000000
--- a/src/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/lib/paths.ts b/src/lib/paths.ts
new file mode 100644
index 0000000..954549e
--- /dev/null
+++ b/src/lib/paths.ts
@@ -0,0 +1,3 @@
+export const paths = {
+	SIGN_IN: '/signin'
+}
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
new file mode 100644
index 0000000..2261319
--- /dev/null
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1,11 @@
+import { users } from '@kittycad/lib'
+
+export const load = async ({ cookies }) => {
+	console.log('cookies', cookies.getAll())
+
+	const response = await users.get_user_self()
+
+	return {
+		user: 'error_code' in response ? undefined : response
+	}
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 710d492..93bb145 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,12 @@
-<script>
-	import '../styles/app.css'
+<script lang="ts">
+	import Nav from 'components/Nav.svelte'
+	import 'styles/app.css'
+	import type { LayoutData } from './$types'
+
+	export let layoutData: LayoutData
 </script>
 
+<Nav user={layoutData.user} />
 <main class="mx-5 lg:mx-auto max-w-5xl my-24">
 	<slot />
 </main>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 743c1c0..c4220da 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -20,9 +20,6 @@ export const load = async () => {
 
 	const body = await response.json()
 
-	console.log('response', response)
-	console.log('body', body)
-
 	return {
 		status: response.status,
 		body
@@ -47,9 +44,6 @@ export const actions = {
 
 		const body = await response.json()
 
-		console.log('response', response)
-		console.log('body', body)
-
 		return {
 			status: response.status,
 			body
diff --git a/src/routes/view/[modelId]/+page.server.ts b/src/routes/view/[modelId]/+page.server.ts
new file mode 100644
index 0000000..e69de29
diff --git a/svelte.config.js b/svelte.config.js
index b376ee7..afa6605 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -13,8 +13,8 @@ const config = {
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
 		alias: {
-			'styles': 'src/styles',
-			'components': 'src/components',
+			styles: 'src/styles',
+			components: 'src/components'
 		}
 	}
 }
diff --git a/vite.config.ts b/vite.config.ts
index fdc39bb..2bfff4a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,14 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
 	plugins: [sveltekit()],
+	server: {
+		port: 3000,
+		strictPort: true
+	},
+	preview: {
+		port: 3000,
+		strictPort: true
+	},
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	}