kodadot · shashkovdanil · Dec 2, 2023 · Dec 2, 2023 · Dec 2, 2023 · Dec 2, 2023
@@ -48,6 +48,7 @@ $themes: (
     'blue-light-hover-color': #e8edfb,
     'card-hover-opacity': 0.85,
     'separator-line-color': #cccccc,
+    'landing-shape-header': invert(0),
   ),
   'dark-mode': (
     'white': #ffffff,
@@ -98,6 +99,7 @@ $themes: (
     'blue-light-cards': #121d39,
     'card-hover-opacity': 0.8,
     'separator-line-color': #6b6b6b,
+    'landing-shape-header': invert(1),
   ),
 );
 

@@ -44,6 +44,10 @@
     z-index: 1;
     overflow: hidden;
     pointer-events: none;
+
+    @include ktheme() {
+      filter: theme('landing-shape-header');
+    }
   }
 
   .landing-search-right {

@@ -35,20 +35,21 @@
 <script lang="ts" setup>
 import { NeoButton } from '@kodadot1/brick'
 // import { useState } from 'vue-gtag-next'
+import { localStorage } from '@/services/browserAPIs'
 
 // const { isEnabled } = useState()
 const hasDisplayedCookieBanner = ref(
-  localStorage.getItem('cookies_enabled') !== null || false,
+  localStorage?.getItem('cookies_enabled') !== null || false,
 )
 const acceptCookies = () => {
   // if (isEnabled) {
   //   isEnabled.value = true
   // }
-  localStorage.setItem('cookies_enabled', '1')
+  localStorage?.setItem('cookies_enabled', '1')
   hasDisplayedCookieBanner.value = true
 }
 const declineCookies = () => {
-  localStorage.setItem('cookies_enabled', '0')
+  localStorage?.setItem('cookies_enabled', '0')
   hasDisplayedCookieBanner.value = true
 }
 </script>

@@ -3,27 +3,37 @@
 </template>
 
 <script lang="ts" setup>
-const substackScript = document.createElement('script')
-
-window.CustomSubstackWidget = {
-  substackUrl: 'kodadot.substack.com',
-  placeholder: 'jane.doe@kodadot.xyz',
-  theme: 'custom',
-  colors: {
-    primary: '#FF7AC3',
-    input: '#FFFFFF',
-    email: '#000000',
-    text: '#000000',
-  },
-}
+const substackScript = ref<HTMLScriptElement | null>(null)
 
 onMounted(() => {
-  substackScript.src = 'https://substackapi.com/widget.js'
-  substackScript.async = true
-  document.head.append(substackScript)
+  substackScript.value = document.createElement('script')
+
+  const script = substackScript.value
+
+  const substackWidgetParams = {
+    substackUrl: 'kodadot.substack.com',
+    placeholder: 'jane.doe@kodadot.xyz',
+    theme: 'custom',
+    colors: {
+      primary: '#FF7AC3',
+      input: '#FFFFFF',
+      email: '#000000',
+      text: '#000000',
+    },
+  } as const
+
+  const w = window as typeof window & {
+    CustomSubstackWidget: typeof substackWidgetParams
+  }
+
+  w.CustomSubstackWidget = substackWidgetParams
+
+  script.setAttribute('src', 'https://substackapi.com/widget.js')
+  script.setAttribute('async', 'true')
+  document.head.append(script)
 })
 
 onUnmounted(() => {
-  substackScript?.remove()
+  substackScript.value?.remove()
 })
 </script>
@@ -32,6 +32,7 @@
 import { NeoMessage } from '@kodadot1/brick'
 
 const route = useRoute()
+const { origin } = useRequestURL()
 const props = defineProps<{
   title?: string
   subtitle?: string
@@ -46,7 +47,7 @@ const realDuration = computed(() => {
 const autoClose = computed(() => !props.noToast)
 
 const realworldFullPath = computed(() => {
-  return `${window.location.origin}${route.fullPath}`
+  return `${origin}${route.fullPath}`
 })
 </script>
 

@@ -230,10 +230,7 @@ const openMobileSearchBar = ref(false)
 const fixedTitleNavAppearDistance = ref(85)
 const lastScrollPosition = ref(0)
 const isBurgerMenuOpened = ref(false)
-const { width } = useWindowSize()
-const isMobile = ref(window.innerWidth < 1024)
-const isMobileWithoutTablet = ref(window.innerWidth < 768)
-const isTinyMobile = computed(() => width.value < 480)
+const { isMobile, isMobileWithoutTablet, isTinyMobile } = useBreakpoints()
 const { urlPrefix } = usePrefix()
 const { isDarkMode } = useTheme()
 const identityStore = useIdentityStore()
@@ -337,10 +334,6 @@ const hideMobileSearchBar = () => {
   setBodyScroll(true)
 }
 
-const handleResize = () => {
-  isMobile.value = window.innerWidth < 1024
-}
-
 const chainName = computed(() => getChainNameByPrefix(urlPrefix.value))
 
 const updateAuthBalance = () => {
@@ -349,7 +342,6 @@ const updateAuthBalance = () => {
 
 onMounted(() => {
   document.body.style.overflowY = 'initial'
-  document.body.className = 'has-navbar-fixed-top has-spaced-navbar-fixed-top'
   updateAuthBalanceTimer.value = setInterval(updateAuthBalance, 30000)
 })
 
@@ -358,8 +350,10 @@ onBeforeUnmount(() => {
   document.documentElement.classList.remove('is-clipped-touch')
   clearInterval(updateAuthBalanceTimer.value)
 })
-useEventListener(window, 'scroll', onScroll)
-useEventListener(window, 'resize', handleResize)
+
+if (process.client) {
+  useEventListener(window, 'scroll', onScroll)
+}
 </script>
 
 <style lang="scss" scoped>

@@ -178,7 +178,7 @@ const toggleContent = () => {
   isLewdBlurredLayer.value = !isLewdBlurredLayer.value
 }
 
-const isMediaItemHovering = useElementHover(mediaItem)
+const isMediaItemHovering = process.client && useElementHover(mediaItem)
 
 defineExpose({ isLewdBlurredLayer })
 </script>

@@ -47,6 +47,7 @@ import Prism from 'prismjs'
 import { URLS } from '@/utils/constants'
 
 const route = useRoute()
+const { pathname } = useRequestURL()
 const slug = route.params.slug
 
 const { data: post } = await useAsyncData('post', () =>
@@ -63,7 +64,7 @@ const openShareUrl = (platform: 'twitter' | 'linkedin') => {
       shareUrl = 'https://www.linkedin.com/shareArticle?mini=true&url='
       break
   }
-  const currentUrl = `${URLS.koda.baseUrl}${location.pathname}`
+  const currentUrl = `${URLS.koda.baseUrl}${pathname}`
 
   window.open(`${shareUrl}${encodeURIComponent(currentUrl)}`, '_blank')
 }

@@ -33,24 +33,26 @@ const props = defineProps<{
 }>()
 
 const itemUrl = computed(() => props.itemUrl || 'gallery')
+const steps = ref()
 provide('itemUrl', itemUrl.value)
 
 const showCarousel = computed(() => props.nfts.length)
 
 const { width } = useWindowSize()
-const steps = computed(() => {
+
+watchPostEffect(() => {
   if (width.value > 1540) {
-    return 6
+    steps.value = 6
   }
   if (width.value > 1280) {
-    return 5
+    steps.value = 5
   }
   if (width.value > 1024) {
-    return 4
+    steps.value = 4
   }
   if (width.value > 768) {
-    return 2
+    steps.value = 2
   }
-  return 1
+  steps.value = 1
 })
 </script>
@@ -1,6 +1,5 @@
 import type { CarouselNFT } from '@/components/base/types'
 import type { NFTWithMetadata } from '@/composables/useNft'
-import { isBeta, isProduction } from '@/utils/chain'
 import { formatNFT } from '@/utils/carousel'
 
 import latestEvents from '@/queries/subsquid/general/latestEvents.graphql'
@@ -11,6 +10,8 @@ interface Types {
   type: 'latestSales' | 'newestList'
 }
 
+const { isProduction, isBeta } = useEnvironment()
+
 const limit = isProduction ? 15 : 8
 
 const nftEventVariables = {

@@ -66,7 +66,6 @@
 <script lang="ts" setup>
 import ChartJS from 'chart.js/auto'
 import 'chartjs-adapter-date-fns'
-import zoomPlugin from 'chartjs-plugin-zoom'
 import { getChartData } from '@/utils/chart'
 import { format } from 'date-fns'
 import {
@@ -77,7 +76,13 @@ import {
   NeoIcon,
 } from '@kodadot1/brick'
 import { useEventListener, useVModel } from '@vueuse/core'
-ChartJS.register(zoomPlugin)
+
+onMounted(async () => {
+  const { default: zoomPlugin } = await import('chartjs-plugin-zoom')
+
+  ChartJS.register(zoomPlugin)
+})
+
 const { $i18n } = useNuxtApp()
 const { chainSymbol } = useChain()
 const { isDarkMode } = useTheme()
@@ -127,7 +132,10 @@ let Chart: ChartJS<'line', any, unknown>
 const onWindowResize = () => {
   Chart?.resize()
 }
-useEventListener(window, 'resize', onWindowResize)
+
+if (process.client) {
+  useEventListener(window, 'resize', onWindowResize)
+}
 
 onMounted(() => {
   getPriceChartData()

@@ -104,15 +104,15 @@ import HeroButtonDeleteCollection from './HeroButtonDeleteCollection.vue'
 import HeroButtonDeleteNfts from './HeroButtonDeleteNfts.vue'
 
 const route = useRoute()
+const { origin } = useRequestURL()
 const { isCurrentOwner } = useAuth()
 const { urlPrefix } = usePrefix()
 const { $i18n } = useNuxtApp()
 const { toast } = useToast()
 
 const collectionId = computed(() => route.params.id)
 const currentCollectionUrl = computed(
-  () =>
-    `${window.location.origin}/${urlPrefix.value}/collection/${collectionId.value}`,
+  () => `${origin}/${urlPrefix.value}/collection/${collectionId.value}`,
 )
 const { collection } = useCollectionMinimal({
   collectionId: collectionId.value,

@@ -21,8 +21,10 @@ import 'keen-slider/keen-slider.min.css'
 import { useKeenSlider } from 'keen-slider/vue.es'
 import { countDownTime, slidesCountOnTimeCountdown } from './const'
 import { useCountDown } from './utils/useCountDown'
+
 const animation = { duration: 30000, easing: (t) => t }
 const getPositiveNumber = (number: number) => Math.max(0, number)
+const { width } = useWindowSize()
 
 const slidesArray = Array(slidesCountOnTimeCountdown).fill(0)
 const { hours, minutes, seconds } = useCountDown(countDownTime)
@@ -32,7 +34,7 @@ const [wrapper] = useKeenSlider({
   renderMode: 'performance',
   slides: {
     origin: 'center',
-    perView: window.innerWidth / 500,
+    perView: width.value / 500,
     spacing: 10,
   },
   drag: false,

@@ -53,7 +53,7 @@ import {
 } from '@kodadot1/brick'
 
 const { $i18n } = useNuxtApp()
-const currentUrl = computed(() => window.location.href)
+const { href: currentUrl } = useRequestURL()
 
 const QRModalActive = ref(false)
 

@@ -2,7 +2,7 @@
   <div
     v-if="isUnlockableLandingTagVisible"
     class="unlockable-landing-tag is-flex border is-justify-content-space-between is-align-items-center px-4 mt-6"
-    :class="{ 'small-size': smallWidth }">
+    :class="{ 'small-size': isLessThanCustomBreakpoint }">
     <div class="is-flex is-align-items-center">
       <img
         width="42"
@@ -24,13 +24,11 @@
 const isUnlockableLandingTagVisible = true
 const { $i18n } = useNuxtApp()
 
-const { width } = useWindowSize()
-
-const smallWidth = computed(() => width.value < 502)
+const { isLessThanCustomBreakpoint } = useBreakpoints(502)
 
 const mintLiveText = computed(() =>
   $i18n.t(
-    smallWidth.value
+    isLessThanCustomBreakpoint.value
       ? 'mint.unlockable.mintLiveSmall'
       : 'mint.unlockable.mintLive',
   ),

@@ -69,6 +69,7 @@ const props = withDefaults(
 const { urlPrefix } = usePrefix()
 const { $i18n } = useNuxtApp()
 const isLoading = useVModel(props, 'modelValue')
+const { href } = useRequestURL()
 
 const { minutes, seconds } = useCountDown(
   new Date().getTime() + props.duration * 1000,
@@ -85,7 +86,7 @@ const displayDuration = computed(() => {
 
 const twitterText = computed(
   () =>
-    `Just minted an exclusive NFT with unlockable items on @Kodadot! 🎉 So excited to add this unique collectible to my collection. Do not miss your chance! \n\n ${location.href}`,
+    `Just minted an exclusive NFT with unlockable items on @Kodadot! 🎉 So excited to add this unique collectible to my collection. Do not miss your chance! \n\n ${href}`,
 )
 
 const postTwitterUrl = computed(

@@ -19,9 +19,13 @@
 import type { CarouselNFT } from '../base/types'
 import CollectionDetailsPopoverContent from './CollectionDetailsPopoverContent.vue'
 
-const body = ref(document.body)
+const body = ref()
 const triggered = ref(false)
 
+onMounted(() => {
+  body.value = document.body
+})
+
 withDefaults(
   defineProps<{
     nft: CarouselNFT