feat: gallery item page view counter

components/gallery/GalleryItem.vue

@@ -74,7 +74,7 @@
         <div
           class="is-flex is-flex-direction-column is-justify-content-space-between h-full">
           <!-- title section -->
-          <div class="pb-4">
+          <div class="pb-2">
             <div class="is-flex is-justify-content-space-between">
               <div class="name-container">
                 <h1 class="title" data-testid="item-title">
@@ -102,10 +102,18 @@
             </div>
 
             <div
-              class="is-flex is-flex-direction-row is-flex-wrap-wrap py-4 pt-8">
+              class="text-k-hover-grey flex items-center"
+              :class="{ 'my-4': isMobile, 'my-6': !isMobile }">
+              <NeoIcon pack="fasl" icon="eye" class="mr-1" />
+              <span v-if="pageViewCount === null">--</span>
+              <span v-else>{{ formatNumber(pageViewCount) }}</span>
+            </div>
+
+            <div class="is-flex is-flex-direction-row is-flex-wrap-wrap">
               <IdentityItem
                 v-if="nft?.issuer"
-                class="gallery-avatar mr-4"
+                class="gallery-avatar"
+                :class="{ 'mr-4': isMobile, 'mr-8': !isMobile }"
                 :label="$t('creator')"
                 :prefix="urlPrefix"
                 :account="nft?.issuer"
@@ -188,7 +196,7 @@ import { convertMarkdownToText } from '@/utils/markdown'
 import { exist } from '@/utils/exist'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { generateNftImage } from '@/utils/seoImageGenerator'
-import { formatBalanceEmptyOnZero } from '@/utils/format/balance'
+import { formatBalanceEmptyOnZero, formatNumber } from '@/utils/format/balance'
 import { MediaType } from '@/components/rmrk/types'
 import { resolveMedia } from '@/utils/gallery/media'
 import UnlockableTag from './UnlockableTag.vue'
@@ -203,6 +211,7 @@ const { placeholder } = useTheme()
 const mediaItemRef = ref<{ isLewdBlurredLayer: boolean } | null>(null)
 const galleryDescriptionRef = ref<{ isLewd: boolean } | null>(null)
 const preferencesStore = usePreferencesStore()
+const pageViewCount = usePageViews()
 
 const galleryItem = useGalleryItem()
 const { nft, nftMetadata, nftImage, nftAnimation, nftMimeType, nftResources } =

composables/usePageViews.ts

@@ -0,0 +1,22 @@
+import { $fetch } from 'ofetch'
+
+export default function usePageViews() {
+  const count = ref<number | null>(null)
+  const route = useRoute()
+
+  const cleanPath = computed(() => route.path.replace(/\/$/, ''))
+  const counterApi = computed(() => `${URLS.koda.counter}/${cleanPath.value}`)
+
+  onMounted(async () => {
+    const rawCount = await $fetch(counterApi.value, {
+      method: 'POST',
+      responseType: 'text',
+    })
+
+    if (rawCount) {
+      count.value = Number.parseInt(rawCount)
+    }
+  })
+
+  return count
+}

plugins/icons.ts

@@ -18,6 +18,10 @@ export default defineNuxtPlugin((nuxtApp) => {
       fasr: {
         iconPrefix: 'fa-fw fa-',
       },
+      // fa-sharp light
+      fasl: {
+        iconPrefix: 'fa-fw fa-',
+      },
       // fa brands
       fab: {
         iconPrefix: 'fa-fw fa-',

utils/constants.ts

@@ -63,6 +63,7 @@ export const URLS = {
     search: 'https://polysearch.w.kodadot.xyz',
     baseUrl: 'https://kodadot.xyz',
     newsletter: 'https://newsletter.w.kodadot.xyz',
+    counter: 'https://counter.kodadot.workers.dev',
   },
   providers: {
     coingecko: 'https://api.coingecko.com/api/v3',