From c0a2aca98a585c5748dbd496414dc0f8c4c3f592 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Tue, 3 Jan 2023 04:19:36 +0800
Subject: [PATCH] feat(settings): about page

---
 components/help/HelpPreview.vue               | 34 -------
 .../{SettingsNavItem.vue => SettingsItem.vue} | 27 ++++--
 composables/about.ts                          | 33 +++++++
 composables/i18n.ts                           |  5 +-
 pages/settings.vue                            | 12 +--
 pages/settings/about/index.vue                | 90 +++++++++++++++++--
 pages/settings/profile/index.vue              |  4 +-
 7 files changed, 146 insertions(+), 59 deletions(-)
 rename components/settings/{SettingsNavItem.vue => SettingsItem.vue} (64%)
 create mode 100644 composables/about.ts

diff --git a/components/help/HelpPreview.vue b/components/help/HelpPreview.vue
index 8f5069de..2c997f22 100644
--- a/components/help/HelpPreview.vue
+++ b/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>
diff --git a/components/settings/SettingsNavItem.vue b/components/settings/SettingsItem.vue
similarity index 64%
rename from components/settings/SettingsNavItem.vue
rename to components/settings/SettingsItem.vue
index a132058a..aebe97dc 100644
--- a/components/settings/SettingsNavItem.vue
+++ b/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>
diff --git a/composables/about.ts b/composables/about.ts
new file mode 100644
index 00000000..04ab0599
--- /dev/null
+++ b/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)
diff --git a/composables/i18n.ts b/composables/i18n.ts
index c78abc83..7c4b8724 100644
--- a/composables/i18n.ts
+++ b/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()
diff --git a/pages/settings.vue b/pages/settings.vue
index e3d5162f..08a61dc4 100644
--- a/pages/settings.vue
+++ b/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')"
diff --git a/pages/settings/about/index.vue b/pages/settings/about/index.vue
index 4ae4b41d..94dc2e72 100644
--- a/pages/settings/about/index.vue
+++ b/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>
diff --git a/pages/settings/profile/index.vue b/pages/settings/profile/index.vue
index 30fe7453..4e51fe22 100644
--- a/pages/settings/profile/index.vue
+++ b/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')"