Zoo polish (#70)

* Fix nav z-fighting

* Clean up remaining old colors

* Add one-click example prompts

* Find and replace "kittycad.io" with "zoo.dev"

* Fix rendering issue after submit (#65)

* make tsc happy

* lol tsc behaves differently in our CI setup for some reason

.env.development

@@ -1,2 +1,2 @@
-VITE_API_BASE_URL=https://api.dev.kittycad.io
-VITE_SITE_BASE_URL=https://dev.kittycad.io
+VITE_API_BASE_URL=https://api.dev.zoo.dev
+VITE_SITE_BASE_URL=https://dev.zoo.dev

.env.production

@@ -1,2 +1,2 @@
-VITE_API_BASE_URL=https://api.kittycad.io
-VITE_SITE_BASE_URL=https://kittycad.io
+VITE_API_BASE_URL=https://api.zoo.dev
+VITE_SITE_BASE_URL=https://zoo.dev

README.md

@@ -33,7 +33,7 @@ yarn fmt --fix && yarn test
 
 ### Setting a cookie for local host
 
-1. Get a dev api token from: https://dev.kittycad.io
+1. Get a dev api token from: https://dev.zoo.dev
 2. Open the dev console and run the following:
 
 ```js

src/components/GenerationList.svelte

@@ -14,6 +14,7 @@
 	} from '$lib/intersectionObserverAction'
 
 	export let additionalGenerations: Models['TextToCad_type'][] = []
+	$: combinedGenerations = [...additionalGenerations, ...$generations]
 
 	const RENDER_THRESHOLD = 0.05
 	let PAGE_SIZE = 2
@@ -81,22 +82,13 @@
 			use:childrenObserverAction={intersectionOptions}
 			on:emit={updateIntersectionInfo}
 		>
-			{#each additionalGenerations as item, i}
+			{#each combinedGenerations as item, i}
 				<li id={item.id} class="first-of-type:mt-0 my-12" style={`opacity: ${intersectionInfo[i]}`}>
-					<GenerationListItem data={item} on:retryprompt />
-				</li>
-			{/each}
-			{#each $generations as item, i}
-				<li
-					id={item.id}
-					class="first-of-type:mt-0 my-12"
-					style={`opacity: ${intersectionInfo[i + additionalGenerations.length]}`}
-				>
 					<GenerationListItem
 						data={item}
+						on:retryprompt
 						shouldRenderModel={intersectionInfo[i + additionalGenerations.length] >
 							RENDER_THRESHOLD}
-						on:retryprompt
 					/>
 				</li>
 			{/each}

src/components/GenerationListItem.svelte

@@ -70,13 +70,17 @@
 			<div
 				class="failed dark:dark relative overflow-hidden min-h-[33vh] border-t flex items-center justify-center p-2"
 			>
-				<p class="font-mono text-xs text-destroy-50">{data.error}</p>
+				<p class="font-mono text-xs text-destroy-50">
+					{data.error?.match(/4\d\d/)?.length
+						? 'The prompt must clearly describe a CAD model.'
+						: 'CAD model generation failed, try again later'}
+				</p>
 			</div>
 		{:else}
 			<div
 				class="shimmer-skeleton relative overflow-hidden min-h-[33vh] border-t flex items-center justify-center"
 			>
-				<p class="font-mono text-sm text-energy-50">Generating...</p>
+				<p class="font-mono text-sm text-green">Generating...</p>
 			</div>
 		{/if}
 	</div>
@@ -130,7 +134,7 @@
 	.shimmer-skeleton::before {
 		content: '';
 		@apply absolute z-0 inset-0 -inset-y-1/2;
-		@apply bg-gradient-to-t from-transparent via-energy-20/20 to-transparent;
+		@apply bg-gradient-to-t from-transparent via-green/80 to-transparent;
 		animation: shimmer 2s ease-in-out infinite;
 	}
 

src/components/Nav.svelte

@@ -24,7 +24,7 @@
 		@apply bg-white dark:bg-chalkboard-120;
 		@apply mx-5 lg:mx-auto mt-2 lg:mt-4 max-w-5xl;
 		@apply sticky z-10 top-0 flex justify-between items-center;
-		@apply border px-2 md:px-4 py-1;
+		@apply border px-2 md:px-4 py-1 z-20;
 	}
 
 	.sign-in {

src/hooks.server.ts

@@ -4,7 +4,7 @@ import { users, Client } from '@kittycad/lib'
 import { SIGN_OUT_PARAM } from '$lib/paths'
 const unProtectedRoutes = ['/']
 
-const domain = import.meta.env.DEV ? 'localhost' : '.kittycad.io'
+const domain = import.meta.env.DEV ? 'localhost' : '.zoo.dev'
 
 export const handle = async ({ event, resolve }) => {
 	const token = event.cookies.get(AUTH_COOKIE_NAME)

src/lib/consts.ts

@@ -0,0 +1,12 @@
+export const EXAMPLE_PROMPTS = [
+	'Draw me a 1/2 inch gear with 12 teeth',
+	'a 9 pointed star',
+	'a 3x6 lego',
+	'21-tooth involute helical gear',
+	'5-sided star',
+	'a plate with 4 holes near each corner and rounded corners',
+	'Make me a golf tee',
+	'create a plate with 3 holes in it',
+	'a brick: 8 in. long 4 in. deep 2 in. tall—with chamfered edges',
+	'a coaster for a drink'
+] as const

src/routes/api/get-generation-list/+server.ts

@@ -14,7 +14,7 @@ export const POST: RequestHandler = async ({ cookies, fetch, request }) => {
 	if (!body) {
 		throw error(
 			422,
-			`Please include a body that meets the spec listed here: https://kittycad.io/docs/api/list-text-to-cad-models-you've-generated`
+			`Please include a body that meets the spec listed here: https://zoo.dev/docs/api/list-text-to-cad-models-you've-generated`
 		)
 	}
 

src/routes/dashboard/+page.svelte

@@ -5,10 +5,13 @@
 	import type { Models } from '@kittycad/lib'
 	import type { PageData } from './$types'
 	import type { GenerationEvents } from '$lib/types'
+	import { EXAMPLE_PROMPTS } from '$lib/consts'
 	export let data: PageData
 	let promptedGenerations: Models['TextToCad_type'][] = []
 	let form = null as HTMLFormElement | null
 	let input = null as HTMLInputElement | null
+	const getExammplePrompts = () => [...EXAMPLE_PROMPTS].sort(() => Math.random() - 0.5).slice(0, 3)
+	let examplePrompts = getExammplePrompts()
 
 	const submitPrompt = async (prompt: string) => {
 		const response = await fetch(endpoints.localPrompt, {
@@ -56,6 +59,23 @@
 		</label>
 		<button type="submit" class="submit">Submit</button>
 	</form>
+	<div class="prompt-buttons">
+		<span class="font-mono pt-1 text-xs uppercase text-chalkboard-70 dark:text-chalkboard-40"
+			>Example prompts:</span
+		>
+		{#each examplePrompts as prompt (prompt)}
+			<button
+				class="submit"
+				on:click={() => {
+					if (input) {
+						input.value = prompt
+						input.focus()
+						examplePrompts = getExammplePrompts()
+					}
+				}}>{prompt}</button
+			>
+		{/each}
+	</div>
 </section>
 {#if Boolean(data.user)}
 	<GenerationList additionalGenerations={promptedGenerations} on:retryprompt={retryPrompt} />
@@ -68,4 +88,16 @@
 		@apply border-chalkboard-100 dark:border-chalkboard-20;
 		@apply bg-green text-chalkboard-120 hover:hue-rotate-15;
 	}
+
+	.prompt-buttons {
+		@apply flex flex-wrap gap-2 mt-4;
+	}
+
+	.prompt-buttons button {
+		@apply text-xs rounded-full border pt-0.5 pb-0 px-3;
+		@apply bg-transparent hover:bg-green/50;
+		@apply text-chalkboard-70 dark:text-chalkboard-50 hover:text-chalkboard-120 dark:hover:text-chalkboard-10;
+		@apply border-chalkboard-30 dark:border-chalkboard-70;
+		@apply hover:border-chalkboard-120 dark:hover:border-chalkboard-10;
+	}
 </style>

static/models/spur-gear.gltf

@@ -1267,7 +1267,7 @@
 		}
 	],
 	"asset": {
-		"generator": "kittycad.io",
+		"generator": "zoo.dev",
 		"version": "2.0"
 	},
 	"buffers": [