feat(RepoPage): add repo details

- add repo details ui component
- add test storybook tests
- add repo details wrapper
- add repo details to repo page

__snapshots__/repo-details.test.js.snap

@@ -0,0 +1,442 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Repo/Details Long Details test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nisl eget turpis congue molestie. Nulla vitae purus nec augue accumsan facilisis sed sed ligula. Vestibulum sed risus lacinia risus lacinia molestie. Ut lorem quam, consequat eget tempus in, rhoncus vel nunc. Duis efficitur a leo vel sodales. Nam id fermentum lacus. Etiam nec placerat velit. Praesent ac consectetur est. Aenean iaculis commodo enim.
+ Lorem ipsum dolor sit amet, con...
+  </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>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge badge-accent block my-2">
+      bob
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details Long and No Spaces test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    LoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsum
+  </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>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge badge-accent block my-2">
+      bob
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details No Description test 1`] = `
+<div class="max-w-md prose">
+  <div>
+  </div>
+  <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>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge badge-accent block my-2">
+      bob
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details No Maintainers or Relays test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    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>
+    <div>
+    </div>
+  </div>
+  <div>
+    <div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details No Maintainers test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    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>
+    <div>
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details No Name or Description test 1`] = `
+<div class="max-w-md prose">
+  <div>
+  </div>
+  <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>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge badge-accent block my-2">
+      bob
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details No Relays test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    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>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge badge-accent block my-2">
+      bob
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details No Tags test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    short description
+  </p>
+  <div>
+  </div>
+  <div>
+    <h4>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge badge-accent block my-2">
+      bob
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details Short Details test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    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>
+    <div>
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details loading test 1`] = `
+<div class="max-w-md prose">
+  <div class="h-5 my-3 skeleton w-20">
+  </div>
+  <div class="h-4 my-2 skeleton">
+  </div>
+  <div class="h-4 my-2 mb-3 w-2/3 skeleton">
+  </div>
+  <div>
+    <div class="badge skeleton w-20">
+    </div>
+    <div class="badge skeleton w-20">
+    </div>
+  </div>
+  <div>
+    <div class="h-5 my-3 skeleton w-20">
+    </div>
+    <div class="badge skeleton my-2 w-60 block">
+    </div>
+    <div class="badge skeleton my-2 w-40 block">
+    </div>
+  </div>
+  <div>
+    <div class="h-5 my-3 skeleton w-20">
+    </div>
+    <div class="badge skeleton my-2 w-60 block">
+    </div>
+    <div class="badge skeleton my-2 w-40 block">
+    </div>
+  </div>
+</div>
+`;

src/lib/components/Repo.vectors.ts

@@ -1,4 +1,5 @@
 import type { Args as SummaryCardArgs } from "./RepoSummaryCard.svelte";
+import type { Args as DetailsArgs } from "./RepoDetails.svelte";
 
 export let RepoSummaryCardArgsVectors = {
     Short: {
@@ -15,4 +16,43 @@ export let RepoSummaryCardArgsVectors = {
         description:
             "LoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsum>",
     } as SummaryCardArgs,
+};
+let base: DetailsArgs = {
+    repo_id: "9ee507fc4357d7ee16a5d8901bedcd103f23c17d",
+    name: "Short Name",
+    description: "short description",
+    git_server: "github.com/example/example",
+    tags: ["svelte", "nostr", "code-collaboration", "git"],
+    relays: [
+        "relay.damus.io",
+        "relay.snort.social",
+        "relayable.org",
+    ],
+    maintainers: [
+        "carole",
+        "bob",
+        "steve",
+    ],
+};
+
+export let RepoDetailsArgsVectors = {
+    Short: { ...base, } as DetailsArgs,
+    Long: {
+        ...base,
+        name: "Long Name that goes on and on and on and on and on and on and on and on and on",
+        description:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nisl eget turpis congue molestie. Nulla vitae purus nec augue accumsan facilisis sed sed ligula. Vestibulum sed risus lacinia risus lacinia molestie. Ut lorem quam, consequat eget tempus in, rhoncus vel nunc. Duis efficitur a leo vel sodales. Nam id fermentum lacus. Etiam nec placerat velit. Praesent ac consectetur est. Aenean iaculis commodo enim.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nisl eget turpis congue molestie.",
+    } as DetailsArgs,
+    LongNoSpaces: {
+        ...base,
+        name: "LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongName",
+        description:
+            "LoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsum",
+    } as DetailsArgs,
+    NoNameOrDescription: { ...base, name: "", description: "" } as DetailsArgs,
+    NoDescription: { ...base, description: "" } as DetailsArgs,
+    NoTags: { ...base, tags: [] } as DetailsArgs,
+    NoMaintainers: { ...base, maintainers: [] } as DetailsArgs,
+    NoRelays: { ...base, relays: [] } as DetailsArgs,
+    NoMaintainersOrRelays: { ...base, maintainers: [], relays: [] } as DetailsArgs,
 };

src/lib/components/RepoDetails.stories.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" context="module">
+    import type { Meta } from "@storybook/svelte";
+    import RepoDetails from "./RepoDetails.svelte";
+    import { Story, Template } from "@storybook/addon-svelte-csf";
+    import { RepoDetailsArgsVectors as vectors } from "./Repo.vectors";
+
+    export const meta: Meta<RepoDetails> = {
+        title: "Repo/Details",
+        component: RepoDetails,
+        tags: ["autodocs"],
+    };
+</script>
+
+<Template let:args>
+    <RepoDetails {...args} />
+</Template>
+
+<Story name="Short Details" args={vectors.NoMaintainers} />
+
+<Story name="Long Details" args={vectors.Long} />
+
+<Story name="Long and No Spaces" args={vectors.LongNoSpaces} />
+
+<Story name="No Name or Description" args={vectors.NoNameOrDescription} />
+
+<Story name="No Description" args={vectors.NoDescription} />
+
+<Story name="No Tags" args={vectors.NoTags} />
+
+<Story name="No Maintainers" args={vectors.NoMaintainers} />
+
+<Story name="No Relays" args={vectors.NoRelays} />
+
+<Story name="No Maintainers or Relays" args={vectors.NoMaintainersOrRelays} />
+
+<Story name="loading" args={{ loading: true }} />

src/lib/components/RepoDetails.svelte

@@ -0,0 +1,98 @@
+<script lang="ts" context="module">
+    export interface Args {
+        repo_id: string;
+        name: string;
+        description: string;
+        git_server: string;
+        tags: string[];
+        maintainers: string[];
+        relays: string[];
+        loading?: boolean;
+    }
+    export const defaults: Args = {
+        repo_id: "",
+        name: "",
+        description: "",
+        git_server: "",
+        tags: [],
+        maintainers: [],
+        relays: [],
+        loading: false,
+    };
+</script>
+
+<script lang="ts">
+    import { each } from "svelte/internal";
+
+    export let {
+        repo_id,
+        name,
+        description,
+        git_server,
+        tags,
+        maintainers,
+        relays,
+        loading,
+    } = defaults;
+    let short_name: string;
+    $: {
+        if (name.length > 45) short_name = name.slice(0, 45) + "...";
+        else if (name.length == 0) short_name = "Untitled";
+        else short_name = name;
+    }
+    $: short_descrption =
+        description.length > 500
+            ? description.slice(0, 450) + "..."
+            : description;
+</script>
+
+<div class="max-w-md prose">
+    {#if loading}
+        <div class="h-5 my-3 skeleton w-20"></div>
+        <div class="h-4 my-2 skeleton"></div>
+        <div class="h-4 my-2 mb-3 w-2/3 skeleton"></div>
+    {:else if description.length == 0}
+        <div />
+    {:else}
+        <h4>description</h4>
+        <p class="text-sm my-2 break-words">{short_descrption}</p>
+    {/if}
+    <div>
+        {#if loading}
+            <div class="badge skeleton w-20"></div>
+            <div class="badge skeleton w-20"></div>
+        {:else}
+            {#each tags as tag}
+                <div class="badge badge-secondary mr-2">{tag}</div>
+            {/each}
+        {/if}
+    </div>
+    <div>
+        {#if loading}
+            <div class="h-5 my-3 skeleton w-20"></div>
+            <div class="badge skeleton my-2 w-60 block"></div>
+            <div class="badge skeleton my-2 w-40 block"></div>
+        {:else if maintainers.length == 0}
+            <div />
+        {:else}
+            <h4>maintainers</h4>
+            {#each maintainers as maintainer}
+                <div class="badge badge-accent block my-2">{maintainer}</div>
+            {/each}
+        {/if}
+    </div>
+    <div>
+        {#if loading}
+            <div class="h-5 my-3 skeleton w-20"></div>
+            <div class="badge skeleton my-2 w-60 block"></div>
+            <div class="badge skeleton my-2 w-40 block"></div>
+        {:else if relays.length == 0}
+            <div />
+        {:else}
+            <h4>relays</h4>
+            {#each relays as relay}
+                <div class="badge badge-secondary block my-2">{relay}</div>
+            {/each}
+        {/if}
+    </div>
+</div>

src/lib/wrappers/RepoDetails.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import type { Args } from "$lib/components/RepoDetails.svelte";
+    import { defaults } from "$lib/components/RepoDetails.svelte";
+    import RepoDetails from "$lib/components/RepoDetails.svelte";
+    import { ndk } from "$lib/stores/ndk";
+
+    export let repo_id = "";
+
+    let repo: Args = { ...defaults };
+    let loading: boolean = true;
+    let kind: number = 30317;
+    let sub = ndk.subscribe({
+        kinds: [kind],
+        limit: 1,
+    });
+    sub.on("event", (event) => {
+        try {
+            if (event.kind == kind && event.tagValue("d") == repo_id)
+                repo = {
+                    repo_id: event.replaceableDTag(),
+                    name: event.tagValue("name") || "",
+                    description: event.tagValue("description") || "",
+                    git_server: event.tagValue("git_server") || "",
+                    tags: event.getMatchingTags("t") || [],
+                    maintainers: event
+                        .getMatchingTags("p")
+                        .map((t: string[]) => t[1]),
+                    relays: event
+                        .getMatchingTags("relay")
+                        .map((t: string[]) => t[1]),
+                };
+        } catch {}
+    });
+    sub.on("eose", () => {
+        if (loading == true) loading = false;
+    });
+</script>
+
+<RepoDetails {...repo} {loading} />

src/routes/repo/[repo_id]/+page.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
+    import RepoDetails from "$lib/wrappers/RepoDetails.svelte";
     import OpenPRs from "$lib/wrappers/OpenPRs.svelte";
 
     export let data: { repo_id: string };
     let repo_id = data.repo_id;
 </script>
 
-<OpenPRs {repo_id} />
+<div class="flex">
+    <div class="w-2/3">
+        <OpenPRs {repo_id} />
+    </div>
+    <div class="w-1/3 prose">
+        <RepoDetails {repo_id} />
+    </div>
+</div>