feat(svelte-ui): add basic collections grid

nicholaschiang · Nov 24, 2024 · e22ccf9 · e22ccf9
1 parent bc02b36
commit e22ccf9
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 28 deletions.
diff --git a/svelte-ui/package.json b/svelte-ui/package.json
@@ -44,8 +44,11 @@
     "vitest": "^2.0.4"
   },
   "dependencies": {
+    "@supabase/sql-formatter": "^4.0.3",
     "@tailwindcss/forms": "^0.5.9",
     "drizzle-orm": "^0.36.4",
-    "pg": "^8.13.1"
+    "highlight.js": "^11.10.0",
+    "pg": "^8.13.1",
+    "svelte-highlight": "^7.7.0"
   }
 }
diff --git a/svelte-ui/pnpm-lock.yaml b/svelte-ui/pnpm-lock.yaml
diff --git a/svelte-ui/src/app.html b/svelte-ui/src/app.html
@@ -6,7 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
-  <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
+  <body
+    class="bg-white text-gray-900 selection:bg-gray-200 selection:text-gray-900 dark:bg-gray-950 dark:text-gray-50 dark:selection:bg-gray-800 dark:selection:text-gray-50"
+    data-sveltekit-preload-data="hover"
+  >
+    <div class="content">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/svelte-ui/src/lib/curious.ts b/svelte-ui/src/lib/curious.ts
@@ -0,0 +1,10 @@
+/**
+ * Logs a "Stay Curious" message to the console. A little easter egg for other
+ * developers. :)
+ * @see {@link https://logartis.info}
+ */
+export function logStayCurious() {
+  console.log(
+    "\n    ██████▄▄▄█████▓▄▄▄    ▓██   ██▓                   \n  ▒██    ▒▓  ██▒ ▓▒████▄   ▒██  ██▒                   \n  ░ ▓██▄  ▒ ▓██░ ▒▒██  ▀█▄  ▒██ ██░                   \n    ▒   ██░ ▓██▓ ░░██▄▄▄▄██ ░ ▐██▓░                   \n  ▒██████▒▒ ▒██▒ ░ ▓█   ▓██▒░ ██▒▓░                   \n  ▒ ▒▓▒ ▒ ░ ▒ ░░   ▒▒   ▓▒█░ ██▒▒▒                    \n  ░ ░▒  ░ ░   ░     ▒   ▒▒ ▓██ ░▒░                    \n  ░  ░  ░   ░       ░   ▒  ▒ ▒ ░░                     \n        ░               ░  ░ ░                        \n   ▄████▄  █    ██ ██▀███  ██▓▒█████  █    ██  ██████ \n  ▒██▀ ▀█  ██  ▓██▓██ ▒ ██▓██▒██▒  ██▒██  ▓██▒██    ▒ \n  ▒▓█    ▄▓██  ▒██▓██ ░▄█ ▒██▒██░  ██▓██  ▒██░ ▓██▄   \n  ▒▓▓▄ ▄██▓▓█  ░██▒██▀▀█▄ ░██▒██   ██▓▓█  ░██░ ▒   ██▒\n  ▒ ▓███▀ ▒▒█████▓░██▓ ▒██░██░ ████▓▒▒▒█████▓▒██████▒▒\n  ░ ░▒ ▒  ░▒▓▒ ▒ ▒░ ▒▓ ░▒▓░▓ ░ ▒░▒░▒░░▒▓▒ ▒ ▒▒ ▒▓▒ ▒ ░\n    ░  ▒  ░░▒░ ░ ░  ░▒ ░ ▒░▒ ░ ░ ▒ ▒░░░▒░ ░ ░░ ░▒  ░ ░\n  ░        ░░░ ░ ░  ░░   ░ ▒ ░ ░ ░ ▒  ░░░ ░ ░░  ░  ░  \n  ░ ░        ░       ░     ░     ░ ░    ░          ░  \n  ░                                                   \n  ",
+  )
+}
diff --git a/svelte-ui/src/lib/server/db/index.ts b/svelte-ui/src/lib/server/db/index.ts
@@ -8,4 +8,8 @@ const schema = { ...tables, ...relations }
 
 if (!env.DATABASE_URL) throw new Error("DATABASE_URL is not set")
 
-export const db = drizzle({ schema, connection: env.DATABASE_URL })
+export const db = drizzle({
+  schema,
+  logger: true,
+  connection: env.DATABASE_URL,
+})
diff --git a/svelte-ui/src/routes/+layout.svelte b/svelte-ui/src/routes/+layout.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import "../app.css"
+  import { logStayCurious } from "$lib/curious"
   let { children } = $props()
+  $effect(logStayCurious)
 </script>
 
 {@render children()}
diff --git a/svelte-ui/src/routes/+page.server.ts b/svelte-ui/src/routes/+page.server.ts
@@ -1,11 +1,54 @@
+import { asc, ilike, sql } from "drizzle-orm"
+import * as tables from "$lib/server/db/schema/tables"
 import { db } from "$lib/server/db"
 
-export async function load() {
-  return {
-    collections: db.query.collection.findMany({
-      with: {
-        brand: true,
+const collectionsPageQuery = db.query.collection
+  .findMany({
+    columns: { id: true, name: true, level: true, location: true, sex: true },
+    with: {
+      brand: {
+        columns: {
+          id: true,
+          name: true,
+        },
+      },
+      season: {
+        columns: { id: true, year: true, name: true },
+      },
+      looks: {
+        columns: { id: true, number: true },
+        with: {
+          images: {
+            limit: 1,
+            columns: { id: true, url: true },
+          },
+        },
+        orderBy: [asc(tables.look.number)],
       },
+    },
+    where: ilike(tables.collection.name, sql.placeholder("search")),
+    orderBy: [
+      asc(tables.collection.name),
+      asc(tables.collection.level),
+      asc(tables.collection.sex),
+    ],
+    limit: sql.placeholder("limit"),
+  })
+  .prepare("collectionsPageQuery")
+
+export async function load({ url }) {
+  const search = url.searchParams.get("q") ?? ""
+  const query = collectionsPageQuery.getQuery()
+  let sql = query.sql
+  for (let i = 0; i < query.params.length; i++) {
+    sql = sql.replace(`$${i + 1}`, `${query.params[i]}`)
+  }
+  return {
+    search,
+    sql,
+    collections: collectionsPageQuery.execute({
+      search: `%${search}%`,
+      limit: search ? 100_000 : 100,
     }),
   }
 }
diff --git a/svelte-ui/src/routes/+page.svelte b/svelte-ui/src/routes/+page.svelte
@@ -1,21 +1,75 @@
 <script lang="ts">
+  import { Highlight } from "svelte-highlight";
+  import sql from "svelte-highlight/languages/sql";
+  import "svelte-highlight/styles/github-dark.css";
+  import { format } from "@supabase/sql-formatter"
   let { data } = $props()
+  let value = $state("")
+  let code = $derived(format(data.sql))
 </script>
 
-<h1 class="font-semibold">Collections</h1>
-<ul>
-  {#await data.collections}
-    <li>Loading...</li>
-  {:then collections}
-    {#each collections as collection (collection.id)}
-      <li>
-        <a href={`/${collection.id}`}>{collection.name}</a>
-      </li>
-    {/each}
-    {#if collections.length === 0}
-      <li>No collections found.</li>
-    {/if}
-  {:catch error}
-    <li>Error: {error.message}</li>
-  {/await}
-</ul>
+<header
+  class="flex h-10 items-center gap-6 border-b border-gray-200 px-6 dark:border-gray-800"
+>
+  <h1 class="text-lg">collections</h1>
+</header>
+<div class="flex flex-col gap-6 p-6">
+  <form method="get">
+    <input
+      name="q"
+      type="search"
+      class="block w-full border-gray-200 bg-transparent focus:ring-0 dark:border-gray-700"
+      placeholder="Search collections"
+      bind:value
+    />
+  </form>
+  <div class="flex flex-col gap-2">
+    {#await data.collections}
+			<p>Executing query...</p>
+			<Highlight class="text-xs" language={sql} {code} />
+    {:then collections}
+      <p>{collections.length} collections found</p>
+    {:catch error}
+      <p>Error: {error.message}</p>
+    {/await}
+  </div>
+  <ul
+    class="grid gap-x-2 gap-y-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6"
+  >
+    {#await data.collections then collections}
+      {#each collections as collection (collection.id)}
+        <li class="flex flex-col gap-2 text-xs">
+          <div
+            class="flex aspect-person w-full items-center justify-center bg-gray-100 dark:bg-gray-800"
+          >
+            {#if collection.looks[0]?.images[0]?.url}
+              <img
+                src={collection.looks[0].images[0].url}
+                alt={collection.name}
+                class="h-full w-full object-cover flex items-center justify-center"
+                loading="lazy"
+                decoding="async"
+              />
+            {:else}
+              <span class="text-gray-200 dark:text-gray-700"
+                >No look images to show</span
+              >
+            {/if}
+          </div>
+          <div>
+            <h2 class="font-semibold uppercase">{collection.brand.name}</h2>
+            <h3>{collection.season.name}</h3>
+            {#if collection.location}
+              <p class="text-gray-400 dark:text-gray-500">
+                {collection.location}
+              </p>
+            {/if}
+          </div>
+        </li>
+      {/each}
+      {#if collections.length === 0}
+        <li>No collections found.</li>
+      {/if}
+    {/await}
+  </ul>
+</div>
diff --git a/svelte-ui/tailwind.config.ts b/svelte-ui/tailwind.config.ts
@@ -1,11 +1,18 @@
 import forms from "@tailwindcss/forms"
 import type { Config } from "tailwindcss"
+import colors from "tailwindcss/colors"
 
 export default {
   content: ["./src/**/*.{html,js,svelte,ts}"],
 
   theme: {
-    extend: {},
+    extend: {
+      colors: { gray: colors.zinc },
+      aspectRatio: {
+        person: "9 / 16",
+        product: "4 / 5",
+      },
+    },
   },
 
   plugins: [forms],