Merge pull request #279 from COSCUP/session-share-button-v2

Author: mirumodapon

app/components/feature/CpSessionDetailShareButton.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+
+const { title } = defineProps<{
+  title: string
+}>()
+
+const { t } = useI18n()
+const { copy, copied } = useClipboard()
+
+function currentUrl() {
+  const url = new URL(window.location.href)
+  url.hash = ''
+  url.search = ''
+  return url.toString()
+}
+
+async function share() {
+  const url = currentUrl()
+
+  if (typeof navigator.share === 'function') {
+    try {
+      await navigator.share({
+        text: title,
+        title,
+        url,
+      })
+      return
+    } catch (error) {
+      // Closing the native share sheet is not a failed share and should not copy.
+      if (error instanceof Error && error.name === 'AbortError') {
+        return
+      }
+    }
+  }
+
+  await copy(url)
+}
+</script>
+
+<template>
+  <button
+    :aria-label="copied ? t('copied') : t('share')"
+    class="text-sm font-500 px-3 border-2 border-gray-300 rounded bg-gray-100 flex gap-1 h-8 cursor-pointer transition-colors items-center hover:bg-gray-200"
+    type="button"
+    @click="share"
+  >
+    <Icon
+      class="text-gray-500 h-4 w-4"
+      :name="copied ? 'tabler:check' : 'tabler:share-2'"
+    />
+    <span class="hidden sm:inline">{{ copied ? t('copied') : t('share') }}</span>
+  </button>
+</template>
+
+<i18n lang="yaml">
+  en:
+    share: 'Share'
+    copied: 'Link copied'
+  zh:
+    share: '分享'
+    copied: '已複製連結'
+</i18n>

app/components/feature/CpSessionInfoCard.vue

@@ -41,7 +41,7 @@ const speakerNames = computed(() =>
     <header class="px-4 sm:px-6">
       <h1
         class="text-xl leading-tight font-bold mb-4 break-words sm:text-2xl"
-        :class="hasTitleMarginRight ? 'mr-24 sm:mr-34' : ''"
+        :class="hasTitleMarginRight ? 'mr-36 sm:mr-60' : ''"
       >
         {{ title }}
       </h1>

app/pages/session/[id].vue

@@ -3,6 +3,7 @@ import type { Ad } from '#shared/types/ad'
 import type { SessionDetail } from '#shared/types/session'
 import { useMediaQuery } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
+import CpSessionDetailShareButton from '~/components/feature/CpSessionDetailShareButton.vue'
 import CpSessionInfoCard from '~/components/feature/CpSessionInfoCard.vue'
 import { useFavorites } from '~/composables/useFavorites'
 import { DEFAULT_TRACK_COLOR } from '~/utils/tracks'
@@ -237,6 +238,10 @@ onUnmounted(() => {
           </div>
 
           <div class="mr-4 flex gap-2 h-0 top-5 justify-end relative z-content overflow-visible sm:mr-6">
+            <CpSessionDetailShareButton
+              v-if="sessionInfo"
+              :title="sessionInfo.title"
+            />
             <button
               :aria-label="isFavorite(sessionId) ? t('removeFavorite') : t('addFavorite')"
               class="text-sm font-500 px-3 border-2 rounded flex gap-1 h-8 cursor-pointer transition-colors items-center"