T#291/upgrade vuepress

.github/workflows/publish-docs.yml

@@ -24,11 +24,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: '14'
+          node-version: '20.17.0'
 
       - name: Print Versions
         run: |
@@ -64,6 +64,6 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/verify-build.yml

@@ -26,11 +26,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
 
-    - uses: actions/setup-node@v2-beta
+    - uses: actions/setup-node@v4
       with:
-        node-version: '14'
+        node-version: '20.17.0'
 
     - name: npm install
       run : npm install

.gitignore

@@ -25,6 +25,8 @@ yarn-error.log*
 
 package-lock.json
 /docs/.vuepress/public/img/average_accessibility_score.svg
+/docs/.vuepress/.cache
+/docs/.vuepress/.temp
 
 cypress/videos/**
 cypress/screenshots/**

docs/.vuepress/components/Conditional.vue

@@ -1,26 +1,26 @@
+<script setup>
+import { computed } from 'vue'
+import {useThemeData} from "@vuepress/theme-default/client";
+const props = defineProps({
+  visibilityFlag: String,
+  visibilityValue: {
+    type: Boolean,
+    default: true,
+  },
+})
+const themeData = useThemeData()
+const getVisible = computed(() => themeData.value.visibility[props.visibilityFlag] === props.visibilityValue)
+</script>
+
 <template>
-    <span v-if="getVisible">
+ <span v-if="getVisible">
         <slot/>
     </span>
 </template>
 
-<script>
-    export default {
-        name: "Conditional",
-        props: {
-            visibilityFlag: String,
-            visibilityValue: {
-                type: Boolean,
-                default: true,
-            },
-        },
-        computed: {
-            getVisible() {
-                return this.$themeConfig.visibility[this.visibilityFlag] === this.visibilityValue;
-            },
-        }
-    }
-</script>
+<style scoped>
+
+</style>
 
 <style scoped>
 

docs/.vuepress/components/ExternalUrl.vue

@@ -1,29 +1,21 @@
+<script setup>
+import { computed } from 'vue'
+import {useThemeData} from "@vuepress/theme-default/client";
+const props = defineProps({
+  url: String,
+  label: String,
+  boldWhenNoLink: {
+    type: Boolean,
+    default: true,
+  },
+})
+const themeData = useThemeData()
+const noExternalLinks = computed(() => themeData.value.visibility['noExternalLinks'] === true)
+</script>
+
 <template>
   <span>
     <span v-if="noExternalLinks" :class="{ 'font-weight-bold': boldWhenNoLink }">{{ label }}</span>
     <a v-else :href="url" target="_blank" rel="noopener noreferrer">{{ label }} <i class="fas fa-external-link-alt" aria-hidden="true" style="font-size: 0.8rem"></i></a>
   </span>
-</template>
-
-<script>
-export default {
-  name: "ExternalUrl",
-  props: {
-    url: String,
-    label: String,
-    boldWhenNoLink: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  computed: {
-    noExternalLinks() {
-      return this.$themeConfig.visibility['noExternalLinks'] === true;
-    },
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
+</template>