feat: opengraph for base network

ogi/components/OgImage/gallery.vue

@@ -9,9 +9,9 @@ defineOptions({
 const props = defineProps<{
   title: string
   image: string
-  usd: string
-  price: string
-  symbol: string
+  usd?: string
+  price?: string
+  symbol?: string
   network: string
 }>()
 
@@ -21,25 +21,20 @@ const cover: CSSProperties = {
 }
 
 const parseUsd = computed(() =>
-  parseFloat(props.usd) ? `$${parseFloat(props.usd)}` : '--',
+  props.usd && parseFloat(props.usd) ? `$${parseFloat(props.usd)}` : '--',
 )
 
 const parsePrice = computed(() =>
-  parseFloat(props.price) ? `${parseFloat(props.price)} ${props.symbol}` : '--',
+  props.price && parseFloat(props.price) ? `${parseFloat(props.price)} ${props.symbol}` : '--',
 )
 </script>
 
 <template>
   <img :src="image" :alt="title" :style="cover" class="h-full w-full" />
 
   <div
-    class="flex flex-col justify-end h-full w-full bg-slate-900/85 text-white p-20 text-2xl font-bold absolute inset-0"
-  >
-    <img
-      :src="image"
-      :alt="title"
-      class="w-30 rounded-md border border-white"
-    />
+    class="flex flex-col justify-end h-full w-full bg-slate-900/85 text-white p-20 text-2xl font-bold absolute inset-0">
+    <img :src="image" :alt="title" class="w-30 rounded-md border border-white" />
     <h1 class="mb-6 font-bold">{{ title }}</h1>
     <div class="flex flex-row">
       <div>
@@ -59,9 +54,6 @@ const parsePrice = computed(() =>
     </div>
   </div>
 
-  <img
-    src="https://raw.githubusercontent.com/kodadot/kodadot-presskit/main/pre-v4/png/KodalightV4.png"
-    alt="logo"
-    class="absolute top-20 right-20 w-40"
-  />
+  <img src="https://raw.githubusercontent.com/kodadot/kodadot-presskit/main/pre-v4/png/KodalightV4.png" alt="logo"
+    class="absolute top-20 right-20 w-40" />
 </template>

ogi/package.json

@@ -25,6 +25,7 @@
     "@polkadot/util": "^12.6.2",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
+    "thirdweb": "^5.42.0",
     "unified": "^11.0.4",
     "vfile-matter": "^5.0.0"
   }

ogi/pages/base/gallery/[id].vue

@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <p>address: {{ address }}</p>
+        <p>token: {{ token }}</p>
+        {{ item }}
+        <div>
+            <p>image:</p>
+            <img :src="image" :alt="item.metadata.name" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { createThirdwebClient, getContract } from 'thirdweb'
+import { base } from 'thirdweb/chains';
+import { getNFT } from 'thirdweb/extensions/erc721'
+
+const router = useRouter()
+const id = router.currentRoute.value.params.id.toString().split('-')
+const address = id[0]
+const token = id[1] as unknown as bigint
+
+const client = createThirdwebClient({
+    clientId: 'd0455344acaa6fb760281466980f3ec6'
+})
+const contract = getContract({
+    client,
+    chain: base,
+    address: address,
+})
+const item = await getNFT({
+    contract,
+    tokenId: token
+})
+
+const imageUri = item.metadata.image || 'https://koda.art/k_card.png'
+const image = useState(() => '')
+// ensure to callOnce to avoid missmatch content between ssr/csr
+await callOnce(async () => image.value = await parseImage(imageUri, false))
+
+defineOgImage({
+    component: 'gallery',
+    props: {
+        title: item.metadata.name,
+        image,
+        network: 'base'
+    }
+})
+
+useSeoMeta({
+    title: seoTitle(item.metadata.name),
+    description: item.metadata.description,
+    ogTitle: seoTitle(item.metadata.name),
+    ogDescription: item.metadata.description,
+    ogType: 'website',
+    twitterCard: 'summary_large_image',
+    twitterTitle: seoTitle(item.metadata.name),
+    twitterImageAlt: item.metadata.name,
+})
+</script>

ogi/utils/seo.ts

@@ -1,3 +1,3 @@
-export const seoTitle = (title: string) => {
+export const seoTitle = (title='') => {
   return `${title} | Generative Art Marketplace`
 }