feat(theme): add location/organization configuration support for friends (#376)

docs/friends.md

@@ -1,7 +1,7 @@
 ---
 pageLayout: friends
 title: 友情链接
-description: 这里是友情链接的描述文字
+description: 这里是友情链接的描述文字，此页面仅作为示例展示
 permalink: /friends/
 draft: true
 list:
@@ -17,10 +17,33 @@ list:
     name: pengzhanbo
     link: https://github.com/pengzhanbo
     avatar: https://github.com/pengzhanbo.png
+    location: GuangZhou
+    organization: PengZhanBo
   -
     name: pengzhanbo
     link: https://github.com/pengzhanbo
     avatar: https://github.com/pengzhanbo.png
+    location: GuangZhou
+    organization: PengZhanBo
+  -
+    name: pengzhanbo
+    link: https://github.com/pengzhanbo
+    avatar: https://github.com/pengzhanbo.png
+    location: GuangZhou
+    organization: PengZhanBo
+    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
+    location: GuangZhou
+    organization: PengZhanBo
     socials:
       -
         icon: github
@@ -50,6 +73,11 @@ list:
       -
         icon: twitter
         link: https://twitter.com/pengzhanbo
+  -
+    name: pengzhanbo
+    link: https://github.com/pengzhanbo
+    avatar: https://github.com/pengzhanbo.png
+    desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
   -
     name: pengzhanbo
     link: https://github.com/pengzhanbo
@@ -66,11 +94,22 @@ list:
     name: pengzhanbo
     link: https://github.com/pengzhanbo
     avatar: https://github.com/pengzhanbo.png
+    location: GuangZhou
+    organization: PengZhanBo
     desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+    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
+    location: GuangZhou
+    organization: PengZhanBo
     desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
 groups:
   -

docs/notes/theme/config/frontmatter/friend.md

@@ -20,7 +20,16 @@ list:
     name: pengzhanbo
     link: https://github.com/pengzhanbo
     avatar: https://github.com/pengzhanbo.png
+    location: 广州，中国
+    organization: VuePress
     desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+    socials:
+      -
+        icon: github
+        link: https://github.com/pengzhanbo
+      -
+        icon: twitter
+        link: https://twitter.com/pengzhanbo
 ---
 ```
 
@@ -79,6 +88,14 @@ interface FriendsItem {
    * 友情链接描述
    */
   desc?: string
+  /**
+   * 地理位置
+   */
+  location?: string
+  /**
+   * 组织、公司
+   */
+  organization?: string
 
   /**
    * 社交链接

theme/src/client/components/VPFriends.vue

@@ -97,7 +97,7 @@ const groups = computed(() => matter.value.groups || [])
 
 @media (min-width: 960px) {
   .vp-friends {
-    max-width: 784px;
+    max-width: 864px;
     padding-top: 48px;
   }
 
@@ -112,16 +112,6 @@ const groups = computed(() => matter.value.groups || [])
   }
 }
 
-@media (min-width: 1440px) {
-  .vp-friends {
-    max-width: 1104px;
-  }
-
-  .friends-list {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
 .edit-link-button {
   display: flex;
   align-items: center;

theme/src/client/components/VPFriendsGroup.vue

@@ -74,15 +74,4 @@ defineProps<{
     padding: 0;
   }
 }
-
-@media (min-width: 1440px) {
-  .vp-friends-group {
-    max-width: 1104px;
-  }
-
-  .friends-list {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    padding: 0;
-  }
-}
 </style>

theme/src/client/components/VPFriendsItem.vue

@@ -31,30 +31,25 @@ const friendStyle = computed(() => {
 <template>
   <div
     class="vp-friend" :style="friendStyle" :class="{
-      'only-title': !friend.desc && (!friend.socials || !friend.socials.length),
+      'only-title': !friend.desc && !friend.socials?.length && !friend.location && !friend.organization,
       'no-desc': !friend.desc,
     }"
   >
-    <VPLink
-      class="avatar-link"
-      :href="friend.link"
-      no-icon
-    >
-      <div
-        class="avatar"
-        :style="{ backgroundImage: `url(${friend.avatar})` }"
-      />
-    </VPLink>
+    <div class="avatar">
+      <img :src="friend.avatar" :alt="friend.name">
+    </div>
 
     <div class="content">
-      <VPLink
-        class="title"
-        :href="friend.link"
-        no-icon
-      >
-        {{ friend.name }}
-      </VPLink>
-      <p v-if="friend.desc">
+      <VPLink class="title" :href="friend.link" no-icon :text="friend.name" />
+      <p v-if="friend.location" class="location">
+        <span class="vpi-location" />
+        <span>{{ friend.location }}</span>
+      </p>
+      <p v-if="friend.organization" class="organization">
+        <span class="vpi-organization" />
+        <span>{{ friend.organization }}</span>
+      </p>
+      <p v-if="friend.desc" class="desc" :class="{ offset: friend.location && friend.organization }">
         {{ friend.desc }}
       </p>
       <VPSocialLinks v-if="friend.socials" :links="friend.socials" />
@@ -66,6 +61,7 @@ const friendStyle = computed(() => {
 .vp-friend {
   position: relative;
   display: flex;
+  gap: 16px;
   align-items: flex-start;
   padding: 20px;
   margin-bottom: 8px;
@@ -74,17 +70,20 @@ const friendStyle = computed(() => {
   transition: all var(--vp-t-color);
 }
 
-.avatar-link {
-  display: inline-block;
-  margin-right: 16px;
+.avatar {
+  width: 88px;
+  height: 88px;
+  overflow: hidden;
+  background-color: var(--vp-c-default-soft);
+  border-radius: 100%;
 }
 
-.avatar {
-  width: 64px;
-  height: 64px;
-  background-color: var(--vp-c-default-soft);
-  background-size: cover;
-  border-radius: 100%;
+.avatar img {
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
+  object-position: top;
 }
 
 .content {
@@ -92,22 +91,62 @@ const friendStyle = computed(() => {
 }
 
 .vp-friend.only-title .content {
-  margin-top: 20px;
+  margin-top: 30px;
 }
 
 .content .title {
   padding-bottom: 8px;
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 700;
   color: var(--vp-friends-name-color);
   transition: color var(--vp-t-color), border-bottom var(--vp-t-color);
 }
 
+.content .title::before {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  content: "";
+}
+
+.content .location,
+.content .organization {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding-top: 16px;
+  font-size: 14px;
+  color: var(--vp-friends-text-color);
+  opacity: 0.8;
+  transition: color var(--vp-t-color);
+}
+
+.content .location + .organization {
+  padding-top: 0;
+}
+
+.content .desc {
+  padding-top: 16px;
+  line-height: 1.5;
+  color: var(--vp-friends-text-color);
+  transition: color var(--vp-t-color);
+}
+
+.content .desc.offset {
+  margin-top: 4px;
+  margin-left: -104px;
+}
+
 .content :deep(.vp-social-links) {
   justify-content: flex-end;
   margin-top: 8px;
 }
 
+.content :deep(.vp-social-links .vp-social-link) {
+  position: relative;
+  z-index: 2;
+}
+
 .vp-friend.no-desc .content :deep(.vp-social-links) {
   justify-content: flex-start;
 }
@@ -115,17 +154,4 @@ const friendStyle = computed(() => {
 .content :deep(.vp-social-link) {
   color: var(--vp-friends-name-color);
 }
-
-.content p {
-  display: -webkit-box;
-  padding-top: 16px;
-  overflow: hidden;
-  line-height: 1.5;
-  color: var(--vp-friends-text-color);
-  transition: color var(--vp-t-color);
-
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
-}
 </style>

theme/src/shared/frontmatter/friends.ts

@@ -6,6 +6,8 @@ export interface FriendsItem {
   link: string
   avatar?: string
   desc?: string
+  location?: string
+  organization?: string
   socials?: SocialLink[]
   backgroundColor?: string | { light: string, dark: string }
   color?: string | { light: string, dark: string }