doc: add version on homepage

docs/.vitepress/components/HomeVersion.vue

@@ -0,0 +1,35 @@
+<template>
+    <a class="version" href="https://www.npmjs.com/package/@photo-sphere-viewer/core" v-if="version">{{ version }}</a>
+</template>
+
+<script setup lang="ts">
+import { usePsvDocData } from '../theme/data';
+
+const version = usePsvDocData().latestVersion;
+</script>
+
+<style lang="scss" scoped>
+    .version {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 15px;
+        border-radius: 15px;
+        font-weight: 600;
+        color: white;
+        background-image: linear-gradient(120deg, #8BC34A, #03A9F4);
+        background-repeat: repeat;
+        background-size: 200%;
+        transition: all 0.3s ease-in-out;
+
+        &:hover {
+            background-position-x: 100%;
+            filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.42));
+        }
+    }
+</style>

docs/.vitepress/components/VersionBanner.vue

@@ -13,24 +13,25 @@
 
 <script setup lang="ts">
 import { useRouter } from 'vitepress';
-import { onMounted, ref } from 'vue';
+import { ref, watch } from 'vue';
+import { usePsvDocData } from '../theme/data';
 
 const router = useRouter();
-const latestVersion = ref(null);
+const latestVersion = usePsvDocData().latestVersion;
 const open = ref(false);
 
-onMounted(async () => {
-    const response = await fetch('https://registry.npmjs.org/@photo-sphere-viewer%2Fcore');
-    if (response.ok) {
-        const data = await response.json();
-        latestVersion.value = data['dist-tags']['latest'];
-        if (!localStorage.version && localStorage.announcementsCache) {
-            localStorage.version = latestVersion.value;
-        } else if (latestVersion.value !== localStorage.version) {
+onVersion(latestVersion.value);
+watch(latestVersion, onVersion);
+
+function onVersion(version: string) {
+    if (version) {
+        if (!localStorage.version) {
+            localStorage.version = version;
+        } else if (version !== localStorage.version) {
             open.value = true;
         }
     }
-});
+}
 
 function changelog() {
     close();

docs/.vitepress/theme/data.ts

@@ -0,0 +1,15 @@
+import { inject, Ref } from 'vue';
+
+export type PsvDocData = {
+    latestVersion: Ref<string>;
+};
+
+export const DataSymbol = Symbol();
+
+export function usePsvDocData(): PsvDocData {
+    const router = inject(DataSymbol);
+    if (!router) {
+        throw new Error('usePsvDocData() is called without provider.');
+    }
+    return router as PsvDocData;
+}

docs/.vitepress/theme/index.ts

@@ -1,6 +1,6 @@
 import type { Theme } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
-import { h } from 'vue';
+import { h, ref } from 'vue';
 import { createVuetify } from 'vuetify';
 import {
     VBtn,
@@ -39,13 +39,15 @@ import Announcements from '../components/Announcements.vue';
 import ApiButton from '../components/ApiButton.vue';
 import Badges from '../components/Badges.vue';
 import HomeBackground from '../components/HomeBackground.vue';
+import HomeVersion from '../components/HomeVersion.vue';
 import ThemeProvider from '../components/ThemeProvider.vue';
 import VersionBanner from '../components/VersionBanner.vue';
 import codeDemo from '../plugins/code-demo/enhanceApp';
 import dialog from '../plugins/dialog/enhanceApp';
 import gallery from '../plugins/gallery/enhanceApp';
 import tabs from '../plugins/tabs/enhanceApp';
 
+import { DataSymbol, PsvDocData } from './data';
 import './style.scss';
 
 const vuetify = createVuetify({
@@ -142,6 +144,7 @@ export default {
     Layout: () => {
         return h(ThemeProvider, h(DefaultTheme.Layout, null, {
             'home-hero-before': () => h(HomeBackground),
+            'home-hero-actions-after': () => h(HomeVersion),
             'home-features-after': () => h(Announcements),
             'layout-bottom': () => h(VersionBanner),
         }));
@@ -154,5 +157,16 @@ export default {
         dialog(app);
         gallery(app);
         tabs(app);
+
+        const latestVersion = ref<string>('');
+        app.provide(DataSymbol, { latestVersion } satisfies PsvDocData);
+
+        (async () => {
+            const response = await fetch('https://registry.npmjs.org/@photo-sphere-viewer%2Fcore');
+            if (response.ok) {
+                const data = await response.json();
+                latestVersion.value = data['dist-tags']['latest'];
+            }
+        })();
     },
 } satisfies Theme;