feat(RepoPage): add RepoHeader

create a RepoHeader for use on multiple pages

__snapshots__/repo-header.test.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Repo/Header Long Name smoke-test 1`] = `
+<div class="bg-base-300 py-2 border-b border-accent-content">
+  <div class="mx-auto lg:container">
+    <div class="max-w-md prose px-3">
+      <h4 class="text-sm my-1 break-words">
+        Long Name that goes on and on and on and on a...
+      </h4>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Header No Name smoke-test 1`] = `
+<div class="bg-base-300 py-2 border-b border-accent-content">
+  <div class="mx-auto lg:container">
+    <div class="max-w-md prose px-3">
+      <h4 class="text-sm my-1 break-words">
+        Untitled
+      </h4>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Header Short Name smoke-test 1`] = `
+<div class="bg-base-300 py-2 border-b border-accent-content">
+  <div class="mx-auto lg:container">
+    <div class="max-w-md prose px-3">
+      <h4 class="text-sm my-1 break-words">
+        Short Name
+      </h4>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Header loading smoke-test 1`] = `
+<div class="bg-base-300 py-2 border-b border-accent-content">
+  <div class="mx-auto lg:container">
+    <div class="max-w-md prose px-3">
+      <div class="h-5 my-2 skeleton w-28">
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,24 @@
+<script lang="ts" context="module">
+    import type { Meta } from "@storybook/svelte";
+    import RepoHeader from "./RepoHeader.svelte";
+    import { Story, Template } from "@storybook/addon-svelte-csf";
+    import { RepoDetailsArgsVectors as vectors } from "./vectors";
+
+    export const meta: Meta<RepoHeader> = {
+        title: "Repo/Header",
+        component: RepoHeader,
+        tags: ["autodocs"],
+    };
+</script>
+
+<Template let:args>
+    <RepoHeader {...args} />
+</Template>
+
+<Story name="Short Name" args={vectors.NoMaintainers} />
+
+<Story name="Long Name" args={vectors.Long} />
+
+<Story name="No Name" args={vectors.NoNameOrDescription} />
+
+<Story name="loading" args={{ loading: true }} />

src/lib/components/repo/RepoHeader.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" context="module">
+    import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
+</script>
+
+<script lang="ts">
+    import type { User } from "$lib/components/users/type";
+    import UserHeader from "$lib/components/users/UserHeader.svelte";
+    import { defaults } from "./type";
+
+    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;
+    }
+</script>
+
+<div class="bg-base-300 py-2 border-b border-accent-content">
+    <div class="mx-auto lg:container">
+        <div class="max-w-md prose px-3">
+            {#if loading}
+                <div class="h-5 my-2 skeleton w-28"></div>
+            {:else}
+                <h4 class="text-sm my-1 break-words">{short_name}</h4>
+            {/if}
+        </div>
+    </div>
+</div>

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

@@ -2,6 +2,7 @@
     import RepoDetails from "$lib/wrappers/RepoDetails.svelte";
     import OpenPRs from "$lib/wrappers/OpenPRs.svelte";
     import { ensureSelectedRepo, selected_repo } from "$lib/stores/repo";
+    import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
 
     export let data: { repo_id: string };
     let repo_id = data.repo_id;
@@ -9,7 +10,7 @@
     ensureSelectedRepo(repo_id);
 </script>
 
-<h1 class="mx-2 my-4">{$selected_repo.name}</h1>
+<RepoHeader {...$selected_repo} />
 <div class="flex">
     <div class="w-2/3 mx-2">
         <OpenPRs {repo_id} />