(add) server page

app.vue

@@ -54,6 +54,7 @@ const getLdJson = (additionalGraphes: Thing[] = []): string => {
 useHead((): Record<string, any> => ({
     htmlAttrs: {
         lang: locale.value,
+        'data-bs-theme': colorMode.value,
     },
     title: getTitle(),
     meta: [
@@ -84,7 +85,7 @@ useHead((): Record<string, any> => ({
 }));
 </script>
 <template>
-	<div class="text-slate-700 dark:text-slate-200 bg-slate-100 dark:bg-gray-900">
+	<div class="text-slate-800 dark:text-slate-200 bg-slate-100 dark:bg-gray-900">
 		<noscript class="block bg-accent-800 text-white text-center py-1.5 px-3 keep-all relative z-[10005]">Please turn on Javascript from your browser's settings.</noscript>
 		<NuxtLayout>
 			<NuxtPage />

assets/data/lang.ts

@@ -9,23 +9,23 @@ export default [
     },
     {
         "lang": "es",
-        "label": "español"
+        "label": "Español"
     },
     {
         "lang": "es-419",
-        "label": "español (Latinoamérica)"
+        "label": "Español (Latinoamérica)"
     },
     {
         "lang": "fr",
-        "label": "français"
+        "label": "Français"
     },
     {
         "lang": "hr",
-        "label": "hrvatski"
+        "label": "Hrvatski"
     },
     {
         "lang": "it",
-        "label": "italiano"
+        "label": "Italiano"
     },
     {
         "lang": "nl",
@@ -33,15 +33,15 @@ export default [
     },
     {
         "lang": "pl",
-        "label": "polski"
+        "label": "Polski"
     },
     {
         "lang": "pt-BR",
-        "label": "português (Brasil)"
+        "label": "Português (Brasil)"
     },
     {
         "lang": "pt-PT",
-        "label": "português (Portugal)"
+        "label": "Português (Portugal)"
     },
     {
         "lang": "vi",

assets/js/misc/index.ts

@@ -0,0 +1,14 @@
+export function resolveObjPath(o: object, s: string): any {
+    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
+    s = s.replace(/^\./, '');           // strip a leading dot
+    var a = s.split('.');
+    for (var i = 0, n = a.length; i < n; ++i) {
+        var k = a[i];
+        if (k in o) {
+            o = o[k];
+        } else {
+            return;
+        }
+    }
+    return o;
+}

components/g/Footer.vue

@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <footer>
         
-    </div>
+    </footer>
 </template>
 
 <script setup lang="ts">

components/g/Nav.vue

@@ -1,5 +1,6 @@
 <template>
-    <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="['bg-slate-100 dark:bg-gray-900 bg-opacity-80 backdrop-blur-lg sticky top-0 z-[9900]', { 'shadow': scrollPos >= 40 }]">
+        <nav class="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" />
@@ -8,7 +9,7 @@
             </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) }]">
+                    <GNuxtLink :to="localePath(item.to)" :class="['rounded-full px-4 py-1.5 hover:bg-slate-300 dark:hover:bg-slate-800 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) }}
@@ -18,12 +19,21 @@
             </ul>
             <div>
                 <ul class="hidden lg:col-span-4 lg:space-x-4 lg:flex justify-center">
+                    <li>
+                        <button class="hover:opacity-80" @click="rotateColorMode()" aria-label="Change Color Mode">
+                            <ClientOnly>
+                                <SunIcon class="h-5 w-5" v-if="colorMode.preference === 'light'" />
+                                <MoonIcon class="h-5 w-5" v-else-if="colorMode.preference === 'dark'" />
+                                <DisplayIcon class="h-5 w-5" v-else />
+                            </ClientOnly>
+                        </button>
+                    </li>
                     <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">
+                            <ul class="px-4 py-2 bg-slate-50 dark:bg-slate-800 rounded-lg shadow-lg space-y-1">
                                 <li v-for="locale in locales">
-                                <GNuxtLink :to="switchLocalePath(locale.code)" class="hover:text-accent-600">
+                                    <GNuxtLink :to="switchLocalePath(locale.code)" :class="['hover:text-accent-600 py-1', {'text-accent-600 font-bold': currentLocale === locale.code}]">
                                         {{ locale.name }}
                                     </GNuxtLink>
                                 </li>
@@ -42,15 +52,47 @@
                 </ul>
             </div>
         </nav>
+    </div>
 </template>
 
 <script setup>
 import MiIcon from '@/assets/svg/misskey_mi_bi.svg';
 import I18nIcon from 'bi/translate.svg';
+import SunIcon from 'bi/sun.svg';
+import MoonIcon from 'bi/moon-stars.svg';
+import DisplayIcon from 'bi/display.svg';
 import NavData from '@/assets/data/nav';
 
-const { locales } = useI18n();
+const { locales, locale: currentLocale } = useI18n();
 const { path } = useRoute();
 const switchLocalePath = useSwitchLocalePath();
 const localePath = useLocalePath();
+
+const colorMode = useColorMode();
+function rotateColorMode() {
+    const values = ['system', 'light', 'dark'];
+    const index = values.indexOf(colorMode.preference);
+    const next = (index + 1) % values.length;
+
+    colorMode.preference = values[next];
+}
+
+const scrollPos = ref(0);
+
+function updatePos() {
+    scrollPos.value = window.screenY;
+}
+onMounted(() => {
+    if (process.client) {
+        window.addEventListener('scroll', updatePos());
+        window.addEventListener('resize', updatePos());
+    }
+});
+
+onUnmounted(() => {
+    if (process.client) {
+        window.removeEventListener('scroll', updatePos());
+        window.removeEventListener('resize', updatePos());
+    }
+});
 </script>

components/index/Features.vue

@@ -69,7 +69,7 @@ import { vFadeIn } from '@/assets/js/fadein';
 }
 
 .item > .content {
-    @apply p-5 bg-white dark:bg-slate-700 rounded-xl;
+    @apply p-5 bg-white dark:bg-slate-800 rounded-xl;
 }
 
 .item .img {

components/index/GetStarted.vue

@@ -38,7 +38,7 @@ const localePath = useLocalePath();
 
 <style scoped>
 .item {
-    @apply rounded-2xl py-12 px-4 text-center bg-white dark:bg-slate-700;
+    @apply rounded-2xl py-12 px-4 text-center bg-white dark:bg-slate-800;
 }
 
 .find > .item {
@@ -54,10 +54,10 @@ const localePath = useLocalePath();
 }
 
 .item > .link {
-    @apply px-6 py-3 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors font-bold text-lg;
+    @apply px-6 py-3 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors font-bold text-lg;
 }
 
 .find .link {
-    @apply text-accent-600 bg-white hover:bg-accent-100;
+    @apply text-accent-600 dark:text-slate-200 bg-white dark:bg-accent-950 hover:bg-accent-100 dark:hover:bg-accent-900;
 }
 </style>

components/index/Nav.vue

@@ -18,12 +18,21 @@
         </ul>
         <div>
             <ul class="hidden lg:col-span-4 lg:space-x-4 lg:flex justify-center">
+                <li>
+                    <button class="text-white hover:opacity-80" @click="rotateColorMode()" aria-label="Change Color Mode">
+                        <ClientOnly>
+                            <SunIcon class="h-5 w-5" v-if="colorMode.preference === 'light'" />
+                            <MoonIcon class="h-5 w-5" v-else-if="colorMode.preference === 'dark'" />
+                            <DisplayIcon class="h-5 w-5" v-else />
+                        </ClientOnly>
+                    </button>
+                </li>
                 <li class="relative group">
                     <a class="text-white 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">
+                        <ul class="px-4 py-2 bg-slate-50 dark:bg-slate-800 rounded-lg shadow-lg space-y-2">
                             <li v-for="locale in locales">
-                                <GNuxtLink :to="switchLocalePath(locale.code)" class="hover:text-accent-600">
+                                <GNuxtLink :to="switchLocalePath(locale.code)" :class="['hover:text-accent-600 py-1', {'text-accent-600 font-bold': currentLocale === locale.code}]">
                                     {{ locale.name }}
                                 </GNuxtLink>
                             </li>
@@ -48,9 +57,21 @@
 <script setup>
 import MiIcon from '@/assets/svg/misskey_mi_bi.svg';
 import I18nIcon from 'bi/translate.svg';
+import SunIcon from 'bi/sun.svg';
+import MoonIcon from 'bi/moon-stars.svg';
+import DisplayIcon from 'bi/display.svg';
 import NavData from '@/assets/data/nav';
 
-const { locales } = useI18n();
+const { locales, locale: currentLocale } = useI18n();
 const switchLocalePath = useSwitchLocalePath();
 const localePath = useLocalePath();
+
+const colorMode = useColorMode();
+function rotateColorMode() {
+    const values = ['system', 'light', 'dark'];
+    const index = values.indexOf(colorMode.preference);
+    const next = (index + 1) % values.length;
+
+    colorMode.preference = values[next];
+}
 </script>

components/index/Sponsors.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <h2 class="mb-12 text-2xl lg:text-3xl text-center font-bold font-title">{{ $t('_landing._sponsors.title') }}</h2>
+        <div class="mx-auto max-w-[240px] space-y-8 [&>*]:block">
+            <!-- スポンサーを入れるときは、リンクとアイコンを適当に並べるだけでいい感じになります -->
+            <NuxtLink to="https://rss3.io/" target="_blank">
+                <img src="/img/sponsors/rss3.svg" />
+            </NuxtLink>
+            <NuxtLink to="https://www.dotchain.ltd/advirth" target="_blank">
+                <img src="/img/sponsors/dcadvirth.png" />
+            </NuxtLink>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

components/index/hero/Particles.vue

@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 import { Loader } from '@/assets/js/particles/loader';
-import tailwindConfig from 'tailwindcss/resolveConfig';
+import resolveConfig from 'tailwindcss/resolveConfig';
 
 const colorMode = useColorMode();
 const container = ref<HTMLElement>();
@@ -16,9 +16,11 @@ const isMounted = ref<boolean>(false);
 const particleEnabled = ref<boolean>(true);
 
 const colorVars = computed<string>(() => {
-    const out = [`--c-brand: ${tailwindConfig.theme?.extend.colors.accent['600'] || '#86b300'}`]
+    const out = [`--c-brand: #86b300;`];
-    if (colorMode.preference == 'dark') {
+    if (colorMode.value == 'dark') {
-        out.join(`--c-text: `)
+        out.push(`--c-text: rgb(226 232 240);`);
+    } else {
+        out.push(`--c-text: rgb(51 65 85);`);
     }
     return out.join(' ');
 });
@@ -27,9 +29,11 @@ onMounted(() => {
     isMounted.value = true;
 });
 
+let loader: Loader;
+
 watch(container, (to) => {
     if (isMounted.value && process.client && to) {
-        const loader = new Loader(to);
+        loader = new Loader(to);
 
         window.addEventListener('scroll', () => {
             particleEnabled.value = false;
@@ -38,14 +42,15 @@ watch(container, (to) => {
             once: true,
         });
         
-
-        onUnmounted(() => {
-            setTimeout(() => {
-                loader.destroy();
-            })
-        })
     }
 })
+
+onUnmounted(() => {
+    setTimeout(() => {
+        loader.destroy();
+    }, 1);
+});
+
 </script>
 
 <style>

components/servers/Item.vue

@@ -1,6 +1,36 @@
 <template>
-    <div>
+    <div class="border border-gray-300 dark:border-gray-800 dark:bg-slate-800 rounded-lg shadow-lg overflow-hidden focus-within:ring-2 ring-accent-500 ring-offset-2">
-        
+        <NuxtLink :to="`https://${instance.url}`" target="_blank">
+            <div class="relative aspect-video bg-gray-200 dark:bg-gray-600">
+                <img v-if="instance.banner" :src="`https://instanceapp.misskey.page/instance-banners/${instance.url}.webp`" class="w-full h-full object-cover" />
+                <div class="absolute h-1/2 bottom-0 left-0 w-full bg-gradient-to-b from-transparent to-black text-white p-4 flex items-end">
+                    <div class="h-14 w-14 min-w-0 flex-shrink-0 mr-4">
+                        <img v-if="instance.icon" :src="`https://instanceapp.misskey.page/instance-icons/${instance.url}.webp`" class="w-full h-full" />
+                    </div>
+                    <div class="min-w-0 flex flex-col justify-end">
+                        <h2 class="font-bold text-2xl whitespace-nowrap truncate">{{ instance.name }}</h2>
+                        <p class="opacity-90 text-sm truncate">{{ instance.url }} / v.{{ instance.nodeinfo?.software.version }}</p>
+                    </div>
+                </div>
+            </div>
+            <div class="p-4">
+                <p class="description h-12 mb-2">{{ instance.description }}</p>
+                <div class="grid grid-cols-3 text-center">
+                    <dl>
+                        <dt class="text-xs opacity-90">{{ $t('_servers._statistics.notes') }}</dt>
+                        <dd class="font-bold text-accent-600">{{ instance.stats?.originalNotesCount.toLocaleString() }}</dd>
+                    </dl>
+                    <dl>
+                        <dt class="text-xs opacity-90">{{ $t('_servers._statistics.users') }}</dt>
+                        <dd class="font-bold text-accent-600">{{ instance.stats?.originalUsersCount.toLocaleString() }}</dd>
+                    </dl>
+                    <dl>
+                        <dt class="text-xs opacity-90">{{ $t('_servers._registerAcceptance.title') }}</dt>
+                        <dd class="font-bold text-accent-600">{{ instance.meta?.disableRegistration ? $t('_servers._registerAcceptance.inviteOnly') : $t('_servers._registerAcceptance.public')}}</dd>
+                    </dl>
+                </div>
+            </div>
+        </NuxtLink>
     </div>
 </template>
 
@@ -13,5 +43,12 @@ defineProps<{
 </script>
 
 <style scoped>
-
+.description {
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    display: -webkit-box;
+}
 </style>

layouts/default.vue

@@ -4,7 +4,7 @@ const isNavOpen = ref<boolean>(false);
 <template>
     <div>
         <GNav @toggleNav="isNavOpen = !isNavOpen" :is-open="isNavOpen" />
-        <div class="main-content overflow-x-hidden">
+        <div class="main-content">
             <slot></slot>
         </div>
         <GFooter />

locales/ja-JP.yml

@@ -73,6 +73,8 @@ _landing:
   _donation:
     title: "寄付のお願い"
     description: "Misskeyは非営利なため、開発資金は皆様からの寄付に頼っています。Misskeyを気に入られたら、今後も開発を続けられるようにぜひ支援をお願いします。"
+  _sponsors:
+    title: "スポンサー"
 _servers:
   title: "サーバー一覧"
   description: "Misskeyは単一のサービスではなく、各々がサービスを提供する分散型ネットワークとなっています。Misskeyを利用するには、サービスを提供しているサーバーでアカウントを作成する必要があります。"
@@ -87,6 +89,7 @@ _servers:
   _search:
     title: "絞り込み検索"
     all: "すべて"
+    query: "キーワードで検索"
     lang: "言語"
     orderBy: "並び替え"
     recomendded: "デフォルト"
@@ -96,5 +99,5 @@ _servers:
     title: "新規登録"
     public: "開放"
     inviteOnly: "招待のみ"
-
+  _list:
-    
+    showMore: "もっと見る"    

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative min-h-full">
+    <div class="relative min-h-full pb-24">
         <IndexHeroBg />
         <IndexHeroParticles />
         <IndexNav />
@@ -16,6 +16,7 @@
             <IndexGetStarted id="getStarted" />
             <GDots class="w-[95%] mx-auto text-accent-600" :space="30" />
             <IndexDonation />
+            <IndexSponsors />
         </main>
     </div>
 </template>

pages/servers.vue

@@ -29,51 +29,71 @@
                 </div>
             </template>
         </GHero>
-        <div class="mt-12 pt-6 bg-white dark:bg-slate-950">
+        <div class="my-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">
+                    <div class="sticky top-24 py-2 space-y-4">
-                        <h3 class="text-xl font-bold">絞り込み検索</h3>
+                        <h3 class="text-xl font-bold">{{ $t('_servers._search.title') }}</h3>
+                        <form @submit.prevent="() => { f_query = f_query_partial }">
+                            <label class="form-label" for="query">{{ $t('_servers._search.query') }}</label>
+                            <div class="input-group">
+                                <input class="form-control" type="search" autocomplete="off" id="query" v-model="f_query_partial" />
+                                <button type="submit" class="btn btn-outline-primary hover:!text-white">
+                                    <SearchIco class="stroke-[0.5] stroke-current" />
+                                </button>
+                            </div>
+                        </form>
                         <div>
                             <label class="form-label" for="languages">{{ $t('_servers._search.lang') }}</label>
-                            <select id="languages" class="form-select">
+                            <select id="languages" v-model="f_langs" 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">
+                            <div class="input-group">
+                                <select id="orderBy" v-model="f_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>
+                                <button class="btn btn-outline-primary hover:!text-white" @click="switchOrder()">
+                                    <SortDownIco v-if="f_order === 'desc'" class="stroke-[0.5] stroke-current" />
+                                    <SortUpIco v-else class="stroke-[0.5] stroke-current" />
+                                </button>
+                            </div>
                         </div>
                         <div>
-                            <div class="mb-1">{{ $t('_servers._search._registerAcceptance.title') }}</div>
+                            <div class="mb-1">{{ $t('_servers._registerAcceptance.title') }}</div>
                             <div class="form-check">
-                                <input class="form-check-input" type="radio" name="registerAcceptance" :value="null" id="registerAcceptance0">
+                                <input class="form-check-input" type="radio" name="registerAcceptance" v-model="f_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">
+                                <input class="form-check-input" type="radio" name="registerAcceptance" v-model="f_registerAcceptance" value="public" id="registerAcceptance1">
                                 <label class="form-check-label" for="registerAcceptance1">
-                                    {{ $t('_servers._search._registerAcceptance.public') }}
+                                    {{ $t('_servers._registerAcceptance.public') }}
                                 </label>
                             </div>
                             <div class="form-check">
-                                <input class="form-check-input" type="radio" name="registerAcceptance" value="inviteOnly" id="registerAcceptance2">
+                                <input class="form-check-input" type="radio" name="registerAcceptance" v-model="f_registerAcceptance" value="inviteOnly" id="registerAcceptance2">
                                 <label class="form-check-label" for="registerAcceptance2">
-                                    {{ $t('_servers._search._registerAcceptance.inviteOnly') }}
+                                    {{ $t('_servers._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 class="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2">
+                        <ServersItem v-for="item in filteredInstances.slice(0, f_limit)" :instance="item" />
+                        <button v-if="f_limit < filteredInstances.length" @click="f_limit += 20" class="btn btn-outline-primary btn-lg hover:!text-white block sm:col-span-2 md:col-span-2 lg:col-span-2 px-4">
+                            <ArrowIco class="mr-1" />{{ $t('_servers._list.showMore') }}
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -81,12 +101,59 @@
 </template>
 
 <script setup lang="ts">
-import type { InstanceInfo } from '@/types/instances-info';
+import SearchIco from 'bi/search.svg';
+import SortUpIco from 'bi/sort-down-alt.svg';
+import SortDownIco from 'bi/sort-down.svg';
+import ArrowIco from 'bi/arrow-down-circle.svg';
+
+import type { InstanceInfo, InstanceItem } from '@/types/instances-info';
+import { resolveObjPath } from '@/assets/js/misc';
 import langs from '@/assets/data/lang';
 
 const { t, locale } = useI18n();
 const route = useRoute();
 
+// ▼フォームデータ初期化▼
+type MiHubSFStorage = {
+    f_langs: string;
+    f_orderBy: 'recomendded' | 'notesCount' | 'usersCount';
+    f_order: 'asc' | 'desc';
+    f_registerAcceptance: 'public' | 'inviteOnly' | null;
+};
+
+let savedSettings: MiHubSFStorage | null = null;
+if (process.client) {
+    savedSettings = JSON.parse(window.localStorage.getItem('miHub_server_finder') ?? 'null') as MiHubSFStorage | null;
+}
+
+const f_query_partial = ref<string>("");
+
+const f_query = ref<string>("");
+const f_langs = ref<MiHubSFStorage['f_langs']>(savedSettings?.f_langs ?? locale.value);
+const f_orderBy = ref<MiHubSFStorage['f_orderBy']>(savedSettings?.f_orderBy ?? 'recomendded');
+const f_order = ref<MiHubSFStorage['f_order']>(savedSettings?.f_order ?? 'desc');
+const f_registerAcceptance = ref<MiHubSFStorage['f_registerAcceptance']>(savedSettings?.f_registerAcceptance || null);
+
+const f_limit = ref<number>(20);
+// ▲フォームデータ初期化▲
+
+// ▼フォームデータ保存処理▼
+watch([f_langs, f_orderBy, f_order, f_registerAcceptance], (to, from) => {
+    f_limit.value = 20;
+
+    const newSettings: MiHubSFStorage = {
+        f_langs: to[0],
+        f_orderBy: to[1],
+        f_order: to[2],
+        f_registerAcceptance: to[3],
+    };
+
+    if (process.client) {
+        window.localStorage.setItem('miHub_server_finder', JSON.stringify(newSettings));
+    }
+});
+// ▲フォームデータ保存処理▲
+
 route.meta.title = t('_servers.title');
 route.meta.description = t('_servers.description');
 
@@ -96,6 +163,58 @@ const { data } = await useFetch<InstanceInfo>('https://instanceapp.misskey.page/
     }
 });
 
+const filteredInstances = computed<InstanceItem[]>(() => {
+    let instances = data.value?.instancesInfos ?? [];
+
+    if (instances.length === 0) {
+        return [];
+    }
+
+    if (f_query.value) {
+        instances = instances.filter((instance) => instance.name.includes(f_query.value) || instance.description?.includes(f_query.value));
+    }
+    if (f_langs.value) {
+        instances = instances.filter((instance) => instance.langs.includes(f_langs.value));
+    }
+    if (f_registerAcceptance.value) {
+        instances = instances.filter((instance) => {
+            if (f_registerAcceptance.value === 'inviteOnly') {
+                return instance.meta?.disableRegistration;
+            } else {
+                return !instance.meta?.disableRegistration ?? true;
+            }
+        });
+    }
+    if (f_orderBy.value) {
+        instances.sort((a, b) => {
+            let orderKey: string;
+            
+            switch(f_orderBy.value) {
+                case 'recomendded':
+                    orderKey = 'value';
+                    break;
+                case 'notesCount':
+                    orderKey = 'stats.originalNotesCount';
+                    break;
+                case 'usersCount':
+                    orderKey = 'stats.originalUsersCount';
+                    break;
+            }
+
+            if (f_order.value === 'desc') {
+                return resolveObjPath(a, orderKey) > resolveObjPath(b, orderKey) ? -1 : 1;
+            } else {
+                return resolveObjPath(a, orderKey) < resolveObjPath(b, orderKey) ? -1 : 1;
+            }
+        });
+    }
+
+    return instances;
+});
+
+function switchOrder() {
+    f_order.value = f_order.value === 'asc' ? 'desc' : 'asc';
+}
 </script>
 
 <style scoped>

public/fonts/fonts.css

@@ -1,4 +1,16 @@
+/** Japanese (GenjyuuGothicX) */
 @import url('./GenJyuuGothicX-Bold/GenJyuuGothicX-Bold.css');
 @import url('./GenJyuuGothicX-P-Bold/GenJyuuGothicX-P-Bold.css');
 @import url('./GenJyuuGothicX-P-Regular/GenJyuuGothicX-P-Regular.css');
 @import url('./GenJyuuGothicX-Regular/GenJyuuGothicX-Regular.css');
+/** Korean (Pretendard) */
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");
+
+html[lang='ja'] {
+    --mi-localized-font: 'GenJyuuGothicX';
+    --mi-localized-font-p: 'GenJyuuGothicXP';
+}
+
+html[lang='ko'] {
+    --mi-localized-font: 'Pretendard';
+}

public/img/sponsors/rss3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 884.33 884.33"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#0b70ff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="图层_1" data-name="图层 1"><circle class="cls-1" cx="442.16" cy="442.16" r="442.16"/><path d="M566,456.24c-8.5-12.61-29-19.34-43.67-23.3-1.71-.45-3.49-.9-5.38-1.37l-.14,0c-7.91-2-16.87-4.21-23.85-8-8-4.38-11.93-10.06-11.93-17.36a17.71,17.71,0,0,1,.33-3.53l.05-.21c.11-.52.25-1.05.41-1.59l.07-.21,0-.08a20.46,20.46,0,0,1,5.06-8c5.93-6,15.4-9.37,26-9.37h.34a56,56,0,0,1,22.56,5.31,61,61,0,0,1,18.81,13.34L554.8,417v.17H568V371.4H554.8v10.38a.46.46,0,0,1-.2.39c-.12,0-.28-.09-.36-.17a67.94,67.94,0,0,0-18.4-9.91,71,71,0,0,0-22-3.82c-8.58,0-15.6,1-21.47,2.91A41.42,41.42,0,0,0,479,378.61,35,35,0,0,0,469,391.24a35.83,35.83,0,0,0-3.45,15.18,31.8,31.8,0,0,0,1.15,9.21,34.13,34.13,0,0,0,4.49,9.29,9.21,9.21,0,0,0,.55.79l.28.38.11.16c8.67,11.92,28,17.24,42.08,21.13l.38.11,3.13.86,3.4.91a138.94,138.94,0,0,1,21.47,7.17,25.41,25.41,0,0,1,9.36,7.08,22,22,0,0,1,4.59,9.83,21.52,21.52,0,0,1-.79,10.77A27.35,27.35,0,0,1,549,494.66a32,32,0,0,1-11.42,6.51,47.65,47.65,0,0,1-12.67,2.27,63.86,63.86,0,0,1-20.42-2.31c-11.24-3.56-21.52-10.43-28.18-18.82a2.71,2.71,0,0,1-.48-.92l-.13-13.08v-.17H462.5V516h13.21V502A57.47,57.47,0,0,0,494.55,513a78.07,78.07,0,0,0,25.27,4.82h1.07c7.32,0,24.48,0,37.92-11.39A38.91,38.91,0,0,0,567.9,495a40,40,0,0,0,4.25-13.38,37.44,37.44,0,0,0-.62-13.51A31.06,31.06,0,0,0,566,456.24Z"/><path d="M435.69,456.23c-8.34-12.56-28.91-19.31-43.67-23.29-1.68-.44-3.42-.87-5.27-1.32-16-4-35.93-8.89-36.16-25.46a17.52,17.52,0,0,1,1.59-7.27,21.78,21.78,0,0,1,4.51-6.4c6-5.92,15.42-9.32,25.94-9.32H383a55.78,55.78,0,0,1,22.54,5.31,59.83,59.83,0,0,1,18.7,13.34l.26,15.21v.17h13.2V371.4H424.47v10.38c0,.14-.08.34-.2.38s-.21,0-.36-.16a67.81,67.81,0,0,0-18.4-9.91,71,71,0,0,0-22-3.82c-8.63,0-15.67,1-21.52,2.91a41.45,41.45,0,0,0-13.29,7.43,35,35,0,0,0-10.06,12.63,35.85,35.85,0,0,0-3.46,15.18,32.27,32.27,0,0,0,1.14,9.21,35.44,35.44,0,0,0,4.37,9.29c8.29,12.92,28.58,18.47,43.39,22.53l.34.09,2.94.81,3.1.83.3.08a138.94,138.94,0,0,1,21.47,7.17,25.84,25.84,0,0,1,9.4,7.13,22.09,22.09,0,0,1,4.61,9.92,21.55,21.55,0,0,1-.81,10.78,27.2,27.2,0,0,1-6.73,10.53,31.22,31.22,0,0,1-11.37,6.49,47.21,47.21,0,0,1-12.68,2.22c-.9,0-1.83.07-2.77.07A65.27,65.27,0,0,1,374,501.13c-.67-.21-1.35-.44-2-.68l-.11,0c-1.35-.48-2.7-1-4-1.6A60.43,60.43,0,0,1,350.26,487l-.26-.25c-.81-.79-1.61-1.65-2.4-2.54l-.6-.68c-.34-.41-.69-.82-1-1.24a2.71,2.71,0,0,1-.47-.91l-.13-13.08v-.17H332V516h13.35V502A57.47,57.47,0,0,0,364.22,513a78.07,78.07,0,0,0,25.27,4.82h1.06c7.29,0,24.36,0,37.93-11.39A39.07,39.07,0,0,0,437.57,495a40,40,0,0,0,4.25-13.38,37.44,37.44,0,0,0-.62-13.51A31.17,31.17,0,0,0,435.69,456.23Z"/><path d="M300.3,504.67l-36.09-54.55A39.75,39.75,0,0,0,282,446.68c7.89-4,14.23-9.08,18.12-16.58a43.67,43.67,0,0,0,4.77-20,41.62,41.62,0,0,0-12-29.21c-8.31-7.57-18.71-11.26-31.8-11.26H191.13v15.1H206v120.1H189.85v12.62h46.84V504.85H221.6V450.34h25.25l35.36,54.51H266.09v12.62h50.43V504.85H300.8A.64.64,0,0,1,300.3,504.67ZM221.6,384.06h38.68c11.88,0,21,4.72,25.62,12.83a26.83,26.83,0,0,1-.43,26.47c-4.73,8.05-10.33,12.42-22.75,12.42H221.6Z"/><path d="M692.61,473.77c0-18.12-9.16-31.2-24.34-36.81,12.9-6.78,18.56-17.88,18.56-29.33,0-26.41-22.17-40.43-51.08-40.43-15.79.12-32.65,5.38-44.1,21.5l12.05,7.83c6.38-8.65,15.54-15.31,32-15.31,21,0,35.9,8.53,35.9,24.78,0,15.54-14.94,24.18-30.24,24.18H620.57v15h22c19.52,0,34.94,10.51,34.45,28.39-1.08,19.05-17.82,29.21-39.75,29.21-14.09,0-29.76-4.44-41.44-16.94l-.61-.23L585,496.78l.49.12c14.69,13.79,32.16,20.92,51.8,20.92C667.55,517.82,692.61,501.46,692.61,473.77Z"/><rect class="cls-2" x="142.14" y="435.68" width="37.98" height="15.51"/><rect class="cls-2" x="708.4" y="435.68" width="37.98" height="15.51"/></g></g></svg>

tailwind.config.ts

@@ -31,9 +31,9 @@ export default <Config> {
       },
     },
     fontFamily: {
-      'title': ['Capriola', 'GenJyuuGothicX', ...defaultTheme.fontFamily.sans],
+      'title': ['Capriola', 'var(--mi-localized-font, \'\')', ...defaultTheme.fontFamily.sans],
-      'sans': ['Nunito', 'GenJyuuGothicX', ...defaultTheme.fontFamily.sans],
+      'sans': ['Nunito', 'var(--mi-localized-font, \'\')', ...defaultTheme.fontFamily.sans],
-      'content-sans': ['Nunito', 'GenJyuuGothicXP', ...defaultTheme.fontFamily.sans],
+      'content-sans': ['Nunito', 'var(--mi-localized-font-p, var(--mi-localized-font))', ...defaultTheme.fontFamily.sans],
     }
   },
   plugins: [],

types/instances-info.ts

@@ -19,11 +19,11 @@ export type InstanceItem = {
     /** Icon Image existance */
     icon: boolean;
     /** nodeinfo */
-    nodeinfo: Object | null,
+    nodeinfo: Record<string, any> | null,
     /** result of api/meta */
-    meta: Object | null,
+    meta: Record<string, any> | null,
 
-    stats?: Object,   //  deprecated (result of api/stats)
+    stats?: Record<string, any>,   //  deprecated (result of api/stats)
 };
 
 /** JSON Object Returned from `joinmisskey/api`. */