:feat(namecard) add share page

Author: genj11

apps/web/app/composables/useNamecard.ts

@@ -4,7 +4,7 @@ import type { Status } from '~/components/namecard/CreationStatus.vue'
 import type { Attendee } from '@vuejs-jp/model'
 
 
-export async function useNamecard() {
+export async function useNamecard(userId?:string) {
   const { fetchAttendeeDataByUserId } = useSupabase()
   const { getUser } = useAuth()
 
@@ -13,7 +13,7 @@ export async function useNamecard() {
   })
 
   const { data: attendeeByUserId } = await useAsyncData('attendeeByUserId', async () => {
-    return await fetchAttendeeDataByUserId('attendees', authUserId.value ?? '')
+    return await fetchAttendeeDataByUserId('attendees', authUserId.value ?? userId ?? '')
   })
 
   const userData = computed(() => {

apps/web/app/lang/en.json

@@ -6,6 +6,9 @@
   "not_found": "The page you are looking for cannot be found.",
   "prefix_year": "",
   "suffix_year": "2024",
+  "invite_vue_fes": "Would you like to join Vue Fes Japan 2024 as well?",
+  "share_namecard": "Let's share this name card on social media!",
+  "official_site": "Vue Fes Japan Official Website",
   "top_page": {
     "latest_information": "Get the latest information on our official social media",
     "date": "October 19th, 2024",

apps/web/app/lang/ja.json

@@ -6,6 +6,9 @@
   "not_found": "お探しのページが見つかりません。",
   "prefix_year": "2024",
   "suffix_year": "",
+  "invite_vue_fes": "あなたもVue Fes Japan 2024に参加しませんか？",
+  "share_namecard": "このネームカードをSNSでシェアしよう！",
+  "official_site": "Vue Fes Japan 2024公式サイト",
   "day_of_week": {
     "sunday": "日",
     "monday": "月",

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

@@ -1,2 +1,89 @@
-<script setup lang="ts"></script>
-<template></template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { createError, useHead, useRoute } from '#imports'
+import { useI18n } from '#i18n'
+import { useNamecard } from '~/composables/useNamecard'
+import { conferenceTitle, linkUrl, ogSpeakerDescription } from '~/utils/constants'
+import { generalOg, twitterOg } from '~/utils/og.constants'
+import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+
+const { t } = useI18n()
+const route = useRoute()
+const id = route.params.id as string
+const { attendee } = await useNamecard(id)
+if (!attendee) {
+  throw createError({ statusCode: 404, statusMessage: 'Attendee not found' })
+}
+
+const currentLocale = useLocaleCurrent().locale
+
+const officialSiteUrl = computed(() => {
+  return currentLocale.value === 'ja' ? linkUrl : `${linkUrl}/en`
+})
+
+// TODO OGタグの設定
+useHead({
+  titleTemplate: (titleChunk) => `${conferenceTitle}`,
+  meta: [
+    ...generalOg({
+      title: `${conferenceTitle}`,
+      description: ogSpeakerDescription,
+      url: `${linkUrl}namecard/${id}/share`,
+    }),
+    ...twitterOg({
+      title: `${conferenceTitle}`,
+      description: ogSpeakerDescription,
+      url: `${linkUrl}namecard/${id}/share`,
+    }),
+  ],
+})
+</script>
+<template>
+  <div class="namecard-share-root">
+    <VFOgCard23 class="namecard" :user="attendee" />
+    <VFComment class="invite-comment" :title="t('invite_vue_fes')" />
+    <VFLinkButton
+      class="link-button"
+      :href="officialSiteUrl"
+      background-color="vue-green/200"
+      color="white"
+      >{{ 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>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.namecard-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;
+}
+.namecard {
+  max-width: 960px;
+  margin: 0 auto calc(var(--unit) * 7.5);
+}
+.invite-comment {
+  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);
+}
+</style>