Merge pull request #1600 from milvus-io/preview

Preview

src/components/card/BlogCard.jsx

@@ -14,7 +14,7 @@ const BlogCard = ({ title, desc, tags, cover, locale, path, className }) => {
         [className]: className,
       })}
     >
-      <div className="w-full aspect-[1.59817/1] overflow-hidden rounded-[6px]">
+      <div className="w-full aspect-[1.59817/1] overflow-hidden rounded-[6px] mb-[28px]">
         <img className={styles.cover} src={cover} alt={title} />
       </div>
       <div className={styles.descWrapper}>

src/components/card/BlogCard.module.less

@@ -18,24 +18,15 @@
 
   .descWrapper {
     .title {
+      .paragraph2();
+      .overflowEllipsis3Row();
       margin-top: 0;
-      font-weight: 700;
-      font-size: 18px;
-      line-height: 28px;
       color: #000;
-      margin-bottom: 14px;
-    }
+      height: 78px;
 
-    .desc {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 16px;
-      color: #000;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
+      @media @tablet, @phone {
+        height: 72px;
+      }
     }
 
     .bottomWrapper {
@@ -44,19 +35,14 @@
       align-items: center;
 
       .tags {
+        .paragraph4();
         display: flex;
-        margin: 18px 0 8px 0;
+        gap: 10px;
         list-style: none;
         padding: 0;
         text-transform: uppercase;
-        li {
-          color: @color-text-primary;
-          font-weight: bold;
-          font-size: 14px;
-        }
-        li + li {
-          margin-left: 10px;
-        }
+        color: @color-blue1;
+        margin-bottom: 4px;
       }
     }
   }

src/components/customButton/index.tsx

@@ -28,6 +28,7 @@ function CustomLink(props: CustomButtonProps & { computedClasses: any }) {
     disabled = false,
     classes: customClasses = {},
     computedClasses,
+    className = '',
     ...rest
   } = props;
 
@@ -43,7 +44,7 @@ function CustomLink(props: CustomButtonProps & { computedClasses: any }) {
           target="_blank"
           rel="noopener noreferrer"
           href={href}
-          className={clsx(classes.linkButton, root, computedClasses)}
+          className={clsx(classes.linkButton, className, root, computedClasses)}
         >
           {children}
           {endIcon && (
@@ -55,7 +56,7 @@ function CustomLink(props: CustomButtonProps & { computedClasses: any }) {
           {...rest}
           href={href}
           target={target}
-          className={clsx(classes.linkButton, root, computedClasses)}
+          className={clsx(classes.linkButton, className, root, computedClasses)}
         >
           {children}
           {endIcon && (
@@ -78,6 +79,7 @@ const CustomButton = (props: CustomButtonProps) => {
     disabled = false,
     classes: customClasses = {},
     size = 'medium',
+    className = '',
     ...rest
   } = props;
 
@@ -102,7 +104,7 @@ const CustomButton = (props: CustomButtonProps) => {
       ) : (
         <button
           {...rest}
-          className={clsx(classes.linkButton, root, computedClasses)}
+          className={clsx(classes.linkButton, className, root, computedClasses)}
         >
           {children}
           {endIcon && (

src/components/header/DescktopHeader.tsx

@@ -13,6 +13,7 @@ import {
 import { DownArrowIcon, GitHubIcon } from '@/components/icons';
 import { LogoSection } from './Logos';
 import milvusStats from '../../../global-stats.json';
+import { RightTopArrowIcon } from '@/components/icons';
 
 type Props = { className?: string };
 
@@ -104,10 +105,11 @@ export default function DesktopHeader(props: Props) {
                             <Link
                               href={item.link}
                               rel={item.rel}
-                              className="block text-[14px] leading-[40px] font-[400] px-[16px] text-black no whitespace-nowrap cursor-pointer hover:bg-black/[0.04]"
+                              className="flex items-center gap-[4px] text-[14px] leading-[40px] font-[400] px-[16px] text-black no whitespace-nowrap cursor-pointer hover:bg-black/[0.04]"
                               target={item.rel ? '_blank' : undefined}
                             >
                               {item.label}
+                              {item.rel && <RightTopArrowIcon />}
                             </Link>
                           </li>
                         ))}

src/components/header/mobileHeader.jsx

@@ -15,6 +15,7 @@ import { CloseIcon, MenuIcon } from '../icons';
 import { useWindowSize } from '@/http/hooks';
 import { Button } from '@/components/ui/button';
 import { GET_START_LINK } from '@/consts/links';
+import { RightTopArrowIcon } from '../icons';
 
 export default function MobileHeader(props) {
   const { className } = props;
@@ -114,8 +115,10 @@ export default function MobileHeader(props) {
                       href="https://www.youtube.com/c/MilvusVectorDatabase"
                       target="_blank"
                       rel="noopener noreferrer"
+                      className={classes.externalLinkButton}
                     >
                       Video
+                      <RightTopArrowIcon />
                     </a>
                   </List>
                 </Collapse>
@@ -149,17 +152,26 @@ export default function MobileHeader(props) {
                       href="https://github.com/zilliztech/attu"
                       target="_blank"
                       rel="noopener noreferrer"
+                      className={classes.externalLinkButton}
                     >
                       Attu
+                      <RightTopArrowIcon />
                     </a>
                     <a
                       href="https://github.com/zilliztech/milvus_cli"
                       target="_blank"
                       rel="noopener noreferrer"
+                      className={classes.externalLinkButton}
                     >
                       Milvus_CLI
+                      <RightTopArrowIcon />
+                    </a>
+                    <a
+                      href="/tools/sizing"
+                      className={classes.externalLinkButton}
+                    >
+                      Sizing Tool <RightTopArrowIcon />
                     </a>
-                    <a href="/tools/sizing">Sizing Tool</a>
                   </List>
                 </Collapse>
 

src/components/header/mobileHeader.module.less

@@ -17,7 +17,9 @@
     right: 0;
     top: @header-height-tablet;
     overflow: hidden;
-    transition: height linear 0.3s, top linear 0.3s;
+    transition:
+      height linear 0.3s,
+      top linear 0.3s;
     background-color: #fff;
     z-index: 100;
   }
@@ -69,6 +71,12 @@
     display: inline-block;
     padding: 4px 16px;
   }
+
+  .externalLinkButton {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
 }
 
 .expendIcon {

src/components/tags/index.jsx

@@ -12,7 +12,6 @@ const Tags = props => {
       {list.map(tag => (
         <li key={tag}>
           <div
-            key={tag}
             onClick={() => onClick(tag)}
             onKeyDown={() => onClick(tag)}
             className={genTagClass(tag)}

src/i18n/en/community.json

@@ -0,0 +1,47 @@
+{
+  "title": "Join the Community",
+  "officeHours": {
+    "title": "Join the Milvus Discord Community",
+    "content": "Find help, discover solutions, share ideas, and follow discussions. Get notified of upcoming Zilliz events!",
+    "button": "Join the Milvus Discord Server! "
+  },
+  "community": {
+    "title": "Welcome to the Milvus Community",
+    "content": "The Milvus community is comprised of users and open source contributors that share new ideas, collaborate on projects, and promote learning. Our open-source community members contribute code, attend events, advocate for greater adoption of Milvus, and make many other valuable contributions. Read on to learn how you can get involved and become part of this amazing community.",
+    "features": {
+      "learn": {
+        "title": "Learn",
+        "content": "Expand your knowledge and skills in vector database technologies."
+      },
+      "build": {
+        "title": "Build",
+        "content": "Contribute to the development of Milvus through open source collaboration."
+      },
+      "share": {
+        "title": "Share",
+        "content": "Share best practices and lessons learned with the community at large."
+      }
+    }
+  },
+  "resource": "Resources",
+  "mail": {
+    "title": "Mailing Lists",
+    "mailList": {
+      "meeting": {
+        "title": "Milvus Technical Meeting",
+        "content": "Join our next meeting to be involved in the discussion and decision making of Milvus‘ latest features and development timeline.",
+        "cta": "Learn more"
+      },
+      "event": {
+        "title": "Event",
+        "content": "We host events, often. Click to find out the upcoming events near you.",
+        "cta": "More Events"
+      },
+      "video": {
+        "title": "Video",
+        "content": "We upload videos, often. Click to watch the video tutorials，webinar replays and other video contents.",
+        "cta": "More Videos"
+      }
+    }
+  }
+}

src/i18n/index.ts

@@ -9,6 +9,7 @@ import introEn from './en/intro.json';
 import commonEn from './en/milvus.json';
 import sizingToolEn from './en/sizingTool.json';
 import useCaseEn from './en/useCase.json';
+import communityEn from './en/community.json';
 
 import docsCn from './cn/docs.json';
 import headerCn from './cn/header.json';
@@ -35,6 +36,7 @@ export const resources = {
     home: homeEn,
     docs: docsEn,
     demo: demoEn,
+    community: communityEn,
   },
   cn: {
     common: commonCn,

src/pages/blog/[id].jsx

@@ -63,17 +63,17 @@ export default function Template(props) {
         <div>
           <div className={clsx(pageClasses.docContainer, styles.upLayout)}>
             <section className={styles.blogHeader}>
-              <p className={styles.authorDate}>
-                <span>{dateTime}</span>
-                {author && <span>by {author}</span>}
-              </p>
               <h1 className={styles.title}>{title}</h1>
 
               <Tags
                 list={tags}
                 tagsClass={styles.tags}
                 onClick={handleTagClick}
               />
+              <p className={styles.authorDate}>
+                <span>{dateTime}</span>
+                {author && <span>by {author}</span>}
+              </p>
             </section>
 
             <section className={styles.blogContent}>
@@ -117,7 +117,22 @@ export default function Template(props) {
           </div>
 
           <section className={clsx(pageClasses.container, styles.bottomLayout)}>
-            <h2 className={styles.title}>Keep Reading</h2>
+            <p className={styles.breadcrumb}>
+              <svg
+                width="16"
+                height="17"
+                viewBox="0 0 16 17"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.03277 2.8535C7.59146 2.38217 8.40854 2.38217 8.96723 2.8535L13.4672 6.64986C13.8051 6.93487 14 7.35436 14 7.79636V14.3317C14 14.976 13.4777 15.4983 12.8333 15.4983H10.8333C10.189 15.4983 9.66667 14.976 9.66667 14.3317V10.9983C9.66667 10.7222 9.44281 10.4983 9.16667 10.4983H6.83333C6.55719 10.4983 6.33333 10.7222 6.33333 10.9983V14.3317C6.33333 14.976 5.811 15.4983 5.16667 15.4983H3.16667C2.52233 15.4983 2 14.976 2 14.3317V7.79636C2 7.35436 2.19494 6.93487 2.53277 6.64986L7.03277 2.8535Z"
+                  fill="#00B3FF"
+                />
+              </svg>
+              <a href="/blog">Blog</a> / {title}
+            </p>
+            {/* <h2 className={styles.title}>Keep Reading</h2> */}
             <ul className={styles.blogCards}>
               {moreBlogs.map((v, index) => {
                 const { desc, cover, date, tags, title, id } = v;

src/pages/blog/index.jsx

@@ -12,6 +12,8 @@ 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';
@@ -133,27 +135,26 @@ const BlogTemplate = props => {
               <img src={featuredBlog.cover} alt={featuredBlog.title} />
             </div>
             <div className={clsx(styles.featuredBlogContent)}>
-              <p className={styles.tag}>{featuredBlog.tags.join(' ')}</p>
-              <Link href={featuredBlog.href} className={styles.title}>
-                {featuredBlog.title}
-              </Link>
-              <p className={styles.desc}>{featuredBlog.desc}</p>
+              <div className="">
+                <p className={styles.tag}>{featuredBlog.tags.join(' ')}</p>
+                <h2 className={styles.title}>
+                  <a href={featuredBlog.href}>{featuredBlog.title}</a>
+                </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>
-          {/* tablet phone, screen <= 1024  */}
-          <BlogCard
-            className={styles.mobileFeatured}
-            locale={locale}
-            title={featuredBlog.title}
-            date={featuredBlog.date}
-            cover={featuredBlog.cover}
-            desc={featuredBlog.desc}
-            tags={featuredBlog.tags}
-            path={featuredBlog.id}
-          />
 
           <section className={styles.blogList}>
-            <h1 className={styles.title}>Milvus Blogs</h1>
+            <h1 className={styles.hiddenHeading1}>Milvus Blogs</h1>
             <Tags
               list={tagList}
               tagsClass={styles.tagsWrapper}