add share_image_url to public.sponsors

apps/web/app/components/admin/SponsorItem.vue

@@ -20,6 +20,7 @@ const newSponsor = ref({
   name: props.sponsor?.name ?? '',
   detail_page_id: props.sponsor?.detail_page_id ?? '',
   image_url: props.sponsor?.image_url ?? '',
+  share_image_url: props.sponsor?.share_image_url ?? '',
   description_ja: props.sponsor?.description_ja ?? '',
   description_en: props.sponsor?.description_en ?? '',
   link_url: props.sponsor?.link_url ?? '',
@@ -48,6 +49,18 @@ const checkFiles = async (files: File[]) => {
 
   newSponsor.value.image_url = getFullAvatarUrl(filePath)
 }
+const checkShareFiles = async (files: File[]) => {
+  if (files.length === 0) return
+
+  const file = files[0]
+  // const filename = file.name
+  const fileExt = file.name.split('.').pop()
+  const filePath = `/${Math.random()}.${fileExt}`
+
+  uploadAvatar(filePath, file)
+
+  newSponsor.value.share_image_url = getFullAvatarUrl(filePath)
+}
 const updateDescriptionJa = (e: any) => {
   newSponsor.value.description_ja = e.target.value
 }
@@ -99,9 +112,23 @@ const onSubmit = () => {
               height="60"
               decoding="async"
             />
-            <p>Drag & drop a file</p>
+            <p>Drag & drop an image file</p>
+            <p>または</p>
+            <p>Select an image file</p>
+          </div>
+        </VFDragDropArea>
+        <VFDragDropArea file-name="profiledata" file-accept="image/*" @check-files="checkShareFiles">
+          <div class="upload">
+            <img
+              v-if="newSponsor.share_image_url"
+              alt=""
+              :src="newSponsor.share_image_url"
+              height="60"
+              decoding="async"
+            />
+            <p>Drag & drop a share image file</p>
             <p>または</p>
-            <p>Select a file</p>
+            <p>Select a share image file</p>
           </div>
         </VFDragDropArea>
         <VFTextAreaField

apps/web/app/components/admin/SponsorList.vue

@@ -25,6 +25,7 @@ const handleDialog = (id?: string) => {
       <th>name</th>
       <th>detail_page_id</th>
       <th>image_url</th>
+      <th>share_image_url</th>
       <th>description</th>
       <th>link_url</th>
       <th>speaker_id</th>
@@ -47,6 +48,19 @@ const handleDialog = (id?: string) => {
           No image
         </p>
       </td>
+      <td>
+        <img
+          v-if="sponsor.share_image_url"
+          alt=""
+          :src="sponsor.share_image_url"
+          width="60"
+          height="60"
+          decoding="async"
+        />
+        <p v-if="!sponsor.share_image_url">
+          No share image
+        </p>
+      </td>
       <td>
         <p>{{ sponsor.description_ja }}</p>
         <p>{{ sponsor.description_en }}</p>

apps/web/app/content/ja/namecard_annotation_order_number.md

@@ -1 +1 @@
-※注文番号は、チケット購入時にPeatixから送信されるメール内に含まれる[領収データ](https://help-attendee.peatix.com/ja-JP/support/solutions/articles/44001821741)から確認できます。
+※注文番号は、チケット購入時に Peatix から送信されるメール内に含まれる[領収データ](https://help-attendee.peatix.com/ja-JP/support/solutions/articles/44001821741)から確認できます。

apps/web/app/pages/namecard/[id]/edit/complete.vue

@@ -44,13 +44,13 @@ const { authUserId, statusKey, attendee } = await useNamecard()
           can-hover
           class="sns-button"
         />
-        <!-- TODO facebook追加 -->
-        <!--         <VFIconButton
-          class="sns-button"
-          name="facebook"
+        <VFIconButton
+          name="Facebook"
+          color="black"
           :href="`/namecard/${authUserId}/share/`"
           can-hover
-        /> -->
+          class="sns-button"
+        />
       </div>
       <CreationStatus :status-key="statusKey" size="small" class="creation-status" />
       <!-- TODO 24に置き換え&smallサイズ指定 -->

apps/web/app/pages/namecard/[id]/share.vue

@@ -17,6 +17,15 @@ if (!attendee) {
 
 const currentLocale = useLocaleCurrent().locale
 
+function copyUrl() {
+  const element = document.createElement('input')
+  element.value = `https://vuefes.jp/2024/namecard/${id}/share`
+  document.body.appendChild(element)
+  element.select()
+  document.execCommand('copy')
+  document.body.removeChild(element)
+}
+
 const officialSiteUrl = computed(() => {
   return currentLocale.value === 'ja' ? linkUrl : `${linkUrl}/en`
 })
@@ -50,11 +59,36 @@ useHead({
       >{{ t('official_site') }}</VFLinkButton
     >
     <VFComment class="share-namecard" :title="t('share_namecard')" />
-    <!-- TODO snsアイコン&リンク設置 -->
     <ul class="sns-list">
-      <li>x</li>
-      <li>facebook</li>
-      <li>copy</li>
+      <li>
+        <VFIconButton
+          color="vue-blue"
+          name="x40"
+          :href="`https://x.com/share?url=${encodeURIComponent(
+            `https://vuefes.jp/2024/namecard/${id}/share`,
+          )}`"
+          target-blank
+          can-hover
+        />
+      </li>
+      <li>
+        <VFIconButton
+          color="vue-blue"
+          name="Facebook"
+          :href="`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+            `https://vuefes.jp/2024/namecard/${id}/share`,
+          )}`"
+          target-blank
+        />
+      </li>
+      <li>
+        <div class="copycode">
+          <VFCssResetButton @click="copyUrl">
+            <VFIcon color="vue-blue" name="external" :can-hover="false" />
+          </VFCssResetButton>
+          <span>コピーしました！</span>
+        </div>
+      </li>
     </ul>
   </div>
 </template>
@@ -72,7 +106,8 @@ useHead({
   max-width: 960px;
   margin: 0 auto calc(var(--unit) * 7.5);
 }
-.invite-comment {
+.invite-comment,
+.share-session {
   margin: 0 auto calc(var(--unit) * 2.5);
 }
 .link-button {
@@ -86,4 +121,36 @@ useHead({
   border-radius: var(--height-button);
   margin: 0 auto calc(var(--unit) * 7.5);
 }
+.sns-list {
+  display: flex;
+  justify-content: center;
+  gap: calc(var(--unit) * 2.5);
+  padding: 0;
+  margin: 0;
+}
+.sns-list li {
+  padding: 0;
+  margin: 0;
+}
+.copycode {
+  position: relative;
+  display: inline-block;
+}
+.copycode span {
+  opacity: 0; 
+  position: absolute;
+  top: 0px;
+  right: -5px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 2px 5px;
+  transform: translate(100%);
+}
+.copycode button:focus + span {
+  animation: fade-out 2s ease-in;
+}
+@keyframes fade-out {
+  0% { visibility: visible; opacity: 1; }
+  100% { visibility: hidden; opacity: 0; }
+}
 </style>

apps/web/app/pages/sessions/[id]/share.vue

@@ -1,2 +1,164 @@
-<script setup lang="ts"></script>
-<template></template>
+<script setup lang="ts">
+import { createError, useAsyncData, useHead, useLocaleCurrent, useRoute, useSupabase } from '#imports'
+import { conferenceTitle, linkUrl, ogSpeakerDescription } from '~/utils/constants'
+import { generalOg, twitterOg } from '~/utils/og.constants'
+import type { Speaker } from '@vuejs-jp/model'
+
+const route = useRoute()
+const id = route.params.id as string
+
+const { fetchData } = useSupabase()
+const { data: speakers } = await useAsyncData('speakers', async () => {
+  return await fetchData('speakers', { detailPageId: id })
+})
+const speakerData = speakers.value?.data as Speaker[]
+if (!speakerData) {
+  throw createError({ statusCode: 404, statusMessage: 'Speaker not found' })
+}
+
+if (!speakerData[0].detail_page_id) {
+  throw createError({ statusCode: 404, statusMessage: 'Speaker not found' })
+}
+
+const currentLocale = useLocaleCurrent().locale
+
+function copyUrl() {
+  const element = document.createElement('input')
+  element.value = `https://vuefes.jp/2024/namecard/${id}/share`
+  document.body.appendChild(element)
+  element.select()
+  document.execCommand('copy')
+  document.body.removeChild(element)
+}
+
+useHead({
+  titleTemplate: (titleChunk) => `${conferenceTitle}`,
+  meta: [
+    ...generalOg({
+      title: `${conferenceTitle}`,
+      description: ogSpeakerDescription,
+      url: `${linkUrl}sessions/${id}/share`,
+    }),
+    ...twitterOg({
+      title: `${conferenceTitle}`,
+      description: ogSpeakerDescription,
+      url: `${linkUrl}sessions/${id}/share`,
+    }),
+  ],
+})
+</script>
+<template>
+  <div class="session-share-root">
+    <VFOgCard23
+      class="session"
+      :user="{
+        display_name: speakerData[0].name_ja,
+        avatar_url: speakerData[0].image_url,
+        role: 'speaker',
+      }"
+    />
+    <VFComment class="invite-comment" :title="$t('invite_vue_fes')" />
+    <VFLinkButton
+      class="link-button"
+      :href="currentLocale === 'ja' ? linkUrl : `${linkUrl}/en`"
+      background-color="vue-green/200"
+      color="white"
+    >
+      {{ $t('official_site') }}
+    </VFLinkButton>
+    <VFComment class="share-session" :title="$t('share_namecard')" />
+    <ul class="sns-list">
+      <li>
+        <VFIconButton
+          color="vue-blue"
+          name="x40"
+          :href="`https://x.com/share?url=${encodeURIComponent(
+            `https://vuefes.jp/2024/namecard/${id}/share`,
+          )}`"
+          target-blank
+          can-hover
+        />
+      </li>
+      <li>
+        <VFIconButton
+          color="vue-blue"
+          name="Facebook"
+          :href="`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+            `https://vuefes.jp/2024/namecard/${id}/share`,
+          )}`"
+          target-blank
+        />
+      </li>
+      <li>
+        <div class="copycode">
+          <VFCssResetButton @click="copyUrl">
+            <VFIcon color="vue-blue" name="external" :can-hover="false" />
+          </VFCssResetButton>
+          <span>コピーしました！</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.session-share-root {
+  --header-height: calc(var(--unit) * 10);
+  --content-padding: calc(var(--unit) * 15);
+  padding-top: calc(var(--header-height) + var(--content-padding));
+  padding-bottom: var(--content-padding);
+  max-width: 960px;
+  margin: 0 auto;
+}
+.session {
+  max-width: 960px;
+  margin: 0 auto calc(var(--unit) * 7.5);
+}
+.invite-comment,
+.share-session {
+  margin: 0 auto calc(var(--unit) * 2.5);
+}
+.link-button {
+  --height-button: 66px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 400px;
+  height: var(--height-button);
+  border-radius: var(--height-button);
+  margin: 0 auto calc(var(--unit) * 7.5);
+}
+.sns-list {
+  display: flex;
+  justify-content: center;
+  gap: calc(var(--unit) * 2.5);
+  padding: 0;
+  margin: 0;
+}
+.sns-list li {
+  padding: 0;
+  margin: 0;
+}
+.copycode {
+  position: relative;
+  display: inline-block;
+}
+.copycode span {
+  opacity: 0; 
+  position: absolute;
+  top: 0px;
+  right: -5px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 2px 5px;
+  transform: translate(100%);
+}
+.copycode button:focus + span {
+  animation: fade-out 2s ease-in;
+}
+@keyframes fade-out {
+  0% { visibility: visible; opacity: 1; }
+  100% { visibility: hidden; opacity: 0; }
+}
+</style>