From 69c61eb942ef09c0e428396e73de7599acb7a9ba Mon Sep 17 00:00:00 2001
From: ThyeeZz <jialian.ji@zilliz.com>
Date: Mon, 9 Sep 2024 17:26:55 +0800
Subject: [PATCH 1/3] add pagination to milvus blog

---
 .../card/{BlogCard.jsx => BlogCard.tsx}       |  12 +-
 .../cookieConsent/index.module.less           |   2 +-
 src/components/ui/pagination.tsx              | 147 ++++++++
 src/pages/blog/index.jsx                      | 211 -----------
 src/pages/blog/index.tsx                      | 335 ++++++++++++++++++
 src/parts/home/lovedSection/index.module.less |   2 +-
 src/styles/blog.module.less                   |  99 ++----
 src/styles/mixin.module.less                  |  29 +-
 src/utils/blog.utils.ts                       |   3 +-
 9 files changed, 559 insertions(+), 281 deletions(-)
 rename src/components/card/{BlogCard.jsx => BlogCard.tsx} (74%)
 create mode 100644 src/components/ui/pagination.tsx
 delete mode 100644 src/pages/blog/index.jsx
 create mode 100644 src/pages/blog/index.tsx

diff --git a/src/components/card/BlogCard.jsx b/src/components/card/BlogCard.tsx
similarity index 74%
rename from src/components/card/BlogCard.jsx
rename to src/components/card/BlogCard.tsx
index 5b681eb97..71a3f8e57 100644
--- a/src/components/card/BlogCard.jsx
+++ b/src/components/card/BlogCard.tsx
@@ -1,10 +1,18 @@
 import React from 'react';
 import Link from 'next/link';
-import * as styles from './BlogCard.module.less';
+import styles from './BlogCard.module.less';
 import Tags from '../tags';
 import clsx from 'clsx';
 
-const BlogCard = ({ title, desc, tags, cover, locale, path, className }) => {
+const BlogCard = (props: {
+  title: string;
+  desc: string;
+  tags: string[];
+  cover: string;
+  path: string;
+  className?: string;
+}) => {
+  const { title, desc, tags, cover, path, className } = props;
   const to = `/blog/${path}`;
 
   return (
diff --git a/src/components/cookieConsent/index.module.less b/src/components/cookieConsent/index.module.less
index 4da4858a2..5d9570b93 100644
--- a/src/components/cookieConsent/index.module.less
+++ b/src/components/cookieConsent/index.module.less
@@ -31,7 +31,7 @@
   }
 
   p {
-    .paragraph5-regular();
+    .paragraph6-regular();
     color: @color-black2;
     font-family: Inter !important;
   }
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
new file mode 100644
index 000000000..48d19d717
--- /dev/null
+++ b/src/components/ui/pagination.tsx
@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '@/utils/merge';
+import { ButtonProps, buttonVariants } from '@/components/ui/button';
+import Link from 'next/link';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center', className)}
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('', className)} {...props} />
+));
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+  disabled?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<typeof Link>;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <Link
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => {
+  return (
+    <>
+      {props.disabled ? (
+        <button
+          className={cn(
+            'w-[32px] h-[32px] p-0 m-0 flex items-center justify-center',
+            className
+          )}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+      ) : (
+        <PaginationLink
+          aria-label="Go to previous page"
+          size="default"
+          className={cn('gap-1 pl-2.5', className)}
+          {...props}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </PaginationLink>
+      )}
+    </>
+  );
+};
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => {
+  return (
+    <>
+      {props.disabled ? (
+        <button
+          className={cn(
+            'w-[32px] h-[32px] p-0 m-0 flex items-center justify-center',
+            className
+          )}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      ) : (
+        <PaginationLink
+          aria-label="Go to next page"
+          size="default"
+          className={cn('gap-1 pr-2.5', className)}
+          {...props}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </PaginationLink>
+      )}
+    </>
+  );
+};
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-end p-[6px] justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};
diff --git a/src/pages/blog/index.jsx b/src/pages/blog/index.jsx
deleted file mode 100644
index dcac49075..000000000
--- a/src/pages/blog/index.jsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import Link from 'next/link';
-import Head from 'next/head';
-import blogUtils from '../../utils/blog.utils';
-import Layout from '../../components/layout/commonLayout';
-import BlogCard from '../../components/card/BlogCard';
-import Tags from '../../components/tags';
-import { useWindowSize } from '../../http/hooks';
-import * as styles from '../../styles/blog.module.less';
-import pageClasses from '../../styles/responsive.module.less';
-import { useRouter } from 'next/router';
-import clsx from 'clsx';
-import { ABSOLUTE_BASE_URL } from '@/consts';
-import CustomButton from '../../components/customButton';
-import { RightWholeArrow } from '../../components/icons';
-
-const SCROLL_SIZE = 6;
-const TITLE = 'Milvus Blog';
-const DESC = 'Milvus Blog';
-
-const TAG_QUERY_KEY = 'tag';
-const DEFAULT_TAG = 'all';
-
-const BlogTemplate = props => {
-  const { locale, blogList } = props;
-
-  const { t } = useTranslation('common');
-  const router = useRouter();
-  const [currentTag, setCurrentTag] = useState(DEFAULT_TAG);
-  const [scrollIndex, setScrollIndex] = useState(1);
-  const currentSize = useWindowSize();
-
-  const isMobile = ['phone'].includes(currentSize);
-
-  const { featuredBlog, restBlogs } = useMemo(() => {
-    let [restBlogs, featuredBlog] = [[], null];
-
-    let isDetectRecommend = false;
-    blogList.forEach(i => {
-      if (i.isRecommend && !isDetectRecommend) {
-        // bloglist is sorted by time,
-        // if there is more than one recommended blog, take the newest one
-        featuredBlog = i;
-        isDetectRecommend = true;
-      } else {
-        restBlogs.push(i);
-      }
-    });
-
-    if (!featuredBlog) {
-      featuredBlog = blogList[0];
-      restBlogs = blogList.slice(1);
-    }
-
-    return {
-      featuredBlog,
-      restBlogs,
-    };
-  }, [blogList]);
-
-  // list of tags
-  const tagList = useMemo(() => {
-    const tagData = {
-      all: 'all',
-    };
-    blogList.forEach(item => {
-      const { tags } = item;
-      tags.forEach(subItem => {
-        tagData[subItem] = subItem;
-      });
-    });
-    return Object.keys(tagData);
-  }, [blogList]);
-
-  const filteredBlogs = useMemo(() => {
-    return currentTag === 'all'
-      ? restBlogs
-      : restBlogs.filter(v => v.tags.includes(currentTag));
-  }, [currentTag, restBlogs]);
-
-  useEffect(() => {
-    const FOOT_HEIGHT = isMobile ? 845 : 675;
-    const FOOT_DISTANCE = 80;
-    const cb = e => {
-      const viewHeight = document.documentElement.clientHeight;
-      const scrollHeight = document.documentElement.scrollTop;
-      const contentHeight = Math.max(
-        document.body.scrollHeight,
-        document.documentElement.scrollHeight
-      );
-      const scrollBtmHeight = contentHeight - scrollHeight - viewHeight;
-      const maxScrollIndex = Math.ceil(filteredBlogs.length / SCROLL_SIZE);
-      if (scrollBtmHeight < FOOT_HEIGHT + FOOT_DISTANCE) {
-        // console.log("---set---", scrollIndex);
-        setScrollIndex(v => (v < maxScrollIndex ? (v += 1) : v));
-      }
-    };
-    window.addEventListener('scroll', cb);
-    return () => {
-      window.removeEventListener('scroll', cb);
-    };
-  }, [filteredBlogs, scrollIndex, isMobile]);
-
-  const handleFilter = (tag, isRestore = true) => {
-    router.push(`/blog?tag=${tag}`);
-    // isRestore && window.sessionStorage.setItem(FILTER_TAG, tag);
-    setCurrentTag(tag);
-  };
-
-  useEffect(() => {
-    const { asPath } = router;
-    const queryString = asPath.split('?')[1] ?? '';
-    const curQueryTag = new URLSearchParams(queryString).get(TAG_QUERY_KEY);
-    setCurrentTag(curQueryTag || DEFAULT_TAG);
-  }, []);
-
-  const absoluteUrl = `${ABSOLUTE_BASE_URL}/blog`;
-
-  return (
-    <Layout t={t}>
-      <Head>
-        <title>{TITLE}</title>
-        <meta name="description" content={DESC} />
-        <meta property="og:title" content={TITLE}></meta>
-        <meta property="og:description" content={DESC} />
-        <meta property="og:url" content={absoluteUrl} />
-        <link rel="alternate" href={absoluteUrl} hrefLang="en" />
-      </Head>
-      <main>
-        <div className={clsx(pageClasses.container, styles.listWrapper)}>
-          {/* screen > 1024  */}
-          <section className={styles.featuredBlog}>
-            <div className={clsx(styles.featuredImg)}>
-              <img src={featuredBlog.cover} alt={featuredBlog.title} />
-            </div>
-            <div className={clsx(styles.featuredBlogContent)}>
-              <div className="">
-                <p className={styles.tag}>{featuredBlog.tags.join(' ')}</p>
-                <h2 className={styles.title}>{featuredBlog.title}</h2>
-                <p className={styles.desc}>{featuredBlog.desc}</p>
-              </div>
-              <CustomButton
-                endIcon={<RightWholeArrow />}
-                variant="text"
-                className={styles.readMoreButton}
-                href={featuredBlog.href}
-              >
-                Read Now
-              </CustomButton>
-            </div>
-          </section>
-
-          <section className={styles.blogList}>
-            <h1 className={styles.hiddenHeading1}>Milvus Blogs</h1>
-            <Tags
-              list={tagList}
-              tagsClass={styles.tagsWrapper}
-              genTagClass={tag => (currentTag === tag ? styles.active : '')}
-              onClick={handleFilter}
-            />
-
-            <ul className={styles.blogCards}>
-              {filteredBlogs.map((v, index) => {
-                const { desc, cover, date, tags, title, id } = v;
-                return (
-                  <li
-                    key={v.id}
-                    className={`${
-                      index < SCROLL_SIZE * scrollIndex
-                        ? styles.fadeInup
-                        : styles.cardItem
-                    }`}
-                  >
-                    <BlogCard
-                      className={`${
-                        index < SCROLL_SIZE * scrollIndex
-                          ? styles.fadeInup
-                          : styles.cardItem
-                      }`}
-                      locale={locale}
-                      title={title}
-                      date={date}
-                      cover={cover}
-                      desc={desc}
-                      tags={tags}
-                      path={id}
-                    />
-                  </li>
-                );
-              })}
-            </ul>
-          </section>
-        </div>
-      </main>
-    </Layout>
-  );
-};
-
-export default BlogTemplate;
-
-export const getStaticProps = () => {
-  const list = blogUtils.getAllData();
-
-  return {
-    props: {
-      locale: 'en',
-      blogList: list,
-    },
-  };
-};
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
new file mode 100644
index 000000000..ce67f5d52
--- /dev/null
+++ b/src/pages/blog/index.tsx
@@ -0,0 +1,335 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import Head from 'next/head';
+import blogUtils from '../../utils/blog.utils';
+import Layout from '../../components/layout/commonLayout';
+import BlogCard from '../../components/card/BlogCard';
+import Tags from '../../components/tags';
+import styles from '../../styles/blog.module.less';
+import pageClasses from '../../styles/responsive.module.less';
+import { useRouter } from 'next/router';
+import clsx from 'clsx';
+import { ABSOLUTE_BASE_URL } from '@/consts';
+import CustomButton from '../../components/customButton';
+import { RightWholeArrow } from '../../components/icons';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination';
+import { BlogFrontMatterType } from '@/types/blogs';
+import SubscribeNewsletter from '@/components/subscribe';
+
+const PAGE_SIZE = 9;
+const TITLE = 'Learn Milvus: Insights and Innovations in VectorDB Technology';
+const DESC =
+  'Learn vector database fundamentals, Milvus features and capabilities, and technical tutorials on managing and optimizing vector search for modern AI apps.';
+
+const TAG_QUERY_KEY = 'blog_tag';
+const DEFAULT_TAG = 'all';
+
+const PAGINATION_QUERY_KEY = 'page';
+const DEFAULT_PAGE = 1;
+
+const ELLIPSIS = 'ellipsis';
+const ELLIPSIS_2 = 'ellipsis2';
+
+const generatePaginationNavigators = (
+  currentPage: number,
+  totalPages: number
+) => {
+  if (totalPages <= 4) {
+    // [1,2,3,4]
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  if (currentPage <= 2) {
+    // [1,2,3,...,5]
+    return [1, 2, 3, ELLIPSIS, totalPages];
+  }
+  if (currentPage <= 3) {
+    // [1,2,3,...,5];
+    return [1, 2, 3, 4, ELLIPSIS, totalPages];
+  }
+
+  if (currentPage === totalPages - 2) {
+    // [1,...,4,5,6,7]
+    return [
+      1,
+      ELLIPSIS,
+      totalPages - 3,
+      totalPages - 2,
+      totalPages - 1,
+      totalPages,
+    ];
+  }
+
+  if (currentPage > totalPages - 2) {
+    // [1,...,3,4,5]
+    return [1, ELLIPSIS, totalPages - 2, totalPages - 1, totalPages];
+  }
+  // [1,...,3,4,5,...,7]
+  return [
+    1,
+    ELLIPSIS,
+    currentPage - 1,
+    currentPage,
+    currentPage + 1,
+    ELLIPSIS_2,
+    totalPages,
+  ];
+};
+
+const BlogTemplate = (props: {
+  locale: string;
+  blogList: BlogFrontMatterType[];
+}) => {
+  const { locale, blogList } = props;
+
+  const router = useRouter();
+
+  const [queryParams, setQueryParams] = useState({
+    tag: DEFAULT_TAG,
+    page: DEFAULT_PAGE,
+  });
+
+  const { featuredBlog, restBlogs } = useMemo(() => {
+    // blogs are sorted by time, take the latest recommended blog as the featured blog
+    // if no recommended blog, take the latest blog as the featured blog
+    const recommendedBlog = blogList.find(v => v.recommend) || blogList[0];
+    const restBlogs = blogList.filter(v => v.id !== recommendedBlog.id);
+    return {
+      featuredBlog: recommendedBlog,
+      restBlogs,
+    };
+  }, [blogList]);
+
+  const handleFilter = (tag: string) => {
+    // always reset to the first page when filtering tags
+    window.history.pushState(
+      {},
+      '',
+      `/blog?${TAG_QUERY_KEY}=${tag}&${PAGINATION_QUERY_KEY}=${DEFAULT_PAGE}`
+    );
+    setQueryParams({
+      tag,
+      page: DEFAULT_PAGE,
+    });
+  };
+
+  const generatePagination = (page: 1 | -1) => {
+    const { tag, page: currentPage } = queryParams;
+
+    if (page === 1 && currentPage === filteredData.totalPages) {
+      return '';
+    }
+    if (page === -1 && currentPage === 1) {
+      return '';
+    }
+
+    return {
+      path: `/blog?${TAG_QUERY_KEY}=${tag}&${PAGINATION_QUERY_KEY}=${
+        currentPage + page
+      }`,
+      previousDisabled: currentPage + page === 1,
+      nextDisabled: currentPage + page === filteredData.totalPages,
+    };
+  };
+
+  // list of tags
+  const tagList = useMemo(() => {
+    const tagData = {
+      all: DEFAULT_TAG,
+    };
+    blogList.forEach(item => {
+      const { tags } = item;
+      tags.forEach(subItem => {
+        tagData[subItem] = subItem;
+      });
+    });
+    return Object.keys(tagData);
+  }, [blogList]);
+
+  const filteredData = useMemo(() => {
+    const { tag, page } = queryParams;
+    const tagFilteredBlogs =
+      tag === DEFAULT_TAG
+        ? restBlogs
+        : restBlogs.filter(v => v.tags.includes(tag));
+    const pageFilteredBlogs = tagFilteredBlogs.slice(
+      (page - 1) * PAGE_SIZE,
+      page * PAGE_SIZE
+    );
+    const totalPages = Math.ceil(tagFilteredBlogs.length / PAGE_SIZE);
+    const paginationNavigators = generatePaginationNavigators(page, totalPages);
+    return {
+      blogs: pageFilteredBlogs,
+      totalLength: tagFilteredBlogs.length,
+      totalPages,
+      paginationNavigators,
+    };
+  }, [queryParams, restBlogs]);
+
+  useEffect(() => {
+    const { query } = router;
+    const tag = (query[TAG_QUERY_KEY] as string) || DEFAULT_TAG;
+    const page = Number(query[PAGINATION_QUERY_KEY]) || DEFAULT_PAGE;
+
+    setQueryParams({
+      tag,
+      page,
+    });
+  }, [router]);
+
+  const navigateLinks = useMemo(() => {
+    const { tag, page } = queryParams;
+    const previousLink =
+      page > 1
+        ? `/blog?${TAG_QUERY_KEY}=${tag}&${PAGINATION_QUERY_KEY}=${page - 1}`
+        : '';
+    const previousLinkDisabled = page === 1;
+    const nextLink =
+      page < filteredData.totalPages
+        ? `/blog?${TAG_QUERY_KEY}=${tag}&${PAGINATION_QUERY_KEY}=${page + 1}`
+        : '';
+    const nextLinkDisabled = page === filteredData.totalPages;
+    return {
+      previousLink,
+      nextLink,
+      previousLinkDisabled,
+      nextLinkDisabled,
+    };
+  }, [queryParams, filteredData]);
+
+  const absoluteUrl = `${ABSOLUTE_BASE_URL}/blog`;
+
+  return (
+    <Layout>
+      <Head>
+        <title>{TITLE}</title>
+        <meta name="description" content={DESC} />
+        <meta property="og:title" content={TITLE}></meta>
+        <meta property="og:description" content={DESC} />
+        <meta property="og:url" content={absoluteUrl} />
+        <link rel="alternate" href={absoluteUrl} hrefLang="en" />
+      </Head>
+      <main>
+        <div className={clsx(pageClasses.container, styles.listWrapper)}>
+          {/* screen > 1024  */}
+          <section className={styles.featuredBlog}>
+            <div className={clsx(styles.featuredImg)}>
+              <img src={featuredBlog.cover} alt={featuredBlog.title} />
+            </div>
+            <div className={clsx(styles.featuredBlogContent)}>
+              <div className="">
+                <p className={styles.tag}>{featuredBlog.tags.join(' ')}</p>
+                <h2 className={styles.title}>{featuredBlog.title}</h2>
+                <p className={styles.desc}>{featuredBlog.desc}</p>
+              </div>
+              <CustomButton
+                endIcon={<RightWholeArrow />}
+                variant="text"
+                className={styles.readMoreButton}
+                href={`/blog/${featuredBlog.id}`}
+              >
+                Read Now
+              </CustomButton>
+            </div>
+          </section>
+
+          <section className={styles.blogList}>
+            <h1 className={styles.hiddenHeading1}>Milvus Blogs</h1>
+            <Tags
+              list={tagList}
+              tagsClass={styles.tagsWrapper}
+              genTagClass={(tag: string) =>
+                clsx({
+                  [styles.active]: queryParams.tag === tag,
+                })
+              }
+              onClick={handleFilter}
+            />
+
+            <ul className={styles.blogCards}>
+              {filteredData.blogs.map(v => {
+                const { desc, cover, date, tags, title, id } = v;
+                return (
+                  <li key={v.id}>
+                    <BlogCard
+                      title={title}
+                      cover={cover}
+                      desc={desc}
+                      tags={tags}
+                      path={id}
+                    />
+                  </li>
+                );
+              })}
+            </ul>
+            <Pagination className={styles.paginationWrapper}>
+              <PaginationContent>
+                <PaginationItem>
+                  <PaginationPrevious
+                    href={navigateLinks.previousLink}
+                    disabled={navigateLinks.previousLinkDisabled}
+                    className={clsx(styles.paginationLink, {
+                      [styles.disabledNavigationLink]:
+                        navigateLinks.previousLinkDisabled,
+                    })}
+                  />
+                </PaginationItem>
+                {filteredData.paginationNavigators.map((v, i) => {
+                  return (
+                    <PaginationItem key={v}>
+                      {String(v).includes(ELLIPSIS) ? (
+                        <PaginationEllipsis />
+                      ) : (
+                        <PaginationLink
+                          href={`/blog?${TAG_QUERY_KEY}=${queryParams.tag}&${PAGINATION_QUERY_KEY}=${v}`}
+                          isActive={v === queryParams.page}
+                          className={clsx(styles.paginationLink, {
+                            [styles.activePaginationLink]:
+                              v === queryParams.page,
+                          })}
+                        >
+                          {v}
+                        </PaginationLink>
+                      )}
+                    </PaginationItem>
+                  );
+                })}
+                <PaginationItem>
+                  <PaginationNext
+                    href={navigateLinks.nextLink}
+                    disabled={navigateLinks.nextLinkDisabled}
+                    className={clsx(styles.paginationLink, {
+                      [styles.disabledNavigationLink]:
+                        navigateLinks.nextLinkDisabled,
+                    })}
+                  />
+                </PaginationItem>
+              </PaginationContent>
+            </Pagination>
+            <SubscribeNewsletter />
+          </section>
+        </div>
+      </main>
+    </Layout>
+  );
+};
+
+export default BlogTemplate;
+
+export const getStaticProps = () => {
+  const list = blogUtils.getAllData();
+
+  return {
+    props: {
+      locale: 'en',
+      blogList: list,
+    },
+  };
+};
diff --git a/src/parts/home/lovedSection/index.module.less b/src/parts/home/lovedSection/index.module.less
index 68d5fb180..340e189ab 100644
--- a/src/parts/home/lovedSection/index.module.less
+++ b/src/parts/home/lovedSection/index.module.less
@@ -108,7 +108,7 @@
         color: @color-black1;
       }
       .jobTitle {
-        .paragraph5();
+        .paragraph6();
         color: @color-black2;
       }
     }
diff --git a/src/styles/blog.module.less b/src/styles/blog.module.less
index b582a1884..5f6a13300 100644
--- a/src/styles/blog.module.less
+++ b/src/styles/blog.module.less
@@ -3,7 +3,7 @@
 .listWrapper {
   margin: 0 auto;
   max-width: @screen-desktop1440;
-  margin-bottom: 188px;
+  margin-bottom: 80px;
 
   .featuredBlog {
     display: flex;
@@ -120,6 +120,7 @@
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 60px 30px;
+      margin-bottom: 60px;
 
       @media @tablet {
         grid-template-columns: repeat(2, 1fr);
@@ -129,33 +130,45 @@
         grid-gap: 30px;
       }
     }
-    .pagination {
-      display: flex;
-      justify-content: center;
-      margin: 100px auto 120px auto;
-    }
-    .cardItem {
-      position: absolute;
-      top: -1000px;
-      opacity: 0;
-    }
-    .fadeInup {
-      position: relative;
-      top: 0;
-      animation: fadeInUp 0.3s ease-out;
-      animation-fill-mode: both;
-    }
-  }
 
-  @keyframes fadeInUp {
-    0% {
-      transform: translate3d(0, 4rem, 0);
-      opacity: 0;
-    }
+    .paginationWrapper {
+      margin-bottom: 60px;
+
+      .paginationLink {
+        .paragraph6-bold();
+        width: 32px;
+        height: 32px;
+        text-align: center;
+        vertical-align: middle;
+        border-radius: 8px;
+        border: 1px solid @color-black4;
+        background-color: #fff;
+        color: #000;
+        padding: 0;
+
+        &:hover {
+          background-color: @color-black4;
+        }
+      }
+
+      .activePaginationLink {
+        background-color: @color-blue1;
+        border-color: @color-blue1;
+        color: #fff;
+
+        &:hover {
+          background-color: @color-blue1;
+        }
+      }
+
+      .disabledNavigationLink {
+        color: @color-black3;
+        cursor: not-allowed;
 
-    100% {
-      transform: translate3d(0, 0, 0);
-      opacity: 1;
+        &:hover {
+          background-color: #fff;
+        }
+      }
     }
   }
 }
@@ -288,37 +301,3 @@
     .hover;
   }
 }
-
-.moreBlog {
-  margin: 100px auto;
-  h2 {
-    font-weight: bold;
-    font-size: 40px;
-    line-height: 50px;
-    margin-bottom: 44px;
-
-    @media @desktop1024 {
-      font-size: 32px;
-      line-height: 40px;
-      margin-bottom: 24px;
-    }
-  }
-
-  .blogCards {
-    display: grid;
-    grid-template-columns: repeat(3, 30%);
-    column-gap: 3%;
-    row-gap: 92px;
-    padding: 0;
-    @media @desktop1024 {
-      grid-template-columns: repeat(2, 50%);
-    }
-    @media @tablet, @phone {
-      grid-template-columns: repeat(1, 100%);
-      row-gap: 40px;
-    }
-    li {
-      list-style: none;
-    }
-  }
-}
diff --git a/src/styles/mixin.module.less b/src/styles/mixin.module.less
index 5aa8a2fb9..7c5e3e067 100644
--- a/src/styles/mixin.module.less
+++ b/src/styles/mixin.module.less
@@ -310,8 +310,8 @@
   line-height: 22px;
 
   @media @tablet, @phone {
-    font-size: 12px;
-    line-height: 20px;
+    font-size: 13px;
+    line-height: 21px;
   }
 }
 
@@ -326,9 +326,14 @@
 }
 
 .paragraph5 {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 500;
-  line-height: 20px;
+  line-height: 21px;
+
+  @media @tablet, @phone {
+    font-size: 12px;
+    line-height: 20px;
+  }
 }
 
 .paragraph5-bold {
@@ -341,6 +346,22 @@
   font-weight: 400;
 }
 
+.paragraph6 {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.paragraph6-bold {
+  .paragraph6();
+  font-weight: 600;
+}
+
+.paragraph6-regular {
+  .paragraph6();
+  font-weight: 400;
+}
+
 .overflowEllipsis3Row {
   text-overflow: ellipsis;
   overflow: hidden;
diff --git a/src/utils/blog.utils.ts b/src/utils/blog.utils.ts
index 4669081de..0979b5bd6 100644
--- a/src/utils/blog.utils.ts
+++ b/src/utils/blog.utils.ts
@@ -17,7 +17,7 @@ const generateBlogCover = (cover: string, date: Date) => {
   return `https://${defaultCover}`;
 };
 
-const generateBlogData = (showContent = true) => {
+const generateBlogData = () => {
   const blogsData = fs.readdirSync(BASE_BLOG_DIR).map(v => {
     const file = fs.readFileSync(`${BASE_BLOG_DIR}/${v}`);
     const { data, content } = matter(file);
@@ -25,7 +25,6 @@ const generateBlogData = (showContent = true) => {
 
     return {
       id: v,
-      content: showContent ? content : '',
       date: new Date(data.date).toJSON(),
       cover: generateBlogCover(cover, new Date(data.date)),
       ...rest,

From 931b953496657d3adc3bd987ae30cdd37f4cb1e0 Mon Sep 17 00:00:00 2001
From: ThyeeZz <jialian.ji@zilliz.com>
Date: Mon, 9 Sep 2024 17:55:07 +0800
Subject: [PATCH 2/3] update blog card style

---
 src/components/card/BlogCard.module.less | 4 ++++
 src/styles/blog.module.less              | 9 ++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/card/BlogCard.module.less b/src/components/card/BlogCard.module.less
index 377eabe78..590c08e6b 100644
--- a/src/components/card/BlogCard.module.less
+++ b/src/components/card/BlogCard.module.less
@@ -24,6 +24,10 @@
       color: #000;
       height: 78px;
 
+      &:hover {
+        text-decoration: underline;
+      }
+
       @media @tablet, @phone {
         height: 72px;
       }
diff --git a/src/styles/blog.module.less b/src/styles/blog.module.less
index 2873a69e1..030fd03a2 100644
--- a/src/styles/blog.module.less
+++ b/src/styles/blog.module.less
@@ -57,10 +57,11 @@
         .heading3();
         .overflowEllipsis3Row();
         color: #000;
-        a {
-          color: #000;
-        }
         margin-bottom: 12px;
+
+        &:hover {
+          text-decoration: underline;
+        }
       }
 
       .desc {
@@ -97,6 +98,8 @@
         cursor: pointer;
 
         div {
+          .paragraph3();
+          line-height: 1.5em;
           padding: 6px 16px;
 
           &:hover {

From 0c633a4d100f94ee20c93ac61151e8f03ad1231a Mon Sep 17 00:00:00 2001
From: ThyeeZz <jialian.ji@zilliz.com>
Date: Mon, 9 Sep 2024 17:58:21 +0800
Subject: [PATCH 3/3] update blog card style

---
 src/components/card/BlogCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/card/BlogCard.tsx b/src/components/card/BlogCard.tsx
index 71a3f8e57..41a3b47a1 100644
--- a/src/components/card/BlogCard.tsx
+++ b/src/components/card/BlogCard.tsx
@@ -22,7 +22,7 @@ const BlogCard = (props: {
         [className]: className,
       })}
     >
-      <div className="w-full aspect-[1.59817/1] overflow-hidden rounded-[6px] mb-[28px]">
+      <div className="w-full aspect-[1.59817/1] overflow-hidden rounded-[12px] mb-[28px]">
         <img className={styles.cover} src={cover} alt={title} />
       </div>
       <div className={styles.descWrapper}>