mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +01:00
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.
This commit is contained in:
parent
e57a37e9cc
commit
5c33c7a1c7
@ -16,7 +16,7 @@ const nav: DefaultTheme.NavItem[] = [
|
||||
},
|
||||
{
|
||||
text: "Changelog",
|
||||
link: "/changelogs/#v{app_version}",
|
||||
link: "/changelogs/#latest",
|
||||
},
|
||||
{
|
||||
text: "Contributing",
|
||||
|
@ -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 "${release.tag_name}"`"
|
||||
/>
|
||||
</h2>
|
||||
|
@ -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) => {
|
||||
if (!("link" in child)) {
|
||||
return child
|
||||
}
|
||||
|
||||
return {
|
||||
...child,
|
||||
link: child.link.replace("{app_version}", appVersion),
|
||||
} satisfies DefaultTheme.NavItemWithLink
|
||||
}),
|
||||
} satisfies DefaultTheme.NavItemWithChildren
|
||||
} satisfies DefaultTheme.NavItem
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
@ -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) => {
|
||||
if (!("link" in child)) {
|
||||
return child
|
||||
}
|
||||
|
||||
return {
|
||||
...child,
|
||||
link: child.link.replace("{app_version}", appVersion),
|
||||
} satisfies DefaultTheme.NavItemWithLink
|
||||
}),
|
||||
} satisfies DefaultTheme.NavItemWithChildren
|
||||
} satisfies DefaultTheme.NavItem
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user