Merge pull request #338 from kodadot/ogi-fix--opengraph-on-base-route

fix: opengraph on base route

Author: preschian

ogi/components/OgImage/base-image.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { KODA_LOGO_URL } from '@/utils/constants'
+
+// inherited attrs can mess up the satori parser
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  image: string
+}>()
+
+const cover: ComputedRef<CSSProperties> = computed(() => {
+  return {
+    objectFit: 'cover',
+    objectPosition: 'center',
+  }
+})
+</script>
+
+<template>
+  <img
+    :src="image"
+    :alt="text"
+    :style="cover"
+    class="h-full w-full"
+  />
+</template>

ogi/pages/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <NuxtWelcome />
-  </div>
+  <div></div>
 </template>
 
 <script lang="ts" setup>
@@ -10,10 +8,15 @@ const route = useRoute()
 const { image, text } = route.query
 
 defineOgImage({
-  component: 'base',
+  component: 'base-image',
   props: {
-    text: text,
-    image: image,
+    image: KODA_BANNER_URL,
   },
 })
+
+useSeoMeta({
+  title: seoTitle('Koda'),
+  description: KODA_DESCRIPTION,
+  twitterCard: 'summary_large_image',
+})
 </script>

ogi/utils/constants.ts

@@ -1,2 +1,5 @@
-
 export const KODA_LOGO_URL = 'https://raw.githubusercontent.com/kodadot/nft-gallery/main/public/koda_logo_fill.png';
+
+export const KODA_BANNER_URL = 'https://raw.githubusercontent.com/kodadot/nft-gallery/main/public/k_card.png'
+
+export const KODA_DESCRIPTION = 'One stop place for all your generative art needs'

services/image/src/tests/type-endpoint.test.ts

@@ -69,7 +69,7 @@ test('type-endpoint - 302 - image', async () => {
   expect(data).toMatchInlineSnapshot(`
     Blob {
       Symbol(kHandle): Blob {},
-      Symbol(kLength): 86738,
+      Symbol(kLength): 86717,
       Symbol(kType): "image/png",
     }
   `)
@@ -88,7 +88,7 @@ test('type-endpoint - 200 - image - original', async () => {
   expect(data).toMatchInlineSnapshot(`
     Blob {
       Symbol(kHandle): Blob {},
-      Symbol(kLength): 86783,
+      Symbol(kLength): 86670,
       Symbol(kType): "image/png",
     }
   `)