elk/pages/settings/about/index.vue

<script setup lang="ts">
const buildInfo = useBuildInfo()
const { t } = useI18n()

useHeadFixed({
  title: () => `${t('settings.about.label')} | ${t('nav.settings')}`,
})

let showCommit = $ref(buildInfo.env !== 'release' && buildInfo.env !== 'dev')
const builtTime = useFormattedDateTime(buildInfo.time)

const handleShowCommit = () => {
  setTimeout(() => {
    showCommit = true
  }, 50)
}
</script>

<template>
  <MainContent back-on-small-screen>
    <template #title>
      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
        <span>{{ $t('settings.about.label') }}</span>
      </div>
    </template>

    <div flex="~ col gap4" w-full items-center justify-center my5>
      <img :alt="$t('app_logo')" src="/logo.svg" w-24 h-24 class="rtl-flip">
      <p text-lg>
        {{ $t('app_desc_short') }}
      </p>
    </div>

    <template v-if="isHydrated">
      <SettingsItem
        text="Version"
        :to="showCommit ? `https://github.com/elk-zone/elk/commit/${buildInfo.commit}` : undefined"
        external target="_blank"
        @click="handleShowCommit"
      >
        <template #content>
          <div font-mono>
            <span>{{ buildInfo.env === 'release' ? `v${buildInfo.version}` : buildInfo.env }}</span>
            <span v-if="showCommit"> ({{ buildInfo.commit.slice(0, 7) }}@{{ buildInfo.branch }})</span>
          </div>
        </template>
      </SettingsItem>

      <SettingsItem :text="$t('nav.built_at')" :content="builtTime" />
    </template>

    <div h-1px bg-border my2 />

    <SettingsItem
      :text="$t('nav.show_intro')"
      icon="i-ri:article-line"
      cursor-pointer large
      @click="openPreviewHelp"
    />

    <SettingsItem
      text="Mastodon"
      icon="i-ri:mastodon-line"
      to="/m.webtoo.ls/@elk"
      large target="_blank"
    />
    <SettingsItem
      text="Discord"
      icon="i-ri:discord-fill"
      to="https://chat.elk.zone"
      external large target="_blank"
    />
    <SettingsItem
      text="GitHub"
      icon="i-ri:github-fill"
      to="https://github.com/elk-zone/elk"
      external large target="_blank"
    />

    <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 />

    <template v-if="isHydrated">
      <p px5 py3 font-bold text-lg>
        {{ $t('settings.about.meet_the_team') }}
      </p>

      <SettingsItem
        v-for="team in teams" :key="team.github"
        :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">
        </template>
      </SettingsItem>
    </template>
  </MainContent>
</template>