Good bye vuepress

.github/workflows/checks.yml

@@ -7,11 +7,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
-
-    # need Node 16 or less to get rid of ERR_OSSL_EVP_UNSUPPORTED
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 20
 
     - name: Generate dist
       run: |
@@ -33,12 +31,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
-
-    # need Node 16 or less to get rid of ERR_OSSL_EVP_UNSUPPORTED
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
-
+        node-version: 20
+        cache: 'yarn'
     - name: Generate dist
       run: |
         yarn install

.github/workflows/dist-dev.yml

@@ -19,18 +19,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
-
-    # need Node 16 or less to get rid of ERR_OSSL_EVP_UNSUPPORTED
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 20
+        cache: 'yarn'
 
     - name: Install
       run: |
        yarn install
 
     - name: Generate dist
+      env:
+          SMARTLOOK_KEY: ${{ secrets.SMARTLOOK_KEY }}
       run: |
+        echo "VITE_SMARTLOOK_KEY=$SMARTLOOK_KEY" > ./src/.env
         yarn build
 
     - name: "Check dist dir consistency"

.github/workflows/dist-prod.yml

@@ -15,18 +15,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
-
-    # need Node 16 or less to get rid of ERR_OSSL_EVP_UNSUPPORTED
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 20
+        cache: 'yarn'
 
     - name: Install
       run: |
        yarn install
 
     - name: Generate dist
+      env:
+          SMARTLOOK_KEY: ${{ secrets.SMARTLOOK_KEY }}
       run: |
+        echo "VITE_SMARTLOOK_KEY=$SMARTLOOK_KEY" > ./src/.env
         yarn build
 
     - name: "Check dist dir consistency"

.gitignore

@@ -18,4 +18,7 @@ git-output.txt
 .node-version
 .vscode
 *-snippet.txt
-redirect_test.txt
+redirect_test.txt
+
+src/.vitepress/cache
+src/.vitepress/dist

README.md

@@ -49,6 +49,8 @@ You can also spin-up a node Docker container using the provided compose file
 docker compose up mm-docs
 ```
 
+The minimum required version of Node.js is 18.
+
 ## Translations
 
 At the moment we do not support translations, see https://github.com/MerginMaps/docs/issues/133
@@ -65,20 +67,6 @@ yarn build
 
 and see the result in `dist` folder
 
-### Error for nodejs 17
-
-If you get `opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ]`, run
- ```bash
- export NODE_OPTIONS=--openssl-legacy-provider
- ```
-
- or on Windows
- ```bash
- set NODE_OPTIONS=--openssl-legacy-provider
- ```
-
- or downgrade `nodejs` to 16 or less. More here: https://github.com/webpack/webpack/issues/14532
-
 # License
 
 The Mergin Maps product documentation in the `src` are licensed under a [CC-BY license](LICENSE).

docker-compose.yml

@@ -1,7 +1,7 @@
 
 services:
   mm-docs:
-    image: node:16-alpine
+    image: node:20-alpine
     restart: on-failure
     volumes:
       - .:/docs

package.json

@@ -10,20 +10,18 @@
   },
   "repository": "merginmaps/docs",
   "scripts": {
-    "dev": "vuepress dev src",
-    "build": "vuepress build src",
-    "export": "vuepress export src"
+    "dev": "vitepress dev src",
+    "build": "vitepress build src",
+    "preview": "vitepress preview src"
   },
   "devDependencies": {
-    "@vuepress/plugin-medium-zoom": "^1.9.8",
-    "sass": "^1.62.1",
-    "sass-loader": "10",
-    "vuepress": "^1.9.8",
-    "vuepress-plugin-clean-urls": "^1.1.2",
-    "vuepress-plugin-fulltext-search": "^2.2.1"
+    "sass": "^1.86.0",
+    "vitepress": "^1.6.3",
+    "vitepress-plugin-image-viewer": "^1.1.6",
+    "vue": "^3.5.13"
   },
   "dependencies": {
-    "@gtm-support/vue2-gtm": "1.0.0",
+    "@gtm-support/vue-gtm": "^3.1.0",
     "smartlook-client": "^10.0.0"
   }
 }

scripts/check-redirects/main.py

@@ -44,8 +44,9 @@ def slashify(url):
     return path
 
 page_extension = '.md'
-iamge_extensions = ['.jpg', '.png', '.gif', '.xcf']
+iamge_extensions = ['.jpg', '.png', '.gif', '.xcf', '.svg', '.ico']
 data_extensions = ['.json', '.zip']
+vue_extensions = ['.vue', '.js', '.ts']
 
 deleted_pages = []
 renamed_pages_or_data_files = []
@@ -63,7 +64,7 @@ def slashify(url):
                 deleted_pages.append(line_parts[1].strip())
         elif status[0] == 'R':
             old_filename, file_extension = os.path.splitext(line_parts[1])
-            if file_extension.strip() not in iamge_extensions:
+            if file_extension.strip() not in iamge_extensions + vue_extensions + data_extensions:
                 renamed_pages_or_data_files.append( (line_parts[1].strip(),line_parts[2].strip()) )
                 if file_extension not in captured_exts:
                     captured_exts.append(file_extension)

src/.env

@@ -0,0 +1 @@
+VITE_SMARTLOOK_KEY=''

src/.vuepress/components/AppDownload.vue → src/.vitepress/components/AppDownload.vue

@@ -1,21 +1,28 @@
 <template>
   <div>
     <a href='https://apps.apple.com/us/app/input/id1478603559?ls=1' target="_blank" rel="noopener noreferrer" @click="gtmEvent('apple')" class="app-store-btn">
-      <img class="app_store" :src="$withBase('/app_store_badge_black.svg')" alt="Download on the App Store">
+      <img class="app_store" :src="withBase('/app_store_badge_black.svg')" alt="Download on the App Store">
     </a>
     <a href='https://play.google.com/store/apps/details?id=uk.co.lutraconsulting' target="_blank" rel="noopener noreferrer" @click="gtmEvent('google')" class="google-play-btn">
-      <img class="google_play" :src="$withBase('/google-play-badge.png')" alt="Get it on Google Play">
+      <img class="google_play" :src="withBase('/google-play-badge.png')" alt="Get it on Google Play">
     </a>
     <a href='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/MerginMaps/input/releases/latest' target="_blank" rel="noopener noreferrer" @click="gtmEvent('windows')">
-      <img class="windows" :src="$withBase('/app_download_windows.png')" alt="Available on Windows">
+      <img class="windows" :src="withBase('/app_download_windows.png')" alt="Available on Windows">
     </a>
   </div>
 </template>
 
 <script>
+import { withBase } from 'vitepress';
+
 export default {
   name: "appdownload",
   props: {},
+  setup() {
+    return {
+      withBase
+    }
+  },
   methods: {
     gtmEvent: function (store) {
       if (!this.$gtm) return
@@ -40,6 +47,7 @@ div {
 }
 
 img {
+  max-width: 100%;
   border: none
 }
 

src/.vuepress/components/CommunityJoin.vue → src/.vitepress/components/CommunityJoin.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <img :src="$withBase('/slack.svg')" alt="Join Community">
+    <img :src="withBase('/slack.svg')" alt="Join Community">
     <span>
       <a href='https://merginmaps.com/community/join' target="_blank" rel="noopener noreferrer">
         Join our community chat
@@ -10,6 +10,10 @@
   </div>
 </template>
 
+<script lang="ts" setup>
+import { withBase } from 'vitepress';
+</script>
+
 <style scoped>
 div {
   margin-left: 20px;

src/.vitepress/components/CookieConsentView.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <cookie-consent-banner
+      v-if="showBanner"
+      @on-allow="onAllowClick"
+      @on-preferences="onPreferencesClick"
+      @on-deny="onDenyClick"
+    />
+    <cookie-consent-preferences
+      v-if="preferences.show"
+      :initial-values="preferences.consents"
+      @on-save="onSavePreferencesClick"
+      @on-close="onPreferencesClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue';
+import Smartlook from 'smartlook-client';
+import { useGtm } from '@gtm-support/vue-gtm';
+
+import CookieConsentBanner from './cookie-consent/components/CookieConsentBanner.vue';
+import CookieConsentPreferences from './cookie-consent/components/CookieConsentPreferences.vue';
+
+const showBanner = ref(false);
+const preferences = reactive({
+  show: false,
+  consents: {
+    essential: true,
+    analytics: false,
+    marketing: false,
+    personalization: false,
+    uncategorized: false,
+  },
+});
+
+let cookie: any = null;
+const gtm = useGtm();
+
+onMounted(async () => {
+  const module = await import('./cookie-consent/cookie');
+  cookie = new module.default();
+  const currentCookie = cookie.getConsentCookies();
+  if (!currentCookie) {
+    showBanner.value = true;
+    return;
+  }
+  preferences.consents = currentCookie.consents;
+});
+
+function onAllowClick() {
+  const currentCookie = cookie.allowCookies();
+  showBanner.value = false;
+  preferences.consents = currentCookie.consents;
+}
+
+function onPreferencesClick() {
+  preferences.show = !preferences.show;
+}
+
+function onDenyClick() {
+  const currentCookie = cookie.denyCookies();
+  showBanner.value = false;
+  preferences.consents = currentCookie.consents;
+}
+
+function onSavePreferencesClick(values: any) {
+  cookie.savePreferences(values);
+  showBanner.value = false;
+  preferences.show = false;
+  preferences.consents = values;
+}
+
+watch(
+  () => preferences.consents.analytics,
+  (value) => {
+    if (value !== undefined) {
+      gtm?.enable(value);
+      const smartlookKey = import.meta.env.VITE_SMARTLOOK_KEY;
+      if (value && smartlookKey && !Smartlook.initialized()) {
+        Smartlook.init(smartlookKey, {
+          region: 'eu',
+        });
+      }
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped></style>

src/.vuepress/components/GitHubRepo.vue → src/.vitepress/components/GitHubRepo.vue

@@ -9,7 +9,6 @@
           <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
           <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
         </svg>
-        <span class="sr-only">(opens new window)</span>
       </span>
     </a>
   </span>

src/.vuepress/components/MerginMapsProject.vue → src/.vitepress/components/MerginMapsProject.vue

@@ -1,26 +1,21 @@
 <template>
   <span>
-    <a :href="`https://app.merginmaps.com/projects/${id}/tree`" target="_blank" rel="noopener noreferrer">
-      <img :alt="`Mergin Maps Project ${id}`" :src="$withBase('/MM_symbol_COLOR_no_padding.svg')" />
+    <a class="mm-link" :href="`https://app.merginmaps.com/projects/${id}/tree`" target="_blank" rel="noopener noreferrer">
+      <img :alt="`Mergin Maps Project ${id}`" :src="withBase('/MM_symbol_COLOR_no_padding.svg')" />
       <span v-html="id" class="nospellcheck"></span>
       <span>
         <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
           <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
           <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
         </svg>
-        <span class="sr-only">(opens new window)</span>
       </span>
     </a>
   </span>
 </template>
 
-<script>
-export default {
-  name: "merginmapsproject",
-  props: {
-    id: String
-  }
-}
+<script lang="ts" setup>
+import { withBase } from 'vitepress';
+defineProps({ id: String })
 </script>
 
 <style scoped>