feat(settings): about page

components/help/HelpPreview.vue

@@ -1,41 +1,7 @@
 <script setup lang="ts">
-interface Team {
-  github: string
-  display: string
-  twitter: string
-  mastodon: string
-}
-
 const emit = defineEmits<{
   (event: 'close'): void
 }>()
-
-const teams: Team[] = [
-  {
-    github: 'antfu',
-    display: 'Anthony Fu',
-    twitter: 'antfu7',
-    mastodon: 'antfu@mas.to',
-  },
-  {
-    github: 'patak-dev',
-    display: 'Patak',
-    twitter: 'patak_dev',
-    mastodon: 'patak@webtoo.ls',
-  },
-  {
-    github: 'danielroe',
-    display: 'Daniel Roe',
-    twitter: 'danielcroe',
-    mastodon: 'daniel@roe.dev',
-  },
-  {
-    github: 'sxzz',
-    display: 'sxzz',
-    twitter: 'sanxiaozhizi',
-    mastodon: 'sxzz@mas.to',
-  },
-].sort(() => Math.random() - 0.5)
 </script>
 
 <template>

components/settings/SettingsItem.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 const props = defineProps<{
   text?: string
+  content?: string
   description?: string
   icon?: string
-  to: string | Record<string, string>
+  to?: string | Record<string, string>
   command?: boolean
 }>()
 
@@ -12,13 +13,19 @@ const router = useRouter()
 useCommand({
   scope: 'Settings',
 
-  name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name),
+  name: () => props.text
+    ?? (props.to
+      ? typeof props.to === 'string'
+        ? props.to
+        : props.to.name
+      : ''
+    ),
   description: () => props.description,
   icon: () => props.icon || '',
-  visible: () => props.command,
+  visible: () => props.command && props.to,
 
   onActivate() {
-    router.push(props.to)
+    router.push(props.to!)
   },
 })
 </script>
@@ -28,7 +35,7 @@ useCommand({
     :to="to"
     exact-active-class="text-primary"
     block w-full group focus:outline-none
-    @click="$scrollToTop"
+    @click="to ? $scrollToTop() : undefined"
   >
     <div
       w-full flex w-fit px5 py3 md:gap2 gap4 items-center
@@ -37,6 +44,7 @@ useCommand({
     >
       <div flex-1 flex items-center md:gap2 gap4>
         <div
+          v-if="$slots.icon || icon"
           flex items-center justify-center flex-shrink-0
           :class="$slots.description ? 'w-12 h-12' : ''"
         >
@@ -50,14 +58,19 @@ useCommand({
               <span>{{ text }}</span>
             </slot>
           </p>
-          <p v-if="$slots.description" text-sm text-secondary>
+          <p v-if="$slots.description || description" text-sm text-secondary>
             <slot name="description">
               {{ description }}
             </slot>
           </p>
         </div>
       </div>
-      <div i-ri:arrow-right-s-line text-xl text-secondary-light class="rtl-flip" />
+      <p v-if="$slots.content || content" text-sm text-secondary>
+        <slot name="content">
+          {{ content }}
+        </slot>
+      </p>
+      <div v-if="to" i-ri:arrow-right-s-line text-xl text-secondary-light class="rtl-flip" />
     </div>
   </NuxtLink>
 </template>

composables/about.ts

@@ -0,0 +1,33 @@
+export interface Team {
+  github: string
+  display: string
+  twitter: string
+  mastodon: string
+}
+
+export const teams: Team[] = [
+  {
+    github: 'antfu',
+    display: 'Anthony Fu',
+    twitter: 'antfu7',
+    mastodon: 'antfu@mas.to',
+  },
+  {
+    github: 'patak-dev',
+    display: 'Patak',
+    twitter: 'patak_dev',
+    mastodon: 'patak@webtoo.ls',
+  },
+  {
+    github: 'danielroe',
+    display: 'Daniel Roe',
+    twitter: 'danielcroe',
+    mastodon: 'daniel@roe.dev',
+  },
+  {
+    github: 'sxzz',
+    display: 'sxzz',
+    twitter: 'sanxiaozhizi',
+    mastodon: 'sxzz@mas.to',
+  },
+].sort(() => Math.random() - 0.5)

composables/i18n.ts

@@ -1,5 +1,4 @@
-import type { MaybeRef } from '@vueuse/shared'
-import type { MaybeComputedRef, UseTimeAgoOptions } from '@vueuse/core'
+import type { MaybeComputedRef, MaybeRef, UseTimeAgoOptions } from '@vueuse/core'
 
 const formatter = Intl.NumberFormat()
 
@@ -31,7 +30,7 @@ export const useHumanReadableNumber = () => {
 }
 
 export const useFormattedDateTime = (
-  value: MaybeComputedRef<string | Date | undefined | null>,
+  value: MaybeComputedRef<string | number | Date | undefined | null>,
   options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
 ) => {
   const { locale } = useI18n()

pages/settings.vue

@@ -20,38 +20,38 @@ const isRootPath = computedEager(() => route.name === 'settings')
             </div>
           </template>
           <div xl:w-97 lg:w-78 w-full>
-            <SettingsNavItem
+            <SettingsItem
               v-if="isHydrated && currentUser "
               command
               icon="i-ri:user-line"
               :text="$t('settings.profile.label')"
               to="/settings/profile"
             />
-            <SettingsNavItem
+            <SettingsItem
               command
               icon="i-ri-compasses-2-line"
               :text="$t('settings.interface.label')"
               to="/settings/interface"
             />
-            <SettingsNavItem
+            <SettingsItem
               command
               icon="i-ri-globe-line"
               :text="$t('settings.language.label')"
               to="/settings/language"
             />
-            <SettingsNavItem
+            <SettingsItem
               command
               icon="i-ri:settings-2-line"
               :text="$t('settings.preferences.label')"
               to="/settings/preferences"
             />
-            <SettingsNavItem
+            <SettingsItem
               command
               icon="i-ri-group-line"
               :text="$t('settings.users.label')"
               to="/settings/users"
             />
-            <SettingsNavItem
+            <SettingsItem
               command
               icon="i-ri:information-line"
               :text="$t('settings.about.label')"

pages/settings/about/index.vue

@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import buildInfo from 'virtual:build-info'
+
+let showCommit = $ref(false)
+const builtTime = useFormattedDateTime(buildInfo.time)
+
+const handleShowCommit = () => {
+  setTimeout(() => {
+    showCommit = true
+  }, 50)
+}
+</script>
+
 <template>
   <MainContent back-on-small-screen>
     <template #title>
@@ -5,13 +18,76 @@
         <span>{{ $t('settings.about.label') }}</span>
       </div>
     </template>
-    <div text-center mt-10>
-      <h1 text-4xl>
-        🚧
-      </h1>
-      <h3 text-xl>
-        {{ $t('settings.about.label') }}
-      </h3>
+
+    <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>
+            v{{ buildInfo.version }}
+            <span v-if="showCommit">({{ buildInfo.commit.slice(0, 7) }})</span>
+          </div>
+        </template>
+      </SettingsItem>
+
+      <SettingsItem text="Built time" :content="builtTime" />
+    </template>
+
+    <div h-1px bg-border my2 />
+
+    <SettingsItem
+      :text="$t('nav.show_intro')"
+      icon="i-ri:article-line"
+      cursor-pointer
+      @click="openPreviewHelp"
+    />
+
+    <SettingsItem
+      text="Mastodon"
+      icon="i-ri:mastodon-line"
+      to="https://m.webtoo.ls/@elk"
+      external target="_blank"
+    />
+    <SettingsItem
+      text="Discord"
+      icon="i-ri:discord-fill"
+      to="https://chat.elk.zone"
+      external target="_blank"
+    />
+    <SettingsItem
+      text="GitHub"
+      icon="i-ri:github-fill"
+      to="https://github.com/elk-zone"
+      external target="_blank"
+    />
+
+    <div h-1px bg-border my2 />
+
+    <template v-if="isHydrated">
+      <p px5 py3 font-bold text-lg>
+        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="`https://res.cloudinary.com/dchoja2nb/image/twitter_name/h_32,w_32/f_auto/${team.twitter}.jpg`" :alt="team.display" rounded-full w-8 h-8 height="32" width="32">
+        </template>
+      </SettingsItem>
+    </template>
   </MainContent>
 </template>

pages/settings/profile/index.vue

@@ -12,14 +12,14 @@ definePageMeta({
       </div>
     </template>
 
-    <SettingsNavItem
+    <SettingsItem
       command
       icon="i-ri:user-settings-line"
       :text="$t('settings.profile.appearance.label')"
       :description="$t('settings.profile.appearance.description')"
       to="/settings/profile/appearance"
     />
-    <SettingsNavItem
+    <SettingsItem
       command
       icon="i-ri:hashtag"
       :text="$t('settings.profile.featured_tags.label')"