(wip) server page

2024-11-21 16:33:48 +01:00 · 2023-07-09 18:58:53 +09:00 · 2023-07-09 18:58:53 +09:00 · 66c32554c5
commit 66c32554c5
parent 09ed2249e4
13 changed files with 436 additions and 34 deletions
--- a/assets/css/bootstrap-forms.scss
+++ 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";
--- 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;
--- a/assets/data/lang.ts
+++ 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": "日本語"
+    }
+];
--- a/components/g/Hero.vue
+++ 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>
--- 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>
--- 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">
--- a/components/servers/Item.vue
+++ 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>
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -72,4 +72,29 @@ _landing:
      docs: "ドキュメントを見る"
  _donation:
    title: "寄付のお願い"
-    description: "Misskeyは非営利なため、開発資金は皆様からの寄付に頼っています。Misskeyを気に入られたら、今後も開発を続けられるようにぜひ支援をお願いします。"
+    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: "招待のみ"
+
+    
--- 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',
--- 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",
--- 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>
--- 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
--- a/types/instances-info.ts
+++ 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[];
+
+}