refactor: first batch of landing page improvements

components/Footer.vue

@@ -1,39 +1,43 @@
 <template>
   <footer class="footer">
-    <CookieBanner />
-    <KeyboardShortcutsModal />
+    <LazyCookieBanner />
+    <LazyModalsKeyboardShortcutsModal />
     <div class="container footer__wrapper">
       <div class="icons">
         <ul class="footer__list icons__list">
           <li class="icons__list-item">
             <a
               href="https://medium.com/kodadot"
               target="_blank"
-              rel="noopener noreferrer">
+              rel="noopener noreferrer"
+              aria-label="Medium">
               <b-icon pack="fab" icon="medium" size="is-medium" />
             </a>
           </li>
           <li class="icons__list-item">
             <a
               href="https://discord.gg/u6ymnbz4PR"
               target="_blank"
-              rel="noopener noreferrer">
+              rel="noopener noreferrer"
+              aria-label="Discord">
               <b-icon pack="fab" icon="discord" size="is-medium" />
             </a>
           </li>
           <li class="icons__list-item">
             <a
               href="https://www.youtube.com/channel/UCEULduld5NrqOL49k1KVjoA/"
               target="_blank"
-              rel="noopener noreferrer">
+              rel="noopener noreferrer"
+              aria-label="Youtube">
               <b-icon pack="fab" icon="youtube" size="is-medium" />
             </a>
           </li>
           <li class="icons__list-item">
             <a
               href="https://twitter.com/KodaDot"
               target="_blank"
-              rel="noopener noreferrer">
+              rel="noopener noreferrer"
+              aria-label="Twitter">
               <b-icon pack="fab" icon="twitter" size="is-medium" />
             </a>
           </li>
@@ -66,12 +70,7 @@ interface Menu {
   url: string
   external?: boolean
 }
-@Component({
-  components: {
-    KeyboardShortcutsModal: () =>
-      import('@/components/shared/modals/keyboardShortcutsModal.vue'),
-  },
-})
+@Component({})
 export default class Footer extends Vue {
   public menu: Menu[] = [
     {

components/Navbar.vue

@@ -10,7 +10,8 @@
         <img
           src="~/assets/Koda_Beta.svg"
           alt="First NFT market explorer on Kusama and Polkadot"
-          height="32" />
+          width="130"
+          height="35" />
       </b-navbar-item>
     </template>
     <template #start>
@@ -22,7 +23,7 @@
         searchColumnClass="is-flex-grow-1" />
     </template>
     <template #end v-if="showTopNavbar">
-      <HistoryBrowser
+      <LazyHistoryBrowser
         class="ml-2 navbar-link-background"
         id="NavHistoryBrowser" />
       <b-navbar-dropdown arrowless collapsible id="NavCreate">
@@ -71,8 +72,8 @@
           </b-navbar-item>
         </template>
       </b-navbar-dropdown>
-      <ChainSelect class="ml-2" id="NavChainSelect" />
-      <LocaleChanger class="ml-2" id="NavLocaleChanger" />
+      <LazyChainSelect class="ml-2" id="NavChainSelect" />
+      <LazySwitchLocale class="ml-2" id="NavLocaleChanger" />
       <NavbarProfileDropdown :isRmrk="isRmrk" id="NavProfile" />
     </template>
     <template #end v-else>
@@ -90,9 +91,6 @@
 
 <script lang="ts">
 import { Component, mixins } from 'nuxt-property-decorator'
-import LocaleChanger from '@/components/shared/SwitchLocale.vue'
-import ChainSelect from '@/components/shared/ChainSelect.vue'
-import HistoryBrowser from '@/components/shared/history/HistoryBrowser.vue'
 import NavbarProfileDropdown from '@/components/rmrk/Profile/NavbarProfileDropdown.vue'
 import PrefixMixin from '~/utils/mixins/prefixMixin'
 import Identity from '@/components/shared/format/Identity.vue'
@@ -104,10 +102,7 @@ import { get } from 'idb-keyval'
 
 @Component({
   components: {
-    LocaleChanger,
-    HistoryBrowser,
     NavbarProfileDropdown,
-    ChainSelect,
     Search,
     Identity,
     BasicImage,

components/landing/Landing.vue

@@ -4,10 +4,11 @@
       <div class="columns">
         <div class="column">
           <img
-            src="~/assets/KODADOT.png"
+            src="~/assets/KODADOT.webp"
             alt="First NFT market explorer on Kusama and Polkadot"
             class="mb-5 is-hidden-mobile"
-            height="60" />
+            width="950"
+            height="165" />
           <h3
             class="title is-1 is-size-3-mobile is-flex is-flex-direction-column uppercase homepage__heading">
             <span class="text__stroked my-5">
@@ -24,16 +25,19 @@
             rel="noopener noreferrer">
             <img
               src="https://badgen.net/discord/online-members/35hzy2dXXh"
-              alt="Discord" />
+              alt="Discord"
+              width="354"
+              height="40"
+              style="width: 177px" />
           </a>
         </div>
         <div class="column">
-          <CuratedList v-if="prefix === 'rmrk'" />
+          <LazyGalleryCuratedList v-if="prefix === 'rmrk'" />
         </div>
       </div>
       <div v-if="prefix === 'rmrk'">
-        <LatestSales class="my-5" />
-        <NewestList class="my-5" />
+        <LazyGalleryLatestSales class="my-5" />
+        <LazyGalleryNewestList class="my-5" />
       </div>
     </div>
   </section>
@@ -42,14 +46,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'nuxt-property-decorator'
 
-const components = {
-  LatestSales: () => import('@/components/rmrk/Gallery/LatestSales.vue'),
-  NewestList: () => import('@/components/rmrk/Gallery/NewestList.vue'),
-  CuratedList: () => import('@/components/rmrk/Gallery/CuratedList.vue'),
-}
-@Component<Landing>({
-  components,
-})
+@Component<Landing>({})
 export default class Landing extends Vue {
   @Prop({ type: String, required: true, default: 'rmrk' }) prefix!: string
   @Prop({ type: String, default: 'RMRK Protocol' }) buildOn!: string

components/rmrk/Gallery/CuratedList.vue

@@ -12,7 +12,11 @@
       indicator-position="is-bottom"
       indicator-style="is-lines">
       <b-carousel-item v-for="(collection, i) in collections" :key="i">
-        <b-image ratio="1by1" class="image" :src="collection.image"></b-image>
+        <b-image
+          ratio="1by1"
+          class="image"
+          :src="collection.image"
+          :alt="collection.name"></b-image>
         <div class="box">
           <div class="content has-text-left">
             <nuxt-link

components/shared/history/HistoryBrowser.vue → components/shared/history/Browser.vue

@@ -48,13 +48,9 @@
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
-import HistoryBrowserItem from '~/components/shared/history/HistoryBrowserItem.vue'
 import { HistoryItem } from '~/store/history'
 
 @Component({
-  components: {
-    HistoryBrowserItem,
-  },
   filters: {
     truncate: function truncateFct(value, limit) {
       if (value?.length > limit) {
@@ -64,7 +60,7 @@ import { HistoryItem } from '~/store/history'
     },
   },
 })
-export default class HistoryBrowser extends Vue {
+export default class Browser extends Vue {
   get hasHistory() {
     return this.history && this.history.length
   }

components/shared/history/HistoryBrowserItem.vue → components/shared/history/BrowserItem.vue

@@ -48,7 +48,7 @@ import { HistoryItem } from '~/store/history'
     },
   },
 })
-export default class HistoryBrowserItem extends Vue {
+export default class BrowserItem extends Vue {
   @Prop({ default: Object }) public item!: HistoryItem
 
   removeItemFromHistory(id: string) {

layouts/centered-half-layout.vue

@@ -17,6 +17,6 @@
         </div>
       </section>
     </main>
-    <Footer />
+    <LazyFooter />
   </div>
 </template>

layouts/default.vue

@@ -13,6 +13,6 @@
         </div>
       </section>
     </main>
-    <Footer />
+    <LazyFooter />
   </div>
 </template>

layouts/full-width-layout.vue

@@ -9,6 +9,6 @@
         errorSubtitle="Please check your network connections" />
       <Nuxt v-else />
     </main>
-    <Footer />
+    <LazyFooter />
   </div>
 </template>

nuxt.config.js

@@ -167,14 +167,15 @@ export default defineNuxtConfig({
         path: '~/components/transfer',
         extensions: ['vue'],
       },
+      {
+        path: '~/components/unique',
+        extensions: ['vue'],
+      },
     ],
   },
 
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
-  buildModules: [
-    // https://go.nuxtjs.dev/typescript
-    '@nuxtjs/pwa',
-  ],
+  buildModules: ['@nuxtjs/pwa'],
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [

package.json

@@ -22,10 +22,10 @@
     "dev": "PORT=9090 nuxt dev",
     "dev-docker": "npx nuxi dev",
     "dev-experimental": "nuxi dev --hostname localhost --port 9090",
-    "build": "nuxi build",
+    "build": "nuxi build --modern",
     "start": "nuxi preview",
-    "generate:pnpm": "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm generate",
-    "generate": "nuxi generate",
+    "generate:pnpm": "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm generate --modern",
+    "generate": "nuxi generate --modern",
     "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.vue .",
     "lint:quiet": "eslint --quiet --ignore-path .gitignore --ext .js,.ts,.vue .",
     "lint:fix": "eslint --fix --quiet --ignore-path .gitignore --ext .js,.ts,.vue .",