[apisix-website] branch master updated: feat: shuffle picked posts (#1260)

[bz...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

bzp2010 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 75f0fb92e8f feat: shuffle picked posts (#1260)
75f0fb92e8f is described below

commit 75f0fb92e8f96744b120a5e04de4db96aa707b82
Author: Young <is...@outlook.com>
AuthorDate: Tue Aug 2 15:31:28 2022 +0800

    feat: shuffle picked posts (#1260)
---
 blog/src/theme/BlogPosts/index.tsx | 78 +++++++++++++++++++++++++++-----------
 1 file changed, 55 insertions(+), 23 deletions(-)

diff --git a/blog/src/theme/BlogPosts/index.tsx b/blog/src/theme/BlogPosts/index.tsx
index 5316246c0e8..bdf53b80367 100644
--- a/blog/src/theme/BlogPosts/index.tsx
+++ b/blog/src/theme/BlogPosts/index.tsx
@@ -165,6 +165,35 @@ const BlogPostItem: FC<BlogPostItemProps> = (props) => {
   );
 };
 
+type PickedBlogItemProps = Omit<LazyProps, 'scrollPosition'> & {
+  info: any;
+};
+
+const PickedBlogItem: FC<PickedBlogItemProps> = ({
+  info,
+  delayMethod,
+  delayTime,
+  useIntersectionObserver,
+}) => (
+  <BlogPostItem
+    className={style.pickedPosts}
+    key={info.title}
+    frontMatter={info}
+    assets={undefined}
+    metadata={info}
+    truncated={info.summary}
+    {...{ delayMethod, delayTime, useIntersectionObserver }}
+  >
+    <div className={style.featuredPost}>
+      {translate({
+        id: 'blog.picked.posts.component.title',
+        message: 'Featured',
+      })}
+    </div>
+    <p>{info.summary}</p>
+  </BlogPostItem>
+);
+
 const BlogPosts: FC<BlogPostsProps> = ({
   items,
   isFirstPage = false,
@@ -192,29 +221,32 @@ const BlogPosts: FC<BlogPostsProps> = ({
   const { pathname } = useLocation();
 
   if (!pathname.includes('/tags/')) {
-    posts.splice(
-      1,
-      0,
-      (isFirstPage ? pickedPosts : shuffle(pickedPosts)).slice(0, endIdx).map((info) => (
-        <BlogPostItem
-          className={style.pickedPosts}
-          key={info.title}
-          frontMatter={info}
-          assets={undefined}
-          metadata={info}
-          truncated={info.summary}
-          {...{ delayMethod, delayTime, useIntersectionObserver }}
-        >
-          <div className={style.featuredPost}>
-            {translate({
-              id: 'blog.picked.posts.component.title',
-              message: 'Featured',
-            })}
-          </div>
-          <p>{info.summary}</p>
-        </BlogPostItem>
-      )),
-    );
+    if (isFirstPage) {
+      posts.splice(
+        1,
+        0,
+        pickedPosts
+          .slice(0, endIdx)
+          .map((info) => (
+            <PickedBlogItem
+              key={info.title}
+              info={info}
+              {...{ delayMethod, delayTime, useIntersectionObserver }}
+            />
+          )),
+      );
+    } else {
+      const finalPickedPosts = shuffle(pickedPosts).slice(0, endIdx);
+      const positions = shuffle(Array.from({ length: 9 }, (_, idx) => idx)).slice(0, 3);
+      positions.forEach((fromIdx) => {
+        const info = finalPickedPosts.pop();
+        posts.splice(
+          fromIdx,
+          0,
+          <PickedBlogItem info={info} {...{ delayMethod, delayTime, useIntersectionObserver }} />,
+        );
+      });
+    }
   }
 
   return (