diff options
Diffstat (limited to 'packages/frontend/src/pages/about.vue')
| -rw-r--r-- | packages/frontend/src/pages/about.vue | 202 |
1 files changed, 9 insertions, 193 deletions
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue index 11823cc799..f35cbe8d5a 100644 --- a/packages/frontend/src/pages/about.vue +++ b/packages/frontend/src/pages/about.vue @@ -8,113 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20"> - <div class="_gaps_m"> - <div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"> - <div style="overflow: clip;"> - <img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/> - <div :class="$style.bannerName"> - <b>{{ instance.name ?? host }}</b> - </div> - </div> - </div> - - <MkKeyValue> - <template #key>{{ i18n.ts.description }}</template> - <template #value><div v-html="sanitizeHtml(instance.description)"></div></template> - </MkKeyValue> - - <FormSection> - <div class="_gaps_m"> - <MkKeyValue :copy="version"> - <template #key>Sharkey</template> - <template #value>{{ version }}</template> - </MkKeyValue> - <div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? host })"> - </div> - <FormLink to="/about-sharkey"> - <template #icon><i class="ti ti-info-circle"></i></template> - {{ i18n.ts.aboutMisskey }} - </FormLink> - <FormLink v-if="instance.repositoryUrl || instance.providesTarball" :to="instance.repositoryUrl || `/tarball/sharkey-${version}.tar.gz`" external> - <template #icon><i class="ti ti-code"></i></template> - {{ i18n.ts.sourceCode }} - </FormLink> - <MkInfo v-else warn> - {{ i18n.ts.sourceCodeIsNotYetProvided }} - </MkInfo> - </div> - </FormSection> - - <FormSection> - <div class="_gaps_m"> - <FormSplit> - <MkKeyValue> - <template #key>{{ i18n.ts.administrator }}</template> - <template #value>{{ instance.maintainerName }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.contact }}</template> - <template #value>{{ instance.maintainerEmail }}</template> - </MkKeyValue> - </FormSplit> - <FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external> - <template #icon><i class="ti ti-user-shield"></i></template> - {{ i18n.ts.impressum }} - </FormLink> - <div class="_gaps_s"> - <MkFolder v-if="instance.serverRules.length > 0"> - <template #label> - <i class="ti ti-checkup-list"></i> - {{ i18n.ts.serverRules }} - </template> - - <ol class="_gaps_s" :class="$style.rules"> - <li v-for="(item, index) in instance.serverRules" :key="index" :class="$style.rule"><div :class="$style.ruleText" v-html="sanitizeHtml(item)"></div></li> - </ol> - </MkFolder> - <FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external> - <template #icon><i class="ti ti-license"></i></template> - {{ i18n.ts.termsOfService }} - </FormLink> - <FormLink v-if="instance.privacyPolicyUrl" :to="instance.privacyPolicyUrl" external> - <template #icon><i class="ti ti-shield-lock"></i></template> - {{ i18n.ts.privacyPolicy }} - </FormLink> - <FormLink v-if="instance.feedbackUrl" :to="instance.feedbackUrl" external> - <template #icon><i class="ti ti-message"></i></template> - {{ i18n.ts.feedback }} - </FormLink> - </div> - </div> - </FormSection> - - <FormSuspense :p="initStats"> - <FormSection> - <template #label>{{ i18n.ts.statistics }}</template> - <FormSplit> - <MkKeyValue> - <template #key>{{ i18n.ts.users }}</template> - <template #value>{{ number(stats.originalUsersCount) }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.notes }}</template> - <template #value>{{ number(stats.originalNotesCount) }}</template> - </MkKeyValue> - </FormSplit> - </FormSection> - </FormSuspense> - - <FormSection> - <template #label>Well-known resources</template> - <div class="_gaps_s"> - <FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink> - <FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink> - <FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink> - <FormLink :to="`/robots.txt`" external>robots.txt</FormLink> - <FormLink :to="`/manifest.json`" external>manifest.json</FormLink> - </div> - </FormSection> - </div> + <XOverview/> </MkSpacer> <MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20"> <XEmojis/> @@ -130,27 +24,16 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import sanitizeHtml from '@/scripts/sanitize-html.js'; -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'; -import FormSuspense from '@/components/form/suspense.vue'; -import FormSplit from '@/components/form/split.vue'; -import MkFolder from '@/components/MkFolder.vue'; -import MkKeyValue from '@/components/MkKeyValue.vue'; -import MkInfo from '@/components/MkInfo.vue'; -import MkInstanceStats from '@/components/MkInstanceStats.vue'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; -import { misskeyApi } from '@/scripts/misskey-api.js'; -import number from '@/filters/number.js'; +import { computed, defineAsyncComponent, ref, watch } from 'vue'; import { i18n } from '@/i18n.js'; -import { definePageMetadata } from '@/scripts/page-metadata.js'; import { claimAchievement } from '@/scripts/achievements.js'; -import { instance } from '@/instance.js'; +import { definePageMetadata } from '@/scripts/page-metadata.js'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; + +const XOverview = defineAsyncComponent(() => import('@/pages/about.overview.vue')); +const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue')); +const XFederation = defineAsyncComponent(() => import('@/pages/about.federation.vue')); +const MkInstanceStats = defineAsyncComponent(() => import('@/components/MkInstanceStats.vue')); const props = withDefaults(defineProps<{ initialTab?: string; @@ -158,7 +41,6 @@ const props = withDefaults(defineProps<{ initialTab: 'overview', }); -const stats = ref<Misskey.entities.StatsResponse | null>(null); const tab = ref(props.initialTab); watch(tab, () => { @@ -167,11 +49,6 @@ watch(tab, () => { } }); -const initStats = () => misskeyApi('stats', { -}).then((res) => { - stats.value = res; -}); - const headerActions = computed(() => []); const headerTabs = computed(() => [{ @@ -196,64 +73,3 @@ definePageMetadata(() => ({ icon: 'ti ti-info-circle', })); </script> - -<style lang="scss" module> -.banner { - text-align: center; - border-radius: var(--radius); - overflow: clip; - background-size: cover; - background-position: center center; -} - -.bannerIcon { - display: block; - margin: 16px auto 0 auto; - height: 64px; - border-radius: var(--radius-sm); -} - -.bannerName { - display: block; - padding: 16px; - color: #fff; - text-shadow: 0 0 8px #000; - background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); -} - -.rules { - counter-reset: item; - list-style: none; - padding: 0; - margin: 0; -} - -.rule { - display: flex; - gap: 8px; - word-break: break-word; - - &::before { - flex-shrink: 0; - display: flex; - position: sticky; - top: calc(var(--stickyTop, 0px) + 8px); - counter-increment: item; - content: counter(item); - width: 32px; - height: 32px; - line-height: 32px; - background-color: var(--accentedBg); - color: var(--accent); - font-size: 13px; - font-weight: bold; - align-items: center; - justify-content: center; - border-radius: var(--radius-ellipse); - } -} - -.ruleText { - padding-top: 6px; -} -</style> |