From 74484835865fe80a8d787351924a1a69f81d8340 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Fri, 28 Jun 2024 03:10:07 +0800
Subject: [PATCH] feat(theme): optimize friends layout

---
 docs/friends.md                               | 47 ++++++++++++++++---
 docs/notes/theme/config/frontmatter/friend.md | 11 +++--
 theme/src/client/components/Blog/VPBlog.vue   | 11 ++---
 theme/src/client/components/VPContent.vue     | 10 +++-
 theme/src/client/components/VPFooter.vue      |  3 +-
 theme/src/client/components/VPFriends.vue     | 17 +++----
 .../src/client/components/VPFriendsGroup.vue  |  9 ++--
 theme/src/client/components/VPFriendsItem.vue | 34 +++++++-------
 theme/src/client/styles/normalize.css         |  6 ++-
 theme/src/client/styles/vars.css              |  3 +-
 theme/src/shared/frontmatter/friends.ts       |  4 +-
 11 files changed, 101 insertions(+), 54 deletions(-)

diff --git a/docs/friends.md b/docs/friends.md
index 288e62d2..babe6977 100644
--- a/docs/friends.md
+++ b/docs/friends.md
@@ -8,22 +8,59 @@ list:
     name: pengzhanbo
     link: https://github.com/pengzhanbo
     avatar: https://github.com/pengzhanbo.png
-    desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
   -
     name: pengzhanbo
     link: https://github.com/pengzhanbo
     avatar: https://github.com/pengzhanbo.png
-    desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
   -
     name: pengzhanbo
     link: https://github.com/pengzhanbo
     avatar: https://github.com/pengzhanbo.png
-    desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+  -
+    name: pengzhanbo
+    link: https://github.com/pengzhanbo
+    avatar: https://github.com/pengzhanbo.png
+    socials:
+      -
+        icon: github
+        link: https://github.com/pengzhanbo
+      -
+        icon: twitter
+        link: https://twitter.com/pengzhanbo
+  -
+    name: pengzhanbo
+    link: https://github.com/pengzhanbo
+    avatar: https://github.com/pengzhanbo.png
+    socials:
+      -
+        icon: github
+        link: https://github.com/pengzhanbo
+      -
+        icon: twitter
+        link: https://twitter.com/pengzhanbo
+  -
+    name: pengzhanbo
+    link: https://github.com/pengzhanbo
+    avatar: https://github.com/pengzhanbo.png
+    socials:
+      -
+        icon: github
+        link: https://github.com/pengzhanbo
+      -
+        icon: twitter
+        link: https://twitter.com/pengzhanbo
   -
     name: pengzhanbo
     link: https://github.com/pengzhanbo
     avatar: https://github.com/pengzhanbo.png
     desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+    socials:
+      -
+        icon: github
+        link: https://github.com/pengzhanbo
+      -
+        icon: twitter
+        link: https://twitter.com/pengzhanbo
   -
     name: pengzhanbo
     link: https://github.com/pengzhanbo
@@ -34,6 +71,7 @@ list:
     link: https://github.com/pengzhanbo
     avatar: https://github.com/pengzhanbo.png
     desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+
 groups:
   -
     title: 分组 1
@@ -47,7 +85,6 @@ groups:
         backgroundColor: rgb(255,153,0)
         color: rgb(255,255,153)
         nameColor: rgb(255,255,170)
-        borderColor: rgb(255,255,204)
       -
         name: pengzhanbo
         link: https://github.com/pengzhanbo
@@ -56,7 +93,6 @@ groups:
         backgroundColor: rgb(255,102,102)
         color: rgb(255,204,204)
         nameColor: rgb(255,238,238)
-        borderColor: rgb(255,255,238)
       -
         name: pengzhanbo
         link: https://github.com/pengzhanbo
@@ -65,7 +101,6 @@ groups:
         backgroundColor: rgb(0,153,204)
         color: rgb(153,238,255)
         nameColor: rgb(153,255,255)
-        borderColor: rgb(153,238,255)
   -
     title: 分组 2
     desc: 这里是分组 2 的描述文字
diff --git a/docs/notes/theme/config/frontmatter/friend.md b/docs/notes/theme/config/frontmatter/friend.md
index 755d516c..0fb46e1b 100644
--- a/docs/notes/theme/config/frontmatter/friend.md
+++ b/docs/notes/theme/config/frontmatter/friend.md
@@ -80,6 +80,11 @@ interface FriendsItem {
    */
   desc?: string
 
+  /**
+   * 社交链接
+   */
+  socials?: SocialLink[]
+
   /**
    * 背景色
    */
@@ -92,13 +97,11 @@ interface FriendsItem {
    * 名字颜色
    */
   nameColor?: string | { light: string, dark: string }
-  /**
-   * 边框颜色
-   */
-  borderColor?: string | { light: string, dark: string }
 }
 ```
 
+社交链接配置请查看 [配置/主题配置/社交链接](../../config/主题配置.md#social)。
+
 ### groups
 
 - 类型： `FriendsGroup[]`
diff --git a/theme/src/client/components/Blog/VPBlog.vue b/theme/src/client/components/Blog/VPBlog.vue
index 58cbe7b6..2f84ed29 100644
--- a/theme/src/client/components/Blog/VPBlog.vue
+++ b/theme/src/client/components/Blog/VPBlog.vue
@@ -74,6 +74,8 @@ const { theme, page } = useData()
 .vp-blog {
   position: relative;
   min-height: calc(100vh - var(--vp-footer-height, 0px));
+  background-color: var(--vp-c-bg);
+  transition: background-color var(--t-color);
 }
 
 .blog-container {
@@ -93,14 +95,7 @@ const { theme, page } = useData()
 
 @media (min-width: 768px) {
   .vp-blog {
-    min-height: calc(100vh + var(--vp-nav-height) - var(--vp-footer-height, 0px));
-  }
-
-  .vp-blog {
-    padding-top: var(--vp-nav-height);
-    margin-top: calc(var(--vp-nav-height) * -1);
-    background-color: var(--vp-c-bg-alt);
-    transition: background-color var(--t-color);
+    background-color: transparent;
   }
 
   .blog-container {
diff --git a/theme/src/client/components/VPContent.vue b/theme/src/client/components/VPContent.vue
index 79f64314..78faf224 100644
--- a/theme/src/client/components/VPContent.vue
+++ b/theme/src/client/components/VPContent.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, nextTick, watch } from 'vue'
 import VPBlog from '@theme/Blog/VPBlog.vue'
 import VPDoc from '@theme/VPDoc.vue'
 import VPPage from '@theme/VPPage.vue'
 import VPHome from '@theme/Home/VPHome.vue'
 import VPFriends from '@theme/VPFriends.vue'
 import { useData, useSidebar } from '../composables/index.js'
+import { inBrowser } from '../utils/index.js'
 
 const props = defineProps<{
   isNotFound?: boolean
@@ -18,6 +19,13 @@ const isBlogLayout = computed(() => {
   const { type } = page.value
   return type === 'blog' || type === 'blog-archives' || type === 'blog-tags'
 })
+
+watch([isBlogLayout, () => frontmatter.value.pageLayout], () => nextTick(() =>
+  inBrowser && document.documentElement.classList.toggle(
+    'bg-gray',
+    isBlogLayout.value,
+  ),
+), { immediate: true })
 </script>
 
 <template>
diff --git a/theme/src/client/components/VPFooter.vue b/theme/src/client/components/VPFooter.vue
index ce14d8d9..b57cc0ae 100644
--- a/theme/src/client/components/VPFooter.vue
+++ b/theme/src/client/components/VPFooter.vue
@@ -44,8 +44,9 @@ onMounted(() => {
   position: relative;
   z-index: var(--vp-z-index-footer);
   padding: 24px;
+  background-color: var(--vp-c-bg);
   border-top: 1px solid var(--vp-c-gutter);
-  transition: all var(--t-color);
+  transition: border-top var(--t-color), background-color var(--t-color);
 }
 
 .footer-no-border .vp-footer {
diff --git a/theme/src/client/components/VPFriends.vue b/theme/src/client/components/VPFriends.vue
index 59976ca6..a8c06690 100644
--- a/theme/src/client/components/VPFriends.vue
+++ b/theme/src/client/components/VPFriends.vue
@@ -47,25 +47,19 @@ const groups = computed(() => matter.value.groups || [])
 <style scoped>
 .vp-friends {
   width: 100%;
-  min-height: calc(100vh - var(--vp-footer-height, 0px));
   padding-top: var(--vp-nav-height);
   padding-bottom: 5rem;
   margin: 0 auto;
 }
 
-@media (min-width: 960px) {
-  .vp-friends {
-    min-height: calc(100vh - var(--vp-nav-height) - var(--vp-footer-height, 0px));
-  }
-}
-
 .vp-friends .title {
   padding-top: 3rem;
   padding-left: 1rem;
-  margin-bottom: 1rem;
-  font-size: 24px;
+  margin-bottom: 2rem;
+  font-size: 28px;
   font-weight: 700;
   color: var(--vp-c-text-1);
+  text-align: center;
   outline: none;
 }
 
@@ -74,13 +68,14 @@ const groups = computed(() => matter.value.groups || [])
   margin-bottom: 16px;
   line-height: 28px;
   color: var(--vp-c-text-1);
+  text-align: center;
 }
 
 .friends-list {
   display: grid;
-  gap: 16px;
+  gap: 20px;
   padding: 0 16px;
-  margin-top: 64px;
+  margin-top: 48px;
 }
 
 .edit-link {
diff --git a/theme/src/client/components/VPFriendsGroup.vue b/theme/src/client/components/VPFriendsGroup.vue
index 6bcbe799..c8f0e81d 100644
--- a/theme/src/client/components/VPFriendsGroup.vue
+++ b/theme/src/client/components/VPFriendsGroup.vue
@@ -33,11 +33,13 @@ defineProps<{
 }
 
 .vp-friends-group .title {
-  padding-top: 2rem;
+  padding-top: 3rem;
   padding-bottom: 8px;
-  font-size: 20px;
+  margin-bottom: 28px;
+  font-size: 24px;
   font-weight: 700;
   color: var(--vp-c-text-1);
+  text-align: center;
   border-top: solid 1px var(--vp-c-divider);
   outline: none;
   transition: color var(--t-color), border-color var(--t-color);
@@ -47,12 +49,13 @@ defineProps<{
   margin-bottom: 16px;
   line-height: 28px;
   color: var(--vp-c-text-1);
+  text-align: center;
   transition: color var(--t-color);
 }
 
 .friends-list {
   display: grid;
-  gap: 16px;
+  gap: 20px;
   margin-top: 32px;
 }
 
diff --git a/theme/src/client/components/VPFriendsItem.vue b/theme/src/client/components/VPFriendsItem.vue
index 0d585c14..fbcbada5 100644
--- a/theme/src/client/components/VPFriendsItem.vue
+++ b/theme/src/client/components/VPFriendsItem.vue
@@ -4,6 +4,7 @@ import { computed } from 'vue'
 import VPLink from '@theme/VPLink.vue'
 import type { FriendsItem } from '../../shared/index'
 import { useDarkMode } from '../composables/dark-mode.js'
+import VPSocialLinks from './VPSocialLinks.vue'
 
 const props = defineProps<{
   friend: FriendsItem
@@ -22,14 +23,17 @@ const friendStyle = computed(() => {
   return {
     ...getStyle('--vp-friends-text-color', props.friend.color),
     ...getStyle('--vp-friends-bg-color', props.friend.backgroundColor),
-    ...getStyle('--vp-friends-border-color', props.friend.borderColor),
     ...getStyle('--vp-friends-name-color', props.friend.nameColor),
   }
 })
 </script>
 
 <template>
-  <div class="vp-friend" :style="friendStyle">
+  <div
+    class="vp-friend" :style="friendStyle" :class="{
+      'only-title': !friend.desc && (!friend.socials || !friend.socials.length),
+    }"
+  >
     <VPLink
       class="avatar-link"
       :href="friend.link"
@@ -49,6 +53,7 @@ const friendStyle = computed(() => {
       >
         {{ friend.name }}
       </VPLink>
+      <VPSocialLinks v-if="friend.socials" :links="friend.socials" />
       <p v-if="friend.desc">
         {{ friend.desc }}
       </p>
@@ -58,21 +63,16 @@ const friendStyle = computed(() => {
 
 <style scoped>
 .vp-friend {
+  position: relative;
   display: flex;
   align-items: flex-start;
-  padding: 16px;
+  padding: 20px;
   margin-bottom: 8px;
   background-color: var(--vp-friends-bg-color);
-  border: 1px solid var(--vp-friends-border-color);
   border-radius: 6px;
-  box-shadow: var(--vp-shadow-1);
   transition: all var(--t-color);
 }
 
-.vp-friend:hover {
-  box-shadow: var(--vp-shadow-2);
-}
-
 .avatar-link {
   display: inline-block;
   margin-right: 16px;
@@ -90,24 +90,26 @@ const friendStyle = computed(() => {
   flex: 1;
 }
 
+.vp-friend.only-title .content {
+  margin-top: 20px;
+}
+
 .content .title {
-  display: block;
   padding-bottom: 8px;
-  padding-left: 16px;
-  margin-bottom: 8px;
-  margin-left: -16px;
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 700;
   color: var(--vp-friends-name-color);
-  border-bottom: 1px dashed var(--vp-friends-border-color);
   transition: color var(--t-color), border-bottom var(--t-color);
 }
 
+.content :deep(.vp-social-links) {
+  justify-content: flex-start;
+}
+
 .content p {
   display: -webkit-box;
   padding-top: 8px;
   overflow: hidden;
-  font-size: 0.875rem;
   line-height: 1.5;
   color: var(--vp-friends-text-color);
   transition: color var(--t-color);
diff --git a/theme/src/client/styles/normalize.css b/theme/src/client/styles/normalize.css
index 71be078a..8df5879f 100644
--- a/theme/src/client/styles/normalize.css
+++ b/theme/src/client/styles/normalize.css
@@ -46,6 +46,7 @@ body {
   font-family: var(--vp-font-family-base);
   font-weight: 400;
   line-height: 24px;
+  background-color: var(--vp-c-bg);
 
   direction: ltr;
 }
@@ -53,13 +54,16 @@ body {
 html,
 body {
   color: var(--vp-c-text-1);
-  background-color: var(--vp-c-bg);
   transition: var(--t-color);
   transition-property: color, background-color;
 
   scrollbar-width: thin;
 }
 
+html.bg-gray body {
+  background-color: var(--vp-c-bg-alt);
+}
+
 main {
   display: block;
 }
diff --git a/theme/src/client/styles/vars.css b/theme/src/client/styles/vars.css
index 6ea3abba..9ceff8de 100644
--- a/theme/src/client/styles/vars.css
+++ b/theme/src/client/styles/vars.css
@@ -485,9 +485,8 @@
  * -------------------------------------------------------------------------- */
 :root {
   --vp-friends-text-color: var(--vp-c-text-2);
-  --vp-friends-bg-color: var(--vp-c-bg);
+  --vp-friends-bg-color: var(--vp-c-bg-alt);
   --vp-friends-name-color: var(--vp-c-text-2);
-  --vp-friends-border-color: var(--vp-c-divider);
 }
 
 /**
diff --git a/theme/src/shared/frontmatter/friends.ts b/theme/src/shared/frontmatter/friends.ts
index 04f29c97..da9c3cba 100644
--- a/theme/src/shared/frontmatter/friends.ts
+++ b/theme/src/shared/frontmatter/friends.ts
@@ -1,12 +1,14 @@
+import type { SocialLink } from '../base.js'
+
 export interface FriendsItem {
   name: string
   link: string
   avatar?: string
   desc?: string
+  socials?: SocialLink[]
   backgroundColor?: string | { light: string, dark: string }
   color?: string | { light: string, dark: string }
   nameColor?: string | { light: string, dark: string }
-  borderColor?: string | { light: string, dark: string }
 }
 
 export interface FriendGroup {