feat: improve versioning jump and 404 page

Author: MC-XiaoHei

README.MD

@@ -6,4 +6,4 @@ Documentation for CommandAPI.
 
 ## License
 
-All things in this repository **EXPECT** `docs/.vitepress/theme/components/Authors.vue`(this file is licensed under CC BY-NC-SA 4.0 License) is licensed under MIT License.
+All things in this repository **EXPECT** `docs/.vitepress/theme/author/PageAuthors.vue`(this file is licensed under CC BY-NC-SA 4.0 License) is licensed under MIT License.

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import {useData} from 'vitepress'
+import {changingVersion, currentVersion, isLatest} from "../versioning/version";
+import getRandomNotFoundMsg from "./notFoundMsg";
+
+const {theme} = useData()
+</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>
+
+        <div class="action" v-if="!changingVersion">
+            <a
+                class="link"
+                :href="isLatest ? '/' : `/${currentVersion}/`"
+                :aria-label="theme.notFound?.linkLabel ?? 'go to home'"
+            >
+                {{ theme.notFound?.linkText ?? 'Take me home' }}
+            </a>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.NotFound {
+    padding: 64px 24px 96px;
+    text-align: center;
+}
+
+@media (min-width: 768px) {
+    .NotFound {
+        padding: 96px 32px 168px;
+    }
+}
+
+.code {
+    line-height: 64px;
+    font-size: 64px;
+    font-weight: 600;
+}
+
+.title {
+    padding-top: 12px;
+    letter-spacing: 2px;
+    line-height: 20px;
+    font-size: 20px;
+    font-weight: 700;
+}
+
+.divider {
+    margin: 24px auto 18px;
+    width: 64px;
+    height: 1px;
+    background-color: var(--vp-c-divider);
+}
+
+.quote {
+    margin: 0 auto;
+    max-width: 256px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--vp-c-text-2);
+}
+
+.action {
+    padding-top: 20px;
+}
+
+.link {
+    display: inline-block;
+    border: 1px solid var(--vp-c-brand-1);
+    border-radius: 16px;
+    padding: 3px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--vp-c-brand-1);
+    transition: border-color 0.25s,
+    color 0.25s;
+}
+
+.link:hover {
+    border-color: var(--vp-c-brand-2);
+    color: var(--vp-c-brand-2);
+}
+</style>

docs/.vitepress/theme/404/notFoundMsg.ts

@@ -0,0 +1,20 @@
+const notFoundMessages = [
+    "{} experienced kinetic energy",
+    "{} blew up",
+    "{} was killed by [Intentional Game Design]",
+    "{} hit the ground too hard",
+    "{} fell out of the water",
+    "{} was doomed to fall",
+    "{} went off with a bang",
+    "{} tried to swim in lava",
+    "{} was obliterated by a sonically-charged shriek",
+    "{} suffocated in a wall",
+    "{} was squished too much",
+    "{} left the confines of this world",
+    "{} withered away",
+];
+
+export default function getRandomNotFoundMsg(): string {
+    return notFoundMessages[Math.floor(Math.random() * notFoundMessages.length)]
+        .replace("{}", "This page");
+}

docs/.vitepress/theme/index.ts

@@ -1,5 +1,5 @@
 import type {Theme} from 'vitepress'
-import {useRoute} from 'vitepress'
+import {useData, useRoute} from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import PluginTabs from './tabs/PluginTabs.vue'
 import PluginTabsTab from './tabs/PluginTabsTab.vue'
@@ -14,6 +14,7 @@ import './style/global.css'
 import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
 import VersionSwitcher from "./versioning/VersionSwitcher.vue";
 import TitleAnchor from "./anchor/TitleAnchor.vue";
+import NotFoundComponent from "./404/NotFoundComponent.vue";
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -34,6 +35,10 @@ export default {
             'nav-screen-content-after': () => h(NolebaseEnhancedReadabilitiesScreenMenu),
         };
 
+        if (useData().page.value.isNotFound) {
+            children["not-found"] = () => h(NotFoundComponent);
+        }
+
         return h(DefaultTheme.Layout, null, children);
     },
     setup() {

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

@@ -6,7 +6,7 @@ import VPMenuLink from 'vitepress/dist/client/theme-default/components/VPMenuLin
 import VPFlyout from 'vitepress/dist/client/theme-default/components/VPFlyout.vue'
 import {parse} from "yaml";
 import {useRoute} from "vitepress";
-import {currentVersion, latestVersion} from "./version";
+import {changingVersion, currentVersion, isLatest, latestVersion} from "./version";
 
 // noinspection JSUnusedGlobalSymbols
 const props = defineProps<{
@@ -16,7 +16,6 @@ const route = useRoute();
 
 let versionList: string[] = [];
 const versions = ref<string[]>([]);
-const isLatest = ref(true);
 
 function refresh() {
     let version = latestVersion.value;
@@ -33,6 +32,7 @@ function refresh() {
 
     if (currentVersion.value !== version) {
         refreshPage = true;
+        changingVersion.value = true;
     }
 
     currentVersion.value = version;
@@ -45,6 +45,7 @@ function refresh() {
 }
 
 async function init() {
+    changingVersion.value = false;
     const versionDataFileUrl = `${window.location.origin}/versions.yml`;
     const versionDataFileContent = await (await fetch(versionDataFileUrl)).text();
     const versionData = parse(versionDataFileContent);

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

@@ -3,17 +3,27 @@ import {inBrowser} from "vitepress";
 
 function getString(key: string, defaultValue: string) {
     if (inBrowser) {
-        return localStorage.getItem(key) || defaultValue;
+        return sessionStorage.getItem(key) || defaultValue;
     } else {
         return defaultValue;
     }
 }
 
+function getBoolean(key: string, defaultValue: boolean) {
+    if (inBrowser) {
+        return sessionStorage.getItem(key) === 'true';
+    } else {
+        return defaultValue;
+    }
+}
+
+export const isLatest = ref(true);
 export const currentVersion = ref(getString('current-version', ''));
 export const latestVersion = ref('');
+export const changingVersion = ref(getBoolean('changing-version', true));
 
 watch(currentVersion, (value: string) => {
     if (inBrowser) {
-        localStorage.setItem('current-version', value);
+        sessionStorage.setItem('current-version', value);
     }
 });