add variant debug select

README.md

@@ -15,9 +15,10 @@ The Appwrite Website has been built with the following frameworks:
 
 ## Development
 
-*If this is your first time setting up the repository, please run `pnpm install` inside the repo's directory.*
+_If this is your first time setting up the repository, please run `pnpm install` inside the repo's directory._
 
 To get the repo up and running in your local environment, use the following command:
+
 ```bash
 pnpm run dev
 ```

src/routes/init/helpers.ts

@@ -219,8 +219,13 @@ function getTicketVariant(doc: Omit<TicketData, 'contributions' | 'variant'>): T
 }
 
 export async function getTicketByUser(user: User) {
+    console.time('ticket');
     const doc = await getTicketDocByUser(user);
+    console.timeEnd('ticket');
+
+    console.time('contributions');
     const contributions = await getTicketContributions(doc.$id);
+    console.timeEnd('contributions');
     const variant = getTicketVariant(doc);
 
     return {

src/routes/init/ticket/[id]/get-contributions/+server.ts

@@ -20,7 +20,9 @@ export async function GET({ params }) {
 
     if (!gh_user) return emptyResponse;
 
+    console.time('fetch on gh');
     const res = await fetch(`https://github.com/${gh_user}`);
+    console.timeEnd('fetch on gh');
     const html = await res.text();
     const root = parse(html);
     const table = root.querySelector('table');

src/routes/init/ticket/customize/+page.svelte

@@ -11,12 +11,14 @@
     import Form from './form.svelte';
     import { createCopy } from '$lib/utils/copy';
     import { page } from '$app/stores';
+    import type { TicketVariant } from '../constants';
 
     export let data;
 
     let name = data.ticket?.name ?? '';
     const id = data.ticket?.id ?? 0;
     let tribe: string | undefined = data.ticket?.tribe ?? undefined;
+    let variant: TicketVariant = data.ticket.variant;
     let showGitHub = data.ticket?.show_contributions ?? true;
     let drawerOpen = false;
     let customizing = false;
@@ -74,7 +76,7 @@
                 </h1>
 
                 <div class="desktop">
-                    <Form bind:name bind:tribe bind:showGitHub />
+                    <Form bind:variant bind:name bind:tribe bind:showGitHub />
                 </div>
             </div>
         {:else}
@@ -117,7 +119,13 @@
 
         <TicketPreview>
             <div class="ticket-holder">
-                <Ticket {...data.ticket} {tribe} {name} show_contributions={showGitHub} />
+                <Ticket
+                    {...$page.data.ticket}
+                    {variant}
+                    {tribe}
+                    {name}
+                    show_contributions={showGitHub}
+                />
             </div>
         </TicketPreview>
     </div>
@@ -138,7 +146,7 @@
             {#if drawerOpen}
                 <hr />
                 <div class="form-wrapper" transition:slide>
-                    <Form bind:name bind:tribe bind:showGitHub />
+                    <Form bind:variant bind:name bind:tribe bind:showGitHub />
                 </div>
             {/if}
         </div>

src/routes/init/ticket/customize/+page.ts

@@ -7,8 +7,12 @@ export const load = async () => {
         throw redirect(307, '/init/ticket');
     }
 
+    console.time('user');
     const user = await getUser();
+    console.timeEnd('user');
+    console.time('ticket');
     const ticket = await getTicketByUser(user);
+    console.timeEnd('ticket');
 
     return {
         ticket,

src/routes/init/ticket/customize/form.svelte

@@ -5,6 +5,7 @@
     import { appwriteInit } from '$lib/appwrite/init';
     import { Switch } from '$lib/components';
     import { loginGithub } from '$routes/init/helpers';
+    import type { TicketVariant } from '../constants';
 
     import type { PageData } from './$types';
     import TribeToggle from './tribe-toggle.svelte';
@@ -13,6 +14,9 @@
     export let tribe: string | null = null;
     export let showGitHub = true;
     $: ({ ticket } = $page.data as PageData);
+    export let variant: TicketVariant = 'default';
+
+    const variants: TicketVariant[] = ['default', 'rainbow', 'pink'];
 
     const tribes = [
         null,
@@ -50,6 +54,18 @@
     />
 </div>
 
+<label for="variant" class="u-margin-block-start-32 u-block">Ticket variant (DEBUG)</label>
+<select
+    id="variant"
+    class="u-margin-block-start-4"
+    style:text-transform="capitalize"
+    bind:value={variant}
+>
+    {#each variants as variant}
+        <option value={variant}>{variant}</option>
+    {/each}
+</select>
+
 <hr />
 
 {#if ticket.gh_user}