feat: add friends link feature

_config.yml

@@ -1,7 +1,7 @@
 #! ---------------------------------------------------------------
 #! Aurora Theme for Hexo
 #! ---------------------------------------------------------------
-#! Designed & Coded By TriDiamond
+#! Designed & Coded By Benny Guo
 #! ---------------------------------------------------------------
 
 #! ---------------------------------------------------------------
@@ -48,6 +48,7 @@ menu:
   About: true
   Tags: true
   Archives: true
+  Friends: false
 
 #! ---------------------------------------------------------------
 #! Theme Config
@@ -158,7 +159,7 @@ waline:
 # Enable Busuanzi statistic plugin
 # see http://ibruce.info/2015/04/04/busuanzi/
 busuanzi:
-  enable: true
+  enable: false
 
 copy_protection:
   enable: true

src/components/Button/PrimaryButton.vue

@@ -0,0 +1,44 @@
+<template>
+  <a
+    class="py-2 px-3 text-white flex items-center justify-center z-10 transition cursor-pointer rounded-xl font-semibold select-none"
+    :style="gradientBackground"
+  >
+    {{ text }}
+  </a>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { useAppStore } from '@/stores/app'
+
+export default defineComponent({
+  name: 'ARPrimaryButton',
+  components: {},
+  props: {
+    text: String
+  },
+  setup() {
+    const appStore = useAppStore()
+
+    return {
+      gradientBackground: computed(() => {
+        return { background: appStore.themeConfig.theme.header_gradient_css }
+      })
+    }
+  }
+})
+</script>
+
+<style>
+.btn {
+  padding: 8px 12px;
+  background: var(--heo-fontcolor);
+  border-radius: 12px;
+  color: var(--heo-card-bg);
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  transition: 0.3s;
+  cursor: pointer;
+}
+</style>

src/components/Button/SecondaryButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <a
+    class="py-2 px-3 text-ob-bright flex items-center justify-center z-10 transition cursor-pointer rounded-xl bg-ob-deep-900 border-solid border-ob-bright border-t-2 border-b-2 border-r-2 border-l-2 opacity-80 select-none"
+  >
+    {{ text }}
+  </a>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ARSecondaryButton',
+  components: {},
+  props: {
+    text: String
+  },
+  setup() {}
+})
+</script>

src/components/Header/index.ts

@@ -2,3 +2,4 @@ export { default as Header } from './src/Header.vue'
 export { default as Logo } from './src/Logo.vue'
 export { default as Controls } from './src/Controls.vue'
 export { default as Navigation } from './src/Navigation.vue'
+export { default as Notification } from './src/Notification.vue'

src/components/Header/src/Header.vue

@@ -4,20 +4,22 @@
       <Logo />
       <Navigation />
       <Controls />
+      <Notification />
     </header>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { Logo, Navigation, Controls } from '../index'
+import { Logo, Navigation, Controls, Notification } from '../index'
 
 export default defineComponent({
   name: 'Header',
   components: {
     Logo,
     Navigation,
-    Controls
+    Controls,
+    Notification
   },
   props: {
     msg: String

src/components/Header/src/Navigation.vue

@@ -2,35 +2,12 @@
   <nav class="items-center flex-1 hidden lg:flex">
     <ul class="flex flex-row list-none px-6 text-white">
       <li
-        class="
-          not-italic
-          font-medium
-          text-xs
-          h-full
-          relative
-          flex flex-col
-          items-center
-          justify-center
-          cursor-pointer
-          text-center
-          py-4
-          px-2
-        "
+        class="not-italic font-medium text-xs h-full relative flex flex-col items-center justify-center cursor-pointer text-center py-4 px-2"
         v-for="route in routes"
         :key="route.path"
       >
         <div
-          class="
-            nav-link
-            text-sm
-            block
-            px-1.5
-            py-0.5
-            rounded-md
-            relative
-            uppercase
-            cursor-pointer
-          "
+          class="nav-link text-sm block px-1.5 py-0.5 rounded-md relative uppercase cursor-pointer"
           @click="pushPage(route.path)"
           v-if="route.children && route.children.length === 0"
           :data-menu="route.name"
@@ -53,16 +30,7 @@
           @command="pushPage"
           hover
           v-else
-          class="
-            nav-link
-            text-sm
-            block
-            px-1.5
-            py-0.5
-            rounded-md
-            relative
-            uppercase
-          "
+          class="nav-link text-sm block px-1.5 py-0.5 rounded-md relative uppercase"
         >
           <span
             class="relative z-50"

src/components/Header/src/Notification.vue

@@ -0,0 +1,89 @@
+<template>
+  <div :class="notificationClasses">
+    <div
+      class="flex flex-col relative bg-ob-deep-900 rounded-xl pt-4 overflow-hidden"
+    >
+      <div class="flex items-center space-x-4 px-6">
+        <SvgIcon
+          icon-class="bell"
+          stroke="var(--text-normal)"
+          fill="none"
+          width="1.4rem"
+          height="1.4rem"
+        />
+        <span>{{ message }}</span>
+      </div>
+      <span class="progress-bar mt-4" :style="progressStyle"></span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from 'vue'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+import { useCommonStore } from '@/stores/common'
+
+export default defineComponent({
+  name: 'ARNotification',
+  components: { SvgIcon },
+  setup() {
+    const commonState = useCommonStore()
+    const openState = ref(commonState.notificationState)
+    const progress = ref(100)
+
+    watch(
+      () => commonState.notificationState,
+      state => {
+        let timer = 0
+        openState.value = state
+        if (state) {
+          progress.value = 100
+          window.setTimeout(() => {
+            timer = window.setInterval(() => {
+              progress.value = progress.value - 20
+            }, 800)
+          })
+          window.setTimeout(() => {
+            commonState.closeNotification()
+            clearInterval(timer)
+            progress.value = 100
+          }, 5000)
+        }
+      }
+    )
+
+    return {
+      message: computed(() => commonState.notificationMessage),
+      notificationClasses: computed(() => {
+        return {
+          'notification absolute z-50 shadow-2xl': true,
+          open: openState.value
+        }
+      }),
+      progressStyle: computed(() => {
+        return {
+          width: `${progress.value}%`
+        }
+      })
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.notification {
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: top 300ms ease-in-out;
+  &.open {
+    top: 1.5rem;
+  }
+}
+.progress-bar {
+  width: 100%;
+  height: 2px;
+  background-color: var(--text-accent);
+  transition: width 1s linear;
+}
+</style>

src/components/Link/LinkAvatar.vue

@@ -0,0 +1,34 @@
+<template>
+  <a
+    class="links-group-avatar h-[120px] w-[120px] flex items-center justify-center text-white text-6xl font-bold"
+    :href="link"
+    target="_blank"
+    :title="title"
+  >
+    <img
+      v-if="source"
+      class="h-full w-full shadow-xl m-0 rounded-full"
+      :src="source"
+      alt="link-avatar"
+      :title="title"
+    />
+    <ob-skeleton v-else width="7rem" height="7rem" circle />
+  </a>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ARLinkAvatar',
+  components: {},
+  props: {
+    title: String,
+    link: String,
+    source: {
+      type: String
+    }
+  },
+  setup() {}
+})
+</script>