Merge pull request #6862 from kodadot/beta

ACTIVITY.md

@@ -40,14 +40,17 @@ flowchart TD
 
 ## Pace of development
 
-## [![Repography logo](https://images.repography.com/logo.svg)](https://repography.com) / Recent activity [![Time period](https://images.repography.com/23713223/kodadot/nft-gallery/recent-activity/pGfAgBUKqY3G-v6I743PiFRW_UY1tmd-HKHy6d1ear4/IHNavWbCVC3MxqvOc_yKjOWxIPiZr3TlKUnZDbWuTG0_badge.svg)](https://repography.com)
-[![Issue status graph](https://images.repography.com/23713223/kodadot/nft-gallery/recent-activity/pGfAgBUKqY3G-v6I743PiFRW_UY1tmd-HKHy6d1ear4/IHNavWbCVC3MxqvOc_yKjOWxIPiZr3TlKUnZDbWuTG0_issues.svg)](https://github.com/kodadot/nft-gallery/issues)
-[![Pull request status graph](https://images.repography.com/23713223/kodadot/nft-gallery/recent-activity/pGfAgBUKqY3G-v6I743PiFRW_UY1tmd-HKHy6d1ear4/IHNavWbCVC3MxqvOc_yKjOWxIPiZr3TlKUnZDbWuTG0_prs.svg)](https://github.com/kodadot/nft-gallery/pulls)
-[![Timeline graph](https://images.repography.com/23713223/kodadot/nft-gallery/recent-activity/pGfAgBUKqY3G-v6I743PiFRW_UY1tmd-HKHy6d1ear4/IHNavWbCVC3MxqvOc_yKjOWxIPiZr3TlKUnZDbWuTG0_timeline.svg)](https://github.com/kodadot/nft-gallery/commits)
-[![Top contributors](https://images.repography.com/23713223/kodadot/nft-gallery/recent-activity/pGfAgBUKqY3G-v6I743PiFRW_UY1tmd-HKHy6d1ear4/IHNavWbCVC3MxqvOc_yKjOWxIPiZr3TlKUnZDbWuTG0_users.svg)](https://github.com/kodadot/nft-gallery/graphs/contributors)
+
+## [![Repography logo](https://images.repography.com/logo.svg)](https://repography.com) / Recent activity [![Time period](https://images.repography.com/23713223/kodadot/nft-gallery/recent-activity/1nMiB_aZjymZHZUDQ6R3hWGHqWUWahnU6VdRYYv2InU/ygTelP2NVzMzr-XPmCeXq2GzAIHSFlcUsZDXKY3Qrl4_badge.svg)](https://repography.com)
+[![Timeline graph](https://images.repography.com/23713223/kodadot/nft-gallery/recent-activity/1nMiB_aZjymZHZUDQ6R3hWGHqWUWahnU6VdRYYv2InU/ygTelP2NVzMzr-XPmCeXq2GzAIHSFlcUsZDXKY3Qrl4_timeline.svg)](https://github.com/kodadot/nft-gallery/commits)
+[![Issue status graph](https://images.repography.com/23713223/kodadot/nft-gallery/recent-activity/1nMiB_aZjymZHZUDQ6R3hWGHqWUWahnU6VdRYYv2InU/ygTelP2NVzMzr-XPmCeXq2GzAIHSFlcUsZDXKY3Qrl4_issues.svg)](https://github.com/kodadot/nft-gallery/issues)
+[![Pull request status graph](https://images.repography.com/23713223/kodadot/nft-gallery/recent-activity/1nMiB_aZjymZHZUDQ6R3hWGHqWUWahnU6VdRYYv2InU/ygTelP2NVzMzr-XPmCeXq2GzAIHSFlcUsZDXKY3Qrl4_prs.svg)](https://github.com/kodadot/nft-gallery/pulls)
+[![Top contributors](https://images.repography.com/23713223/kodadot/nft-gallery/recent-activity/1nMiB_aZjymZHZUDQ6R3hWGHqWUWahnU6VdRYYv2InU/ygTelP2NVzMzr-XPmCeXq2GzAIHSFlcUsZDXKY3Qrl4_users.svg)](https://github.com/kodadot/nft-gallery/graphs/contributors)
+
 
 ## [![Repography logo](https://images.repography.com/logo.svg)](https://repography.com) / Top contributors
-[![Top contributors](https://images.repography.com/23713223/kodadot/nft-gallery/top-contributors/pGfAgBUKqY3G-v6I743PiFRW_UY1tmd-HKHy6d1ear4/IHNavWbCVC3MxqvOc_yKjOWxIPiZr3TlKUnZDbWuTG0_table.svg)](https://github.com/kodadot/nft-gallery/graphs/contributors)
+[![Top contributors](https://images.repography.com/23713223/kodadot/nft-gallery/top-contributors/1nMiB_aZjymZHZUDQ6R3hWGHqWUWahnU6VdRYYv2InU/ygTelP2NVzMzr-XPmCeXq2GzAIHSFlcUsZDXKY3Qrl4_table.svg)](https://github.com/kodadot/nft-gallery/graphs/contributors)
+
 
 ### RepoTracker
 

components/Navbar.vue

@@ -205,7 +205,7 @@ import { useEventListener } from '@vueuse/core'
 
 import { useIdentityStore } from '@/stores/identity'
 import { getChainNameByPrefix } from '@/utils/chain'
-import { createVisible } from '@/utils/config/permision.config'
+import { createVisible } from '@/utils/config/permission.config'
 import ShoppingCartButton from './navbar/ShoppingCartButton.vue'
 
 const { $nextTick, $neoModal } = useNuxtApp()

components/TheFooter.vue

@@ -2,10 +2,10 @@
   <footer class="footer-container section">
     <div
       class="footer-container-inner is-flex is-align-items-start is-justify-content-space-between">
-      <div class="footer-container-subs is-flex is-flex-direction-column">
-        <h4 class="subtitle is-5">
+      <section class="footer-container-subs is-flex is-flex-direction-column">
+        <h2 class="subtitle is-5">
           {{ $t('footer.subscribe') }}
-        </h4>
+        </h2>
         <div class="is-flex is-align-items-center footer-container-subs-items">
           <div id="custom-substack-embed"></div>
 
@@ -24,9 +24,9 @@
           </script>
           <script src="https://substackapi.com/widget.js" async></script>
         </div>
-      </div>
-      <div class="footer-container-info is-flex is-flex-direction-column">
-        <h4 class="subtitle is-5">Incentives</h4>
+      </section>
+      <section class="footer-container-info is-flex is-flex-direction-column">
+        <h2 class="subtitle is-5">Incentives</h2>
         <div>
           <ul class="footer-container-list">
             <li
@@ -51,9 +51,9 @@
             </li>
           </ul>
         </div>
-      </div>
-      <div class="footer-container-info is-flex is-flex-direction-column">
-        <h4 class="subtitle is-5">Marketplace</h4>
+      </section>
+      <section class="footer-container-info is-flex is-flex-direction-column">
+        <h2 class="subtitle is-5">Marketplace</h2>
         <div>
           <ul class="footer-container-list">
             <li
@@ -78,9 +78,9 @@
             </li>
           </ul>
         </div>
-      </div>
-      <div class="footer-container-info is-flex is-flex-direction-column">
-        <h4 class="subtitle is-5">KodaDot</h4>
+      </section>
+      <section class="footer-container-info is-flex is-flex-direction-column">
+        <h2 class="subtitle is-5">KodaDot</h2>
         <div>
           <ul class="footer-container-list">
             <li
@@ -105,21 +105,24 @@
             </li>
           </ul>
         </div>
-      </div>
+      </section>
 
-      <div class="footer-container-socials is-flex is-flex-direction-column">
-        <h4 class="subtitle is-5">
+      <section
+        class="footer-container-socials is-flex is-flex-direction-column">
+        <h2 class="subtitle is-5">
           {{ $t('footer.join') }}
-        </h4>
+        </h2>
         <ul class="footer-container-socials-list is-flex">
           <li
             v-for="item in socials"
             :key="item.url"
-            class="footer-container-socials-list-item is-flex is-align-items-center is-justify-content-center mr-2"
-            @click="goToSocials(item.url)">
+            class="footer-container-socials-list-item is-flex is-align-items-center is-justify-content-center mr-2">
             <a
+              v-safe-href="item.url"
               class="is-flex icon"
               rel="nofollow noopener noreferrer"
+              target="_blank"
+              role="link"
               :aria-label="item.name">
               <!-- substack doesnt have a font awesome icon -->
               <svg
@@ -150,7 +153,7 @@
             </a>
           </li>
         </ul>
-      </div>
+      </section>
     </div>
     <img src="/blurred-landing-footer.png" class="left-blurred-image" alt="" />
   </footer>
@@ -272,7 +275,4 @@ const socials = [
     icon: 'reddit-alien',
   },
 ]
-const goToSocials = (url): void => {
-  window.open(url, '_blank')
-}
 </script>

components/blog/BlogPost.vue

@@ -21,6 +21,8 @@
 <script setup>
 import { format } from 'date-fns'
 import { convertMarkdownToText } from '@/utils/markdown'
+import { nextTick } from 'vue'
+import hljs from 'highlight.js'
 
 const { $seoMeta } = useNuxtApp()
 const route = useRoute()
@@ -34,6 +36,10 @@ onMounted(async () => {
 
   attributes.value = post.attributes
   singlePostComponent.value = post.vue.component
+
+  // must wait the page finished render then highlight the code
+  await nextTick()
+  hljs.highlightAll()
 })
 
 const title = computed(() => attributes.value.title)
@@ -55,8 +61,21 @@ useNuxt2Meta({
 </script>
 
 <style lang="scss">
+@use 'sass:meta';
 @import '@/styles/abstracts/variables';
 
+// dynamic load highlight syntax theme based on page theme
+html.light-mode {
+  @include meta.load-css('highlight.js/styles/atom-one-light');
+}
+html.dark-mode {
+  @include meta.load-css('highlight.js/styles/atom-one-dark');
+  .article p > code {
+    // color from them atom-one-dark theme
+    color: #abb2bf;
+    background: #282c34;
+  }
+}
 .article {
   margin: 0 auto;
   max-width: 40rem;
@@ -135,6 +154,13 @@ useNuxt2Meta({
     a {
       color: theme('k-blue');
     }
+
+    pre {
+      padding-left: 0;
+      padding-right: 0;
+      font-size: 1rem;
+      background-color: theme('background-color');
+    }
   }
 
   @include touch {

components/bsx/Create/CreateToken.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Loader v-model="isLoading" :status="status" :can-cancel="false" />
+    <Loader v-model="isLoading" :status="status" can-cancel />
     <BaseTokenForm
       ref="baseTokenForm"
       :show-explainer-text="showExplainerText"

components/bsx/input/TokenBalanceInput.vue

@@ -1,6 +1,6 @@
 <template>
   <BasicBalanceInput
-    ref="magicBalanceInput"
+    ref="balanceInputComponent"
     v-model="vValue"
     :decimals="decimals"
     :unit="unit"

components/carousel/module/CarouselAgnostic.vue

@@ -7,7 +7,7 @@
           :key="`${item.id}-${index}`"
           class="keen-slider__slide carousel-item">
           <div class="h-full is-flex is-flex-direction-column">
-            <CarouselMedia :item="item" />
+            <CarouselMedia :item="item" :index="index" :length="nfts.length" />
             <CarouselInfo :item="item" />
           </div>
         </div>

components/carousel/module/CarouselMedia.vue

@@ -4,6 +4,7 @@
     :class="{ 'carousel-media-collection': isCollection }">
     <nuxt-link
       :to="urlOf({ id: item.id, url, chain: item.chain })"
+      :aria-label="`slide ${index + 1} of ${length}`"
       rel="nofollow">
       <MediaItem
         class="carousel-media-wrapper"
@@ -24,6 +25,8 @@ import { useCarouselUrl } from '../utils/useCarousel'
 
 const props = defineProps<{
   item: CarouselNFT & NFTWithMetadata
+  index: number
+  length: number
 }>()
 
 const { urlOf } = useCarouselUrl()

components/collection/CollectionList.vue → components/collection/CollectionGrid.vue

@@ -1,16 +1,5 @@
 <template>
   <div class="collections">
-    <div
-      class="is-flex is-flex-direction-row is-justify-content-space-between py-5">
-      <BreadcrumbsFilter />
-
-      <div v-if="total">{{ total }} {{ $t('items') }}</div>
-      <div v-else-if="isLoading" class="skeleton-container-fixed-width">
-        <NeoSkeleton no-margin />
-      </div>
-    </div>
-    <hr class="mt-0" />
-
     <LoadPreviousPage
       v-if="startPage > 1 && !isLoading && total > 0"
       @click="reachTopHandler" />
@@ -46,7 +35,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NeoSkeleton } from '@kodadot1/brick'
 import { Collection } from '@/components/rmrk/service/scheme'
 import { SearchQuery } from '@/components/search/types'
 import 'lazysizes'
@@ -56,10 +44,15 @@ import CollectionCard from '@/components/collection/CollectionCard.vue'
 import { GRID_DEFAULT_WIDTH } from '@/components/collection/utils/constants'
 import { usePreferencesStore } from '@/stores/preferences'
 
+const props = defineProps<{
+  id?: string
+}>()
+
 const route = useRoute()
 const { $apollo } = useNuxtApp()
 const { urlPrefix, client } = usePrefix()
 const preferencesStore = usePreferencesStore()
+const emit = defineEmits(['total', 'isLoading'])
 
 const collections = ref<Collection[]>([])
 const isLoading = ref(true)
@@ -103,17 +96,32 @@ const fetchPageData = async (page: number, loadDirection = 'down') => {
     return false
   }
   isFetchingData.value = true
+
+  const variables = props.id
+    ? {
+        search: [
+          {
+            issuer_eq: props.id,
+          },
+        ],
+        first: first.value,
+        offset: (page - 1) * first.value,
+        orderBy: searchQuery.value.sortBy,
+      }
+    : {
+        denyList: getDenyList(urlPrefix.value),
+        orderBy: searchQuery.value.sortBy,
+        search: buildSearchParam(),
+        listed: searchQuery.value.listed
+          ? [{ price: { greaterThan: '0' } }]
+          : [],
+        first: first.value,
+        offset: (page - 1) * first.value,
+      }
   const result = await $apollo.query({
     query: collectionListWithSearch,
     client: client.value,
-    variables: {
-      denyList: getDenyList(urlPrefix.value),
-      orderBy: searchQuery.value.sortBy,
-      search: buildSearchParam(),
-      listed: searchQuery.value.listed ? [{ price: { greaterThan: '0' } }] : [],
-      first: first.value,
-      offset: (page - 1) * first.value,
-    },
+    variables,
   })
   await handleResult(result, loadDirection)
   isFetchingData.value = false
@@ -144,6 +152,9 @@ const {
   fetchPageData,
 })
 
+watch(total, (val) => emit('total', val))
+watch(isLoading, (val) => emit('isLoading', val))
+
 const skeletonCount = first.value
 
 const handleResult = async ({ data }: any, loadDirection = 'down') => {

components/collection/CollectionGridWithBreadcrumbs.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="collections">
+    <div
+      class="is-flex is-flex-direction-row is-justify-content-space-between py-5">
+      <BreadcrumbsFilter />
+
+      <div v-if="total">{{ total }} {{ $t('items') }}</div>
+      <div v-else-if="isLoading">
+        <NeoSkeleton no-margin :width="80" />
+      </div>
+    </div>
+    <hr class="mt-0" />
+
+    <CollectionGrid
+      :id="id"
+      @total="(v) => (total = v)"
+      @isLoading="(l) => (isLoading = l)" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NeoSkeleton } from '@kodadot1/brick'
+
+import CollectionGrid from './CollectionGrid.vue'
+
+defineProps<{
+  id?: string
+}>()
+
+const isLoading = ref(true)
+const total = ref(0)
+</script>

components/collection/activity/ownerInsightsTabs/FlipperTab.vue

@@ -91,7 +91,7 @@
 </template>
 
 <script setup lang="ts">
-import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
+import ProfileLink from '@/components/profile/ProfileLink.vue'
 import { NeoIcon } from '@kodadot1/brick'
 import { format } from '@/components/collection/activity/utils'
 

components/collection/activity/ownerInsightsTabs/HolderTab.vue

@@ -74,7 +74,7 @@
 </template>
 
 <script setup lang="ts">
-import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
+import ProfileLink from '@/components/profile/ProfileLink.vue'
 import { Owners } from '@/composables/collectionActivity/types'
 import { NeoIcon } from '@kodadot1/brick'