feat: subpage-og-image function

Author: jiyuujin

apps/web/app/pages/code-of-conduct.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { useHead } from '#imports'
+import { useHead, useRuntimeConfig } from '#imports'
 import { useColor, useTypography } from '@vuejs-jp/composable'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { conferenceTitle, linkUrl, ogCoCDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 
+const config = useRuntimeConfig()
+
 useHead({
   // eslint-disable-next-line no-unused-vars
   titleTemplate: (titleChunk) => `行動規範 | ${conferenceTitle}`,
@@ -13,11 +15,13 @@ useHead({
       title: `行動規範 | ${conferenceTitle}`,
       description: ogCoCDescription,
       url: `${linkUrl}code-of-conduct`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=行動規範`,
     }),
     ...twitterOg({
       title: `行動規範 | ${conferenceTitle}`,
       description: ogCoCDescription,
       url: `${linkUrl}code-of-conduct`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=行動規範`,
     }),
   ],
 })

apps/web/app/pages/jobboard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useFetch, useHead } from '#imports'
+import { useFetch, useHead, useRuntimeConfig } from '#imports'
 import type { JobInfo } from '@vuejs-jp/model'
 import { conferenceTitle, linkUrl, ogJobboardDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
@@ -12,18 +12,22 @@ if (error.value) {
 }
 const { allJobs } = data.value as Jobs
 
+const config = useRuntimeConfig()
+
 useHead({
   titleTemplate: (titleChunk) => `ジョブボード | ${conferenceTitle}`,
   meta: [
     ...generalOg({
       title: `ジョブボード | ${conferenceTitle}`,
       description: ogJobboardDescription,
       url: `${linkUrl}jobboard`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=ジョブボード`,
     }),
     ...twitterOg({
       title: `ジョブボード | ${conferenceTitle}`,
       description: ogJobboardDescription,
       url: `${linkUrl}jobboard`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=ジョブボード`,
     }),
   ],
 })

apps/web/app/pages/namecard/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { createError, useRuntimeConfig, navigateTo } from '#imports'
+import { createError, navigateTo, useFetch, useHead, useRuntimeConfig } from '#imports'
 import { useI18n } from '#i18n'
 import { ref } from 'vue'
 import type { AuthProvider, DialogStatus } from '@vuejs-jp/model'
@@ -9,7 +9,8 @@ import { useAuthSession } from '~/composables/useAuthSession'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import MarkDownText from '~/components/MarkDownText.vue'
 import CreationProcess from '~/components/namecard/CreationProcess.vue'
-import { useFetch } from '#imports'
+import { conferenceTitle, linkUrl, ogNamecardEntryDescription } from '~/utils/constants'
+import { generalOg, twitterOg } from '~/utils/og.constants'
 import type { AttendeeInfo } from '@vuejs-jp/model'
 
 type Attendees = Record<'activatedAttendees', AttendeeInfo>
@@ -32,6 +33,25 @@ const { t } = useI18n()
 const { locale } = useLocaleCurrent()
 const showDialog = ref(false)
 
+useHead({
+  // eslint-disable-next-line no-unused-vars
+  titleTemplate: (titleChunk) => `ネームカード | ${conferenceTitle}`,
+  meta: [
+    ...generalOg({
+      title: `ネームカード | ${conferenceTitle}`,
+      description: ogNamecardEntryDescription,
+      url: `${linkUrl}namecard`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=ネームカード`,
+    }),
+    ...twitterOg({
+      title: `ネームカード | ${conferenceTitle}`,
+      description: ogNamecardEntryDescription,
+      url: `${linkUrl}namecard`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=ネームカード`,
+    }),
+  ],
+})
+
 function handleClickButton(type: DialogStatus) {
   if (type === 'open') {
     showDialog.value = true

apps/web/app/pages/privacy.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useHead, useI18n } from '#imports'
-import FooterPageSection from '~/components/FooterPageSection.vue'
+import { useHead, useI18n, useRuntimeConfig } from '#imports'
 import MarkDownText from '~/components/MarkDownText.vue'
 import { useColor, useTypography } from '@vuejs-jp/composable'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { conferenceTitle, linkUrl, ogPrivacyDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 
+const config = useRuntimeConfig()
 const { t } = useI18n()
 const { path: localePath } = useLocaleCurrent()
 const { fontWeight, fontSize } = useTypography()
@@ -20,11 +20,13 @@ useHead({
       title: `プライバシーポリシー | ${conferenceTitle}`,
       description: ogPrivacyDescription,
       url: `${linkUrl}privacy`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=プライバシーポリシー`,
     }),
     ...twitterOg({
       title: `プライバシーポリシー | ${conferenceTitle}`,
       description: ogPrivacyDescription,
       url: `${linkUrl}privacy`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=プライバシーポリシー`,
     }),
   ],
 })

apps/web/app/pages/sharemap.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useFetch, useHead } from '#imports'
+import { useFetch, useHead, useRuntimeConfig } from '#imports'
 import type { PanelerInfo, SpeakerCategory, SpeakerInfo, SponsorCategory, SponsorInfo, StaffCategory, StaffInfo } from '@vuejs-jp/model'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { conferenceTitle, linkUrl, ogSharemapDescription } from '~/utils/constants'
@@ -47,6 +47,7 @@ if (error3.value) {
   console.error(error3.value)
 }
 
+const config = useRuntimeConfig()
 const { path: localePath } = useLocaleCurrent()
 
 useHead({
@@ -57,11 +58,13 @@ useHead({
       title: `シェアURL | ${conferenceTitle}`,
       description: ogSharemapDescription,
       url: `${linkUrl}sharemap`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=シェアURL`,
     }),
     ...twitterOg({
       title: `シェアURL | ${conferenceTitle}`,
       description: ogSharemapDescription,
       url: `${linkUrl}sharemap`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=シェアURL`,
     }),
   ],
 })

apps/web/app/pages/tokusho.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { useHead } from '#imports'
+import { useHead, useRuntimeConfig } from '#imports'
 import { useColor, useTypography } from '@vuejs-jp/composable'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { conferenceTitle, linkUrl, ogTokushoDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 
+const config = useRuntimeConfig()
+
 useHead({
   // eslint-disable-next-line no-unused-vars
   titleTemplate: (titleChunk) => `特定商取引法に基づく表記 | ${conferenceTitle}`,
@@ -13,11 +15,13 @@ useHead({
       title: `特定商取引法に基づく表記 | ${conferenceTitle}`,
       description: ogTokushoDescription,
       url: `${linkUrl}tokusho`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=特定商取引法に基づく表記`,
     }),
     ...twitterOg({
       title: `特定商取引法に基づく表記 | ${conferenceTitle}`,
       description: ogTokushoDescription,
       url: `${linkUrl}tokusho`,
+      image: `${config.public.supabaseUrl}/functions/v1/subpage-og-image?title=特定商取引法に基づく表記`,
     }),
   ],
 })

apps/web/app/utils/constants.ts

@@ -20,6 +20,8 @@ export const ogSponsorDescription = 'Vue Fes Japan 2024 のスポンサー情報
 
 export const ogStaffDescription = 'Vue Fes Japan 2024 のスタッフ情報です。'
 
+export const ogNamecardEntryDescription = 'Vue Fes Japan 2024 のネームカード作成はこちら。'
+
 export const ogNamecardDescription = 'さんのネームカードです。'
 
 export const ogJobboardDescription = 'Vue Fes Japan 2024 のジョブボードです。'

supabase/functions/subpage-og-image/fonts/NotoSansCJKjp-Bold.otf

@@ -0,0 +1,57 @@
+import React from 'https://esm.sh/[email protected]'
+import { ImageResponse } from 'https://deno.land/x/[email protected]/mod.ts'
+
+const FONT_URL = 'https://jjdlwtezpdclgxxagxpj.supabase.co/storage/v1/object/public/common_asset/fonts/NotoSansCJKjp-Bold.otf'
+const font = fetch(new URL(FONT_URL, import.meta.url)).then((res) => res.arrayBuffer())
+
+export default async function handler(req: Request) {
+  const params = new URLSearchParams(req.url.split('?')[1])
+
+  const fontData = await font
+
+  const title = params.get('title') ?? ''
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: 'url(https://i.imgur.com/kpZdYv8.png)',
+          width: '100%',
+          paddingTop: '107px',
+          position: 'relative',
+          textAlign: 'center',
+          fontFamily: '\'din-2014\', \'游ゴシック体\', YuGothic, \'游ゴシック\', \'Yu Gothic\', sans-serif',
+        }}
+      >
+        <div
+          style={{
+            color: '#35495e',
+            fontSize: '80px',
+            fontWeight: '900',
+            position: 'absolute',
+            top: '40%',
+            left: '4px',
+            maxHeight: '1.5em',
+            justifyContent: 'center',
+            margin: '10px 80px 0',
+            overflow: 'hidden',
+            lineHeight: '150%',
+          }}
+        >
+          {title}
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        {
+          name: 'noto-sans-cjk-jp',
+          data: fontData,
+          style: 'normal',
+        },
+      ],
+    },
+  )
+}

supabase/functions/subpage-og-image/handler.tsx

@@ -0,0 +1,5 @@
+import handler from './handler.tsx'
+
+console.log('Hello from Functions!')
+
+Deno.serve(handler)