From 2a773efda0199e2562fcab627dec1b1c11b4d01e Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Wed, 20 Dec 2023 19:39:08 +0900
Subject: [PATCH] =?UTF-8?q?(add)=20=E4=B8=8A=E3=81=AB=E6=88=BB=E3=82=8B?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=20fix=20#35?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.vue                 | 48 +++++++++++++++++++++++++++++++++++++++++
 components/g/Nav.vue    | 18 +---------------
 pages/mi-web.vue        |  1 +
 pages/servers/index.vue |  5 +++++
 pages/share.vue         |  1 +
 types/misc.d.ts         |  8 +++++++
 types/router.d.ts       |  8 +++++++
 7 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/app.vue b/app.vue
index 83fa20e5..3724c037 100644
--- a/app.vue
+++ b/app.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import TopIco from 'bi/arrow-up.svg';
 import type { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables';
 import NProgress from 'nprogress';
 import type { Graph, Thing } from 'schema-dts';
@@ -133,6 +134,36 @@ useHead((): Record<string, any> => ({
         { type: "application/ld+json", children: getLdJson(route.meta.graph) }
     ],
 }));
+
+/** サイト全体でひとつのScroll Posiitionを使う */
+const scrollPos = useState('miHub_global_scrollPos', () => 0);
+
+async function updatePos() {
+    scrollPos.value = document.body.getBoundingClientRect().y;
+}
+
+if (process.client) {
+    window.addEventListener('scroll', updatePos);
+    window.addEventListener('resize', updatePos);
+}
+
+onUnmounted(() => {
+    if (process.client) {
+        window.removeEventListener('scroll', updatePos);
+        window.removeEventListener('resize', updatePos);
+    }
+});
+
+const hideFrom = computed(() => route.meta.scrollButton ? route.meta.scrollButton?.hideFrom ?? -45 : -45);
+const sbPosition = computed(() => route.meta.scrollButton ? { x: route.meta.scrollButton?.customPosition?.x ?? '2.5rem', y: route.meta.scrollButton?.customPosition?.y ?? '2.5rem' } ?? { x: '2.5rem', y: '2.5rem' } : { x: '2.5rem', y: '2.5rem' });
+
+function scrollToTop() {
+    if (!process.client) return;
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+    });
+}
 </script>
 <template>
     <div class="text-slate-800 dark:text-slate-200 bg-slate-100 dark:bg-gray-900">
@@ -143,5 +174,22 @@ useHead((): Record<string, any> => ({
         <ClientOnly>
             <LazyGAiChan />
         </ClientOnly>
+        <button
+            v-if="$route.meta.scrollButton !== false"
+            :class="[
+                'fixed h-14 w-14 p-[1.125rem] rounded-full bg-accent-600 text-white shadow-lg transition-opacity',
+                (hideFrom >= scrollPos) ? 'opacity-75 hover:opacity-100' : 'opacity-0 pointer-events-none',
+                $route.meta.scrollButton?.customClass ?? '',
+                $style.scrollToTopButton,
+            ]"
+            @click="scrollToTop"
+        ><TopIco class="h-5 w-5 stroke-1 stroke-current" /></button>
     </div>
 </template>
+
+<style module>
+.scrollToTopButton {
+    bottom: v-bind(sbPosition.y);
+    right: v-bind(sbPosition.x);
+}
+</style>
diff --git a/components/g/Nav.vue b/components/g/Nav.vue
index 981fbf1e..2e8140eb 100644
--- a/components/g/Nav.vue
+++ b/components/g/Nav.vue
@@ -138,21 +138,5 @@ function rotateColorMode() {
     colorMode.preference = values[next];
 }
 
-const scrollPos = ref(0);
-
-async function updatePos() {
-    scrollPos.value = document.body.getBoundingClientRect().y;
-}
-
-if (process.client) {
-    window.addEventListener('scroll', updatePos);
-    window.addEventListener('resize', updatePos);
-}
-
-onUnmounted(() => {
-    if (process.client) {
-        window.removeEventListener('scroll', updatePos);
-        window.removeEventListener('resize', updatePos);
-    }
-});
+const scrollPos = useState('miHub_global_scrollPos');
 </script>
diff --git a/pages/mi-web.vue b/pages/mi-web.vue
index d911fc65..c6c407dd 100644
--- a/pages/mi-web.vue
+++ b/pages/mi-web.vue
@@ -35,4 +35,5 @@ const path = computed<string>(() => {
 })
 
 meta.title = t('_goToMisskey.title');
+meta.scrollButton = false;
 </script>
\ No newline at end of file
diff --git a/pages/servers/index.vue b/pages/servers/index.vue
index f3660c38..faac507f 100644
--- a/pages/servers/index.vue
+++ b/pages/servers/index.vue
@@ -62,6 +62,11 @@ function setServerStats(val: InstancesStatsObj) {
 
 route.meta.title = t('_servers.title');
 route.meta.description = t('_servers.description');
+route.meta.scrollButton = {
+    customPosition: {
+        y: '4.5rem',
+    }
+};
 </script>
 
 <style scoped>
diff --git a/pages/share.vue b/pages/share.vue
index b36bc874..0aa1d994 100644
--- a/pages/share.vue
+++ b/pages/share.vue
@@ -21,4 +21,5 @@ const { meta, query } = useRoute();
 const { t } = useI18n();
 
 meta.title = t('_share.title');
+meta.scrollButton = false;
 </script>
\ No newline at end of file
diff --git a/types/misc.d.ts b/types/misc.d.ts
index fef9b416..83d3bdc6 100644
--- a/types/misc.d.ts
+++ b/types/misc.d.ts
@@ -1,4 +1,5 @@
 import type { LocaleCodes } from './../nuxt.config';
+import type { ComputedRef } from 'vue-demi'
 
 declare module '*.svg' {
     import { FunctionalComponent, SVGAttributes } from 'vue'
@@ -44,4 +45,11 @@ declare module 'nuxt/schema' {
     }
 }
 
+declare module 'vue-i18n' {
+    interface ComposerCustomProperties {
+        // 厳格に定義し直す
+        locales: ComputedRef<LocaleObject[]>
+    }
+}
+
 export { };
\ No newline at end of file
diff --git a/types/router.d.ts b/types/router.d.ts
index fcbc3a10..7d8b3026 100644
--- a/types/router.d.ts
+++ b/types/router.d.ts
@@ -9,5 +9,13 @@ declare module 'vue-router' {
         title?: string;
         graph?: Thing[];
         thumbnail?: string;
+        scrollButton?: false | {
+            hideFrom?: number;
+            customPosition?: {
+                x?: string;
+                y?: string;
+            };
+            customClass?: string;
+        };
     }
 }
\ No newline at end of file