fix: update the trending blog logic

milvus-io · Dec 26, 2024 · e4b09f3 · e4b09f3
1 parent e73e3de
commit e4b09f3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import Head from 'next/head';
 import blogUtils from '../../utils/blog.utils';
 import Layout from '../../components/layout/commonLayout';
@@ -31,6 +31,7 @@ import Link from 'next/link';
 import dayjs from 'dayjs';
 import { Trans, useTranslation } from 'react-i18next';
 import { InkeepCustomTriggerWrapper } from '@/components/inkeep/inkeepChat';
+import { debounce } from '@mui/material';
 
 const PAGE_SIZE = 9;
 const TITLE = 'Learn Milvus: Insights and Innovations in VectorDB Technology';
@@ -177,13 +178,14 @@ const Blog: React.FC<Props> = props => {
     const data = props.blogList.reduce((acc, cur) => {
       const shouldSetRecommend =
         cur.recommend &&
-        (!acc.recommend || new Date(acc.recommend.date) < new Date(cur.date));
+        (!acc.recommend?.recommend ||
+          new Date(acc.recommend.date) < new Date(cur.date));
 
       if (shouldSetRecommend) {
         acc.recommend = cur;
         acc.all = props.blogList.filter(v => v.id !== cur.id);
       }
-      if (cur) return acc;
+      return acc;
     }, defaultData);
 
     const sortedByDate = [...data.all].sort(
@@ -253,14 +255,17 @@ const Blog: React.FC<Props> = props => {
     return `${router.pathname}?${search.toString()}`;
   };
 
-  const handleSearch = (e: React.FormEvent) => {
-    const value = (e.target as HTMLInputElement).value.trim();
-    const url = generateLinkUrl(
-      { key: SEARCH_QUERY_KEY, value, shouldRemove: !value },
-      { key: PAGINATION_QUERY_KEY, value: 1, shouldRemove: true }
-    );
-    router.replace(url, undefined, { scroll: false });
-  };
+  const handleSearch = useCallback(
+    debounce((e: React.FormEvent) => {
+      const value = (e.target as HTMLInputElement).value.trim();
+      const url = generateLinkUrl(
+        { key: SEARCH_QUERY_KEY, value, shouldRemove: !value },
+        { key: PAGINATION_QUERY_KEY, value: 1, shouldRemove: true }
+      );
+      router.replace(url, undefined, { scroll: false });
+    }, 300),
+    [router]
+  );
 
   const renderRecommend = () => {
     const { recommend } = blogs;

diff --git a/src/styles/blog.module.less b/src/styles/blog.module.less
@@ -78,6 +78,11 @@
     font-weight: 600;
     line-height: 140%;
     margin: 12px 0;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
 
     &:hover {
       text-decoration: underline;
@@ -130,6 +135,12 @@
       font-weight: 600;
       line-height: 1.5;
       color: @color-black1;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+
       &:hover {
         text-decoration: underline;
         text-underline-position: from-font;