add og:type to GalleryItem page, especially for video (and sound)

kodadot · Jun 9, 2022 · 3eac848 · 3eac848
1 parent 42ca7aa
commit 3eac848
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 43 deletions.
diff --git a/components/rmrk/Gallery/Gallery.vue b/components/rmrk/Gallery/Gallery.vue
@@ -263,7 +263,6 @@ export default class Gallery extends mixins(
         offset: (page - 1) * this.first,
       },
     })
-    console.log(result.data)
     await this.handleResult(result, loadDirection)
     this.isFetchingData = false
     return true

diff --git a/components/rmrk/Gallery/GalleryItem.vue b/components/rmrk/Gallery/GalleryItem.vue
@@ -144,13 +144,16 @@ import { sanitizeIpfsUrl, getSanitizer } from '../utils'
 import { processMedia } from '@/utils/gallery/media'
 import { emptyObject } from '@/utils/empty'
 import { notificationTypes, showNotification } from '@/utils/notification'
+import { generateNftImage } from '@/utils/seoImageGenerator'
+import { formatBalanceEmptyOnZero } from '@/utils/format/balance'
 
 import isShareMode from '@/utils/isShareMode'
 import nftById from '@/queries/nftById.graphql'
 import nftByIdMini from '@/queries/nftByIdMinimal.graphql'
 import nftListIdsByCollection from '@/queries/nftIdListByCollection.graphql'
 import nftByIdMinimal from '@/queries/rmrk/subsquid/nftByIdMinimal.graphql'
-import { fetchNFTMetadata } from '../utils'
+
+import { fetchNFTMetadata, resolveMedia } from '../utils'
 import { get, set } from 'idb-keyval'
 import { exist } from './Search/exist'
 import Orientation from '@/utils/directives/DeviceOrientation'
@@ -159,6 +162,24 @@ import { Debounce } from 'vue-debounce-decorator'
 import AvailableActions from './AvailableActions.vue'
 
 @Component<GalleryItem>({
+  name: 'GalleryItem',
+  head() {
+    const metaData = {
+      type: resolveMedia(this.mimeType),
+      description: this.meta.description,
+      url: this.$route.path,
+      image: this.image,
+    }
+    return {
+      meta: [
+        ...this.$seoMeta(metaData),
+        {
+          hid: 'og:author',
+          property: 'og:author',
+        },
+      ],
+    }
+  },
   components: {
     Auth: () => import('@/components/shared/Auth.vue'),
     AvailableActions,
@@ -201,6 +222,15 @@ export default class GalleryItem extends mixins(PrefixMixin) {
     return `${this.$route.params.id}${this.$route.hash || ''}`
   }
 
+  get image(): string {
+    return generateNftImage(
+      this.nft.name,
+      formatBalanceEmptyOnZero(this.nft.price),
+      this.meta.image,
+      this.mimeType
+    )
+  }
+
   async fetch() {
     try {
       const {

diff --git a/pages/rmrk/detail/_id.vue b/pages/rmrk/detail/_id.vue
@@ -6,48 +6,14 @@
 import { Component, Vue } from 'nuxt-property-decorator'
 
 import GalleryItem from '@/components/rmrk/Gallery/GalleryItem.vue'
-import { generateNftImage } from '@/utils/seoImageGenerator'
-import { formatBalanceEmptyOnZero } from '@/utils/format/balance'
+
+const components = {
+  GalleryItem,
+}
 
 @Component<GalleryItemPage>({
   name: 'GalleryItemPage',
-  components: {
-    GalleryItem,
-  },
-  head() {
-    const title = this.currentlyViewedItem.title
-    const metaData = {
-      title,
-      type: 'profile',
-      description: this.currentlyViewedItem.description,
-      url: this.$route.path,
-      image: this.image,
-    }
-    return {
-      title,
-      meta: [
-        ...this.$seoMeta(metaData),
-        {
-          hid: 'og:author',
-          property: 'og:author',
-          content: this.currentlyViewedItem.author,
-        },
-      ],
-    }
-  },
+  components,
 })
-export default class GalleryItemPage extends Vue {
-  get currentlyViewedItem() {
-    return this.$store.getters['history/getCurrentlyViewedItem']
-  }
-
-  get image(): string {
-    return generateNftImage(
-      this.currentlyViewedItem.name,
-      formatBalanceEmptyOnZero(this.currentlyViewedItem.price),
-      this.currentlyViewedItem.image,
-      this.currentlyViewedItem.mimeType
-    )
-  }
-}
+export default class GalleryItemPage extends Vue {}
 </script>
diff --git a/plugins/seoMetaGenerator.ts b/plugins/seoMetaGenerator.ts
@@ -1,4 +1,6 @@
+import { stringify } from 'postcss'
 import type { MetaInfo } from 'vue-meta'
+import { MediaType } from '~/components/rmrk/types'
 
 declare module 'vue/types/vue' {
   // this.$seoMeta inside Vue components
@@ -16,11 +18,32 @@ type MetaProperties = {
 }
 
 export default function ({ app }, inject): void {
+  const getMetaType = (mediaType: MediaType | string | undefined): string => {
+    let ogType: string | undefined
+    console.log('yyy', mediaType)
+    switch (mediaType) {
+      case MediaType.VIDEO:
+        ogType = 'video:other'
+        break
+      case MediaType.AUDIO:
+        ogType = 'music:song'
+        break
+      case MediaType.IMAGE:
+      case MediaType.JSON:
+      case MediaType.OBJECT:
+      default:
+        ogType = 'website'
+    }
+
+    return ogType
+  }
+
   const seoMeta = (meta: MetaProperties): MetaInfo['meta'] => {
     const baseUrl: string = app.$config.baseUrl
     const title = 'KodaDot - Kusama NFT Market Explorer'
     const description = 'Creating Carbonless NFTs on Kusama'
     const image = `${baseUrl}/kodadot_card_root.png`
+    console.log('Xxx', meta)
     return [
       {
         hid: 'description',
@@ -30,7 +53,7 @@ export default function ({ app }, inject): void {
       {
         hid: 'og:type',
         property: 'og:type',
-        content: meta?.type || 'website',
+        content: getMetaType(meta?.type),
       },
       {
         hid: 'og:url',