Merge branch 'main' into 2223-passion-feed-for-stats

components/rmrk/Gallery/CollectionItem.vue

@@ -106,6 +106,7 @@
           :events="eventsOfNftCollection"
           :openOnDefault="isHistoryOpen"
           hideCollapse
+          displayItem
           @setPriceChartData="setPriceChartData" />
       </b-tab-item>
       <b-tab-item label="Holders" value="holders">

components/rmrk/Gallery/Gallery.vue

@@ -262,7 +262,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

components/rmrk/Gallery/GalleryItem.vue

@@ -144,12 +144,15 @@ 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 { get, set } from 'idb-keyval'
 import { exist } from './Search/exist'
@@ -159,6 +162,21 @@ import { Debounce } from 'vue-debounce-decorator'
 import AvailableActions from './AvailableActions.vue'
 
 @Component<GalleryItem>({
+  name: 'GalleryItem',
+  head() {
+    const metaData = {
+      mime: this.mimeType,
+      title: this.pageTitle,
+      description: this.meta.description,
+      url: this.$route.path,
+      image: this.image,
+      video: this.meta.animation_url,
+    }
+    return {
+      title: this.pageTitle,
+      meta: [...this.$seoMeta(metaData)],
+    }
+  },
   components: {
     Auth: () => import('@/components/shared/Auth.vue'),
     AvailableActions,
@@ -201,6 +219,19 @@ export default class GalleryItem extends mixins(PrefixMixin) {
     return `${this.$route.params.id}${this.$route.hash || ''}`
   }
 
+  get pageTitle(): string {
+    return `${this.nft.name || ''}`
+  }
+
+  get image(): string {
+    return generateNftImage(
+      this.nft.name,
+      formatBalanceEmptyOnZero(this.nft.price as string),
+      this.meta.image as string,
+      this.mimeType
+    )
+  }
+
   async fetch() {
     try {
       const {

components/rmrk/Gallery/History.vue

@@ -47,7 +47,7 @@
             {{ getEventDisplayName(props.row.Type) }}
           </b-table-column>
           <b-table-column
-            v-if="isCollectionPage"
+            v-if="displayItem"
             cell-class="short-identity__table"
             field="Item"
             label="Item"
@@ -57,7 +57,7 @@
                 name: `${urlPrefix}-gallery-id`,
                 params: { id: props.row.Item.id },
               }">
-              {{ props.row.Item.name }}
+              {{ props.row.Item.name || props.row.Item.id }}
             </nuxt-link>
           </b-table-column>
           <b-table-column
@@ -178,11 +178,10 @@ export default class History extends mixins(
   @Prop({ type: Boolean, default: true })
   private readonly openOnDefault!: boolean
   @Prop({ type: Boolean, default: false }) hideCollapse!: boolean
+  @Prop({ type: Boolean, default: false }) displayItem!: boolean
 
   private currentPage = parseInt(this.$route.query?.page as string) || 1
   private event: HistoryEventType = HistoryEventType.BUY
-  private isCollectionPage =
-    this.$route.name === `${this.urlPrefix}-collection-id`
 
   protected data: TableRow[] = []
   protected copyTableData: TableRow[] = []
@@ -342,7 +341,7 @@ export default class History extends mixins(
       event['Type'] = event['Type'] ?? newEvent['interaction']
 
       // Item
-      if (this.isCollectionPage) {
+      if (this.displayItem) {
         event['Item'] = newEvent['nft']
       }
 

components/rmrk/Profile/ProfileDetail.vue

@@ -142,6 +142,7 @@
             v-if="!isLoading && activeTab === 'history'"
             :events="eventsOfNftCollection"
             :openOnDefault="isHistoryOpen"
+            displayItem
             hideCollapse />
         </b-tab-item>
         <b-tab-item

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>

plugins/seoMetaGenerator.ts

@@ -1,4 +1,5 @@
-import type { MetaInfo } from 'vue-meta'
+import { MediaType } from '~/components/rmrk/types'
+import { resolveMedia } from '~/utils/gallery/media'
 
 declare module 'vue/types/vue' {
   // this.$seoMeta inside Vue components
@@ -7,21 +8,52 @@ declare module 'vue/types/vue' {
   }
 }
 
-type MetaProperties = {
+interface MetaProperties {
   type?: string
   url?: string
   title?: string
   description?: string
   image?: string
+  author?: string
+  video?: string
+  mime?: string
+}
+
+interface MetaTag {
+  hid?: string
+  name?: string
+  property?: string
+  content?: string
 }
 
 export default function ({ app }, inject): void {
-  const seoMeta = (meta: MetaProperties): MetaInfo['meta'] => {
+  const getMetaType = (mediaType: MediaType | string | undefined): string => {
+    switch (mediaType) {
+      case MediaType.VIDEO:
+        return 'video:other'
+      case MediaType.AUDIO:
+        return 'music:song'
+      case MediaType.IMAGE:
+      case MediaType.JSON:
+      case MediaType.OBJECT:
+      default:
+        return 'website'
+    }
+  }
+
+  const seoMeta = (meta: MetaProperties): MetaTag[] => {
     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`
-    return [
+    const type = resolveMedia(meta?.mime)
+
+    const seoTags: MetaTag[] = [
+      {
+        hid: 'title',
+        name: 'title',
+        content: meta?.title ? `${meta.title} | ${title}` : title,
+      },
       {
         hid: 'description',
         name: 'description',
@@ -30,7 +62,7 @@ export default function ({ app }, inject): void {
       {
         hid: 'og:type',
         property: 'og:type',
-        content: meta?.type || 'website',
+        content: getMetaType(type),
       },
       {
         hid: 'og:url',
@@ -40,7 +72,7 @@ export default function ({ app }, inject): void {
       {
         hid: 'og:title',
         property: 'og:title',
-        content: meta?.title || title,
+        content: meta?.title ? `${meta.title} | ${title}` : title,
       },
       {
         hid: 'og:description',
@@ -73,6 +105,66 @@ export default function ({ app }, inject): void {
         content: meta?.image || image,
       },
     ]
+
+    if (type === MediaType.IMAGE) {
+      const imageMetaTags: MetaTag[] = [
+        {
+          hid: 'og:image:type',
+          property: 'og:image:type',
+          content: meta?.mime,
+        },
+      ]
+      seoTags.push(...imageMetaTags)
+    }
+
+    if (type === MediaType.VIDEO) {
+      const videoMetaTags: MetaTag[] = [
+        {
+          hid: 'og:video',
+          property: 'og:video',
+          content: meta?.video,
+        },
+        {
+          hid: 'og:video:width',
+          property: 'og:video:width',
+          content: '1280',
+        },
+        {
+          hid: 'og:video:height',
+          property: 'og:video:height',
+          content: '720',
+        },
+        {
+          hid: 'og:video:type',
+          property: 'og:video:type',
+          content: meta?.mime,
+        },
+        {
+          hid: 'twitter:player:width',
+          property: 'twitter:player:width',
+          content: '1280',
+        },
+        {
+          hid: 'twitter:player:height',
+          property: 'twitter:player:height',
+          content: '720',
+        },
+        {
+          hid: 'twitter:card',
+          property: 'twitter:card',
+          content: 'player',
+        },
+        {
+          hid: 'twitter:player',
+          name: 'twitter:player',
+          content: meta?.video,
+        },
+      ]
+      seoTags.push(...videoMetaTags)
+    }
+
+    // only return non null, not undefined, not empty string
+    return seoTags.filter((tag: MetaTag) => tag && tag.content !== '')
   }
   inject('seoMeta', seoMeta)
 }