oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

enhance(about): refactor about page

Browse source
This commit is contained in:
オスカー、 2024-11-26 21:51:28 +09:00
parent f8070eab43
commit bf3914d59b
No known key found for this signature in database
GPG key ID: 139D6573F92DA9F7
1 changed files with 14 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

42
packages/frontend/src/pages/about.vue
View file

@ -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',