Preview

i18n-watcher/cache/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | High-Performance Vector Database Built for Scale",
     "description": "Milvus is an open-source vector database built for GenAI applications. Install with pip, perform high-speed searches, and scale to tens of billions of vectors."
-  }
+  },
+  "home": "Home"
 }

i18n-watcher/translate-changes.js

@@ -8,6 +8,10 @@ const os = require('os');
 const { copyEnToBackup } = require('./utils');
 const { CHANGES_DIR, LOCALE_DIR } = require('./const');
 
+if (!fs.existsSync(CHANGES_DIR)) {
+  fs.mkdirSync(CHANGES_DIR);
+}
+
 const envFile = process.env.NODE_ENV ? `.env.${process.env.NODE_ENV}` : '.env';
 dotenv.config({ path: envFile });
 

src/components/breadcrumb/index.module.less

@@ -0,0 +1,54 @@
+@import (reference) '../../styles/global.module.less';
+
+.breadcrumbWrapper {
+  list-style: none;
+  display: flex;
+  gap: 2px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  margin-bottom: 32px;
+  color: @color-black2;
+  font-size: 14px;
+}
+
+.breadcrumbItem {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+
+  svg {
+    width: 1em;
+    height: 1em;
+    path {
+      fill: currentColor;
+    }
+  }
+}
+
+.linkItem {
+  .paragraph4;
+  color: @color-black1-5;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+    text-underline-position: from-font;
+  }
+}
+
+.textItem {
+  .paragraph4;
+  color: @color-black2;
+  text-decoration: none;
+}
+
+.lastItem {
+  color: @color-black2;
+  cursor: default;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+}

src/components/breadcrumb/index.tsx

@@ -0,0 +1,62 @@
+import classes from './index.module.less';
+import { BreadcrumbIcon } from '../icons';
+import { useTranslation } from 'react-i18next';
+import Link from 'next/link';
+import clsx from 'clsx';
+
+export default function Breadcrumb(props: {
+  list: {
+    label: string;
+    href?: string;
+    disabled?: boolean;
+  }[];
+  className?: string;
+}) {
+  const { list, className = '' } = props;
+  const { t } = useTranslation('home');
+
+  const length = list.length;
+
+  const BreadcrumbItem = (props: {
+    label: string;
+    href?: string;
+    disabled?: boolean;
+    className?: string;
+  }) => {
+    const { label, href, disabled, className = '' } = props;
+    const renderAsLink = href && !disabled;
+    return (
+      <>
+        {renderAsLink ? (
+          <Link href={href} className={clsx(classes.linkItem, className)}>
+            {label}
+          </Link>
+        ) : (
+          <p className={clsx(classes.textItem, className)}>{label}</p>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <ul className={clsx(classes.breadcrumbWrapper, className)}>
+      <li className={classes.breadcrumbItem}>
+        <Link href="/" className={classes.linkItem}>
+          {t('home')}
+        </Link>
+        <BreadcrumbIcon />
+      </li>
+      {list.map((v, i) => (
+        <li className={classes.breadcrumbItem}>
+          <BreadcrumbItem
+            {...v}
+            className={clsx({
+              [classes.lastItem]: i === length - 1,
+            })}
+          />
+          {i < length - 1 && <BreadcrumbIcon />}
+        </li>
+      ))}
+    </ul>
+  );
+}

src/components/icons/index.tsx

@@ -543,3 +543,18 @@ export const ListItemTickIcon: FC<HTMLAttributes<SVGViewElement>> = props => {
     </svg>
   );
 };
+
+export const BreadcrumbIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="13"
+    height="12"
+    viewBox="0 0 13 12"
+    fill="none"
+  >
+    <path
+      d="M4.955 9L4.25 8.295L6.54 6L4.25 3.705L4.955 3L7.955 6L4.955 9Z"
+      fill="#2E373B"
+    />
+  </svg>
+);

src/components/localization/BlogDetail.tsx

@@ -19,6 +19,7 @@ import { checkIconTpl, linkIconTpl } from '@/components/icons';
 import { useRouter } from 'next/navigation';
 import { LanguageEnum } from '@/types/localization';
 import { getBlogPath } from '@/utils/localization';
+import Breadcrumb from '../breadcrumb';
 
 export function BlogDetail(props) {
   const {
@@ -93,31 +94,9 @@ export function BlogDetail(props) {
 
   const metaTitle = `${title} - Milvus Blog`;
 
-  const sepIcon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="13"
-      height="12"
-      viewBox="0 0 13 12"
-      fill="none"
-    >
-      <path
-        d="M4.955 9L4.25 8.295L6.54 6L4.25 3.705L4.955 3L7.955 6L4.955 9Z"
-        fill="#2E373B"
-      />
-    </svg>
-  );
-
-  const jsonLd = {
-    '@context': 'http://schema.org',
-    '@type': 'Article',
-    headline: title,
-    datePublished: dateTime,
-    mainEntityOfPage: {
-      '@type': 'WebPage',
-      '@id': shareUrl,
-    },
-  };
+  const ldJson = `{"@context": "http://schema.org", "@id": "${shareUrl}", "@type": "Article", "headline": "${title}", "description": "${desc}", "datePublished": "${new Date(
+    date
+  ).toJSON()}", "name": "${title}", "url": "${shareUrl}"}`;
 
   return (
     <main>
@@ -134,18 +113,25 @@ export function BlogDetail(props) {
             rel="stylesheet"
             href="https://assets.zilliz.com/katex/katex.min.css"
           />
-          <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
+          <script
+            type="application/ld+json"
+            dangerouslySetInnerHTML={{ __html: ldJson }}
+          ></script>
         </Head>
         <div>
           <div className={clsx(pageClasses.docContainer, styles.upLayout)}>
             <section className={styles.blogHeader}>
-              <p className={styles.breadcrumb}>
-                <a href={homePath}>Home</a>
-                {sepIcon}
-                <a href={blogPath}>Blogs</a>
-                {sepIcon}
-                {title}
-              </p>
+              <Breadcrumb
+                list={[
+                  {
+                    label: 'Blog',
+                    href: '/blog',
+                  },
+                  {
+                    label: title,
+                  },
+                ]}
+              />
 
               <h1 className={styles.title}>{title}</h1>
 

src/components/localization/DocDetail.tsx

@@ -18,6 +18,7 @@ import clsx from 'clsx';
 import { DocDetailPageProps } from '@/types/docs';
 import { LanguageEnum } from '@/types/localization';
 import { getHomePageLink, getSeoUrl } from '@/components/localization/utils';
+import { useBreadcrumbLabels } from '@/hooks/use-breadcrumb-lables';
 
 // contains the latest version's detail pages and other versions' home pages
 export function DocDetailPage(props: DocDetailPageProps) {
@@ -112,6 +113,10 @@ export function DocDetailPage(props: DocDetailPageProps) {
   });
   useGenAnchor(version, editPath);
 
+  const activeLabels = useBreadcrumbLabels({
+    currentId,
+    menu: menus,
+  });
   return (
     <DocLayout
       version={version}
@@ -149,6 +154,8 @@ export function DocDetailPage(props: DocDetailPageProps) {
               mdId={currentId}
               commitPath={editPath}
               type="doc"
+              activeLabels={activeLabels}
+              latestVersion={latestVersion}
             />
           </div>
 

src/hooks/use-breadcrumb-lables.tsx

@@ -0,0 +1,40 @@
+import { findActiveMenuItem } from '@/utils';
+import { useMemo } from 'react';
+
+export const useBreadcrumbLabels = (params: {
+  currentId: string;
+  groupId?: string;
+  menu: any[];
+}) => {
+  const { currentId, menu } = params;
+
+  const generateActiveLabels = (menus: any[], ids: string[]) => {
+    const labels: string[] = [];
+    const walkThroughMenu = (list: any[], ids: string[]) => {
+      list.forEach(item => {
+        const { children, id } = item;
+        if (children.length) {
+          ids.includes(id) && labels.push(item.label);
+          children.length && walkThroughMenu(children, ids);
+        } else {
+          ids.includes(id) && labels.push(item.label);
+        }
+      });
+
+      return list;
+    };
+    walkThroughMenu(menus, ids);
+    return labels;
+  };
+
+  const activeLabels = useMemo(() => {
+    const expandedIds = findActiveMenuItem({
+      mdId: currentId,
+      menu: menu,
+    });
+
+    return generateActiveLabels(menu, [...expandedIds, currentId]);
+  }, [menu, currentId]);
+
+  return activeLabels;
+};

src/i18n/ar/home.json

@@ -139,5 +139,6 @@
   "meta": {
     "title": "Milvus | قاعدة بيانات المتجهات عالية الأداء المبنية للتمدد",
     "description": "Milvus هو قاعدة بيانات متجهات مفتوحة المصدر مبنية لتطبيقات GenAI. قم بالتثبيت باستخدام pip، وأجرِ بحثًا عالي السرعة، وقم بالتوسع إلى عشرات المليارات من المتجهات."
-  }
+  },
+  "home": "الصفحة الرئيسية"
 }

src/i18n/cn/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | 高性能向量数据库，为规模而构建",
     "description": "Milvus 是一个为 GenAI 应用构建的开源向量数据库。使用 pip 安装，执行高速搜索，并扩展到数十亿个向量。"
-  }
+  },
+  "home": "首页"
 }

src/i18n/de/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | Hochleistungs-Vektordatenbank, für Skalierung gebaut",
     "description": "Milvus ist eine Open-Source-Vektordatenbank, die für GenAI-Anwendungen entwickelt wurde. Installieren Sie sie mit pip, führen Sie Hochgeschwindigkeitssuchen durch und skalieren Sie auf zehn Milliarden Vektoren."
-  }
+  },
+  "home": "Startseite"
 }

src/i18n/en/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | High-Performance Vector Database Built for Scale",
     "description": "Milvus is an open-source vector database built for GenAI applications. Install with pip, perform high-speed searches, and scale to tens of billions of vectors."
-  }
+  },
+  "home": "Home"
 }

src/i18n/es/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | Base de datos de vectores de alto rendimiento construida para escalar",
     "description": "Milvus es una base de datos de vectores de código abierto construida para aplicaciones GenAI. Instale con pip, realice búsquedas de alta velocidad y escale a decenas de miles de millones de vectores."
-  }
+  },
+  "home": "Inicio"
 }

src/i18n/fr/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | Base de données vectorielle haute performance construite pour l'échelle",
     "description": "Milvus est une base de données vectorielle open-source construite pour les applications GenAI. Installez avec pip, effectuez des recherches à haute vitesse et évoluez vers des dizaines de milliards de vecteurs."
-  }
+  },
+  "home": "Accueil"
 }

src/i18n/id/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | Basis Data Vektor Berperforma Tinggi Dibangun untuk Skala",
     "description": "Milvus adalah basis data vektor sumber terbuka yang dibangun untuk aplikasi GenAI. Pasang dengan pip, lakukan pencarian berkecepatan tinggi, dan skalakan hingga puluhan miliar vektor."
-  }
+  },
+  "home": "Beranda"
 }

src/i18n/it/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | Database vettoriale ad alte prestazioni costruito per la scalabilità",
     "description": "Milvus è un database vettoriale open-source costruito per applicazioni GenAI. Installa con pip, esegui ricerche ad alta velocità e scalare a decine di miliardi di vettori."
-  }
+  },
+  "home": "Casa"
 }

src/i18n/ja/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | スケールに最適化された高性能ベクトルデータベース",
     "description": "Milvus は GenAI アプリケーション向けに構築されたオープンソースのベクトルデータベースです。pip でインストールし、高速検索を実行し、数十億のベクトルにスケールします。"
-  }
+  },
+  "home": "ホーム"
 }

src/i18n/ko/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | 확장성을 위해 구축된 고성능 벡터 데이터베이스",
     "description": "Milvus는 GenAI 애플리케이션을 위해 구축된 오픈 소스 벡터 데이터베이스입니다. pip로 설치하고 고속 검색을 수행하며 수십억 개의 벡터로 확장합니다."
-  }
+  },
+  "home": "홈"
 }

src/i18n/pt/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | Banco de dados vetorial de alto desempenho construído para escala",
     "description": "Milvus é um banco de dados vetorial de código aberto construído para aplicativos GenAI. Instale com pip, realize buscas de alta velocidade e escale para dezenas de bilhões de vetores."
-  }
+  },
+  "home": "Início"
 }

src/i18n/ru/home.json

@@ -140,5 +140,6 @@
   "meta": {
     "title": "Milvus | Высокопроизводительная векторная база данных, построенная для масштабирования",
     "description": "Milvus — это открытая векторная база данных, построенная для приложений GenAI. Установите с помощью pip, выполняйте высокоскоростные поиски и масштабируйте до десятков миллиардов векторов."
-  }
+  },
+  "home": "Главная"
 }