elk/pages/settings/about/index.vue

130 lines
3.5 KiB
Vue
Raw Normal View History

2023-01-02 20:19:36 +00:00
<script setup lang="ts">
const buildInfo = useBuildInfo()
2023-01-04 13:57:12 +00:00
const { t } = useI18n()
useHeadFixed({
title: () => `${t('settings.about.label')} | ${t('nav.settings')}`,
})
2023-01-04 13:26:30 +00:00
let showCommit = $ref(buildInfo.env !== 'release' && buildInfo.env !== 'dev')
2023-01-02 20:19:36 +00:00
const builtTime = useFormattedDateTime(buildInfo.time)
const handleShowCommit = () => {
setTimeout(() => {
showCommit = true
}, 50)
}
</script>
2022-12-26 23:04:24 +00:00
<template>
<MainContent back-on-small-screen>
2022-12-26 23:04:24 +00:00
<template #title>
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<span>{{ $t('settings.about.label') }}</span>
</div>
</template>
2023-01-02 20:19:36 +00:00
<div flex="~ col gap4" w-full items-center justify-center my5>
2023-02-12 11:56:29 +00:00
<img :alt="$t('app_logo')" :src="`${''}/logo.svg`" w-24 h-24 class="rtl-flip">
2023-01-02 20:19:36 +00:00
<p text-lg>
{{ $t('app_desc_short') }}
</p>
2022-12-26 23:04:24 +00:00
</div>
2023-01-02 20:19:36 +00:00
<template v-if="isHydrated">
<SettingsItem
:text="$t('settings.about.version')"
2023-01-02 20:19:36 +00:00
:to="showCommit ? `https://github.com/elk-zone/elk/commit/${buildInfo.commit}` : undefined"
external target="_blank"
@click="handleShowCommit"
>
<template #content>
<div font-mono>
2023-01-04 13:26:30 +00:00
<span>{{ buildInfo.env === 'release' ? `v${buildInfo.version}` : buildInfo.env }}</span>
2023-01-04 13:41:48 +00:00
<span v-if="showCommit"> ({{ buildInfo.commit.slice(0, 7) }}@{{ buildInfo.branch }})</span>
2023-01-02 20:19:36 +00:00
</div>
</template>
</SettingsItem>
<SettingsItem :text="$t('settings.about.built_at')" :content="builtTime" />
2023-01-02 20:19:36 +00:00
</template>
<div h-1px bg-border my2 />
<SettingsItem
:text="$t('nav.show_intro')"
icon="i-ri:article-line"
cursor-pointer large
2023-01-02 20:19:36 +00:00
@click="openPreviewHelp"
/>
<SettingsItem
text="Mastodon"
icon="i-ri:mastodon-line"
to="/m.webtoo.ls/@elk"
2023-01-12 10:52:49 +00:00
large target="_blank"
2023-01-02 20:19:36 +00:00
/>
<SettingsItem
text="Discord"
icon="i-ri:discord-fill"
to="https://chat.elk.zone"
external large target="_blank"
2023-01-02 20:19:36 +00:00
/>
<SettingsItem
text="GitHub"
icon="i-ri:github-fill"
to="https://github.com/elk-zone/elk"
external large target="_blank"
2023-01-02 20:19:36 +00:00
/>
<div h-1px bg-border my2 />
<p px5 py3 font-bold text-lg>
{{ $t('settings.about.sponsors') }}
</p>
<p px5 text-secondary>
{{ $t('settings.about.sponsors_body_1') }}
</p>
<LazySettingsSponsorsList />
<p px5 mb1 text-secondary>
{{ $t('settings.about.sponsors_body_2') }}
</p>
<p px5 mb2 text-secondary>
{{ $t('settings.about.sponsors_body_3') }}
</p>
<SettingsItem
:text="$t('settings.about.sponsor_action')"
to="https://github.com/sponsors/elk-zone"
:description="$t('settings.about.sponsor_action_desc')"
external large target="_blank"
>
<template #icon>
<div i-ri-heart-3-fill text-rose rounded-full w-8 h-8 height="32" width="32" />
</template>
</SettingsItem>
<div h-1px bg-border my2 />
2023-01-02 20:19:36 +00:00
<template v-if="isHydrated">
<p px5 py3 font-bold text-lg>
{{ $t('settings.about.meet_the_team') }}
2023-01-02 20:19:36 +00:00
</p>
2023-01-02 20:19:36 +00:00
<SettingsItem
v-for="team in elkTeamMembers" :key="team.github"
2023-01-02 20:19:36 +00:00
:text="team.display"
:to="`https://github.com/sponsors/${team.github}`"
external target="_blank"
>
<template #icon>
<img :src="`/avatars/${team.github}-60x60.png`" :alt="team.display" rounded-full w-8 h-8 height="32" width="32">
2023-01-02 20:19:36 +00:00
</template>
</SettingsItem>
</template>
2022-12-26 23:04:24 +00:00
</MainContent>
</template>