Update the navbar app version on build (#25)

* Update the NavBar app version on build (closes #9).

* Add replacement for `VPNavScreenMenu` as well.

website/src/.vitepress/config.ts

@@ -1,3 +1,4 @@
+import { URL, fileURLToPath } from "node:url";
 import { defineConfig, loadEnv } from "vitepress";
 import ElementPlus from "unplugin-element-plus/vite";
 
@@ -32,6 +33,23 @@ export default defineConfig({
 		generateOgImages(context);
 	},
 	vite: {
+		resolve: {
+			alias: [
+				{
+					// Used to show the release version on navbar.
+					find: /^.*\/VPNavBarMenu\.vue$/,
+					replacement: fileURLToPath(
+						new URL("./theme/components/CustomNavBarMenu.vue", import.meta.url)
+					),
+				},
+				{
+					find: /^.*VPNavScreenMenu\.vue$/,
+					replacement: fileURLToPath(
+						new URL("./theme/components/CustomNavScreenMenu.vue", import.meta.url)
+					),
+				},
+			]
+		},
 		plugins: [ElementPlus({})],
 		ssr: {
 			noExternal: ["element-plus"],

website/src/.vitepress/config/navigation/navbar.ts

@@ -1,7 +1,5 @@
 import type { DefaultTheme } from "vitepress";
 
-const APP_VERSION = "0.14.6";
-
 const nav: DefaultTheme.NavItem[] = [
 	{
 		text: "Documentation",
@@ -9,7 +7,7 @@ const nav: DefaultTheme.NavItem[] = [
 		activeMatch: "/docs/",
 	},
 	{
-		text: APP_VERSION,
+		text: "{app_version}",
 		activeMatch: "^/*?(download|changelogs)/*?$",
 		items: [
 			{
@@ -18,7 +16,7 @@ const nav: DefaultTheme.NavItem[] = [
 			},
 			{
 				text: "Changelog",
-				link: `/changelogs/#v${APP_VERSION}`,
+				link: "/changelogs/#v{app_version}",
 			},
 			{
 				text: "Contributing",

website/src/.vitepress/theme/components/CustomNavBarMenu.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { type DefaultTheme, useData } from "vitepress";
+
+import { data as release } from "../data/release.data";
+
+import VPNavBarMenuLink from "vitepress/dist/client/theme-default/components/VPNavBarMenuLink.vue";
+import VPNavBarMenuGroup from "vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue";
+
+const { theme } = useData<DefaultTheme.Config>();
+
+/**
+ * Workaround to use the release data directly while the sidebar
+ * and navbar doesn't support using the VitePress data loading.
+ */
+const nav = computed(() => {
+	return theme.value.nav?.map((item) => {
+		if (item.text !== "{app_version}") {
+			return item
+		}
+
+		const appVersion = release.stable.tag_name.substring(1);
+
+		return <DefaultTheme.NavItemWithChildren> {
+			...item,
+			text: item.text === "{app_version}"	? appVersion : item.text,
+			items: (item as DefaultTheme.NavItemWithChildren).items.map((child) => {
+				if (!("link" in child)) {
+					return child;
+				}
+
+				return <DefaultTheme.NavItemWithLink> {
+					...child,
+					link: child.link.replace("{app_version}", appVersion),
+				}
+			}),
+		}
+	});
+})
+</script>
+
+<template>
+	<nav v-if="nav" aria-labelledby="main-nav-aria-label" class="VPNavBarMenu">
+		<span id="main-nav-aria-label" class="visually-hidden">Main Navigation</span>
+		<template v-for="item in nav" :key="item.text">
+			<VPNavBarMenuLink v-if="'link' in item" :item="item" />
+			<VPNavBarMenuGroup v-else :item="item" />
+		</template>
+	</nav>
+</template>
+
+<style lang="stylus" scoped>
+.VPNavBarMenu {
+	display: none
+}
+
+@media (min-width: 768px) {
+	.VPNavBarMenu {
+		display: flex
+	}
+}
+</style>

website/src/.vitepress/theme/components/CustomNavScreenMenu.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { type DefaultTheme, useData } from "vitepress";
+
+import { data as release } from "../data/release.data";
+
+import VPNavScreenMenuLink from "vitepress/dist/client/theme-default/components/VPNavScreenMenuLink.vue";
+import VPNavScreenMenuGroup from "vitepress/dist/client/theme-default/components/VPNavScreenMenuGroup.vue";
+
+const { theme } = useData<DefaultTheme.Config>();
+
+/**
+ * Workaround to use the release data directly while the sidebar
+ * and navbar doesn't support using the VitePress data loading.
+ */
+const nav = computed(() => {
+	return theme.value.nav?.map((item) => {
+		if (item.text !== "{app_version}") {
+			return item
+		}
+
+		const appVersion = release.stable.tag_name.substring(1);
+
+		return <DefaultTheme.NavItemWithChildren> {
+			...item,
+			text: item.text === "{app_version}"	? appVersion : item.text,
+			items: (item as DefaultTheme.NavItemWithChildren).items.map((child) => {
+				if (!("link" in child)) {
+					return child;
+				}
+
+				return <DefaultTheme.NavItemWithLink> {
+					...child,
+					link: child.link.replace("{app_version}", appVersion),
+				}
+			}),
+		}
+	});
+})
+</script>
+
+<template>
+	<nav v-if="nav" class="VPNavScreenMenu">
+		<template v-for="item in nav" :key="item.text">
+		<VPNavScreenMenuLink
+			v-if="'link' in item"
+			:item="item"
+		/>
+		<VPNavScreenMenuGroup
+			v-else
+			:text="item.text || ''"
+			:items="item.items"
+		/>
+		</template>
+	</nav>
+</template>