Upgrade vuepress

docs/.gitignore

@@ -0,0 +1,9 @@
+src/.vuepress/.cache
+src/.vuepress/.temp
+src/.vuepress/*.js.*.mjs
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

docs/.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.6.3.cjs

docs/package.json

@@ -8,6 +8,7 @@
     "url": "https://github.com/FacilMap/facilmap.git"
   },
   "license": "AGPL-3.0",
+  "type": "module",
   "scripts": {
     "dev-server": "vuepress dev src",
     "build": "vuepress build src",
@@ -16,13 +17,13 @@
   },
   "private": true,
   "devDependencies": {
-    "markdown-it-footnote": "^3.0.3",
-    "rimraf": "^3.0.2",
-    "vuepress": "^1.5.3",
-    "vuepress-plugin-check-md": "^0.0.2"
+    "@vuepress/plugin-search": "next",
+    "rimraf": "^5.0.1",
+    "vuepress": "next",
+    "vuepress-plugin-check-md": "^0.0.3"
   },
+  "packageManager": "[email protected]",
   "dependencies": {
-    "qrcode": "^1.4.4",
-    "vue-qrcode": "^0.4.0"
+    "qrcode.vue": "^3.4.1"
   }
 }

docs/src/.vuepress/client.ts

@@ -0,0 +1,16 @@
+import { defineClientConfig } from '@vuepress/client';
+import QrcodeVue from 'qrcode.vue';
+import Screencast from "./components/Screencast.vue";
+import Screenshot from "./components/Screenshot.vue";
+
+export default defineClientConfig({
+	enhance({ app, router, siteData }) {
+		app.component("qrcode", QrcodeVue);
+		app.component("Screencast", Screencast);
+		app.component("Screenshot", Screenshot);
+
+		app.config.globalProperties.$resolveLink
+
+		router.addRoute({ path: '/users/hash/', redirect: '/users/share/' });
+	}
+});

docs/src/.vuepress/components/Screencast.vue

@@ -1,18 +1,32 @@
+<script setup lang="ts">
+	const props = defineProps<{
+		desktop: string;
+		mobile: string;
+	}>();
+</script>
+
 <template>
-	<div>
-		<video controls style="height: 340px">
-			<source :src="desktop">
+	<div class="fm-screencast">
+		<video controls>
+			<source :src="props.desktop">
 		</video>
-		<video controls style="height: 340px">
-			<source :src="mobile">
+		<video controls>
+			<source :src="props.mobile">
 		</video>
 	</div>
 </template>
-<script>
-	export default {
-		props: {
-			desktop: String,
-			mobile: String
+
+<style lang="scss">
+	.fm-screencast {
+		display: flex;
+		gap: 6px;
+
+		> :nth-child(1) {
+			width: calc(66.5% - 3px);
 		}
-	};
-</script>
+
+		> :nth-child(2) {
+			width: calc(33.5% - 3px);
+		}
+	}
+</style>

docs/src/.vuepress/components/Screenshot.vue

@@ -1,14 +1,28 @@
+<script setup lang="ts">
+	const props = defineProps<{
+		desktop: string;
+		mobile: string;
+	}>();
+</script>
+
 <template>
-	<div>
-		<img :src="desktop" style="height: 340px">
-		<img :src="mobile" style="height: 340px">
+	<div class="fm-screenshot">
+		<img :src="props.desktop">
+		<img :src="props.mobile">
 	</div>
 </template>
-<script>
-	export default {
-		props: {
-			desktop: String,
-			mobile: String
+
+<style lang="scss">
+	.fm-screenshot {
+		display: flex;
+		gap: 6px;
+
+		> :nth-child(1) {
+			width: calc(68.5% - 3px);
 		}
-	};
-</script>
+
+		> :nth-child(2) {
+			width: calc(31.5% - 3px);
+		}
+	}
+</style>