Merge branch 'master' of https://github.com/zilliztech/codelabs

zilliztech · Sep 26, 2022 · a9eda34 · a9eda34
2 parents 95d5866 + 9c93b5f
commit a9eda34
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 71 deletions.
diff --git a/pdf/getting-started-with-vector-databases-introduction-to-milvus.pdf b/pdf/getting-started-with-vector-databases-introduction-to-milvus.pdf
diff --git a/pdf/getting-started-with-vector-databases-introduction-to-unstructured-data.pdf b/pdf/getting-started-with-vector-databases-introduction-to-unstructured-data.pdf
diff --git a/pdf/getting-started-with-vector-databases-introduction-to-vector-similarity-search.pdf b/pdf/getting-started-with-vector-databases-introduction-to-vector-similarity-search.pdf
diff --git a/pdf/getting-started-with-vector-databases-milvus-quickstart.pdf b/pdf/getting-started-with-vector-databases-milvus-quickstart.pdf
diff --git a/pdf/getting-started-with-vector-databases-what-is-a-vector-database.pdf b/pdf/getting-started-with-vector-databases-what-is-a-vector-database.pdf
diff --git a/src/components/commonComponents/githubButton/icons.jsx b/src/components/commonComponents/githubButton/icons.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+export const Fork = () => (
+  <svg
+    aria-hidden="true"
+    height="16"
+    viewBox="0 0 16 16"
+    version="1.1"
+    width="16"
+    data-view-component="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"
+    ></path>
+  </svg>
+);
+
+export const Star = () => (
+  <svg
+    aria-hidden="true"
+    height="16"
+    viewBox="0 0 16 16"
+    version="1.1"
+    width="16"
+    data-view-component="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"
+    ></path>
+  </svg>
+);
diff --git a/src/components/commonComponents/githubButton/index.jsx b/src/components/commonComponents/githubButton/index.jsx
@@ -1,32 +1,8 @@
 import React from 'react';
-import Divider from '@mui/material/Divider';
 import * as styles from './index.module.less';
-
-const ForkIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    data-name="Layer 1"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="#000000"
-      d="M17,6.06a3,3,0,0,0-1.15,5.77A2,2,0,0,1,14,13.06H10a3.91,3.91,0,0,0-2,.56V7.88a3,3,0,1,0-2,0v8.36a3,3,0,1,0,2.16.05A2,2,0,0,1,10,15.06h4a4,4,0,0,0,3.91-3.16A3,3,0,0,0,17,6.06Zm-10-2a1,1,0,1,1-1,1A1,1,0,0,1,7,4.06Zm0,16a1,1,0,1,1,1-1A1,1,0,0,1,7,20.06Zm10-10a1,1,0,1,1,1-1A1,1,0,0,1,17,10.06Z"
-    />
-  </svg>
-);
-
-const GitHubIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    data-name="Layer 1"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="#000000"
-      d="M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z"
-    />
-  </svg>
-);
+import { useMemo } from 'react';
+import { Star, Fork } from './icons';
+import clsx from 'clsx';
 
 const GitHubButton = ({
   type = 'star', // star or fork
@@ -36,23 +12,43 @@ const GitHubButton = ({
   stat,
 }) => {
   const isStar = type === 'star';
+  const link = isStar ? href : `${href}/fork`;
+
+  const Icon = isStar ? Star : Fork;
+
+  const formatNum = num => {
+    return num >= 1000 ? `${Math.round(num / 100) / 10}k` : num;
+  };
 
-  const sublink = isStar ? `${href}/stargazers` : `${href}/network/members`;
+  const stats = useMemo(() => {
+    const stars = stat.star;
+    const forks = stat.forks;
+
+    return {
+      star: formatNum(stars),
+      fork: formatNum(forks),
+    };
+  }, [stat]);
 
   return (
     <div className={`${styles.gitBtnWrapper} ${className}`}>
-      <a href={href} className={styles.link} target="_blank" rel="noreferrer">
-        {isStar ? <GitHubIcon /> : <ForkIcon />}
-        <span className={styles.iconText}>{children}</span>
-      </a>
-      <Divider orientation="vertical" variant="middle" flexItem />
       <a
-        href={sublink}
-        className={`${styles.link} ${styles.num} `}
+        href={link}
+        className={styles.link}
         target="_blank"
-        rel="noreferrer"
+        rel="noopener noreferrer"
       >
-        <span className={styles.stat}>{isStar ? stat.star : stat.forks}</span>
+        <span
+          className={clsx(styles.iconWrapper, {
+            [styles.starIcon]: isStar,
+          })}
+        >
+          <Icon />
+        </span>
+
+        <span className={styles.iconText}>{children}</span>
+
+        <span className={styles.stat}>{isStar ? stats.star : stats.fork}</span>
       </a>
     </div>
   );

diff --git a/src/components/commonComponents/githubButton/index.module.less b/src/components/commonComponents/githubButton/index.module.less
@@ -2,53 +2,57 @@
 
 .gitBtnWrapper {
   color: #000;
-  background: linear-gradient(0deg, #f8f8f8, #f8f8f8);
-  border: 1px solid #f2f2f2;
-  border-radius: 4px;
+  background: #fff;
+  border: 1px solid rgba(27, 31, 36, 0.15);
+  border-radius: 6px;
   display: flex;
   height: 30px;
   margin-right: 20px;
-  font-family: 'Inter';
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
+  padding: 3px 12px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
 
   .link {
     align-items: center;
     border-radius: 4px;
     color: #000;
     display: flex;
-    font-size: 16px;
+    font-size: 12px;
     line-height: 20px;
-    padding: 10px;
     text-decoration: none;
-    font-family: 'Inter';
+
     .hover;
 
     .iconWrapper {
-      font-size: 20px;
       margin-right: 8px;
+      display: inline-block;
+      font-size: 0;
+      line-height: 0;
+    }
+
+    .starIcon > svg > path {
+      fill: #eac54f;
+      // background-color: #eac54f;
     }
 
     .iconText {
+      font-weight: 600;
+
       @media @desktop1024, @tablet {
         display: none;
       }
     }
-
-    line-height: 18px;
-    font-size: 14px;
   }
 
-  .num {
-    font-weight: bold;
-    justify-content: center;
-
-    .stat {
-      min-width: 40px;
-      text-align: center;
-    }
+  .stat {
+    font-weight: 600;
+    margin-left: 6px;
+    min-width: 20px;
+    text-align: center;
+    padding: 0 6px;
+    display: inline-block;
+    background: rgba(27, 31, 36, 0.08);
+    border-radius: 2em;
   }
 }
diff --git a/src/components/commonComponents/header/index.jsx b/src/components/commonComponents/header/index.jsx
@@ -177,9 +177,9 @@ const Header = ({ darkMode = false, className = '' }) => {
         <GitHubButton
           stat={stat}
           type="fork"
-          href="https://github.com/milvus-io/milvus/fork"
+          href="https://github.com/milvus-io/milvus"
         >
-          Forks
+          Fork
         </GitHubButton>
       </div>
     </div>

diff --git a/src/components/commonComponents/http/index.js b/src/components/commonComponents/http/index.js
@@ -1,8 +1,6 @@
 import axios from 'axios';
 import { decode } from 'js-base64';
 
-const encryptedToken = 'Z2hwX3VhVlZqSXo2eUlPcWd1S0hDT2lwQk10dkZtYjhFVzFBeTAyWQ==';
-
 const axiosInstance = axios.create({
   baseURL: 'https://api.github.com/repos',
   timeout: 10000,
@@ -18,14 +16,9 @@ axiosInstance.interceptors.request.use(
   }
 );
 
-
 export const getGithubStatis = async () => {
   try {
-    const res = await axiosInstance.get(`/milvus-io/milvus`, {
-      headers: {
-        Authorization: decode(encryptedToken)
-      }
-    });
+    const res = await axiosInstance.get(`/milvus-io/milvus`);
     return res.data;
   } catch (error) {
     console.log(error);