From 66c32554c5c9643928b430efe740b806468f32ca Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sun, 9 Jul 2023 18:58:53 +0900
Subject: [PATCH] (wip) server page

---
 assets/css/bootstrap-forms.scss | 29 ++++++++++
 assets/css/tailwind.css         |  4 ++
 assets/data/lang.ts             | 82 ++++++++++++++++++++++++++++
 components/g/Hero.vue           | 21 ++++++++
 components/g/Nav.vue            | 61 +++++++++++++++++----
 components/index/Nav.vue        |  2 +-
 components/servers/Item.vue     | 17 ++++++
 locales/ja-JP.yml               | 27 +++++++++-
 nuxt.config.ts                  |  1 +
 package.json                    |  2 +
 pages/servers.vue               | 96 ++++++++++++++++++++++++++++++++-
 pnpm-lock.yaml                  | 81 ++++++++++++++++++++--------
 types/instances-info.ts         | 47 ++++++++++++++++
 13 files changed, 436 insertions(+), 34 deletions(-)
 create mode 100644 assets/css/bootstrap-forms.scss
 create mode 100644 assets/data/lang.ts
 create mode 100644 components/g/Hero.vue
 create mode 100644 components/servers/Item.vue
 create mode 100644 types/instances-info.ts

diff --git a/assets/css/bootstrap-forms.scss b/assets/css/bootstrap-forms.scss
new file mode 100644
index 00000000..533434c8
--- /dev/null
+++ b/assets/css/bootstrap-forms.scss
@@ -0,0 +1,29 @@
+@import "bootstrap/scss/mixins/banner";
+@include bsBanner("Forms & Buttons");
+
+//$primary: #4a4c94;
+$primary: #86b300;
+
+// scss-docs-start import-stack
+// Configuration
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Layout & components
+@import "bootstrap/scss/root";
+
+// Breaking down form components
+@import "bootstrap/scss/forms/labels";
+@import "bootstrap/scss/forms/form-control";
+@import "bootstrap/scss/forms/form-select";
+@import "bootstrap/scss/forms/form-range";
+@import "bootstrap/scss/forms/form-check";
+@import "bootstrap/scss/forms/input-group";
+
+// button
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/button-group";
\ No newline at end of file
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 8a46eecd..29ccace6 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -19,6 +19,10 @@
 	height: 1em;
 }
 
+body {
+	min-height: 100vh;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/assets/data/lang.ts b/assets/data/lang.ts
new file mode 100644
index 00000000..88b9564f
--- /dev/null
+++ b/assets/data/lang.ts
@@ -0,0 +1,82 @@
+export default [
+    {
+        "lang": "de",
+        "label": "Deutsch"
+    },
+    {
+        "lang": "en",
+        "label": "English"
+    },
+    {
+        "lang": "es",
+        "label": "español"
+    },
+    {
+        "lang": "es-419",
+        "label": "español (Latinoamérica)"
+    },
+    {
+        "lang": "fr",
+        "label": "français"
+    },
+    {
+        "lang": "hr",
+        "label": "hrvatski"
+    },
+    {
+        "lang": "it",
+        "label": "italiano"
+    },
+    {
+        "lang": "nl",
+        "label": "Nederlands"
+    },
+    {
+        "lang": "pl",
+        "label": "polski"
+    },
+    {
+        "lang": "pt-BR",
+        "label": "português (Brasil)"
+    },
+    {
+        "lang": "pt-PT",
+        "label": "português (Portugal)"
+    },
+    {
+        "lang": "vi",
+        "label": "Tiếng Việt"
+    },
+    {
+        "lang": "tr",
+        "label": "Türkçe"
+    },
+    {
+        "lang": "ru",
+        "label": "русский"
+    },
+    {
+        "lang": "ar",
+        "label": "العربية"
+    },
+    {
+        "lang": "th",
+        "label": "ไทย"
+    },
+    {
+        "lang": "ko",
+        "label": "한국어"
+    },
+    {
+        "lang": "zh-CN",
+        "label": "中文 (简体)"
+    },
+    {
+        "lang": "zh-TW",
+        "label": "中文 (繁體)"
+    },
+    {
+        "lang": "ja",
+        "label": "日本語"
+    }
+];
\ No newline at end of file
diff --git a/components/g/Hero.vue b/components/g/Hero.vue
new file mode 100644
index 00000000..7b9e7ecc
--- /dev/null
+++ b/components/g/Hero.vue
@@ -0,0 +1,21 @@
+<template>
+    <header>
+        <div class="container mx-auto max-w-screen-xl px-6 min-h-[330px] py-4 space-y-6 lg:space-y-0 lg:flex items-center justify-between lg:space-x-6">
+            <div class="max-w-lg mx-auto lg:mx-0">
+                <h1 class="font-title font-bold text-center lg:text-start text-2xl lg:text-4xl mb-4"><slot name="title"></slot></h1>
+                <p class="opacity-90 lg:text-lg lg:leading-relaxed max-w-lg"><slot name="description"></slot></p>
+            </div>
+            <div>
+                <slot name="icon"></slot>
+            </div>
+        </div>
+    </header>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/g/Nav.vue b/components/g/Nav.vue
index 04dd45f8..472e95fa 100644
--- a/components/g/Nav.vue
+++ b/components/g/Nav.vue
@@ -1,15 +1,56 @@
 <template>
-    <nav class="h-[4rem] fixed top-0 left-0 w-full bg-white dark:bg-gray-700 bg-opacity-80 backdrop-blur-lg z-[9950]">
-
+    <nav class="sticky top-0 z-[9900] md:relative container mx-auto max-w-screen-xl h-16 lg:h-20 grid items-center grid-cols-2 md:grid-cols-4 lg:grid-cols-6 p-4">
+        <div class="">
+            <GNuxtLink :to="localePath('/')" class="flex items-center space-x-2 hover:opacity-80">
+                <MiIcon class="h-8 w-8" />
+                <div class="font-title font-bold text-lg">{{ $t('_seo.siteName') }}</div>
+            </GNuxtLink>
+        </div>
+        <ul class="hidden lg:col-span-4 lg:space-x-8 xl:space-x-10 lg:flex justify-center">
+            <li v-for="item in NavData.center">
+                <GNuxtLink :to="localePath(item.to)" :class="['rounded-full px-4 py-1.5 hover:bg-slate-300 dark:hover:bg-slate-700 hover:bg-opacity-50 bg-blend-multiply', { 'bg-slate-200 dark:bg-slate-800': path.includes(item.to) }]">
+                    <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
+                    <template v-else>
+                        {{ $t(item.i18n) }}
+                    </template>
+                </GNuxtLink>
+            </li>
+        </ul>
+        <div>
+            <ul class="hidden lg:col-span-4 lg:space-x-4 lg:flex justify-center">
+                <li class="relative group">
+                    <a class="hover:opacity-80" href="#"><I18nIcon class="h-5 w-5" /><span class="sr-only">{{ $t('_nav.switchLang') }}</span></a>
+                    <div class="absolute top-6 right-0 hidden group-hover:block z-[9955]">
+                        <ul class="px-4 py-2 bg-slate-50 dark:bg-slate-700 rounded-lg shadow-lg space-y-1">
+                            <li v-for="locale in locales">
+                                <GNuxtLink :to="switchLocalePath(locale.code)" class="hover:text-accent-600">
+                                    {{ locale.name }}
+                                </GNuxtLink>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="border-l"></li>
+                <li v-for="item in NavData.right">
+                    <GNuxtLink :to="item.to" class="hover:opacity-80">
+                        <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
+                        <template v-else>
+                            {{ $t(item.i18n) }}
+                        </template>
+                    </GNuxtLink>
+                </li>
+            </ul>
+        </div>
     </nav>
 </template>
 
-<script setup lang="ts">
-defineProps<{
-    isOpen: boolean;
-}>();
+<script setup>
+import MiIcon from '@/assets/svg/misskey_mi_bi.svg';
+import I18nIcon from 'bi/translate.svg';
+import NavData from '@/assets/data/nav';
+
+const { locales } = useI18n();
+const { path } = useRoute();
+const switchLocalePath = useSwitchLocalePath();
+const localePath = useLocalePath();
 </script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/components/index/Nav.vue b/components/index/Nav.vue
index fb8433eb..52477c3c 100644
--- a/components/index/Nav.vue
+++ b/components/index/Nav.vue
@@ -3,7 +3,7 @@
         <div class="">
             <GNuxtLink to="/" class="flex items-center space-x-2 hover:opacity-80">
                 <MiIcon class="h-8 w-8" />
-                <div class="font-title font-bold text-lg">Misskey Hub</div>
+                <div class="font-title font-bold text-lg">{{ $t('_seo.siteName') }}</div>
             </GNuxtLink>
         </div>
         <ul class="hidden lg:col-span-4 lg:space-x-8 xl:space-x-10 lg:flex justify-center">
diff --git a/components/servers/Item.vue b/components/servers/Item.vue
new file mode 100644
index 00000000..dfb9af27
--- /dev/null
+++ b/components/servers/Item.vue
@@ -0,0 +1,17 @@
+<template>
+    <div>
+        
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { InstanceItem } from 'types/instances-info';
+
+defineProps<{
+    instance: InstanceItem;
+}>()
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 48be9dec..7e318f60 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -72,4 +72,29 @@ _landing:
       docs: "ドキュメントを見る"
   _donation:
     title: "寄付のお願い"
-    description: "Misskeyは非営利なため、開発資金は皆様からの寄付に頼っています。Misskeyを気に入られたら、今後も開発を続けられるようにぜひ支援をお願いします。"
\ No newline at end of file
+    description: "Misskeyは非営利なため、開発資金は皆様からの寄付に頼っています。Misskeyを気に入られたら、今後も開発を続けられるようにぜひ支援をお願いします。"
+_servers:
+  title: "サーバー一覧"
+  description: "Misskeyは単一のサービスではなく、各々がサービスを提供する分散型ネットワークとなっています。Misskeyを利用するには、サービスを提供しているサーバーでアカウントを作成する必要があります。"
+  addYourServer: "あなたのサーバーが表示されませんか？{0}から登録してください！"
+  addYourServerLink: "こちら"
+  _system:
+    fetchError: "データの読み込みに失敗しました。後でもう一度お試しください。"
+  _statistics:
+    notes: "ノート数"
+    users: "ユーザー数"
+    servers: "サーバー数"
+  _search:
+    title: "絞り込み検索"
+    all: "すべて"
+    lang: "言語"
+    orderBy: "並び替え"
+    recomendded: "デフォルト"
+    notesCount: "ノート数"
+    usersCount: "ユーザー数"
+    _registerAcceptance:
+      title: "新規登録"
+      public: "開放"
+      inviteOnly: "招待のみ"
+
+    
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ba285cf5..b498f78f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,6 +7,7 @@ export default defineNuxtConfig({
 	devtools: { enabled: true },
 	css: [
 		"@/assets/css/tailwind.css",
+		"@/assets/css/bootstrap-forms.scss",
 	],
 	modules: [
 		'@nuxt/content',
diff --git a/package.json b/package.json
index 9bf200a6..29b35aab 100644
--- a/package.json
+++ b/package.json
@@ -18,11 +18,13 @@
     "@types/three": "^0.153.0",
     "@types/tinycolor2": "^1.4.3",
     "autoprefixer": "^10.4.14",
+    "bootstrap": "^5.3.0",
     "bootstrap-icons": "^1.10.5",
     "github-markdown-css": "^5.2.0",
     "meshline": "^3.1.6",
     "nuxt": "^3.6.2",
     "postcss": "^8.4.25",
+    "sass": "^1.63.6",
     "schema-dts": "^1.1.2",
     "sitemap": "^7.1.1",
     "tailwindcss": "^3.3.2",
diff --git a/pages/servers.vue b/pages/servers.vue
index 8e8347fc..368abe12 100644
--- a/pages/servers.vue
+++ b/pages/servers.vue
@@ -1,13 +1,107 @@
 <template>
     <div>
+        <GHero>
+            <template #title>{{ $t('_servers.title') }}</template>
+            <template #description>
+                {{ $t('_servers.description') }}<br>
+                <I18nT keypath="_servers.addYourServer" tag="span">
+                    <NuxtLink class="font-bold hover:underline underline-offset-4" to="https://github.com/joinmisskey/api">{{ $t('_servers.addYourServerLink') }}</NuxtLink>
+                </I18nT>
+            </template>
+            <template #icon>
+                <div class="relative px-6 py-8">
+                    <GDots class="absolute top-0 left-0 w-32 h-32 text-accent-600" />
+                    <GDots class="absolute bottom-0 right-0 w-32 h-32 text-accent-600" />
+                    <div class="relative bg-white dark:bg-slate-800 shadow-lg rounded-lg lg:w-72 p-6 space-y-4">
+                        <dl>
+                            <dt>{{ $t('_servers._statistics.notes') }}</dt>
+                            <dd class="font-bold text-accent-600 text-2xl">{{ data?.stats.notesCount.toLocaleString() }}</dd>
+                        </dl>
+                        <dl>
+                            <dt>{{ $t('_servers._statistics.users') }}</dt>
+                            <dd class="font-bold text-accent-600 text-2xl">{{ data?.stats.usersCount.toLocaleString() }}</dd>
+                        </dl>
+                        <dl>
+                            <dt>{{ $t('_servers._statistics.servers') }}</dt>
+                            <dd class="font-bold text-accent-600 text-2xl">{{ data?.stats.instancesCount.toLocaleString() }}</dd>
+                        </dl>
+                    </div>
+                </div>
+            </template>
+        </GHero>
+        <div class="mt-12 pt-6 bg-white dark:bg-slate-950">
+            <div class="container mx-auto max-w-screen-xl px-6 grid server-list gap-8">
+                <aside class="hidden lg:block">
+                    <div class="sticky top-6 py-2 space-y-4">
+                        <h3 class="text-xl font-bold">絞り込み検索</h3>
+                        <div>
+                            <label class="form-label" for="languages">{{ $t('_servers._search.lang') }}</label>
+                            <select id="languages" class="form-select">
+                                <option :value="null">{{ $t('_servers._search.all') }}</option>
+                                <option v-for="lang in langs" :value="lang.lang">{{ lang.label }}</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="form-label" for="orderBy">{{ $t('_servers._search.orderBy') }}</label>
+                            <select id="orderBy" class="form-select">
+                                <option value="recomendded">{{ $t('_servers._search.recomendded') }}</option>
+                                <option value="notesCount">{{ $t('_servers._search.notesCount') }}</option>
+                                <option value="usersCount">{{ $t('_servers._search.usersCount') }}</option>
+                            </select>
+                        </div>
+                        <div>
+                            <div class="mb-1">{{ $t('_servers._search._registerAcceptance.title') }}</div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="radio" name="registerAcceptance" :value="null" id="registerAcceptance0">
+                                <label class="form-check-label" for="registerAcceptance0">
+                                    {{ $t('_servers._search.all') }}
+                                </label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="radio" name="registerAcceptance" value="public" id="registerAcceptance1">
+                                <label class="form-check-label" for="registerAcceptance1">
+                                    {{ $t('_servers._search._registerAcceptance.public') }}
+                                </label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="radio" name="registerAcceptance" value="inviteOnly" id="registerAcceptance2">
+                                <label class="form-check-label" for="registerAcceptance2">
+                                    {{ $t('_servers._search._registerAcceptance.inviteOnly') }}
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+                <div class="grid gap-4 grid-cols-1 lg:grid-cols-3 xl:grid-cols-4">
 
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import type { InstanceInfo } from '@/types/instances-info';
+import langs from '@/assets/data/lang';
+
+const { t, locale } = useI18n();
+const route = useRoute();
+
+route.meta.title = t('_servers.title');
+route.meta.description = t('_servers.description');
+
+const { data } = await useFetch<InstanceInfo>('https://instanceapp.misskey.page/instances.json', {
+    onRequestError: () => {
+        alert(t('_servers._system.fetchError'));
+    }
+});
 
 </script>
 
 <style scoped>
-
+@screen lg {
+    .server-list {
+        grid-template-columns: 300px 1fr;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index da3d3c2b..d8fa7faa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ devDependencies:
   autoprefixer:
     specifier: ^10.4.14
     version: 10.4.14(postcss@8.4.25)
+  bootstrap:
+    specifier: ^5.3.0
+    version: 5.3.0(@popperjs/core@2.11.8)
   bootstrap-icons:
     specifier: ^1.10.5
     version: 1.10.5
@@ -43,10 +46,13 @@ devDependencies:
     version: 3.1.6(three@0.154.0)
   nuxt:
     specifier: ^3.6.2
-    version: 3.6.2(@types/node@18.0.0)(typescript@5.1.6)
+    version: 3.6.2(@types/node@18.0.0)(sass@1.63.6)(typescript@5.1.6)
   postcss:
     specifier: ^8.4.25
     version: 8.4.25
+  sass:
+    specifier: ^1.63.6
+    version: 1.63.6
   schema-dts:
     specifier: ^1.1.2
     version: 1.1.2(typescript@5.1.6)
@@ -897,6 +903,11 @@ packages:
     engines: {node: '>= 16'}
     dev: true
 
+  /@intlify/shared@9.3.0-beta.24:
+    resolution: {integrity: sha512-AKxJ8s7eKIQWkNaf4wyyoLRwf4puCuQgjSChlDJm5JBEt6T8HGgnYTJLRXu6LD/JACn3Qwu6hM/XRX1c9yvjmQ==}
+    engines: {node: '>= 16'}
+    dev: true
+
   /@intlify/unplugin-vue-i18n@0.12.1(vue-i18n@9.3.0-beta.22):
     resolution: {integrity: sha512-gdWRdlOWC8x/OyvVk5qnGnvScMj+PRZaTB4LBf24l7X1dhGYVrQVt2dAZt97tSpEwRRxy4vBaL/qBqKN4kkaRw==}
     engines: {node: '>= 14.16'}
@@ -1067,7 +1078,7 @@ packages:
       '@rollup/pluginutils': 5.0.2(rollup@3.26.2)
       js-yaml: 4.1.0
       tosource: 2.0.0-alpha.3
-      vite: 4.4.2(@types/node@18.0.0)
+      vite: 4.4.2(@types/node@18.0.0)(sass@1.63.6)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -1230,8 +1241,8 @@ packages:
       '@nuxt/kit': 3.6.2
       '@nuxt/schema': 3.6.2
       execa: 7.1.1
-      nuxt: 3.6.2(@types/node@18.0.0)(typescript@5.1.6)
-      vite: 4.4.2(@types/node@18.0.0)
+      nuxt: 3.6.2(@types/node@18.0.0)(sass@1.63.6)(typescript@5.1.6)
+      vite: 4.4.2(@types/node@18.0.0)(sass@1.63.6)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -1279,7 +1290,7 @@ packages:
       launch-editor: 2.6.0
       local-pkg: 0.4.3
       magicast: 0.2.9
-      nuxt: 3.6.2(@types/node@18.0.0)(typescript@5.1.6)
+      nuxt: 3.6.2(@types/node@18.0.0)(sass@1.63.6)(typescript@5.1.6)
       nypm: 0.2.2
       pacote: 15.2.0
       pathe: 1.1.1
@@ -1290,7 +1301,7 @@ packages:
       semver: 7.5.3
       sirv: 2.0.3
       unimport: 3.0.14(rollup@3.26.2)
-      vite: 4.4.2(@types/node@18.0.0)
+      vite: 4.4.2(@types/node@18.0.0)(sass@1.63.6)
       vite-plugin-inspect: 0.7.32(vite@4.4.2)
       vite-plugin-vue-inspector: 3.4.2(vite@4.4.2)
       wait-on: 7.0.1
@@ -1381,7 +1392,7 @@ packages:
     resolution: {integrity: sha512-MSZza7dxccNb/p7nuzGF8/m4POaFpHzVhNdR7f4xahOpH7Ja02lFeYR+rHtoHIJC0yym4qriqv0mQ+Qf/R61bQ==}
     dev: true
 
-  /@nuxt/vite-builder@3.6.2(@types/node@18.0.0)(typescript@5.1.6)(vue@3.3.4):
+  /@nuxt/vite-builder@3.6.2(@types/node@18.0.0)(sass@1.63.6)(typescript@5.1.6)(vue@3.3.4):
     resolution: {integrity: sha512-+JOWj8f5W5CKTHCPUhcuHrIIfOJHMdOaRfWA6DiIK8xPUQ5b3i737GQ9CRoSBHr9EaySJVuYjs6ptT6r0t7Spg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -1418,8 +1429,8 @@ packages:
       strip-literal: 1.0.1
       ufo: 1.1.2
       unplugin: 1.3.2
-      vite: 4.3.9(@types/node@18.0.0)
-      vite-node: 0.32.4(@types/node@18.0.0)
+      vite: 4.3.9(@types/node@18.0.0)(sass@1.63.6)
+      vite-node: 0.32.4(@types/node@18.0.0)(sass@1.63.6)
       vite-plugin-checker: 0.6.1(typescript@5.1.6)(vite@4.3.9)
       vue: 3.3.4
       vue-bundle-renderer: 1.0.3
@@ -1509,6 +1520,10 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@popperjs/core@2.11.8:
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+    dev: true
+
   /@rollup/plugin-alias@5.0.0(rollup@3.26.2):
     resolution: {integrity: sha512-l9hY5chSCjuFRPsnRm16twWBiSApl2uYFLsepQYwtBuAxNMQ/1dJqADld40P0Jkqm65GRTLy/AC6hnpVebtLsA==}
     engines: {node: '>=14.0.0'}
@@ -1864,7 +1879,7 @@ packages:
       '@babel/core': 7.22.8
       '@babel/plugin-transform-typescript': 7.22.5(@babel/core@7.22.8)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.22.8)
-      vite: 4.3.9(@types/node@18.0.0)
+      vite: 4.3.9(@types/node@18.0.0)(sass@1.63.6)
       vue: 3.3.4
     transitivePeerDependencies:
       - supports-color
@@ -1877,7 +1892,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.9(@types/node@18.0.0)
+      vite: 4.3.9(@types/node@18.0.0)(sass@1.63.6)
       vue: 3.3.4
     dev: true
 
@@ -2324,6 +2339,14 @@ packages:
     resolution: {integrity: sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==}
     dev: true
 
+  /bootstrap@5.3.0(@popperjs/core@2.11.8):
+    resolution: {integrity: sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==}
+    peerDependencies:
+      '@popperjs/core': ^2.11.7
+    dependencies:
+      '@popperjs/core': 2.11.8
+    dev: true
+
   /boxen@7.1.1:
     resolution: {integrity: sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==}
     engines: {node: '>=14.16'}
@@ -4074,6 +4097,10 @@ packages:
     engines: {node: '>=10.18.0'}
     dev: true
 
+  /immutable@4.3.0:
+    resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
+    dev: true
+
   /imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -5586,7 +5613,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /nuxt@3.6.2(@types/node@18.0.0)(typescript@5.1.6):
+  /nuxt@3.6.2(@types/node@18.0.0)(sass@1.63.6)(typescript@5.1.6):
     resolution: {integrity: sha512-nzxXEKyjBUjRIfP/vojFdZ9RbpaiVftatT+p5tzJGea8beocRB2XsZ0hcDtmMuOcF6glQjG3EIsVu2p9Ckz/Kg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
@@ -5602,7 +5629,7 @@ packages:
       '@nuxt/schema': 3.6.2
       '@nuxt/telemetry': 2.3.1
       '@nuxt/ui-templates': 1.2.0
-      '@nuxt/vite-builder': 3.6.2(@types/node@18.0.0)(typescript@5.1.6)(vue@3.3.4)
+      '@nuxt/vite-builder': 3.6.2(@types/node@18.0.0)(sass@1.63.6)(typescript@5.1.6)(vue@3.3.4)
       '@types/node': 18.0.0
       '@unhead/ssr': 1.1.30
       '@unhead/vue': 1.1.30(vue@3.3.4)
@@ -6699,6 +6726,16 @@ packages:
     dev: true
     optional: true
 
+  /sass@1.63.6:
+    resolution: {integrity: sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.0
+      source-map-js: 1.0.2
+    dev: true
+
   /sax@1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
     dev: true
@@ -7661,7 +7698,7 @@ packages:
       vfile-message: 3.1.4
     dev: true
 
-  /vite-node@0.32.4(@types/node@18.0.0):
+  /vite-node@0.32.4(@types/node@18.0.0)(sass@1.63.6):
     resolution: {integrity: sha512-L2gIw+dCxO0LK14QnUMoqSYpa9XRGnTTTDjW2h19Mr+GR0EFj4vx52W41gFXfMLqpA00eK4ZjOVYo1Xk//LFEw==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -7671,7 +7708,7 @@ packages:
       mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.3.9(@types/node@18.0.0)
+      vite: 4.3.9(@types/node@18.0.0)(sass@1.63.6)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -7727,7 +7764,7 @@ packages:
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.1
       typescript: 5.1.6
-      vite: 4.3.9(@types/node@18.0.0)
+      vite: 4.3.9(@types/node@18.0.0)(sass@1.63.6)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.8
@@ -7747,7 +7784,7 @@ packages:
       open: 9.1.0
       picocolors: 1.0.0
       sirv: 2.0.3
-      vite: 4.4.2(@types/node@18.0.0)
+      vite: 4.4.2(@types/node@18.0.0)(sass@1.63.6)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -7767,7 +7804,7 @@ packages:
       kolorist: 1.8.0
       magic-string: 0.30.1
       shell-quote: 1.8.1
-      vite: 4.4.2(@types/node@18.0.0)
+      vite: 4.4.2(@types/node@18.0.0)(sass@1.63.6)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7779,7 +7816,7 @@ packages:
       svgo: 3.0.2
     dev: true
 
-  /vite@4.3.9(@types/node@18.0.0):
+  /vite@4.3.9(@types/node@18.0.0)(sass@1.63.6):
     resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -7808,11 +7845,12 @@ packages:
       esbuild: 0.17.19
       postcss: 8.4.25
       rollup: 3.26.2
+      sass: 1.63.6
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vite@4.4.2(@types/node@18.0.0):
+  /vite@4.4.2(@types/node@18.0.0)(sass@1.63.6):
     resolution: {integrity: sha512-zUcsJN+UvdSyHhYa277UHhiJ3iq4hUBwHavOpsNUGsTgjBeoBlK8eDt+iT09pBq0h9/knhG/SPrZiM7cGmg7NA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -7844,6 +7882,7 @@ packages:
       esbuild: 0.18.11
       postcss: 8.4.25
       rollup: 3.26.2
+      sass: 1.63.6
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -7934,7 +7973,7 @@ packages:
       vue-router:
         optional: true
     dependencies:
-      '@intlify/shared': 9.3.0-beta.22
+      '@intlify/shared': 9.3.0-beta.24
       '@intlify/vue-i18n-bridge': 0.8.0(vue-i18n@9.3.0-beta.22)
       '@intlify/vue-router-bridge': 0.8.0(vue@3.3.4)
       ufo: 1.1.2
diff --git a/types/instances-info.ts b/types/instances-info.ts
new file mode 100644
index 00000000..d3c98a0d
--- /dev/null
+++ b/types/instances-info.ts
@@ -0,0 +1,47 @@
+/** 各インスタンスの情報 */
+export type InstanceItem = {
+    /** Hostname (e.g. `misskey.io`) */
+    url: string;
+    /** Name (e.g. `すしすきー`) */
+    name: string;
+    /** Language the API author aqz set manually (e.g. `["ja"]`, `["zh"]`) */
+    langs: string[],
+    /** `meta.description` or the the API author aqz set manually */
+    description: string | null;
+    /** `true` only */
+    isAlive: true,
+    /** The server Value calculated from the version, etc. */
+    value: number,
+    /** Banner existance */
+    banner: boolean;
+    /** Background Image existance */
+    background: boolean;
+    /** Icon Image existance */
+    icon: boolean;
+    /** nodeinfo */
+    nodeinfo: Object | null,
+    /** result of api/meta */
+    meta: Object | null,
+
+    stats?: Object,   //  deprecated (result of api/stats)
+};
+
+/** JSON Object Returned from `joinmisskey/api`. */
+export type InstanceInfo = {
+    /** The date instances.json was published at. */
+    date: string;
+    /** Statistics */
+    stats: {
+        /** Total notes */
+        notesCount: number;
+        /** Total Users */
+        usersCount: number;
+        /** Total MAUs */
+        mau: number;
+        /** Servers counter */
+        instancesCount: number;
+    },
+    /** Instance List */
+    instancesInfos: InstanceItem[];
+
+}
\ No newline at end of file