Fix the hydration issue in the navbar (#32)

* Fix the hydration issue in the navbar.

* Wrap the extensions wrapper in a client-only.

* Undo client-only in extensions wrapper.

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

@@ -16,7 +16,7 @@ const nav: DefaultTheme.NavItem[] = [
 			},
 			{
 				text: "Changelog",
-				link: "/changelogs/#v{app_version}",
+				link: "/changelogs/#latest",
 			},
 			{
 				text: "Contributing",

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

@@ -28,7 +28,7 @@ const dateFormatter = new Intl.DateTimeFormat("en", {
 		v-for="(release, index) of changelogs"
 		:key="release.tag_name"
 	>
-		<h2 :id="release.tag_name">
+		<h2 :id="index === 0 ? 'latest' : release.tag_name">
 			<a
 				:href="release.html_url"
 				target="_blank"
@@ -38,7 +38,7 @@ const dateFormatter = new Intl.DateTimeFormat("en", {
 			<Badge v-if="index === 0" type="tip" text="Latest" />
 			<a
 				class="header-anchor"
-				:href="`#${release.tag_name}`"
+				:href="index === 0 ? '#latest' : `#${release.tag_name}`"
 				:aria-label="`Permalink to &quot;${release.tag_name}&quot;`"
 			/>
 		</h2>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, onMounted, ref } from "vue"
 import { useData } from "vitepress"
 import type { DefaultTheme } from "vitepress/theme"
 
@@ -10,11 +10,22 @@ import { data as release } from "../data/release.data"
 
 const { theme } = useData<DefaultTheme.Config>()
 
+// Used to avoid hydration issues.
+const replace = ref(false)
+
+onMounted(() => {
+	replace.value = true
+})
+
 /**
  * Workaround to use the release data directly while the sidebar
  * and navbar doesn't support using the VitePress data loading.
  */
 const nav = computed(() => {
+	if (!replace.value) {
+		return theme.value.nav
+	}
+
 	return theme.value.nav?.map((item) => {
 		if (item.text !== "{app_version}") {
 			return item
@@ -25,17 +36,7 @@ const nav = computed(() => {
 		return {
 			...item,
 			text: item.text === "{app_version}"	? appVersion : item.text,
-			items: (item as DefaultTheme.NavItemWithChildren).items.map((child) => {
+		} satisfies DefaultTheme.NavItem
-				if (!("link" in child)) {
-					return child
-				}
-
-				return {
-					...child,
-					link: child.link.replace("{app_version}", appVersion),
-				} satisfies DefaultTheme.NavItemWithLink
-			}),
-		} satisfies DefaultTheme.NavItemWithChildren
 	})
 })
 </script>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, onMounted, ref } from "vue"
 import { type DefaultTheme, useData } from "vitepress"
 
 import VPNavScreenMenuLink from "vitepress/dist/client/theme-default/components/VPNavScreenMenuLink.vue"
@@ -9,11 +9,22 @@ import { data as release } from "../data/release.data"
 
 const { theme } = useData<DefaultTheme.Config>()
 
+// Used to avoid hydration issues.
+const replace = ref(false)
+
+onMounted(() => {
+	replace.value = true
+})
+
 /**
  * Workaround to use the release data directly while the sidebar
  * and navbar doesn't support using the VitePress data loading.
  */
 const nav = computed(() => {
+	if (!replace.value) {
+		return theme.value.nav
+	}
+
 	return theme.value.nav?.map((item) => {
 		if (item.text !== "{app_version}") {
 			return item
@@ -24,17 +35,7 @@ const nav = computed(() => {
 		return {
 			...item,
 			text: item.text === "{app_version}"	? appVersion : item.text,
-			items: (item as DefaultTheme.NavItemWithChildren).items.map((child) => {
+		} satisfies DefaultTheme.NavItem
-				if (!("link" in child)) {
-					return child
-				}
-
-				return {
-					...child,
-					link: child.link.replace("{app_version}", appVersion),
-				} satisfies DefaultTheme.NavItemWithLink
-			}),
-		} satisfies DefaultTheme.NavItemWithChildren
 	})
 })
 </script>