Merge pull request #9 from MC-XiaoHei/master

Fix: jump to the corresponding page when switch version

Author: JorelAli

docs/.vitepress/theme/404/NotFoundComponent.vue

@@ -1,25 +1,39 @@
 <script setup lang="ts">
-import {useData} from 'vitepress'
-import {changingVersion, currentVersion, isLatest} from "../versioning/version";
+import { useData } from "vitepress";
+import { computed } from "vue";
+import { changingVersion, currentVersion, isLatest, isOld } from "../versioning/version";
 import getRandomNotFoundMsg from "./notFoundMsg";
 
-const {theme} = useData()
+const {theme} = useData();
+const redirectFromAnotherVersion = computed(() =>
+    window.location.search.startsWith("?from=") && !changingVersion.value,
+);
+const redirectFromVersion = computed(() => {
+    if (redirectFromAnotherVersion.value) {
+        return window.location.search.split("?from=")[1].split("&")[0];
+    }
+    return "";
+});
 </script>
 
 <template>
     <div class="NotFound">
-        <p class="code">{{ changingVersion ? '' : '404' }}</p>
-        <h1 class="title">{{ changingVersion ? 'Redirecting' : 'PAGE NOT FOUND' }}</h1>
-        <div class="divider"/>
-        <div class="quote">{{ changingVersion ? 'Please wait......' : getRandomNotFoundMsg() }}</div>
+        <p class="code">{{ changingVersion ? "" : "404" }}</p>
+        <h1 class="title">{{ changingVersion ? "Redirecting" : "PAGE NOT FOUND" }}</h1>
+        <div class="divider" />
+        <div v-if="redirectFromAnotherVersion">
+            You switched here from version {{ redirectFromVersion }}, but this version does not have a corresponding page.
+        </div>
+        <div v-else class="quote">{{ changingVersion ? "Please wait......" : getRandomNotFoundMsg() }}</div>
 
         <div class="action" v-if="!changingVersion">
             <a
                 class="link"
                 :href="isLatest ? '/' : `/${currentVersion}/`"
                 :aria-label="theme.notFound?.linkLabel ?? 'go to home'"
+                :onclick="isOld ? 'location.reload(true);location.href=this.href;return false;' : undefined"
             >
-                {{ theme.notFound?.linkText ?? 'Take me home' }}
+                {{ theme.notFound?.linkText ?? "Take me home" }}
             </a>
         </div>
     </div>

docs/.vitepress/theme/versioning/VersionSwitcher.vue

@@ -1,12 +1,12 @@
 <!--modified from https://github.com/IMB11/vitepress-versioning-plugin , original license is MIT-->
 
 <script setup lang="ts">
-import {onMounted, ref, watch} from 'vue'
-import VPMenuLink from 'vitepress/dist/client/theme-default/components/VPMenuLink.vue'
-import VPFlyout from 'vitepress/dist/client/theme-default/components/VPFlyout.vue'
-import {parse} from "yaml";
-import {useRoute} from "vitepress";
-import {changingVersion, currentVersion, isLatest, latestVersion} from "./version";
+import { useRoute } from "vitepress";
+import VPFlyout from "vitepress/dist/client/theme-default/components/VPFlyout.vue";
+import VPMenuLink from "vitepress/dist/client/theme-default/components/VPMenuLink.vue";
+import { computed, onMounted, ref, watch } from "vue";
+import { parse } from "yaml";
+import { changingVersion, currentVersion, isLatest, isOld, latestVersion } from "./version";
 
 // noinspection JSUnusedGlobalSymbols
 const props = defineProps<{
@@ -15,55 +15,65 @@ const props = defineProps<{
 const route = useRoute();
 
 let versionList: string[] = [];
+let oldVersionList: string[] = [];
 const versions = ref<string[]>([]);
+const docsPath = computed(() => {
+    if (isLatest.value) {
+        return window.location.pathname;
+    } else {
+        return window.location.pathname.split(`/${ currentVersion.value }/`)[1];
+    }
+});
 
 function refresh() {
     let version = latestVersion.value;
     let refreshPage = false;
     isLatest.value = true;
 
     for (const v of versionList) {
-        if (window.location.pathname.startsWith(`/${v}/`)) {
+        if (window.location.pathname.startsWith(`/${ v }/`)) {
             version = v;
             isLatest.value = false;
             break;
         }
     }
 
-    if (currentVersion.value !== '' && currentVersion.value !== version) {
+    if (currentVersion.value !== "" && currentVersion.value !== version) {
         refreshPage = true;
         changingVersion.value = true;
     }
 
     currentVersion.value = version;
     versions.value = versionList;
+    isOld.value = oldVersionList.includes(version);
 
     if (refreshPage) {
-        window.location.pathname = isLatest.value ? '/' : `/${version}/`;
+        window.location.pathname = isLatest.value ? "/" : `/${ version }/`;
         window.location.reload();
     }
 }
 
 async function init() {
     changingVersion.value = false;
-    const versionDataFileUrl = `${window.location.origin}/versions.yml`;
+    const versionDataFileUrl = `${ window.location.origin }/versions.yml`;
     const versionDataFileContent = await (await fetch(versionDataFileUrl)).text();
     const versionData = parse(versionDataFileContent);
     versionList = versionData.versions;
+    oldVersionList = versionData["old-versions"];
     latestVersion.value = versionList[0];
     versionList.shift();
-    refresh()
+    refresh();
 }
 
 const isOpen = ref(false);
 const toggle = () => {
     isOpen.value = !isOpen.value;
 };
 
-onMounted(async () => init())
+onMounted(async () => init());
 watch(
     () => route.path,
-    () => refresh()
+    () => refresh(),
 );
 </script>
 
@@ -73,32 +83,32 @@ watch(
         <div class="items">
             <VPMenuLink v-if="!isLatest" :item="{
         text: latestVersion,
-        link: `/../`,
-      }"/>
+        link: `/../${docsPath}?from=${currentVersion}`,
+      }" />
             <template v-for="version in versions" :key="version">
                 <VPMenuLink v-if="currentVersion != version" :item="{
           text: version,
-          link: `${isLatest? '' : '/..'}/${version}/`,
-        }"/>
+          link: `${isLatest? '' : '/..'}/${version}/${docsPath}?from=${currentVersion}`,
+        }" />
             </template>
         </div>
     </VPFlyout>
     <div v-else class="VPScreenVersionSwitcher" :class="{ open: isOpen }">
         <button class="button" aria-controls="navbar-group-version" :aria-expanded="isOpen" @click="toggle">
-            <span class="button-text"><span class="vpi-versioning icon"/>Switch Version</span>
-            <span class="vpi-plus button-icon"/>
+            <span class="button-text"><span class="vpi-versioning icon" />Switch Version</span>
+            <span class="vpi-plus button-icon" />
         </button>
 
         <div id="navbar-group-version" class="items">
             <VPMenuLink :item="{
         text: latestVersion,
         link: `${isLatest? '' : '/..'}/`,
-      }"/>
+      }" />
             <template v-for="version in versions" :key="version">
                 <VPMenuLink :item="{
           text: version,
           link: `${isLatest? '' : '/..'}/${version}/`,
-        }"/>
+        }" />
             </template>
         </div>
     </div>
@@ -116,11 +126,11 @@ watch(
 
 <style scoped>
 .VPMenuLink {
-    font-family: 'Helvetica Neue', sans-serif;
+    font-family: "Helvetica Neue", sans-serif;
 }
 
 .VPVersionSwitcher {
-    font-family: 'Helvetica Neue', sans-serif;
+    font-family: "Helvetica Neue", sans-serif;
     display: flex;
     align-items: center;
 }

docs/.vitepress/theme/versioning/version.ts

@@ -18,6 +18,7 @@ function getBoolean(key: string, defaultValue: boolean) {
 }
 
 export const isLatest = ref(true);
+export const isOld = ref(false);
 export const currentVersion = ref(getString('current-version', ''));
 export const latestVersion = ref('');
 export const changingVersion = ref(getBoolean('changing-version', true));

docs/public/versions.yml

@@ -1,6 +1,11 @@
 versions:
   - 10.0.0
   - 9.7.0
+  - 9.6.1
+  - 9.4.2
+  - 9.3.0
+  - 8.8.0
+old-versions:
   - 9.6.1
   - 9.4.2
   - 9.3.0