From bf3914d59bce508cf1b44500696316d37ee42754 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=AA=E3=82=B9=E3=82=AB=E3=83=BC=E3=80=81?=
 <oscar@oscar.surf>
Date: Tue, 26 Nov 2024 21:51:28 +0900
Subject: [PATCH] enhance(about): refactor about page

---
 packages/frontend/src/pages/about.vue | 42 +++++++++------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 37a57b7e8..112de1849 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
 					<div style="overflow: clip;">
 						<img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/about-icon.png" alt="" :class="$style.bannerIconAlt"/>
-						<img v-else :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
+						<img v-else :src="instance.iconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
 						<Mfm v-if="miLocalStorage.getItem('kawaii')" text="Logo by @sawaratsuki@misskey.io" :class="$style.iconCredit"/>
 						<div :class="$style.bannerName">
 							<b>{{ instance.name ?? host }}</b>
@@ -22,6 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 				<MkKeyValue>
 					<template #key>{{ i18n.ts.description }}</template>
+					<!-- eslint-disable-next-line vue/no-v-html -->
 					<template #value><div v-html="instance.description"></div></template>
 				</MkKeyValue>
 
@@ -87,6 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</template>
 
 								<ol class="_gaps_s" :class="$style.rules">
+									<!-- eslint-disable-next-line vue/no-v-html -->
 									<li v-for="(item, index) in instance.serverRules" :key="index" :class="$style.rule"><div :class="$style.ruleText" v-html="item"></div></li>
 								</ol>
 							</MkFolder>
@@ -102,13 +104,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<template #icon><i class="ti ti-message"></i></template>
 								{{ i18n.ts.support }}
 							</FormLink>
-							<!--
-							<FormLink to="https://go.misskey.io/donate" external>
+							<FormLink to="https://patreon.com/nrmaa" external>
 								<template #icon><i class="ti ti-pig-money"></i></template>
 								{{ i18n.tsx.supportThisInstance({ name: instance.name ?? host }) }}
-								<template #suffix>pixivFANBOX</template>
+								<template #suffix>Patreon</template>
 							</FormLink>
-							-->
 						</div>
 					</div>
 				</FormSection>
@@ -132,24 +132,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<FormSection>
 					<template #label>{{ i18n.ts.credits }}</template>
 					<div :class="$style.contributors">
-						<MkA to="/@oscar" :class="$style.contributor">
-							<img src="https://board.oscar.surf/contents/webpublic-90b08b25-292c-4350-8d04-bc3e36d5dde6.png" :class="$style.contributorAvatar" alt="Profile image of @oscar@oscar.surf">
-							<span :class="$style.contributorUsername">@oscar
-								<span :class="$style.contributorClient">
-									<span :class="$style.oscar">オスカー。</span>
-								</span>
-							</span>
-						</MkA>
-						<MkA to="/@oscar" :class="$style.contributor">
-							<img src="https://board.oscar.surf/contents/4b54943f-2f88-4a53-80c6-97956650e28f.png" :class="$style.contributorAvatar" alt="Profile image of @oscar@oscar.surf">
-							<span :class="$style.contributorUsername">@ion
+						<MkA v-for="user in staffs" :to="`/@${user.username}`" :class="$style.contributor">
+							<img :src="user.avatarUrl ?? '/static-assets/avatar.png'" :class="$style.contributorAvatar" :alt="`Profile image of @${user.username}@oscar.surf`">
+							<span :class="$style.contributorUsername">@{{ user.username }}
 								<span :class="$style.contributorClient">
 									<span :class="$style.oscar">オスカー。</span>
 								</span>
 							</span>
 						</MkA>
 						<MkA v-if="$i !== null" :to="`/@${$i.username}`" :class="$style.contributor">
-							<img :src="$i.avatarUrl ?? undefined" :class="$style.contributorAvatar" :alt="`Profile image of @${$i.username}@oscar.surf`">
+							<img :src="$i.avatarUrl ?? '/static-assets/avatar.png'" :class="$style.contributorAvatar" :alt="`Profile image of @${$i.username}@oscar.surf`">
 							<span :class="$style.contributorUsername">{{ `@${$i.username}` }}
 								<span :class="$style.contributorClient">
 									<span :class="$style.thankYou">{{ i18n.ts.thankYou }}</span>
@@ -182,11 +174,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
 			<XEmojis/>
 		</MkSpacer>
-		<!--
-		<MkSpacer v-else-if="tab === 'federation'" :contentMax="1000" :marginMin="20">
-			<XFederation/>
-		</MkSpacer>
-		-->
 		<MkSpacer v-else-if="tab === 'charts'" :contentMax="1000" :marginMin="20">
 			<MkInstanceStats/>
 		</MkSpacer>
@@ -198,7 +185,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XEmojis from './about.emojis.vue';
-// import XFederation from './about.federation.vue';
 import { version, host } from '@/config.js';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
@@ -227,6 +213,10 @@ const props = withDefaults(defineProps<{
 
 const stats = ref<Misskey.entities.StatsResponse | null>(null);
 const tab = ref(props.initialTab);
+const staffs = ref<Misskey.entities.User[]>([]);
+const staffIds = ['9ua5ndrtx7', '9urvwtlwo6'];
+
+staffs.value = await misskeyApi('users/show', { userIds: staffIds });
 
 watch(tab, () => {
 	if (tab.value === 'charts') {
@@ -248,11 +238,7 @@ const headerTabs = computed(() => [{
 	key: 'emojis',
 	title: i18n.ts.customEmojis,
 	icon: 'ti ti-icons',
-}, /* {
-	key: 'federation',
-	title: i18n.ts.federation,
-	icon: 'ti ti-whirl',
-}, */ {
+}, {
 	key: 'charts',
 	title: i18n.ts.charts,
 	icon: 'ti ti-chart-line',