feat(homepage): list more recent repos

reduce the space used each repo summary and make them less striking as
more are going to be displayed

__snapshots__/repo-summary-card.test.js.snap

@@ -1,73 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Repo/Summary/Card Long Details smoke-test 1`] = `
-<a class="card w-96 bg-primary text-primary-content"
+<div class="p-4 bg-base-200 my-2 rounded-lg">
+  <a class="link-primary break-words"
      href="/repo/"
->
-  <div class="card-body">
-    <h2 class="card-title svelte-jesdj">
+  >
     Long Name that goes on and on and on and on a...
-    </h2>
-    <p class="svelte-jesdj">
+  </a>
+  <p class="text-sm text-muted break-words">
     Lorem ipsum dolor sit amet, consectetur adipi...
   </p>
-  </div>
-</a>
+</div>
 `;
 
 exports[`Repo/Summary/Card Long and No Spaces smoke-test 1`] = `
-<a class="card w-96 bg-primary text-primary-content"
+<div class="p-4 bg-base-200 my-2 rounded-lg">
+  <a class="link-primary break-words"
      href="/repo/"
->
-  <div class="card-body">
-    <h2 class="card-title svelte-jesdj">
+  >
     LongNameLongNameLongNameLongNameLongNameLongN...
-    </h2>
-    <p class="svelte-jesdj">
+  </a>
+  <p class="text-sm text-muted break-words">
     LoremipsumLoremipsumLoremipsumLoremipsumLorem...
   </p>
-  </div>
-</a>
+</div>
 `;
 
 exports[`Repo/Summary/Card No Details smoke-test 1`] = `
-<a class="card w-96 bg-primary text-primary-content"
+<div class="p-4 bg-base-200 my-2 rounded-lg">
+  <a class="link-primary break-words"
      href="/repo/"
->
-  <div class="card-body">
-    <h2 class="card-title svelte-jesdj">
+  >
     Untitled
-    </h2>
-    <p class="svelte-jesdj">
+  </a>
+  <p class="text-sm text-muted break-words">
   </p>
-  </div>
-</a>
+</div>
 `;
 
 exports[`Repo/Summary/Card Short Details smoke-test 1`] = `
-<a class="card w-96 bg-primary text-primary-content"
+<div class="p-4 bg-base-200 my-2 rounded-lg">
+  <a class="link-primary break-words"
      href="/repo/"
->
-  <div class="card-body">
-    <h2 class="card-title svelte-jesdj">
+  >
     Short Name
-    </h2>
-    <p class="svelte-jesdj">
+  </a>
+  <p class="text-sm text-muted break-words">
     short description
   </p>
-  </div>
-</a>
+</div>
 `;
 
 exports[`Repo/Summary/Card loading smoke-test 1`] = `
-<div class="card w-96 bg-neutral text-neutral-focus">
-  <div class="card-body">
-    <div class="text-center">
-      <div class="h-6 mt-1 mb-3 skeleton w-40">
-      </div>
-      <div class="h-4 mb-1 skeleton w-100">
-      </div>
+<div class="p-4 bg-base-200 my-2 rounded-lg">
+  <div class="h-5 mb-2 skeleton w-40">
   </div>
+  <div class="h-4 skeleton w-100">
   </div>
 </div>
 `;

__snapshots__/repo-summary-list.test.js.snap

@@ -1,54 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Repo/Summary/List Default smoke-test 1`] = `
-<div class="space-y-5">
-  <div class="prose">
+<div class="min-width">
+  <div class="prose mb-3">
     <h3>
       Featured Repositories
     </h3>
   </div>
-  <a class="card w-96 bg-primary text-primary-content"
+  <div class>
+    <div class="p-4 bg-base-200 my-2 rounded-lg">
+      <a class="link-primary break-words"
          href="/repo/"
       >
-    <div class="card-body">
-      <h2 class="card-title svelte-jesdj">
         Short Name
-      </h2>
-      <p class="svelte-jesdj">
+      </a>
+      <p class="text-sm text-muted break-words">
         short description
       </p>
     </div>
-  </a>
-  <a class="card w-96 bg-primary text-primary-content"
+    <div class="p-4 bg-base-200 my-2 rounded-lg">
+      <a class="link-primary break-words"
          href="/repo/"
       >
-    <div class="card-body">
-      <h2 class="card-title svelte-jesdj">
         Long Name that goes on and on and on and on a...
-      </h2>
-      <p class="svelte-jesdj">
+      </a>
+      <p class="text-sm text-muted break-words">
         Lorem ipsum dolor sit amet, consectetur adipi...
       </p>
     </div>
-  </a>
-  <a class="card w-96 bg-primary text-primary-content"
+    <div class="p-4 bg-base-200 my-2 rounded-lg">
+      <a class="link-primary break-words"
          href="/repo/"
       >
-    <div class="card-body">
-      <h2 class="card-title svelte-jesdj">
         LongNameLongNameLongNameLongNameLongNameLongN...
-      </h2>
-      <p class="svelte-jesdj">
+      </a>
+      <p class="text-sm text-muted break-words">
         LoremipsumLoremipsumLoremipsumLoremipsumLorem...
       </p>
     </div>
-  </a>
+  </div>
 </div>
 `;
 
 exports[`Repo/Summary/List Empty smoke-test 1`] = `
-<div class="space-y-5">
-  <div class="prose">
+<div class="min-width">
+  <div class="prose mb-3">
     <h3>
       Latest
     </h3>
@@ -60,39 +56,29 @@ exports[`Repo/Summary/List Empty smoke-test 1`] = `
 `;
 
 exports[`Repo/Summary/List Loading smoke-test 1`] = `
-<div class="space-y-5">
-  <div class="prose">
+<div class="min-width">
+  <div class="prose mb-3">
     <h3>
       Latest
     </h3>
   </div>
-  <div class="card w-96 bg-neutral text-neutral-focus">
-    <div class="card-body">
-      <div class="text-center">
-        <div class="h-6 mt-1 mb-3 skeleton w-40">
-        </div>
-        <div class="h-4 mb-1 skeleton w-100">
-        </div>
-      </div>
-    </div>
+  <div class>
+    <div class="p-4 bg-base-200 my-2 rounded-lg">
+      <div class="h-5 mb-2 skeleton w-40">
       </div>
-  <div class="card w-96 bg-neutral text-neutral-focus">
-    <div class="card-body">
-      <div class="text-center">
-        <div class="h-6 mt-1 mb-3 skeleton w-40">
+      <div class="h-4 skeleton w-100">
       </div>
-        <div class="h-4 mb-1 skeleton w-100">
     </div>
+    <div class="p-4 bg-base-200 my-2 rounded-lg">
+      <div class="h-5 mb-2 skeleton w-40">
       </div>
+      <div class="h-4 skeleton w-100">
       </div>
     </div>
-  <div class="card w-96 bg-neutral text-neutral-focus">
-    <div class="card-body">
-      <div class="text-center">
-        <div class="h-6 mt-1 mb-3 skeleton w-40">
-        </div>
-        <div class="h-4 mb-1 skeleton w-100">
+    <div class="p-4 bg-base-200 my-2 rounded-lg">
+      <div class="h-5 mb-2 skeleton w-40">
       </div>
+      <div class="h-4 skeleton w-100">
       </div>
     </div>
   </div>
@@ -100,72 +86,64 @@ exports[`Repo/Summary/List Loading smoke-test 1`] = `
 `;
 
 exports[`Repo/Summary/List No Title smoke-test 1`] = `
-<div class="space-y-5">
-  <a class="card w-96 bg-primary text-primary-content"
+<div class="min-width">
+  <div class>
+    <div class="p-4 bg-base-200 my-2 rounded-lg">
+      <a class="link-primary break-words"
          href="/repo/"
       >
-    <div class="card-body">
-      <h2 class="card-title svelte-jesdj">
         Short Name
-      </h2>
-      <p class="svelte-jesdj">
+      </a>
+      <p class="text-sm text-muted break-words">
         short description
       </p>
     </div>
-  </a>
-  <a class="card w-96 bg-primary text-primary-content"
+    <div class="p-4 bg-base-200 my-2 rounded-lg">
+      <a class="link-primary break-words"
          href="/repo/"
       >
-    <div class="card-body">
-      <h2 class="card-title svelte-jesdj">
         Long Name that goes on and on and on and on a...
-      </h2>
-      <p class="svelte-jesdj">
+      </a>
+      <p class="text-sm text-muted break-words">
         Lorem ipsum dolor sit amet, consectetur adipi...
       </p>
     </div>
-  </a>
+  </div>
 </div>
 `;
 
 exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
-<div class="space-y-5">
-  <div class="prose">
+<div class="min-width">
+  <div class="prose mb-3">
     <h3>
       Latest
     </h3>
   </div>
-  <a class="card w-96 bg-primary text-primary-content"
+  <div class>
+    <div class="p-4 bg-base-200 my-2 rounded-lg">
+      <a class="link-primary break-words"
          href="/repo/"
       >
-    <div class="card-body">
-      <h2 class="card-title svelte-jesdj">
         Short Name
-      </h2>
-      <p class="svelte-jesdj">
+      </a>
+      <p class="text-sm text-muted break-words">
         short description
       </p>
     </div>
-  </a>
-  <a class="card w-96 bg-primary text-primary-content"
+    <div class="p-4 bg-base-200 my-2 rounded-lg">
+      <a class="link-primary break-words"
          href="/repo/"
       >
-    <div class="card-body">
-      <h2 class="card-title svelte-jesdj">
         Long Name that goes on and on and on and on a...
-      </h2>
-      <p class="svelte-jesdj">
+      </a>
+      <p class="text-sm text-muted break-words">
         Lorem ipsum dolor sit amet, consectetur adipi...
       </p>
     </div>
-  </a>
-  <div class="card w-96 bg-neutral text-neutral-focus">
-    <div class="card-body">
-      <div class="text-center">
-        <div class="h-6 mt-1 mb-3 skeleton w-40">
-        </div>
-        <div class="h-4 mb-1 skeleton w-100">
+    <div class="p-4 bg-base-200 my-2 rounded-lg">
+      <div class="h-5 mb-2 skeleton w-40">
       </div>
+      <div class="h-4 skeleton w-100">
       </div>
     </div>
   </div>

src/lib/components/RepoSummaryCard.svelte

@@ -14,8 +14,6 @@
 </script>
 
 <script lang="ts">
-  import { slide } from "svelte/transition";
-
   export let { name, description, repo_id: repo_id, loading } = defaults;
   let short_name: string;
   $: {
@@ -27,37 +25,12 @@
     description.length > 50 ? description.slice(0, 45) + "..." : description;
 </script>
 
-{#if loading}
-  <div
-    transition:slide={{ duration: 50 }}
-    class="card w-96 bg-neutral text-neutral-focus"
-  >
-    <div class="card-body">
-      <div class="text-center">
-        <div class="h-6 mt-1 mb-3 skeleton w-40"></div>
-        <div class="h-4 mb-1 skeleton w-100"></div>
-      </div>
-    </div>
-  </div>
-{:else}
-  <a
-    transition:slide={{ duration: 50 }}
-    class="card w-96 bg-primary text-primary-content"
-    href="/repo/{repo_id}"
-  >
-    <div class="card-body">
-      <h2 class="card-title">{short_name}</h2>
-      <p>{short_descrption}</p>
-    </div>
-  </a>
-{/if}
-
-<style>
-  h2 {
-    display: inline-block;
-  }
-  p,
-  h2 {
-    word-wrap: break-word;
-  }
-</style>
+<div class="p-4 bg-base-200 my-2 rounded-lg">
+  {#if loading}
+    <div class="h-5 mb-2 skeleton w-40"></div>
+    <div class="h-4 skeleton w-100"></div>
+  {:else}
+    <a class="link-primary break-words" href="/repo/{repo_id}">{short_name}</a>
+    <p class="text-sm text-muted break-words">{short_descrption}</p>
+  {/if}
+</div>

src/lib/components/ReposSummaryList.svelte

@@ -11,15 +11,16 @@
   export let loading: boolean = false;
 </script>
 
-<div class="space-y-5">
+<div class="min-width">
   {#if title.length > 0}
-    <div class="prose">
+    <div class="prose mb-3">
       <h3>{title}</h3>
     </div>
   {/if}
   {#if repos.length == 0 && !loading}
     <p class="prose">None</p>
-  {/if}
+  {:else}
+    <div class="">
       {#each repos as { name, description, repo_id }}
         <RepoSummaryCard {name} {description} {repo_id} />
       {/each}
@@ -30,4 +31,6 @@
           <RepoSummaryCard loading={true} />
         {/if}
       {/if}
+    </div>
+  {/if}
 </div>

src/lib/wrappers/ReposRecent.svelte

@@ -5,7 +5,7 @@
     import { ndk } from "$lib/stores/ndk";
     import { onDestroy } from "svelte";
 
-    export let limit: number = 5;
+    export let limit: number = 10;
 
     let repos: Args[] = [];
     let loading: boolean = true;