From 4885b165df592060045b1ca116f3ae63ee7eb5e8 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 24 Nov 2022 10:38:14 +0800
Subject: [PATCH] feat: add introduce

---
 components/help/HelpPreview.vue     | 65 +++++++++++++++++++++++++++++
 components/modal/ModalContainer.vue |  5 ++-
 components/nav/NavFooter.vue        |  1 +
 composables/dialog.ts               | 15 +++++++
 constants/index.ts                  |  1 +
 unocss.config.ts                    |  1 +
 6 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 components/help/HelpPreview.vue

diff --git a/components/help/HelpPreview.vue b/components/help/HelpPreview.vue
new file mode 100644
index 00000000..17d0ba67
--- /dev/null
+++ b/components/help/HelpPreview.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+interface Team {
+  github: string
+  display: string
+  twitter: string
+  mastodon: string
+}
+
+const teams: Team[] = [
+  {
+    github: 'antfu',
+    display: 'Anthony Fu',
+    twitter: 'antfu7',
+    mastodon: 'antfu@mas.to',
+  },
+  {
+    github: 'patak-dev',
+    display: 'Patak',
+    twitter: 'patak_dev',
+    mastodon: 'patak@mas.to',
+  },
+  {
+    github: 'danielroe',
+    display: 'Daniel Roe',
+    twitter: 'danielcroe',
+    mastodon: 'daniel@daniel.roe',
+  },
+  {
+    github: 'sxzz',
+    display: 'sxzz',
+    twitter: 'sxzz',
+    mastodon: 'sxzz@mas.to',
+  },
+].sort(() => Math.random() - 0.5)
+</script>
+
+<template>
+  <div p8 flex="~ col gap-4">
+    <img src="/logo.svg" w-20 h-20 mxa alt="logo">
+    <h1 mxa text-4xl mb4>
+      Elk is in Preview!
+    </h1>
+    <p>
+      Thank you for interested in trying out Elk, our working in progress generic Mastodon client!
+    </p>
+    <p>
+      <b text-primary>You shall expect to see some features missing or some bugs here and there.</b>
+      We are working hard to make develop and improve it.
+      And we will soon invite you to join the force once we make it open source soon!
+    </p>
+    <p>
+      Before that, to help boosting out development, you can sponsor our team members with the links below.
+    </p>
+    <p flex="~ gap-2" mxa>
+      <template v-for="team of teams" :key="team.github">
+        <a :href="`https://github.com/sponsors/${team.github}`" target="_blank">
+          <img :src="`https://github.com/${team.github}.png`" :alt="team.display" rounded-full w-15 h-15>
+        </a>
+      </template>
+    </p>
+    <p italic text-2xl>
+      <span text-lg font-script>The Elk Team</span>
+    </p>
+  </div>
+</template>
diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
index 4dace15e..280b9615 100644
--- a/components/modal/ModalContainer.vue
+++ b/components/modal/ModalContainer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
+import { isPreviewHelpOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
 </script>
 
 <template>
@@ -9,4 +9,7 @@ import { isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
   <ModalDialog v-model="isSigninDialogOpen">
     <UserSignIn m6 />
   </ModalDialog>
+  <ModalDialog v-model="isPreviewHelpOpen">
+    <HelpPreview />
+  </ModalDialog>
 </template>
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index c65a343d..6b336e6c 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -8,6 +8,7 @@ const buildTimeAgo = useTimeAgo(buildTime)
 <template>
   <div p4 text-sm op25 flex="~ col">
     <button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
+    <a cursor-pointer hover:underline @click="openPreviewHelp">Show intro</a>
     <div>A Mastodon client made with 💛</div>
     <div>Built <span :title="buildTime">{{ buildTimeAgo }}</span> · <a href="https://github.com/antfu/elk" target="_blank">GitHub</a></div>
   </div>
diff --git a/composables/dialog.ts b/composables/dialog.ts
index de7afc8d..e8d56bf4 100644
--- a/composables/dialog.ts
+++ b/composables/dialog.ts
@@ -1,5 +1,10 @@
+import { STORAGE_KEY_FIRST_VISIT } from '~/constants'
+
+export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true)
+
 export const isUserSwitcherOpen = ref(false)
 export const isSigninDialogOpen = ref(false)
+export const isPreviewHelpOpen = ref(isFirstVisit.value)
 
 export function openUserSwitcher() {
   isUserSwitcherOpen.value = true
@@ -9,3 +14,13 @@ export function openSigninDialog() {
   isSigninDialogOpen.value = true
   isUserSwitcherOpen.value = false
 }
+
+export function openPreviewHelp() {
+  isPreviewHelpOpen.value = true
+}
+
+if (isPreviewHelpOpen.value) {
+  watch(isPreviewHelpOpen, () => {
+    isFirstVisit.value = false
+  })
+}
diff --git a/constants/index.ts b/constants/index.ts
index abf518de..dcc0f923 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -10,4 +10,5 @@ export const STORAGE_KEY_DRAFTS = 'elk-drafts'
 export const STORAGE_KEY_USERS = 'elk-users'
 export const STORAGE_KEY_CURRENT_USER = 'elk-current-user'
 export const STORAGE_KEY_NOTIFY_TAB = 'elk-notify-tab'
+export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit'
 
diff --git a/unocss.config.ts b/unocss.config.ts
index 073680ea..6faa57b0 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -37,6 +37,7 @@ export default defineConfig({
         sans: 'DM Sans',
         serif: 'DM Serif Display',
         mono: 'DM Mono',
+        script: 'Homemade Apple',
       },
     }),
   ],