From e3ddba7d362c24e3c62ddf3a9bee84babdba158c Mon Sep 17 00:00:00 2001
From: Kuizuo <hi@kuizuo.cn>
Date: Fri, 29 Dec 2023 06:09:17 +0800
Subject: [PATCH] feat: optimize globalData

---
 src/components/UserCard/index.tsx            | 13 ++++++-------
 src/pages/_components/HomepageBlog/index.tsx | 14 +++++++-------
 src/plugin/plugin-content-blog/index.js      |  5 +++--
 src/theme/BlogPostItem/Header/Info/index.tsx | 11 +++--------
 src/theme/BlogRecommend/index.tsx            | 13 ++++++-------
 5 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/src/components/UserCard/index.tsx b/src/components/UserCard/index.tsx
index 4a69e8cd..0ef83b0f 100644
--- a/src/components/UserCard/index.tsx
+++ b/src/components/UserCard/index.tsx
@@ -30,19 +30,18 @@ export default function UserCard({ isNavbar = false }: { isNavbar?: boolean }) {
 
   const logoLink = useBaseUrl(logo.src || '/')
 
-  const blogPluginData = usePluginData('docusaurus-plugin-content-blog') as {
-    blogs: BlogPost[]
-    tags: BlogTags
+  const blogData = usePluginData('docusaurus-plugin-content-blog') as {
+    posts: BlogPost[]
+    postNum: number
+    tagNum: number
   }
   const docData = (
     usePluginData('docusaurus-plugin-content-docs') as { versions: { docs: BlogPost[] } }
   )?.versions[0].docs
-  const blogData = blogPluginData?.blogs
-  const tagData = blogPluginData?.tags
 
   const count: Count = {
-    blog: blogData.length,
-    tag: Object.keys(tagData).length ?? 0,
+    blog: blogData.postNum,
+    tag: blogData.tagNum ?? 0,
     doc: docData?.length ?? 0,
     project: projects?.length ?? 0,
   }
diff --git a/src/pages/_components/HomepageBlog/index.tsx b/src/pages/_components/HomepageBlog/index.tsx
index 88dbe846..a9fd649e 100644
--- a/src/pages/_components/HomepageBlog/index.tsx
+++ b/src/pages/_components/HomepageBlog/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import clsx from 'clsx'
 import { motion, useScroll, useTransform } from 'framer-motion'
 import { BlogPost } from '@docusaurus/plugin-content-blog'
-import useGlobalData from '@docusaurus/useGlobalData'
+import { usePluginData } from '@docusaurus/useGlobalData'
 import Translate from '@docusaurus/Translate'
 import Link from '@docusaurus/Link'
 import Image from '@theme/IdealImage'
@@ -47,13 +47,13 @@ export function BlogItem({ post }: { post: BlogPost }) {
 }
 
 export default function BlogRecent(): JSX.Element {
-  const globalData = useGlobalData()
-  const blogPluginData = globalData?.['docusaurus-plugin-content-blog']?.['default'] as {
-    blogs: BlogPost[]
+  const blogData = usePluginData('docusaurus-plugin-content-blog') as {
+    posts: BlogPost[]
+    postNum: number
+    tagNum: number
   }
 
-  const blogData = blogPluginData?.blogs
-  const posts = chunk(blogData.slice(0, 6), 2)
+  const posts = chunk(blogData.posts.slice(0, 6), 2)
 
   const ref = React.useRef<HTMLDivElement>(null)
 
@@ -62,7 +62,7 @@ export default function BlogRecent(): JSX.Element {
     clamp: false,
   })
 
-  if (blogData.length === 0) {
+  if (blogData.postNum === 0) {
     return <>作者还没有写过博客哦</>
   }
 
diff --git a/src/plugin/plugin-content-blog/index.js b/src/plugin/plugin-content-blog/index.js
index a5943e46..5dfb22a3 100644
--- a/src/plugin/plugin-content-blog/index.js
+++ b/src/plugin/plugin-content-blog/index.js
@@ -16,8 +16,9 @@ async function blogPluginEnhanced(context, options) {
       const { setGlobalData } = actions;
 
       setGlobalData({
-        blogs: blogPosts,
-        tags: blogTags,
+        posts: blogPosts.slice(0, 10), // Only store 10 posts
+        postNum: blogPosts.length,
+        tagNum: Object.keys(blogTags).length,
       });
     },
   };
diff --git a/src/theme/BlogPostItem/Header/Info/index.tsx b/src/theme/BlogPostItem/Header/Info/index.tsx
index 4d1dcd74..264d50a4 100644
--- a/src/theme/BlogPostItem/Header/Info/index.tsx
+++ b/src/theme/BlogPostItem/Header/Info/index.tsx
@@ -61,15 +61,10 @@ export default function BlogPostItemHeaderInfo({ className }: Props): JSX.Elemen
           <div className={styles.tagList}>
             {tags.slice(0, 2).map(({ label, permalink: tagPermalink }, index) => {
               return (
-                <>
+                <div key={tagPermalink}>
                   {index !== 0 && '/'}
-                  <Tag
-                    label={label}
-                    permalink={tagPermalink}
-                    key={tagPermalink}
-                    className={'tag'}
-                  />
-                </>
+                  <Tag label={label} permalink={tagPermalink} className={'tag'} />
+                </div>
               )
             })}
           </div>
diff --git a/src/theme/BlogRecommend/index.tsx b/src/theme/BlogRecommend/index.tsx
index 2779bd41..1b8c0230 100644
--- a/src/theme/BlogRecommend/index.tsx
+++ b/src/theme/BlogRecommend/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import clsx from 'clsx'
 import { motion } from 'framer-motion'
 import { BlogPost } from '@docusaurus/plugin-content-blog'
-import useGlobalData from '@docusaurus/useGlobalData'
+import { usePluginData } from '@docusaurus/useGlobalData'
 import Translate from '@docusaurus/Translate'
 import Link from '@docusaurus/Link'
 import Image from '@theme/IdealImage'
@@ -10,13 +10,12 @@ import Image from '@theme/IdealImage'
 import styles from './styles.module.scss'
 
 export default function BlogRecommend(): JSX.Element {
-  const globalData = useGlobalData()
-  const blogPluginData = globalData?.['docusaurus-plugin-content-blog']?.['default'] as {
-    blogs: BlogPost[]
+  const blogData = usePluginData('docusaurus-plugin-content-blog') as {
+    posts: BlogPost[]
+    postNum: number
+    tagNum: number
   }
-
-  const blogData = blogPluginData?.blogs
-  const recommendedPosts = blogData
+  const recommendedPosts = blogData.posts
     .filter(b => (b.metadata.frontMatter.sticky as number) > 0)
     .map(b => b.metadata)
     .sort((a, b) => (a.frontMatter.sticky as number) - (b.frontMatter.sticky as number))