feat(repo): add clone btn

which links to downloads and shows nostr clone url

src/lib/components/InstallNgit.svelte

@@ -1,4 +1,8 @@
-<div class="prose">
+<script lang="ts">
+  export let size: 'sm' | 'md' = 'md'
+</script>
+
+<div class="prose" class:text-sm={size === 'sm'}>
   <p>
     download binaries and add them to a directory from which they can be run
     globally:
@@ -6,15 +10,18 @@
   <p>
     <a
       href="https://github.com/DanConwayDev/ngit-cli/releases/download/v1.3.1/ngit-x86_64-unknown-linux-gnu.tar.gz"
-      class="btn btn-neutral">Linux</a
+      class="btn btn-neutral"
+      class:btn-sm={size === 'sm'}>Linux</a
     >
     <a
       href="https://github.com/DanConwayDev/ngit-cli/releases/download/v1.3.1/ngit-x86_64-apple-darwin.tar.gz"
-      class="btn btn-neutral">Mac</a
+      class="btn btn-neutral"
+      class:btn-sm={size === 'sm'}>Mac</a
     >
     <a
       href="https://github.com/DanConwayDev/ngit-cli/releases/download/v1.3.1/ngit-x86_64-pc-windows-msvc.zip"
-      class="btn btn-neutral">Windows</a
+      class="btn btn-neutral"
+      class:btn-sm={size === 'sm'}>Windows</a
     >
     v1.3.1
   </p>

src/lib/components/repo/RepoDetails.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import UserHeader from '$lib/components/users/UserHeader.svelte'
+  import { nip19 } from 'nostr-tools'
   import AlertWarning from '../AlertWarning.svelte'
   import { icons_misc } from '../icons'
+  import InstallNgit from '../InstallNgit.svelte'
   import { event_defaults } from './type'
 
   export let {
@@ -27,14 +29,105 @@
       ? description.slice(0, 450) + '...'
       : description
   let naddr_copied = false
+  const create_nostr_url = (
+    maintainers: string[],
+    identifier: string,
+    relays: string[]
+  ) => {
+    if (identifier.length > 0 && maintainers.length > 0) {
+      let npub = nip19.npubEncode(maintainers[0])
+      if (relays.length > 0) {
+        let relay = relays[0]
+        if (/^[a-zA-Z0-9.]+$/.test(relay.replace('wss://', ''))) {
+          return `nostr://${npub}/${identifier}?relayhint=${relay.replace('wss://', '')}`
+        }
+        return `nostr://${npub}/${identifier}?relayhint=${encodeURIComponent(relay)}`
+      }
+      return `nostr://${npub}/${identifier}`
+    }
+    return ''
+  }
+  $: nostr_url = create_nostr_url(maintainers, identifier, relays)
+  let nostr_url_copied = false
   let git_url_copied: false | string = false
   let maintainer_copied: false | string = false
   $: event_not_found = !loading && created_at == 0
 </script>
 
 <div class="prose w-full max-w-md">
+  {#if !loading}
+    <div class="clearfix">
+      <div class="dropdown dropdown-end float-right">
+        <div tabIndex={0} class="btn btn-success btn-sm text-base-400">
+          clone
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="h-5 w-5 flex-none fill-success-content"
+            ><path
+              fill="currentColor"
+              d="M11.646 15.146L5.854 9.354a.5.5 0 0 1 .353-.854h11.586a.5.5 0 0 1 .353.854l-5.793 5.792a.5.5 0 0 1-.707 0"
+            /></svg
+          >
+        </div>
+        <ul
+          tabIndex={0}
+          class="w-md menu dropdown-content z-[1] ml-0 rounded-box bg-base-300 p-2 shadow"
+        >
+          <li class="prose">
+            <div>
+              <div>
+                <h4 class="mt-0">1. install ngit and git-remote-nostr</h4>
+                <InstallNgit size="sm" />
+              </div>
+            </div>
+          </li>
+          <li class="m-0 p-0">
+            <!-- eslint-disable-next-line svelte/valid-compile -->
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div
+              on:click={async () => {
+                try {
+                  await navigator.clipboard.writeText(nostr_url)
+                  nostr_url_copied = true
+                  setTimeout(() => {
+                    nostr_url_copied = false
+                  }, 2000)
+                } catch {}
+              }}
+              class="group cursor-pointer rounded-md"
+            >
+              <div>
+                <h4 class="mt-0 pt-0">
+                  2. copy gitclone url
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 16 16"
+                    class="ml-1 inline h-4 w-4 flex-none fill-base-content opacity-50 group-hover:opacity-100"
+                    class:fill-base-content={!nostr_url_copied}
+                    class:fill-success={nostr_url_copied}
+                  >
+                    {#each icons_misc.copy as d}
+                      <path {d} />
+                    {/each}
+                  </svg>
+
+                  {#if nostr_url_copied}<span
+                      class="text-sm text-success opacity-50"
+                    >
+                      (copied to clipboard)</span
+                    >{/if}
+                </h4>
+                <p class="my-2 break-words border p-2 text-xs">{nostr_url}</p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  {/if}
   {#if event_not_found}
-      <h4>identifier</h4>
+    <h4 class="mt-0 pt-1">identifier</h4>
     <p class="my-2 break-words text-sm">{identifier}</p>
   {:else}
     {#if name == identifier}
@@ -43,10 +136,10 @@
         <div class="skeleton my-2 h-4"></div>
         <div class="skeleton my-2 mb-3 h-4 w-2/3"></div>
       {:else if !name || name.length == 0}
-        <h4>name / identifier</h4>
+        <h4 class="mt-0 pt-1">name / identifier</h4>
         <div>none</div>
       {:else}
-        <h4>name / identifier</h4>
+        <h4 class="mt-0 pt-1">name / identifier</h4>
         <p class="my-2 break-words text-sm">{name}</p>
       {/if}
     {:else}
@@ -102,7 +195,9 @@
         <div />
       {:else}
         <h4>
-          clone {#if git_url_copied}<span class="text-sm text-success opacity-50">
+          git servers {#if git_url_copied}<span
+              class="text-sm text-success opacity-50"
+            >
               (copied to clipboard)</span
             >{/if}
         </h4>
@@ -173,9 +268,8 @@
       <div />
     {:else}
       <h4>
-        {#if event_not_found}author{:else}maintainers{/if} {#if maintainer_copied}<span
+        {#if event_not_found}author{:else}maintainers{/if}
-            class="text-sm text-success opacity-50"
+        {#if maintainer_copied}<span class="text-sm text-success opacity-50">
-          >
             (copied to clipboard)</span
           >{/if}
       </h4>
@@ -260,7 +354,7 @@
   {#if event_not_found}
     <div class="text-xs">
       <AlertWarning>
-        <div class="font-semibold pb-1">missing repository details</div>
+        <div class="pb-1 font-semibold">missing repository details</div>
         <div>cannot find referenced repository event</div>
       </AlertWarning>
     </div>