From 8e29f0b7c63f9696a611f607d98b8d6c07945262 Mon Sep 17 00:00:00 2001
From: Benny Guo <bennyxguo6@gmail.com>
Date: Thu, 17 Aug 2023 02:26:50 +0800
Subject: [PATCH] feat: add footer link feature

---
 _config.yml                                 |  23 ++-
 src/App.vue                                 |   7 +-
 src/components/Button/PrimaryButton.vue     |   2 +-
 src/components/Button/SecondaryButton.vue   |   2 +-
 src/components/{ => Footer}/Footer.vue      |   4 +-
 src/components/Footer/FooterLink.vue        | 148 ++++++++++++++++++++
 src/components/Link/LinkBox.vue             |  11 +-
 src/components/LoadingSkeleton/Skeleton.vue |   1 -
 src/components/Sidebar/src/Toc.vue          |   6 +-
 src/components/Sticky.vue                   |  46 +++---
 src/hooks/useLightBox.ts                    |   1 -
 src/icons/reload.svg                        |   6 +
 src/models/ThemeConfig.class.ts             |  32 ++++-
 src/utils/comments/gravatar.ts              |   2 -
 14 files changed, 257 insertions(+), 34 deletions(-)
 rename src/components/{ => Footer}/Footer.vue (98%)
 create mode 100644 src/components/Footer/FooterLink.vue
 create mode 100644 src/icons/reload.svg

diff --git a/_config.yml b/_config.yml
index e6c91de2..3291442d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -24,7 +24,14 @@ site:
   police_beian:
     number: ''
     link: ''
-  started_date: # Start date of the blog YYY-MM-DD / 博客开始运行日期
+  # Start date of the blog YYY-MM-DD
+  # 博客开始运行日期
+  started_date:
+  # Path unique identifier (文章 URL 唯一标识)
+  # uid: use unique ID
+  # slug: use generated slug base on title
+  # (Default is 'slug')
+  pathSlug: 'slug'
 
 #! ---------------------------------------------------------------
 #! Authors Configs
@@ -190,3 +197,17 @@ aurora_bot:
 injects:
   scripts:
   css:
+
+#! ---------------------------------------------------------------
+#! Footer links
+#! ---------------------------------------------------------------
+footer_links:
+  - title: # main title
+    links:
+      - title: # link title
+        url: # URL link
+      - title: # link title
+        url: # URL link
+      - title: Friends # link of friends mode / 友链模式
+        mode: 'links'
+
diff --git a/src/App.vue b/src/App.vue
index 8e44f624..7030caba 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,6 +21,7 @@
     </div>
     <div id="loading-bar-wrapper" :class="loadingBarClass"></div>
   </div>
+  <FooterLink :links="themeConfig.footerLinks.data" />
   <Footer :style="cssVariables" />
   <div class="App-Mobile-sidebar" v-if="isMobile">
     <div id="App-Mobile-Profile" class="App-Mobile-wrapper">
@@ -60,13 +61,14 @@ import { useLightBoxStore } from '@/stores/lightbox'
 import { useMetaStore } from '@/stores/meta'
 import { useSearchStore } from './stores/search'
 import HeaderMain from '@/components/Header/src/Header.vue'
-import Footer from '@/components/Footer.vue'
+import Footer from '@/components/Footer/Footer.vue'
 import Navigator from '@/components/Navigator.vue'
 import MobileMenu from '@/components/MobileMenu.vue'
 import Dia from '@/components/Dia.vue'
 import defaultCover from '@/assets/default-cover.jpg'
 import { useI18n } from 'vue-i18n'
 import VueEasyLightbox from 'vue-easy-lightbox'
+import FooterLink from './components/Footer/FooterLink.vue'
 
 export default defineComponent({
   name: 'App',
@@ -76,7 +78,8 @@ export default defineComponent({
     Navigator,
     MobileMenu,
     Dia,
-    VueEasyLightbox
+    VueEasyLightbox,
+    FooterLink
   },
   setup() {
     const appStore = useAppStore()
diff --git a/src/components/Button/PrimaryButton.vue b/src/components/Button/PrimaryButton.vue
index 88055acd..a4e57329 100644
--- a/src/components/Button/PrimaryButton.vue
+++ b/src/components/Button/PrimaryButton.vue
@@ -1,6 +1,6 @@
 <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"
+    class="py-1 px-3 text-white flex items-center justify-center z-10 transition cursor-pointer rounded-xl font-semibold select-none"
     :style="gradientBackground"
   >
     {{ text }}
diff --git a/src/components/Button/SecondaryButton.vue b/src/components/Button/SecondaryButton.vue
index 78f96b7a..f130435b 100644
--- a/src/components/Button/SecondaryButton.vue
+++ b/src/components/Button/SecondaryButton.vue
@@ -1,6 +1,6 @@
 <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"
+    class="py-1 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>
diff --git a/src/components/Footer.vue b/src/components/Footer/Footer.vue
similarity index 98%
rename from src/components/Footer.vue
rename to src/components/Footer/Footer.vue
index 69e521cd..958e7394 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer/Footer.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="footer" class="relative w-full pt-1" :style="gradientBackground">
-    <span class="bg-ob-deep-900 flex justify-center">
+    <span class="bg-ob-deep-800 flex justify-center">
       <div
-        class="bg-ob-deep-900 rounded-lg max-w-10/12 lg:max-w-screen-2xl text-sm text-ob-normal w-full py-6 px-6 grid grid-rows-1 lg:grid-rows-none lg:grid-cols-4 justify-center items-center gap-8"
+        class="bg-ob-deep-800 rounded-lg max-w-10/12 lg:max-w-screen-2xl text-sm text-ob-normal w-full py-6 px-6 grid grid-rows-1 lg:grid-rows-none lg:grid-cols-4 justify-center items-center gap-8"
       >
         <div
           class="flex flex-col lg:flex-row gap-6 lg:gap-12 row-span-1 lg:col-span-3 text-center lg:text-left"
diff --git a/src/components/Footer/FooterLink.vue b/src/components/Footer/FooterLink.vue
new file mode 100644
index 00000000..4bb78a5c
--- /dev/null
+++ b/src/components/Footer/FooterLink.vue
@@ -0,0 +1,148 @@
+<template>
+  <div
+    v-if="links"
+    id="footer-link"
+    class="flex flex-col items-center py-8 bg-ob-deep-900"
+  >
+    <div class="footer-link-divider" :style="gradientBackground">
+      <div class="footer-link-img-wrapper">
+        <img v-show="avatar" :class="avatarClass" :src="avatar" alt="avatar" />
+      </div>
+    </div>
+
+    <div
+      class="flex flex-row flex-wrap justify-start md:justify-center bg-ob-deep-900 rounded-lg max-w-10/12 lg:max-w-screen-2xl text-normal text-ob-normal w-full py-6 px-6 items-start gap-8 md:gap-10 xl:gap-16"
+    >
+      <div v-for="link of links" class="flex flex-col">
+        <div class="flex mb-4 items-center">
+          <h3 class="text-ob-dim font-bold mr-2">{{ link.title }}</h3>
+          <SvgIcon
+            v-if="link.mode === 'links'"
+            @click="refreshLinkData"
+            icon-class="reload"
+            :class="loadingSvgClasses"
+          />
+        </div>
+        <ul v-if="!link.mode" class="flex flex-col gap-1">
+          <li v-for="sub of link.links" class="cursor-pointer">
+            <a :href="sub.url" target="_blank">{{ sub.title }}</a>
+          </li>
+        </ul>
+        <ul v-if="link.mode === 'links' && linksData" class="flex flex-col">
+          <li v-for="avatar of linksData" class="cursor-pointer">
+            <a :href="avatar.link" target="_blank">{{ avatar.nick }}</a>
+          </li>
+        </ul>
+        <ul v-if="link.mode === 'links' && loadingLinks" class="flex flex-col">
+          <li v-for="i in 5" class="cursor-pointer">
+            <ob-skeleton :count="1" height="22px" width="7.5rem" />
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Link } from '@/models/Article.class'
+import { FooterLink } from '@/models/ThemeConfig.class'
+import { useAppStore } from '@/stores/app'
+import { useArticleStore } from '@/stores/article'
+import { PropType, computed, defineComponent, onMounted, ref, watch } from 'vue'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+
+export default defineComponent({
+  name: 'ARFooterLink',
+  components: { SvgIcon },
+  props: {
+    links: Array as PropType<FooterLink[]>
+  },
+  setup() {
+    const appStore = useAppStore()
+    const articleStore = useArticleStore()
+    const loadingLinks = ref<boolean>(true)
+    const linksData = ref<Link[]>([])
+    const bloggers = ref<Link[][]>([])
+
+    const refreshLinkData = () => {
+      loadingLinks.value = true
+      linksData.value = []
+      setTimeout(() => {
+        const recordSet = new Set()
+        let friendsCount = bloggers.value.length < 5 ? bloggers.value.length : 5
+
+        while (friendsCount > 0) {
+          const pair = bloggers.value[Math.floor(Math.random() * 24)]
+          const blogger = pair[Math.floor(Math.random() * 2)]
+          if (!recordSet.has(blogger.nick)) {
+            recordSet.add(blogger.nick)
+            linksData.value.push(blogger)
+            friendsCount--
+          }
+        }
+        loadingLinks.value = false
+      }, 1000)
+    }
+
+    const fetchLinks = async () => {
+      const linksArticle = await articleStore.fetchArticle('friends')
+      if (linksArticle && linksArticle.avatarWall) {
+        bloggers.value = linksArticle.avatarWall
+        refreshLinkData()
+      }
+    }
+
+    watch(
+      () => appStore.configReady,
+      (newValue, oldValue) => {
+        if (!oldValue && newValue && appStore.themeConfig.menu.menus['Links']) {
+          fetchLinks()
+        }
+      }
+    )
+
+    onMounted(() => {
+      if (appStore.themeConfig.menu.menus['Links']) {
+        fetchLinks()
+      }
+    })
+
+    return {
+      avatarClass: computed(() => {
+        return {
+          'footer-link-avatar': true,
+          [appStore.themeConfig.theme.profile_shape]: true
+        }
+      }),
+      gradientBackground: computed(() => {
+        return { background: appStore.themeConfig.theme.header_gradient_css }
+      }),
+      avatar: computed(() => appStore.themeConfig.site.avatar),
+      loadingSvgClasses: computed(() => ({
+        'cursor-pointer': true,
+        'animate-spin': loadingLinks.value
+      })),
+      refreshLinkData,
+      loadingLinks,
+      linksData
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.footer-link-divider {
+  @apply flex h-1 w-2/3 lg:w-2/5 mt-4 mb-8 relative opacity-70 rounded-full shadow-xl;
+  /* .footer-link-img-wrapper {
+    border: 2rem solid var(--background-primary);
+  } */
+  .footer-link-avatar {
+    @apply m-0 h-10 w-10 shadow-xl absolute rounded-full box-content;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border: 0.8rem solid var(--background-primary);
+    background: var(--background-primary);
+  }
+}
+</style>
diff --git a/src/components/Link/LinkBox.vue b/src/components/Link/LinkBox.vue
index 47f42a61..312dd96d 100644
--- a/src/components/Link/LinkBox.vue
+++ b/src/components/Link/LinkBox.vue
@@ -12,7 +12,7 @@
           <Title
             title="settings.links-slogan"
             icon="friends"
-            text-size="text-2xl"
+            text-size="text-3xl"
             paddings="pb-2"
             margins="mb-0 mt-0"
           />
@@ -62,7 +62,7 @@
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent } from 'vue'
+import { PropType, computed, defineComponent } from 'vue'
 import LinkAvatar from '@/components/Link/LinkAvatar.vue'
 import { Title } from '@/components/Title'
 import { useI18n } from 'vue-i18n'
@@ -70,6 +70,7 @@ import PrimaryButton from '@/components/Button/PrimaryButton.vue'
 import SecondaryButton from '@/components/Button/SecondaryButton.vue'
 import { Link } from '@/models/Article.class'
 import { useCommonStore } from '@/stores/common'
+import { useAppStore } from '@/stores/app'
 
 export default defineComponent({
   name: 'ARLinkBox',
@@ -104,7 +105,11 @@ export default defineComponent({
       }, 6000)
     }
 
-    return { applyClicked, randomJump, t }
+    return {
+      applyClicked,
+      randomJump,
+      t
+    }
   }
 })
 </script>
diff --git a/src/components/LoadingSkeleton/Skeleton.vue b/src/components/LoadingSkeleton/Skeleton.vue
index 3e3cc023..629f19df 100644
--- a/src/components/LoadingSkeleton/Skeleton.vue
+++ b/src/components/LoadingSkeleton/Skeleton.vue
@@ -5,7 +5,6 @@ import { SkeletonStyle } from './SkeletonTheme.vue'
 const isEmptyVNode = (children: any) => {
   if (!children) return true
   const firstNode = children()[0]
-  console.log('firstNode', firstNode)
   let str = firstNode.text
   if (str) {
     // remove all line-break and space character
diff --git a/src/components/Sidebar/src/Toc.vue b/src/components/Sidebar/src/Toc.vue
index b022c697..7c42e172 100644
--- a/src/components/Sidebar/src/Toc.vue
+++ b/src/components/Sidebar/src/Toc.vue
@@ -1,5 +1,9 @@
 <template>
-  <Sticky :stickyTop="32" endingElId="footer" dynamicElClass="#sticky-sidebar">
+  <Sticky
+    :stickyTop="32"
+    endingElId="footer-link"
+    dynamicElClass="#sticky-sidebar"
+  >
     <div id="sticky-sidebar">
       <transition name="fade-slide-y" mode="out-in">
         <div v-show="showToc" class="sidebar-box mb-4">
diff --git a/src/components/Sticky.vue b/src/components/Sticky.vue
index febc0a08..185e1f6c 100644
--- a/src/components/Sticky.vue
+++ b/src/components/Sticky.vue
@@ -1,16 +1,6 @@
 <template>
   <div id="sticky" :style="{ height: height + 'px', zIndex: zIndex }">
-    <div
-      :class="className"
-      :style="{
-        top: isSticky ? (top === -1 ? 'initial' : top + 'px') : '',
-        bottom: isBottom ? 0 : 'initial',
-        zIndex: zIndex,
-        position: position,
-        width: width,
-        height: height + 'px'
-      }"
-    >
+    <div :class="className" :style="styles">
       <slot>
         <div>sticky</div>
       </slot>
@@ -19,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { StyleValue, computed, defineComponent, ref } from 'vue'
 
 export default defineComponent({
   name: 'ObSticky',
@@ -49,7 +39,7 @@ export default defineComponent({
       default: ''
     }
   },
-  setup() {
+  setup(props) {
     let active = ref(false),
       position = ref(''),
       width = ref(),
@@ -59,7 +49,24 @@ export default defineComponent({
       top = ref(0),
       isBottom = ref(false)
 
+    const styles = computed(
+      () =>
+        ({
+          top: isSticky.value
+            ? top.value === -1
+              ? 'initial'
+              : top.value + 'px'
+            : '',
+          bottom: isBottom.value ? 0 : 'initial',
+          zIndex: props.zIndex,
+          position: position.value,
+          width: width.value,
+          height: height.value + 'px'
+        } as StyleValue)
+    )
+
     return {
+      styles,
       active,
       position,
       width,
@@ -136,12 +143,17 @@ export default defineComponent({
           this.endingElId !== ''
             ? document.getElementById(this.endingElId)
             : null
+
+        const endingElSpacing = documentHeight - (endingEl?.offsetTop ?? 0)
+
         const wrapperEl = document.getElementById('App-Wrapper')
-        const endingElSpacing = parseInt(
+
+        const containerBottomSpacing = parseInt(
           window.getComputedStyle(wrapperEl || document.documentElement)
             .paddingBottom,
           10
         )
+
         const endingPos =
           endingEl && endingEl instanceof HTMLElement
             ? documentHeight -
@@ -149,8 +161,8 @@ export default defineComponent({
               height -
               this.stickyTop -
               this.stickyBottom -
-              endingEl.getBoundingClientRect().height -
-              endingElSpacing
+              endingElSpacing -
+              containerBottomSpacing
             : documentHeight
 
         if (offsetTop < this.stickyTop) {
@@ -166,7 +178,7 @@ export default defineComponent({
         }
 
         this.handleReset()
-      }, 16)
+      }, 1)
     },
     handleResize() {
       if (this.isSticky) {
diff --git a/src/hooks/useLightBox.ts b/src/hooks/useLightBox.ts
index 7fefc763..0fcb32fe 100644
--- a/src/hooks/useLightBox.ts
+++ b/src/hooks/useLightBox.ts
@@ -14,7 +14,6 @@ export default function useLightBox() {
 
     let imageNodes = postHtmlEle.querySelectorAll('img')
     for (let i = 0; i < imageNodes.length; i++) {
-      console.log(imageNodes[i].src)
       lightBoxStore.addImage(imageNodes[i].src)
       imageNodes[i].addEventListener('click', function () {
         showImage(this)
diff --git a/src/icons/reload.svg b/src/icons/reload.svg
new file mode 100644
index 00000000..789e4f1c
--- /dev/null
+++ b/src/icons/reload.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="" xmlns="http://www.w3.org/2000/svg" data-reactroot="">
+<path fill="" d="M2 15.0002C2 14.448 2.44772 14.0002 3 14.0002H8C8.55228 14.0002 9 14.448 9 15.0002C9 15.5525 8.55228 16.0002 8 16.0002H4V20.0002C4 20.5525 3.55228 21.0002 3 21.0002C2.44772 21.0002 2 20.5525 2 20.0002V15.0002Z" clip-rule="evenodd" fill-rule="evenodd" undefined="1"></path>
+<path fill="" d="M21.0043 13.0257C21.5426 13.1496 21.8784 13.6863 21.7545 14.2245C21.0767 17.1695 19.1109 19.6117 16.4903 20.9331L16.4902 20.9332C15.1451 21.6113 13.6114 22.0002 12 22.0002C7.56159 22.0002 4.72058 19.1903 2.18166 15.5749C1.86426 15.1229 1.97336 14.4992 2.42533 14.1819C2.8773 13.8645 3.50099 13.9736 3.81839 14.4255C6.27947 17.9301 8.59846 20.0002 12 20.0002C13.2886 20.0002 14.5149 19.6892 15.5898 19.1473C17.6891 18.0887 19.2634 16.131 19.8055 13.7759C19.9294 13.2377 20.4661 12.9018 21.0043 13.0257Z" clip-rule="evenodd" fill-rule="evenodd" undefined="1"></path>
+<path fill="" d="M22 8.99976C22 9.55204 21.5523 9.99976 21 9.99976H16C15.4477 9.99976 15 9.55204 15 8.99976C15 8.44747 15.4477 7.99976 16 7.99976H20V3.99976C20 3.44747 20.4477 2.99976 21 2.99976C21.5523 2.99976 22 3.44747 22 3.99976V8.99976Z" clip-rule="evenodd" fill-rule="evenodd" undefined="1"></path>
+<path fill="" d="M2.99565 10.9743C2.45745 10.8504 2.12157 10.3137 2.24546 9.77546C2.92335 6.83054 4.88909 4.3883 7.50974 3.06687L7.50981 3.06683C8.8549 2.38873 10.3886 1.99978 12 1.99978C16.4384 1.99978 19.2794 4.80966 21.8183 8.42508C22.1357 8.87705 22.0266 9.50075 21.5747 9.81815C21.1227 10.1355 20.499 10.0264 20.1816 9.57447C17.7205 6.0699 15.4015 3.99978 12 3.99978C10.7114 3.99978 9.48511 4.31081 8.41021 4.85269C6.31087 5.91126 4.7366 7.86902 4.19449 10.2241C4.0706 10.7623 3.53386 11.0982 2.99565 10.9743Z" clip-rule="evenodd" fill-rule="evenodd" undefined="1"></path>
+</svg>
diff --git a/src/models/ThemeConfig.class.ts b/src/models/ThemeConfig.class.ts
index aabbe172..f329862e 100644
--- a/src/models/ThemeConfig.class.ts
+++ b/src/models/ThemeConfig.class.ts
@@ -10,6 +10,7 @@ interface ThemeRaw {
     custom_socials: GeneralOptions
     site_meta: GeneralOptions
     plugins: GeneralOptions
+    footer_links: FooterLink[]
     version: string
   }
 }
@@ -22,8 +23,8 @@ interface StringConfig {
   [key: string]: string
 }
 
-interface GeneralOptions {
-  [key: string]: any
+interface GeneralOptions<T = any> {
+  [key: string]: T
 }
 
 export class ThemeConfig {
@@ -41,6 +42,8 @@ export class ThemeConfig {
   site_meta: SiteMeta = new SiteMeta()
   /** Plugin configs */
   plugins: Plugins = new Plugins()
+  /** Footer Links configs */
+  footerLinks: FooterLinks = new FooterLinks()
   /** Theme version */
   version = ''
 
@@ -59,6 +62,7 @@ export class ThemeConfig {
       this.socials = new Social(rawConfig.socials)
       this.plugins = new Plugins(rawConfig)
       this.site_meta = new SiteMeta(rawConfig.site_meta)
+      this.footerLinks = new FooterLinks(rawConfig.footer_links)
       this.version = rawConfig.version
     }
   }
@@ -611,3 +615,27 @@ export class Plugins implements PluginsData {
     }
   }
 }
+
+export interface FooterLink {
+  title: string
+  links: {
+    title: string
+    url: string
+  }[]
+  mode?: 'links'
+}
+
+export class FooterLinks {
+  data: FooterLink[] = []
+
+  /**
+   * Model class for Site meta settings
+   *
+   * @param raw - Config data generated from Hexo
+   */
+  constructor(raw?: FooterLink[]) {
+    if (raw) {
+      Object.assign(this.data, raw)
+    }
+  }
+}
diff --git a/src/utils/comments/gravatar.ts b/src/utils/comments/gravatar.ts
index 78ee9065..add29466 100644
--- a/src/utils/comments/gravatar.ts
+++ b/src/utils/comments/gravatar.ts
@@ -38,8 +38,6 @@ export const getGravatar = (
 ) => {
   const md5Mail = withMd5 ? mail : md5(mail)
 
-  console.log(mail)
-
   return String(mail).endsWith('@qq.com')
     ? 'https://q4.qlogo.cn/g?b=qq&nk=' + mail.replace('@qq.com', '') + '&s=100'
     : gravatarUrl + md5Mail + `?&v=${VERSION}`