feat: enable ssr on /privacy-policy

composables/useLocalStorage.ts

@@ -2,14 +2,14 @@ export default function <T>(key: string, defaultValue: T) {
   return customRef((track, trigger) => ({
     get: (): T => {
       track()
-      const value = localStorage.getItem(key)
+      const value = process.client && localStorage.getItem(key)
       return value ? JSON.parse(value) : defaultValue
     },
     set: (value: T) => {
       if (value === null) {
-        localStorage.removeItem(key)
+        process.client && localStorage.removeItem(key)
       } else {
-        localStorage.setItem(key, JSON.stringify(value))
+        process.client && localStorage.setItem(key, JSON.stringify(value))
       }
       trigger()
     },

layouts/default-ssr.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="min-h-full flex flex-col is-clipped">
+    <ClientOnly>
+      <Navbar />
+    </ClientOnly>
+    <main class="flex-grow py-8">
+      <div class="container is-fluid">
+        <Error
+          v-if="$nuxt.isOffline"
+          :has-img="false"
+          error-subtitle="Please check your network connections"
+          error-title="Offline Detected" />
+        <NuxtPage v-else />
+      </div>
+    </main>
+    <ClientOnly>
+      <LazyTheFooter />
+      <LazyCookieBanner />
+      <Buy />
+    </ClientOnly>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { $config } = useNuxtApp()
+const route = useRoute()
+
+useHead({
+  link: [
+    {
+      hid: 'canonical',
+      rel: 'canonical',
+      href: $config.public.baseUrl + route.path,
+    },
+  ],
+})
+</script>

libs/ui/src/components/MediaItem/type/ModelMedia.vue

@@ -19,7 +19,11 @@
 </template>
 
 <script lang="ts" setup>
-import '@google/model-viewer'
+onMounted(() => {
+  if (process.client) {
+    import('@google/model-viewer')
+  }
+})
 
 defineProps<{
   animationSrc: string

libs/ui/src/components/NeoModal/NeoModal.scss

@@ -5,6 +5,7 @@
 
 $modal-content-border-radius: 0;
 $modal-overlay-background-color: rgb(0 0 0 / 0.17);
+$modal-zindex: 998;
 
 @import '@oruga-ui/oruga-next/src/scss/components/_modal.scss';
 

middleware/prefix.global.ts

@@ -12,7 +12,7 @@ export default defineNuxtRouteMiddleware((route) => {
 
   const isAnyChainPrefixInPath = chainPrefixes.includes(prefixInPath)
   const rmrk2ChainPrefixInHostname = rmrk2ChainPrefixesInHostname.find(
-    (prefix) => location.hostname.startsWith(`${prefix}.`),
+    (prefix) => process.client && location.hostname.startsWith(`${prefix}.`),
   )
 
   if (

nuxt.config.ts

@@ -30,7 +30,7 @@ export default defineNuxtConfig({
 
   vite: {
     build: {
-      sourcemap: true,
+      sourcemap: false,
     },
     plugins: [
       svgLoader({
@@ -49,22 +49,29 @@ export default defineNuxtConfig({
               '@kodadot1/minimark/v2',
               '@paraspell/sdk',
               '@polkadot/api',
+              '@polkadot/extension-dapp',
               '@polkadot/vue-identicon',
               '@ramp-network/ramp-instant-sdk',
               '@transak/transak-sdk',
               '@unhead/vue',
+              'bn.js',
               'chart.js/auto',
               'chartjs-adapter-date-fns',
               'chartjs-plugin-zoom',
               'graphql-ws',
               'keen-slider/vue',
               'keen-slider/vue.es',
               'lodash/isEqual',
+              'lodash/filter',
+              'lodash/orderBy',
               'lodash/sortBy',
               'lodash/sum',
               'lodash/unionBy',
               'markdown-it',
+              'partysocket',
               'prismjs',
+              'qrcode.vue',
+              'wavesurfer.js',
             ],
           }
         : undefined,
@@ -80,7 +87,7 @@ export default defineNuxtConfig({
   },
 
   // Disable server-side rendering
-  ssr: false,
+  // ssr: false,
 
   // Global page headers: https://nuxt.com/docs/api/configuration/nuxt-config#head
   app: {

package.json

@@ -26,15 +26,16 @@
     "locales:check": "node ./script/checkLocale.mjs",
     "start": "nuxi preview",
     "start:node": "PORT=9090 node .output/server/index.mjs",
-    "generate": "node ./script/posts.mjs && cross-env NODE_OPTIONS=--openssl-legacy-provider nuxi build",
+    "generate": "node ./script/posts.mjs && cross-env NODE_OPTIONS=--openssl-legacy-provider nuxi build && pnpm run postbuild",
     "lint": "eslint --cache --ignore-path .gitignore --ext .js,.ts,.vue .",
     "lint:quiet": "eslint --cache --quiet --ignore-path .gitignore --ext .js,.ts,.vue .",
     "lint:fix": "eslint --cache --fix --quiet --ignore-path .gitignore --ext .js,.ts,.vue .",
     "test": "vitest run --reporter verbose --allowOnly",
     "test:watch": "vitest --reporter verbose",
     "test:coverage": "vitest run --coverage",
     "test:e2e": "playwright test --ui",
-    "prepare": "pnpm -F static build && nuxi prepare && husky install"
+    "prepare": "pnpm -F static build && nuxi prepare && husky install",
+    "postbuild": "cd .output/server/node_modules/tslib; npm pkg set 'exports[.].import.node'='./tslib.es6.mjs'"
   },
   "husky": {
     "hooks": {
@@ -59,8 +60,8 @@
   },
   "packageManager": "pnpm@8.6.0",
   "dependencies": {
-    "@braintree/sanitize-url": "^6.0.4",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@braintree/sanitize-url": "^7.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
     "@kodadot1/brick": "workspace:*",
     "@kodadot1/minimark": "^0.1.14-rc.0",
@@ -90,12 +91,12 @@
     "chartjs-adapter-date-fns": "^3.0.0",
     "chartjs-plugin-annotation": "^3.0.1",
     "chartjs-plugin-zoom": "^2.0.1",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.3.1",
     "graphql": "^16.8.1",
     "graphql-ws": "^5.15.0",
     "keen-slider": "^6.8.6",
     "lodash": "^4.17.21",
-    "markdown-it": "^13.0.2",
+    "markdown-it": "^14.0.0",
     "nuxt-speedkit": "3.0.0-next.27",
     "ofetch": "^1.3.3",
     "partysocket": "^0.0.25",
@@ -107,12 +108,12 @@
     "slugify": "^1.6.6",
     "unzipit": "^1.4.3",
     "vue-apollo": "^3.1.2",
-    "vue-audio-visual": "2.5.0",
+    "vue-audio-visual": "3.0.7",
     "vue-chartjs": "^5.3.0",
-    "vue-dompurify-html": "^4.1.4",
+    "vue-dompurify-html": "^5.0.1",
     "vue-tippy": "^6.4.1",
     "wavesurfer.js": "^7.7.4",
-    "workbox-window": "^6.6.0"
+    "workbox-window": "^7.0.0"
   },
   "devDependencies": {
     "@nuxt/content": "^2.12.1",
@@ -123,14 +124,13 @@
     "@nuxtjs/i18n": "^8.2.0",
     "@nuxtjs/sitemap": "^5.1.2",
     "@playwright/test": "^1.42.1",
-    "@types/jest": "^27.5.2",
     "@types/lodash": "^4.17.0",
     "@types/markdown-it": "^13.0.7",
     "@types/prismjs": "^1.26.3",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vite-pwa/nuxt": "^0.6.0",
-    "@vitest/coverage-istanbul": "^0.34.6",
+    "@vitest/coverage-istanbul": "^1.2.1",
     "@vueuse/core": "^9.13.0",
     "@vueuse/nuxt": "^9.13.0",
     "autoprefixer": "^10.4.18",
@@ -151,13 +151,10 @@
     "prettier": "^3.2.5",
     "sass": "^1.71.1",
     "tailwindcss": "^3.4.1",
+    "tslib": "^2.6.2",
     "vite-svg-loader": "^5.1.0",
-    "vitest": "^0.34.6",
+    "vitest": "^1.2.1",
     "vue-eslint-parser": "^9.4.2",
     "vue-gtag": "^2.0.1"
-  },
-  "resolutions": {
-    "@apollo/federation": "0.38.1",
-    "vue": "3.4.8"
   }
 }

pages/privacy-policy.vue

@@ -1417,6 +1417,10 @@ export default {
         },
       ],
     })
+
+    definePageMeta({
+      layout: 'default-ssr',
+    })
   },
 }
 </script>