beta update

.env.example

@@ -11,5 +11,6 @@ VUE_APP_PERMAFROST_URL=""
 VUE_APP_AR_URL=""
 MATRIX=""
 SUBSQUID_ENDPOINT=""
+RAMP_API_KEY=""
 TRANSAK_API_KEY=""
-TRANSAK_ENV="" #STAGING|PRODUCTION
+TRANSAK_ENV="" #STAGING|PRODUCTION

.eslintrc.js

@@ -5,9 +5,9 @@ module.exports = {
     node: true,
   },
   extends: [
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:vue-scoped-css/recommended',
+    'plugin:vue-scoped-css/vue3-recommended',
     'prettier',
   ],
   parser: 'vue-eslint-parser',
@@ -16,8 +16,10 @@ module.exports = {
     ecmaVersion: 2022,
     sourceType: 'module',
   },
-  plugins: ['vue', 'prettier', '@typescript-eslint', 'unicorn'],
+  plugins: ['prettier', '@typescript-eslint', 'unicorn'],
   rules: {
+    'prettier/prettier': 'error',
+    'no-empty-function': 'warn',
     'no-trailing-spaces': 'error',
     'unicorn/no-for-loop': 'error',
     'brace-style': ['error', '1tbs', { allowSingleLine: false }],
@@ -48,6 +50,7 @@ module.exports = {
     ],
     'vue/multi-word-component-names': 'off',
     '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-explicit-any': 'warn',
     'vue-scoped-css/v-deep-pseudo-style': ['error', ':deep'],
     'vue-scoped-css/no-deprecated-deep-combinator': 'error',
     'vue-scoped-css/require-v-deep-argument': 'error',

.github/workflows/build.yml

@@ -5,7 +5,7 @@ on:
     push:
       branches: [main]
   pull_request:
-    branches: [main, beta, hyper-jpeg]
+    branches: [main, beta, production, nuxt]
 
 jobs:
   test:

.github/workflows/playwright.yml

@@ -1,9 +1,9 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, master ]
+    branches: [ main, beta, production, nuxt ]
   pull_request:
-    branches: [ main, master ]
+    branches: [ main, beta, production, nuxt ]
 jobs:
   test:
     timeout-minutes: 15
@@ -19,9 +19,9 @@ jobs:
 
     - name: Run Build
       run: pnpm generate
-
+    
     - name: Install Playwright Browsers
-      run: pnpm exec playwright install --with-deps
+      run: pnpm exec playwright install --with-deps chromium
 
     - name: Run Playwright tests
       run: pnpm exec playwright test

CONTRIBUTING.md

@@ -10,6 +10,9 @@ We might give retro-active reward, where the bounty label wasn't present, **if w
 
 **For better coordination, please join our [Development channel (#coordination) on [KodaDot Ecosystem Telegram](https://t.me/kodadot_eco)**
 
+## Deploy Kodadot nft gallery to Netlify
+ [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/kodadot/nft-gallery)
+
 ## Getting started
 
 Before you being:

README.md

@@ -5,6 +5,8 @@
 
 # Contributing
 
+[![Twitter Follow](https://img.shields.io/twitter/follow/kodadot?style=social)](https://twitter.com/intent/follow?screen_name=kodadot)
+
 [![Test & Build app](https://github.com/kodadot/nft-gallery/actions/workflows/build.yml/badge.svg)](https://github.com/kodadot/nft-gallery/actions/workflows/build.yml) [![Reviewdog](https://github.com/kodadot/nft-gallery/actions/workflows/reviewdog.yml/badge.svg)](https://github.com/kodadot/nft-gallery/actions/workflows/reviewdog.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/7d14fab327c632d5f0ce/maintainability)](https://codeclimate.com/github/kodadot/nft-gallery/maintainability)
 
 ![image](https://user-images.githubusercontent.com/5887929/217076362-464e1293-8a2d-43ee-829f-fba17408e4c3.png)

styles/components/_content-markdown.scss → assets/styles/components/_content-markdown.scss

@@ -1,5 +1,5 @@
 @import '~/node_modules/highlight.js/styles/github-dark.css';
-@import '@/styles/abstracts/variables';
+@import '@/assets/styles/abstracts/variables';
 
 .content-markdown {
   code {

styles/components/_search.scss → assets/styles/components/_search.scss

@@ -90,6 +90,7 @@
 
 .search-bar-container {
   position: relative;
+  width: 100%;
 
   .search-bar-collection-search {
     z-index: 2;

styles/global.scss → assets/styles/global.scss

@@ -19,7 +19,6 @@ main {
   // without this, footer image is above main contents
   // block hover, click events
   z-index: 100;
-  height: 100%;
 }
 
 main {
@@ -229,6 +228,12 @@ hr {
   }
 }
 
+.has-text-grey-fix {
+  @include ktheme() {
+    color: theme('k-grey-fix') !important;
+  }
+}
+
 .has-text-inverse {
   @include ktheme() {
     color: theme('text-color-inverse');
@@ -326,6 +331,18 @@ a.has-text-grey {
   }
 }
 
+.border-k-grey {
+  @include ktheme() {
+    border-color: theme('k-grey') !important;
+  }
+}
+
+.border-top-k-shade {
+  @include ktheme() {
+    border-top: 1px solid theme('k-shade');
+  }
+}
+
 .has-text-k-shade {
   @include ktheme() {
     color: theme('k-shade');
@@ -362,6 +379,12 @@ a.has-text-grey {
   }
 }
 
+.has-text-k-grey {
+  @include ktheme() {
+    color: theme('k-grey');
+  }
+}
+
 .has-text-color {
   @include ktheme() {
     color: theme('text-color') !important;
@@ -391,6 +414,13 @@ a.has-text-grey {
   }
 }
 
+.k-shade {
+  @include ktheme() {
+    background-color: theme('k-shade');
+  }
+}
+
+
 .k-yellow {
   @include ktheme() {
     background-color: theme('k-yellow');
@@ -430,6 +460,10 @@ a.has-text-grey {
   }
 }
 
+
+.is-cursor-pointer {
+  cursor: pointer !important;
+}
 //hover
 
 .is-hoverable-item {
@@ -490,3 +524,8 @@ a.has-text-grey {
 .no-border-left {
   border-left: none !important;
 }
+
+.is-rounded {
+  border-radius: 50%;
+}
+

styles/index.scss → assets/styles/index.scss

@@ -6,7 +6,7 @@
 @import "abstracts/theme";
 
 // FRAMEWORK (note: don't move this on top)
-@import "~bulma";
+@import "bulma/bulma.sass";
 
 // GLOBAL
 @import "./global.scss";

styles/layouts/_main-navigation.scss → assets/styles/layouts/_main-navigation.scss

@@ -194,7 +194,6 @@
 
   .navbar-start {
     flex: 1;
-    margin-top: 10px;
     @media screen and (max-width: 1024px) {
       display: none;
     }

styles/pages/create.scss → assets/styles/pages/create.scss

@@ -1,4 +1,4 @@
-@import '@/styles/abstracts/variables';
+@import '@/assets/styles/abstracts/variables';
 
 :deep(.o-field__label) {
   margin-bottom: 4px;

components/CookieBanner.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="!hasDisplayedCookieBanner" class="cookie-banner">
-    <transition name="slide">
+  <transition name="slide">
+    <div v-if="!hasDisplayedCookieBanner" class="cookie-banner">
       <div class="notices is-bottom is-flex w-100 is-align-items-center">
         <div
           role="alertdialog"
@@ -14,21 +14,21 @@
           </div>
           <div class="bar ml-4 mr-4" />
           <div class="action is-success">
-            <NeoButton variant="text" no-shadow @click.native="declineCookies">
+            <NeoButton variant="text" no-shadow @click="declineCookies">
               {{ $t('cookies.decline') }}
             </NeoButton>
             <NeoButton
               variant="text"
               no-shadow
               class="has-text-weight-bold ml-3"
-              @click.native="acceptCookies">
+              @click="acceptCookies">
               {{ $t('cookies.accept') }}
             </NeoButton>
           </div>
         </div>
       </div>
-    </transition>
-  </div>
+    </div>
+  </transition>
 </template>
 
 <script lang="ts" setup>
@@ -37,7 +37,7 @@ import { NeoButton } from '@kodadot1/brick'
 
 // const { isEnabled } = useState()
 const hasDisplayedCookieBanner = ref(
-  localStorage.getItem('cookies_enabled') !== null || false
+  localStorage.getItem('cookies_enabled') !== null || false,
 )
 const acceptCookies = () => {
   // if (isEnabled) {

components/CustomSubstackEmbed.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="custom-substack-embed" data-testid="footer-subscribe"></div>
+</template>
+
+<script lang="ts" setup>
+useHead({
+  script: [{ src: 'https://substackapi.com/widget.js', async: true }],
+})
+
+window.CustomSubstackWidget = {
+  substackUrl: 'kodadot.substack.com',
+  placeholder: '[email protected]',
+  theme: 'custom',
+  colors: {
+    primary: '#FF7AC3',
+    input: '#FFFFFF',
+    email: '#000000',
+    text: '#000000',
+  },
+}
+</script>

components/shared/Error.vue → components/Error.vue

@@ -27,7 +27,7 @@ const props = withDefaults(
     hasImg: true,
     errorTitle: 'Indexer Error',
     errorSubtitle: 'Indexer is not working properly.',
-  }
+  },
 )
 
 const imgSrc = computed(() => `https://http.cat/${props.errorCode}`)

components/shared/MessageNotify.vue → components/MessageNotify.vue

@@ -1,8 +1,11 @@
 <template>
   <NeoMessage
     class="message-box"
+    :class="{
+      'message-box--toast': !noToast,
+    }"
     :duration="realDuration"
-    auto-close
+    :auto-close="autoClose"
     @close="$emit('close')">
     <img src="/congrats-message-header.svg" class="congrats-message" />
     <div class="is-flex is-flex-direction-column">
@@ -33,29 +36,35 @@ const props = defineProps<{
   title?: string
   subtitle?: string
   duration?: number
+  noToast?: boolean
 }>()
 
 const realDuration = computed(() => {
   return props.duration || 10000
 })
 
+const autoClose = computed(() => !props.noToast)
+
 const realworldFullPath = computed(() => {
   return `${window.location.origin}${route.fullPath}`
 })
 </script>
 
 <style lang="scss">
-@import '@/styles/abstracts/variables';
+@import '@/assets/styles/abstracts/variables';
 
 .message-box {
-  z-index: 10;
   max-width: 500px;
-  position: absolute;
-  border-radius: 0;
-  top: 100px;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
+
+  &--toast {
+    z-index: 100;
+    position: fixed;
+    border-radius: 0;
+    top: 100px;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+  }
 
   @include ktheme() {
     box-shadow: theme('primary-shadow');