feat: RepoDisplay add web and reduce text size

to reflect web in nip34 draft

__snapshots__/repo-details.test.js.snap

@@ -29,11 +29,28 @@ exports[`Repo/Details Long Details smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <h4>
       maintainers
@@ -88,13 +105,13 @@ exports[`Repo/Details Long Details smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relayable.org
     </div>
   </div>
@@ -129,11 +146,28 @@ exports[`Repo/Details Long and No Spaces smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <h4>
       maintainers
@@ -188,13 +222,13 @@ exports[`Repo/Details Long and No Spaces smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relayable.org
     </div>
   </div>
@@ -227,6 +261,23 @@ exports[`Repo/Details No Clone smoke-test 1`] = `
     <div>
     </div>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <h4>
       maintainers
@@ -281,13 +332,13 @@ exports[`Repo/Details No Clone smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relayable.org
     </div>
   </div>
@@ -318,11 +369,28 @@ exports[`Repo/Details No Description smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <h4>
       maintainers
@@ -377,13 +445,13 @@ exports[`Repo/Details No Description smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relayable.org
     </div>
   </div>
@@ -418,17 +486,38 @@ exports[`Repo/Details No Maintainers or Relays smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <div>
     </div>
   </div>
   <div>
+    <h4>
+      relays
+    </h4>
     <div>
+      none
     </div>
   </div>
 </div>
@@ -462,11 +551,28 @@ exports[`Repo/Details No Maintainers smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <div>
     </div>
@@ -475,13 +581,13 @@ exports[`Repo/Details No Maintainers smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relayable.org
     </div>
   </div>
@@ -512,11 +618,28 @@ exports[`Repo/Details No Name or Description smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <h4>
       maintainers
@@ -571,13 +694,13 @@ exports[`Repo/Details No Name or Description smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relayable.org
     </div>
   </div>
@@ -612,11 +735,28 @@ exports[`Repo/Details No Relays smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <h4>
       maintainers
@@ -668,7 +808,11 @@ exports[`Repo/Details No Relays smoke-test 1`] = `
     </div>
   </div>
   <div>
+    <h4>
+      relays
+    </h4>
     <div>
+      none
     </div>
   </div>
 </div>
@@ -690,11 +834,28 @@ exports[`Repo/Details No Tags smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <h4>
       maintainers
@@ -749,13 +910,121 @@ exports[`Repo/Details No Tags smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details No Web smoke-test 1`] = `
+<div class="prose w-full max-w-md">
+  <h4>
+    description
+  </h4>
+  <p class="my-2 break-words text-sm">
+    short description
+  </p>
+  <div>
+    <div class="badge badge-secondary mr-2">
+      svelte
+    </div>
+    <div class="badge badge-secondary mr-2">
+      nostr
+    </div>
+    <div class="badge badge-secondary mr-2">
+      code-collaboration
+    </div>
+    <div class="badge badge-secondary mr-2">
+      git
+    </div>
+  </div>
+  <div>
+    <h4>
+      clone
+    </h4>
+    <a href="github.com/example/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      github.com/example/example
+    </a>
+  </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <div>
+      none
+    </div>
+  </div>
+  <div>
+    <h4>
+      maintainers
+    </h4>
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="carole"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          carole
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="bob"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          bob
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="steve"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          steve
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary badge-sm my-2 block">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary badge-sm my-2 block">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary badge-sm my-2 block">
       relayable.org
     </div>
   </div>
@@ -790,11 +1059,28 @@ exports[`Repo/Details One Maintainer's Profile Has No displayName or Name smoke-
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <h4>
       maintainers
@@ -845,13 +1131,13 @@ exports[`Repo/Details One Maintainer's Profile Has No displayName or Name smoke-
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relayable.org
     </div>
   </div>
@@ -886,11 +1172,28 @@ exports[`Repo/Details One Maintainer's Profile Not Loaded smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <h4>
       maintainers
@@ -942,13 +1245,13 @@ exports[`Repo/Details One Maintainer's Profile Not Loaded smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relayable.org
     </div>
   </div>
@@ -983,11 +1286,28 @@ exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <h4>
       maintainers
@@ -1042,13 +1362,13 @@ exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relayable.org
     </div>
   </div>
@@ -1083,11 +1403,28 @@ exports[`Repo/Details Short Details smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary my-2 break-words"
+       class="link link-primary my-2 break-words text-sm"
     >
       github.com/example/example
     </a>
   </div>
+  <div>
+    <h4>
+      websites
+    </h4>
+    <a href="https://gitworkshop.dev/repo/example"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://gitworkshop.dev/repo/example
+    </a>
+    <a href="https://example.com"
+       target="_blank"
+       class="link link-primary my-2 break-words text-sm"
+    >
+      https://example.com
+    </a>
+  </div>
   <div>
     <div>
     </div>
@@ -1096,13 +1433,13 @@ exports[`Repo/Details Short Details smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary my-2 block">
+    <div class="badge badge-secondary badge-sm my-2 block">
       relayable.org
     </div>
   </div>
@@ -1145,5 +1482,13 @@ exports[`Repo/Details loading smoke-test 1`] = `
     <div class="badge skeleton my-2 block w-40">
     </div>
   </div>
+  <div>
+    <div class="skeleton my-3 h-5 w-20">
+    </div>
+    <div class="badge skeleton my-2 block w-60">
+    </div>
+    <div class="badge skeleton my-2 block w-40">
+    </div>
+  </div>
 </div>
 `;

src/lib/components/repo/RepoDetails.stories.svelte

@@ -29,6 +29,8 @@
 
 <Story name="No Clone" args={vectors.NoGitServer} />
 
+<Story name="No Web" args={vectors.NoWeb} />
+
 <Story name="No Maintainers" args={vectors.NoMaintainers} />
 
 <Story

src/lib/components/repo/RepoDetails.svelte

@@ -53,12 +53,34 @@
       <a
         href={clone}
         target="_blank"
-        class="link link-primary my-2 break-words"
+        class="link link-primary my-2 break-words text-sm"
       >
         {clone}
       </a>
     {/if}
   </div>
+  <div>
+    {#if loading}
+      <div class="skeleton my-3 h-5 w-20"></div>
+      <div class="badge skeleton my-2 block w-60"></div>
+      <div class="badge skeleton my-2 block w-40"></div>
+    {:else if web.length == 0}
+      <h4>websites</h4>
+      <div>none</div>
+    {:else}
+      <h4>websites</h4>
+      {#each web as site}
+        <a
+          href={site}
+          target="_blank"
+          class="link link-primary my-2 break-words text-sm"
+        >
+          {site}
+        </a>
+      {/each}
+    {/if}
+  </div>
+
   <div>
     {#if loading}
       <div class="skeleton my-3 h-5 w-20"></div>
@@ -79,11 +101,12 @@
       <div class="badge skeleton my-2 block w-60"></div>
       <div class="badge skeleton my-2 block w-40"></div>
     {:else if relays.length == 0}
-      <div />
+      <h4>relays</h4>
+      <div>none</div>
     {:else}
       <h4>relays</h4>
       {#each relays as relay}
-        <div class="badge badge-secondary my-2 block">{relay}</div>
+        <div class="badge badge-secondary badge-sm my-2 block">{relay}</div>
       {/each}
     {/if}
   </div>

src/lib/components/repo/vectors.ts

@@ -47,6 +47,10 @@ const base: RepoEvent = {
     withName(UserVectors.default, 'steve'),
   ],
   loading: false,
+  event_id: '',
+  web: ['https://gitworkshop.dev/repo/example', 'https://example.com'],
+  referenced_by: [],
+  created_at: 0,
 }
 
 export const RepoDetailsArgsVectors = {
@@ -67,6 +71,7 @@ export const RepoDetailsArgsVectors = {
   NoDescription: { ...base, description: '' } as RepoEvent,
   NoTags: { ...base, tags: [] } as RepoEvent,
   NoGitServer: { ...base, clone: '' } as RepoEvent,
+  NoWeb: { ...base, web: [] } as RepoEvent,
   MaintainersOneProfileNotLoaded: {
     ...base,
     maintainers: [