elk/components/nav/NavFooter.vue

97 lines
3.1 KiB
Vue
Raw Normal View History

2022-11-15 20:14:10 +03:00
<script setup lang="ts">
2023-02-23 14:17:28 +03:00
const buildInfo = useBuildInfo()
2022-12-02 05:18:36 +03:00
const timeAgoOptions = useTimeAgoOptions()
2023-03-21 07:20:36 +03:00
const config = useRuntimeConfig()
const userSettings = useUserSettings()
2022-12-26 22:33:19 +03:00
const buildTimeDate = new Date(buildInfo.time)
const buildTimeAgo = useTimeAgo(buildTimeDate, timeAgoOptions)
const colorMode = useColorMode()
function toggleDark() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
2022-11-15 20:14:10 +03:00
</script>
<template>
2022-11-28 02:29:21 +03:00
<footer p4 text-sm text-secondary-light flex="~ col">
<div flex="~ gap2" items-center mb4>
2022-12-27 20:49:15 +03:00
<CommonTooltip :content="$t('nav.toggle_theme')">
<button flex i-ri:sun-line dark-i-ri:moon-line text-lg :aria-label="$t('nav.toggle_theme')" @click="toggleDark()" />
2022-11-28 10:16:22 +03:00
</CommonTooltip>
2022-12-27 20:49:15 +03:00
<CommonTooltip :content="$t('nav.zen_mode')">
2022-11-28 10:16:22 +03:00
<button
flex
text-lg
:class="getPreferences(userSettings, 'zenMode') ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
2022-12-27 20:49:15 +03:00
:aria-label="$t('nav.zen_mode')"
@click="togglePreferences('zenMode')"
2022-11-28 10:16:22 +03:00
/>
</CommonTooltip>
<CommonTooltip :content="$t('settings.about.sponsor_action')">
<NuxtLink
flex
text-lg
i-ri-heart-3-line hover="i-ri-heart-3-fill text-rose"
:aria-label="$t('settings.about.sponsor_action')"
href="https://github.com/sponsors/elk-zone"
target="_blank"
/>
</CommonTooltip>
</div>
2022-12-22 12:28:03 +03:00
<div>
2023-01-03 14:15:15 +03:00
<i18n-t v-if="isHydrated" keypath="nav.built_at">
2022-12-26 22:33:19 +03:00
<time :datetime="String(buildTimeDate)" :title="$d(buildTimeDate, 'long')">{{ buildTimeAgo }}</time>
2022-12-04 21:18:39 +03:00
</i18n-t>
2023-01-03 20:24:39 +03:00
<span v-else>
{{ $t('nav.built_at', [$d(buildTimeDate, 'shortDate')]) }}
</span>
2023-01-04 16:26:30 +03:00
&middot;
<NuxtLink
v-if="buildInfo.env === 'release'"
external
:href="`https://github.com/elk-zone/elk/releases/tag/v${buildInfo.version}`"
target="_blank"
font-mono
>
v{{ buildInfo.version }}
</NuxtLink>
2023-01-04 16:26:30 +03:00
<span v-else>{{ buildInfo.env }}</span>
2022-12-26 22:33:19 +03:00
<template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
&middot;
<NuxtLink
external
2022-12-26 22:33:19 +03:00
:href="`https://github.com/elk-zone/elk/commit/${buildInfo.commit}`"
target="_blank"
font-mono
>
2023-02-23 14:17:28 +03:00
{{ buildInfo.shortCommit }}
</NuxtLink>
</template>
</div>
<div>
2023-01-03 20:24:39 +03:00
<NuxtLink cursor-pointer hover:underline to="/settings/about">
{{ $t('settings.about.label') }}
</NuxtLink>
2023-03-21 07:20:36 +03:00
<template v-if="config.public.privacyPolicyUrl">
2023-01-27 11:45:23 +03:00
&middot;
2023-03-21 07:20:36 +03:00
<NuxtLink cursor-pointer hover:underline :to="config.public.privacyPolicyUrl">
2023-01-27 11:45:23 +03:00
{{ $t('nav.privacy') }}
</NuxtLink>
</template>
2023-01-03 20:24:39 +03:00
&middot;
<NuxtLink href="/m.webtoo.ls/@elk" target="_blank">
Mastodon
</NuxtLink>
2023-01-03 20:24:39 +03:00
&middot;
<NuxtLink href="https://chat.elk.zone" target="_blank" external>
Discord
</NuxtLink>
2023-01-03 20:24:39 +03:00
&middot;
<NuxtLink href="https://github.com/elk-zone/elk" target="_blank" external>
GitHub
</NuxtLink>
2022-11-30 04:45:52 +03:00
</div>
2022-11-28 02:29:21 +03:00
</footer>
2022-11-15 20:14:10 +03:00
</template>