From b8b1de9b59b22872e1b9ba25ef3d7fb36c7fa058 Mon Sep 17 00:00:00 2001
From: split <split@split.pet>
Date: Wed, 10 Jul 2024 12:16:36 -0700
Subject: [PATCH] add urllist to page

---
 src/routes/+layout.svelte      |  2 +-
 src/routes/set/+page.server.ts |  4 ++++
 src/routes/set/+page.svelte    | 34 +++++++++++++++++++++++++++++++---
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0ade011..3037f12 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -57,7 +57,7 @@
             a {
                 color: var(--link)
             }
-            code {
+            code, pre {
                 font-family: "Space Mono", monospace, monospace;
             }
         </style>
diff --git a/src/routes/set/+page.server.ts b/src/routes/set/+page.server.ts
index f9ff6ba..e254f10 100644
--- a/src/routes/set/+page.server.ts
+++ b/src/routes/set/+page.server.ts
@@ -3,4 +3,8 @@ export async function load({ request, parent }) {
     const { user } = await parent();
     if (!user)
         launchLogin(request)
+    
+    return {
+        url: request.url
+    }
 }
\ No newline at end of file
diff --git a/src/routes/set/+page.svelte b/src/routes/set/+page.svelte
index f3bcf9d..5dfd951 100644
--- a/src/routes/set/+page.svelte
+++ b/src/routes/set/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { User } from "$lib/types";
 
-    export let data: {user: User};
+    export let data: {user: User, url: string};
 </script>
 
 <style>
@@ -30,12 +30,40 @@
     form > label {
         flex-shrink: 0;
     }
+    summary::marker {
+        content: ""
+    }
+    summary {
+        color: var(--link);
+        cursor:pointer;
+    }
+    details > div {
+        border-left: 0.25em solid var(--link);
+        padding-left: 1em;
+        overflow-x: auto;
+        background-color: var(--crust);
+        width: 100%;
+    }
 </style>
 
 <h1>Hi, {data.user.name}</h1>
 <p>
-    The <code>sub</code> claim is set to <code>{data.user.sub}</code>.
-    Your identifier is <code>{data.user.identifier}</code>.
+    <details>
+        <summary>View user information...</summary>
+        <div>
+            <pre>{JSON.stringify(data.user, null, 4)}</pre>
+        </div>
+    </details>
+    <details>
+        <summary>Avatar URLs...</summary>
+        <div>
+            <ul>
+                {#each ["", "32", "64", "128", "256", "512"] as variant}
+                    <li>{new URL(`/avatar/${data.user.identifier}/${variant}`, data.url)}</li>
+                {/each}
+            </ul>
+        </div>
+    </details>
 </p>
 <form method="post" enctype="multipart/form-data">
     <label for="newAvatar">Set a new avatar:</label>