From b62afb95181a7f75a4417fc74a4fb1dca18fdeb8 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Thu, 24 Oct 2024 13:56:00 +0900
Subject: [PATCH 1/8] lint

---
 .../passport/components/PassportClip.vue      | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/src/pages/passport/components/PassportClip.vue b/src/pages/passport/components/PassportClip.vue
index 7925741db..6140cad43 100644
--- a/src/pages/passport/components/PassportClip.vue
+++ b/src/pages/passport/components/PassportClip.vue
@@ -44,6 +44,15 @@ const fetchClub = async (api: string) => {
     .catch(always(null))
 }
 
+const shareClip = () => {
+  navigator.share({
+    // please replace the title and text with the actual values
+    title: props.item.description,
+    text: props.item.description,
+    url: window.location.href,
+  })
+}
+
 onMounted(async () => {
   const clubApiPri = await fetchClub(`/${API_PATH}`)
   const clubApi = clubApiPri ? clubApiPri : await fetchClub(clubApiAlt.value)
@@ -68,5 +77,55 @@ onMounted(async () => {
     />
     <p v-html="description"></p>
     <a v-if="clubName" :href="props.item.clubsUrl">{{ clubName }}</a>
+    <button
+      @click="shareClip"
+      class="flex items-center justify-end w-full h-12 bg-primary-500 text-white rounded-md"
+    >
+      <div
+        class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-800"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          width="24"
+          height="24"
+          class="text-white"
+        >
+          <circle
+            cx="19.64"
+            cy="4.36"
+            r="2.86"
+            class="fill-none stroke-current stroke-miterlimit-10"
+          ></circle>
+          <circle
+            cx="4.36"
+            cy="12"
+            r="2.86"
+            class="fill-none stroke-current stroke-miterlimit-10"
+          ></circle>
+          <circle
+            cx="19.64"
+            cy="19.64"
+            r="2.86"
+            class="fill-none stroke-current stroke-miterlimit-10"
+          ></circle>
+          <line
+            x1="17.08"
+            y1="5.64"
+            x2="6.92"
+            y2="10.72"
+            class="fill-none stroke-current stroke-miterlimit-10"
+          ></line>
+          <line
+            x1="17.08"
+            y1="18.36"
+            x2="6.92"
+            y2="13.28"
+            class="fill-none stroke-current stroke-miterlimit-10"
+          ></line>
+        </svg>
+      </div>
+    </button>
   </div>
 </template>

From 3ffdd5dc9cacb70039608a30fd0283a8011f0011 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Thu, 24 Oct 2024 17:06:17 +0900
Subject: [PATCH 2/8] improve: share url construction

---
 src/pages/passport/[eoa]/[...ids]/index.astro   | 2 +-
 src/pages/passport/components/PassportClip.vue  | 5 ++++-
 src/pages/passport/components/PassportClips.vue | 9 ++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/pages/passport/[eoa]/[...ids]/index.astro b/src/pages/passport/[eoa]/[...ids]/index.astro
index 49d6e006d..3af475821 100644
--- a/src/pages/passport/[eoa]/[...ids]/index.astro
+++ b/src/pages/passport/[eoa]/[...ids]/index.astro
@@ -254,7 +254,7 @@ const passportSkinClips = await whenDefined(
         passportSkinClips?.length && (
           <div class:list={passportClass('clips-container')}>
             <div class:list={passportClass('clips-content')}>
-              <PassportClips client:only="vue" clips={passportSkinClips} />
+              <PassportClips client:only="vue" clips={passportSkinClips} id={id} />
             </div>
           </div>
         )
diff --git a/src/pages/passport/components/PassportClip.vue b/src/pages/passport/components/PassportClip.vue
index 6140cad43..2450475e6 100644
--- a/src/pages/passport/components/PassportClip.vue
+++ b/src/pages/passport/components/PassportClip.vue
@@ -6,6 +6,7 @@ import { whenDefined } from '@devprotocol/util-ts'
 import Skeleton from '@components/Global/Skeleton.vue'
 import type { AssetDocument } from '@fixtures/api/assets/schema'
 import { decode, markdownToHtml } from '@devprotocol/clubs-core'
+import {itemToHash} from '@fixtures/router/passportItem'
 
 import ImageCard from './ImageCard.vue'
 import { loadImage, ABI_NFT } from '../utils'
@@ -13,6 +14,8 @@ import type { ImageData, PassportClip } from '../types'
 
 const props = defineProps<{
   item: PassportClip
+  id: string
+  index: number
 }>()
 
 const clubConfig = ref<string>()
@@ -49,7 +52,7 @@ const shareClip = () => {
     // please replace the title and text with the actual values
     title: props.item.description,
     text: props.item.description,
-    url: window.location.href,
+    url: window.location.href+`#${itemToHash(`clips`, props.index)}`,
   })
 }
 
diff --git a/src/pages/passport/components/PassportClips.vue b/src/pages/passport/components/PassportClips.vue
index 1733c49f8..3b8c74531 100644
--- a/src/pages/passport/components/PassportClips.vue
+++ b/src/pages/passport/components/PassportClips.vue
@@ -7,7 +7,10 @@ import ImageCard from './ImageCard.vue'
 import type { PassportClip } from '../types'
 import PassportClipCard from './PassportClip.vue'
 
-const props = defineProps<{ clips: PassportClip[] }>()
+const props = defineProps<{ 
+  clips: PassportClip[],
+  id: string,
+}>()
 
 const i18nBase = i18nFactory(Strings)
 
@@ -21,8 +24,8 @@ onMounted(async () => {
 <template>
   <section class="grid gap-8">
     <ul class="grid gap-16 grid-cols-[repeat(auto-fill,minmax(280px,1fr))]">
-      <li v-if="clips?.length" v-for="clip in clips" class="empty:hidden">
-        <PassportClipCard :item="clip" />
+      <li v-if="clips?.length" v-for="(clip, index) in clips" :key="index" class="empty:hidden">
+        <PassportClipCard :item="clip" :id="id" :index="index" />
       </li>
     </ul>
   </section>

From 37dfbee299ebe64d53107e3346cec792d1247c0c Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Thu, 24 Oct 2024 17:07:18 +0900
Subject: [PATCH 3/8] lint

---
 src/pages/passport/[eoa]/[...ids]/index.astro   |  6 +++++-
 src/pages/passport/components/PassportClip.vue  |  4 ++--
 src/pages/passport/components/PassportClips.vue | 13 +++++++++----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/pages/passport/[eoa]/[...ids]/index.astro b/src/pages/passport/[eoa]/[...ids]/index.astro
index 3af475821..f59fff254 100644
--- a/src/pages/passport/[eoa]/[...ids]/index.astro
+++ b/src/pages/passport/[eoa]/[...ids]/index.astro
@@ -254,7 +254,11 @@ const passportSkinClips = await whenDefined(
         passportSkinClips?.length && (
           <div class:list={passportClass('clips-container')}>
             <div class:list={passportClass('clips-content')}>
-              <PassportClips client:only="vue" clips={passportSkinClips} id={id} />
+              <PassportClips
+                client:only="vue"
+                clips={passportSkinClips}
+                id={id}
+              />
             </div>
           </div>
         )
diff --git a/src/pages/passport/components/PassportClip.vue b/src/pages/passport/components/PassportClip.vue
index 2450475e6..17f229a13 100644
--- a/src/pages/passport/components/PassportClip.vue
+++ b/src/pages/passport/components/PassportClip.vue
@@ -6,7 +6,7 @@ import { whenDefined } from '@devprotocol/util-ts'
 import Skeleton from '@components/Global/Skeleton.vue'
 import type { AssetDocument } from '@fixtures/api/assets/schema'
 import { decode, markdownToHtml } from '@devprotocol/clubs-core'
-import {itemToHash} from '@fixtures/router/passportItem'
+import { itemToHash } from '@fixtures/router/passportItem'
 
 import ImageCard from './ImageCard.vue'
 import { loadImage, ABI_NFT } from '../utils'
@@ -52,7 +52,7 @@ const shareClip = () => {
     // please replace the title and text with the actual values
     title: props.item.description,
     text: props.item.description,
-    url: window.location.href+`#${itemToHash(`clips`, props.index)}`,
+    url: window.location.href + `#${itemToHash(`clips`, props.index)}`,
   })
 }
 
diff --git a/src/pages/passport/components/PassportClips.vue b/src/pages/passport/components/PassportClips.vue
index 3b8c74531..80d76827d 100644
--- a/src/pages/passport/components/PassportClips.vue
+++ b/src/pages/passport/components/PassportClips.vue
@@ -7,9 +7,9 @@ import ImageCard from './ImageCard.vue'
 import type { PassportClip } from '../types'
 import PassportClipCard from './PassportClip.vue'
 
-const props = defineProps<{ 
-  clips: PassportClip[],
-  id: string,
+const props = defineProps<{
+  clips: PassportClip[]
+  id: string
 }>()
 
 const i18nBase = i18nFactory(Strings)
@@ -24,7 +24,12 @@ onMounted(async () => {
 <template>
   <section class="grid gap-8">
     <ul class="grid gap-16 grid-cols-[repeat(auto-fill,minmax(280px,1fr))]">
-      <li v-if="clips?.length" v-for="(clip, index) in clips" :key="index" class="empty:hidden">
+      <li
+        v-if="clips?.length"
+        v-for="(clip, index) in clips"
+        :key="index"
+        class="empty:hidden"
+      >
         <PassportClipCard :item="clip" :id="id" :index="index" />
       </li>
     </ul>

From e4004519518eae10372eca6af3a18b5d7a1c3d8a Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Fri, 25 Oct 2024 18:34:44 +0530
Subject: [PATCH 4/8] add: make rendering server side

---
 src/pages/passport/[eoa]/[...ids]/index.astro  | 2 +-
 src/pages/passport/components/PassportClip.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/passport/[eoa]/[...ids]/index.astro b/src/pages/passport/[eoa]/[...ids]/index.astro
index f59fff254..4ccf7e641 100644
--- a/src/pages/passport/[eoa]/[...ids]/index.astro
+++ b/src/pages/passport/[eoa]/[...ids]/index.astro
@@ -255,7 +255,7 @@ const passportSkinClips = await whenDefined(
           <div class:list={passportClass('clips-container')}>
             <div class:list={passportClass('clips-content')}>
               <PassportClips
-                client:only="vue"
+                client:load
                 clips={passportSkinClips}
                 id={id}
               />
diff --git a/src/pages/passport/components/PassportClip.vue b/src/pages/passport/components/PassportClip.vue
index 17f229a13..da9c6a199 100644
--- a/src/pages/passport/components/PassportClip.vue
+++ b/src/pages/passport/components/PassportClip.vue
@@ -65,6 +65,7 @@ onMounted(async () => {
 
 <template>
   <div
+    :id="itemToHash(`clips`, props.index)"
     v-if="!!item"
     :class="`shadow-md rounded-md p-4 grid gap-4 border border-surface-300 ${item.frameColorHex ? '' : 'bg-surface-200'}`"
     :style="{

From da4cb71c7b58f99ad4896d63fcdbba9b0cab3607 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Fri, 25 Oct 2024 18:35:04 +0530
Subject: [PATCH 5/8] lint

---
 src/pages/passport/[eoa]/[...ids]/index.astro | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/passport/[eoa]/[...ids]/index.astro b/src/pages/passport/[eoa]/[...ids]/index.astro
index 4ccf7e641..ea475b4af 100644
--- a/src/pages/passport/[eoa]/[...ids]/index.astro
+++ b/src/pages/passport/[eoa]/[...ids]/index.astro
@@ -254,11 +254,7 @@ const passportSkinClips = await whenDefined(
         passportSkinClips?.length && (
           <div class:list={passportClass('clips-container')}>
             <div class:list={passportClass('clips-content')}>
-              <PassportClips
-                client:load
-                clips={passportSkinClips}
-                id={id}
-              />
+              <PassportClips client:load clips={passportSkinClips} id={id} />
             </div>
           </div>
         )

From 81ece52e8ffe13399beeb9f4a1dc88db5d1a39af Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Fri, 25 Oct 2024 18:42:23 +0530
Subject: [PATCH 6/8] edit: share title

---
 src/pages/passport/components/PassportClip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/passport/components/PassportClip.vue b/src/pages/passport/components/PassportClip.vue
index da9c6a199..9f31852f8 100644
--- a/src/pages/passport/components/PassportClip.vue
+++ b/src/pages/passport/components/PassportClip.vue
@@ -50,7 +50,7 @@ const fetchClub = async (api: string) => {
 const shareClip = () => {
   navigator.share({
     // please replace the title and text with the actual values
-    title: props.item.description,
+    title: 'Check out this clip!',
     text: props.item.description,
     url: window.location.href + `#${itemToHash(`clips`, props.index)}`,
   })

From 0338bca3f16ff3f4f32c97ab71c94891b5cfa32d Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Fri, 25 Oct 2024 20:30:05 +0530
Subject: [PATCH 7/8] lint+ remove debugging consoles

---
 src/pages/passport/[eoa]/[...ids]/index.astro   |  6 +++++-
 src/pages/passport/components/PassportClip.vue  | 12 ++++++------
 src/pages/passport/components/PassportClips.vue |  9 +++++++--
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/pages/passport/[eoa]/[...ids]/index.astro b/src/pages/passport/[eoa]/[...ids]/index.astro
index 3af475821..f59fff254 100644
--- a/src/pages/passport/[eoa]/[...ids]/index.astro
+++ b/src/pages/passport/[eoa]/[...ids]/index.astro
@@ -254,7 +254,11 @@ const passportSkinClips = await whenDefined(
         passportSkinClips?.length && (
           <div class:list={passportClass('clips-container')}>
             <div class:list={passportClass('clips-content')}>
-              <PassportClips client:only="vue" clips={passportSkinClips} id={id} />
+              <PassportClips
+                client:only="vue"
+                clips={passportSkinClips}
+                id={id}
+              />
             </div>
           </div>
         )
diff --git a/src/pages/passport/components/PassportClip.vue b/src/pages/passport/components/PassportClip.vue
index 53e66fc80..2b67652d3 100644
--- a/src/pages/passport/components/PassportClip.vue
+++ b/src/pages/passport/components/PassportClip.vue
@@ -23,10 +23,13 @@ const props = defineProps<{
 const clubConfig = ref<string>()
 const elementId = ref<string>()
 
-console.log("clubs url",{props})
 
 const SITE_NAME =
-  new URL(props.item.clubsUrl ? props.item.clubsUrl : `https://---.clubs.place`)?.hostname?.split('.')?.at(0) ?? 'developers'
+  new URL(
+    props.item.clubsUrl,
+  )?.hostname
+    ?.split('.')
+    ?.at(0) ?? 'developers'
 const API_PATH = `api/config/${SITE_NAME}`
 
 const clubApiAlt = computed(() => {
@@ -66,10 +69,7 @@ onMounted(async () => {
   const clubApi = clubApiPri ? clubApiPri : await fetchClub(clubApiAlt.value)
   clubConfig.value = clubApi?.content ?? undefined
   const _elementId = itemToHash('clips', props.index)
-  elementId.value = _elementId instanceof Error
-    ? ''
-    : _elementId ?? ''
-
+  elementId.value = _elementId instanceof Error ? '' : (_elementId ?? '')
 })
 </script>
 
diff --git a/src/pages/passport/components/PassportClips.vue b/src/pages/passport/components/PassportClips.vue
index 9063820d4..97fef0d7f 100644
--- a/src/pages/passport/components/PassportClips.vue
+++ b/src/pages/passport/components/PassportClips.vue
@@ -36,11 +36,16 @@ onMounted(async () => {
     <ul
       class="grid gap-16 grid-cols-[repeat(auto-fill,minmax(280px,1fr))] content-stretch"
     >
-      <li v-if="clips?.length" v-for="(clip, index) in clips" :key="index" class="empty:hidden">
+      <li
+        v-if="clips?.length"
+        v-for="(clip, index) in clips"
+        :key="index"
+        class="empty:hidden"
+      >
         <PassportClipCard
           :item="clip"
           :truncate="true"
-          :id="id" 
+          :id="id"
           :index="index"
           class="h-full"
           @click="

From afbc150d6e7686451fd3cc97e62ae491c736932d Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Fri, 25 Oct 2024 20:32:08 +0530
Subject: [PATCH 8/8] lint

---
 src/pages/passport/components/PassportClip.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/pages/passport/components/PassportClip.vue b/src/pages/passport/components/PassportClip.vue
index 2b67652d3..907fb57e1 100644
--- a/src/pages/passport/components/PassportClip.vue
+++ b/src/pages/passport/components/PassportClip.vue
@@ -23,13 +23,8 @@ const props = defineProps<{
 const clubConfig = ref<string>()
 const elementId = ref<string>()
 
-
 const SITE_NAME =
-  new URL(
-    props.item.clubsUrl,
-  )?.hostname
-    ?.split('.')
-    ?.at(0) ?? 'developers'
+  new URL(props.item.clubsUrl)?.hostname?.split('.')?.at(0) ?? 'developers'
 const API_PATH = `api/config/${SITE_NAME}`
 
 const clubApiAlt = computed(() => {