Merge pull request #120 from apecloud/support/update-search-bar

chore: update search bar indexing

Author: shanshanying

public/img/blogs/thumbnails/blog-mssql-ag.png

@@ -9,16 +9,127 @@ const ROOT_DIR = path.join(
 );
 const OUTPUT = path.join(ROOT_DIR, 'public/docs-index.json');
 
+// Simple keyword extraction implementation
+function extractKeywords(text, minLength = 3, maxCount = 20) {
+  // Common stop words
+  const stopWords = new Set([
+    'the', 'is', 'at', 'which', 'on', 'and', 'a', 'to', 'are', 'as', 'was', 'were',
+    'been', 'be', 'have', 'has', 'had', 'do', 'does', 'did', 'will', 'would', 'could',
+    'should', 'may', 'might', 'can', 'must', 'shall', 'of', 'in', 'for', 'with', 'by',
+    'from', 'up', 'about', 'into', 'through', 'during', 'before', 'after', 'above',
+    'below', 'to', 'under', 'again', 'further', 'then', 'once', 'here', 'there',
+    'when', 'where', 'why', 'how', 'all', 'any', 'both', 'each', 'few', 'more',
+    'most', 'other', 'some', 'such', 'no', 'nor', 'not', 'only', 'own', 'same',
+    'so', 'than', 'too', 'very', 'can', 'just', 'now', 'also', 'if', 'this',
+    'that', 'these', 'those', 'i', 'me', 'my', 'myself', 'we', 'our', 'ours',
+    'ourselves', 'you', 'your', 'yours', 'yourself', 'yourselves', 'he', 'him',
+    'his', 'himself', 'she', 'her', 'hers', 'herself', 'it', 'its', 'itself',
+    'they', 'them', 'their', 'theirs', 'themselves'
+  ]);
+
+  const words = text
+    .toLowerCase()
+    .replace(/[^\w\s]/g, ' ')
+    .split(/\s+/)
+    .filter(word =>
+      word.length >= minLength &&
+      !stopWords.has(word) &&
+      !/^\d+$/.test(word)
+    );
+
+  // Calculate word frequency
+  const wordCounts = {};
+  words.forEach(word => {
+    wordCounts[word] = (wordCounts[word] || 0) + 1;
+  });
+
+  // Sort by frequency and return top N words
+  return Object.entries(wordCounts)
+    .sort(([, a], [, b]) => b - a)
+    .slice(0, maxCount)
+    .map(([word]) => word);
+}
+
+// 生成摘要
+function generateSummary(content, maxLength = 200) {
+  // 移除markdown语法
+  const plainText = content
+    .replace(/```[\s\S]*?```/g, '')
+    .replace(/`[^`]+`/g, '')
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+    .replace(/#{1,6}\s+/g, '')
+    .replace(/\*\*/g, '')
+    .replace(/\*/g, '')
+    .replace(/\n/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  if (plainText.length <= maxLength) {
+    return plainText;
+  }
+
+  // 找到最后一个完整句子
+  const truncated = plainText.substring(0, maxLength);
+  const lastSentenceEnd = Math.max(
+    truncated.lastIndexOf('.'),
+    truncated.lastIndexOf('!'),
+    truncated.lastIndexOf('?')
+  );
+
+  if (lastSentenceEnd > maxLength * 0.7) {
+    return truncated.substring(0, lastSentenceEnd + 1);
+  }
+
+  return truncated + '...';
+}
+
+// 提取文档类型和类别
+function extractMetadata(filePath, frontmatter) {
+  const segments = filePath.split('/');
+  let category = '';
+  let docType = '';
+
+  if (filePath.startsWith('blogs/')) {
+    docType = 'blog';
+    category = 'Blog';
+  } else if (filePath.startsWith('docs/')) {
+    docType = 'documentation';
+
+    // 从路径中提取产品类别
+    const productMatch = filePath.match(/docs\/en\/[^/]*\/kubeblocks-for-([^/]+)/);
+    if (productMatch) {
+      category = productMatch[1];
+    } else if (filePath.includes('user_docs')) {
+      category = 'user-guide';
+    } else if (filePath.includes('cli')) {
+      category = 'cli';
+    } else if (filePath.includes('release_notes')) {
+      category = 'release-notes';
+    } else {
+      category = 'general';
+    }
+  }
+
+  return {
+    docType,
+    category,
+    tags: frontmatter.tags || [],
+    sidebar_position: frontmatter.sidebar_position,
+    sidebar_label: frontmatter.sidebar_label,
+  };
+}
+
 async function main() {
-  // 匹配 docs/en 和 blogs/en 下的 md/mdx 文件，排除 docs/en/**/cli/**
+  // 只匹配 docs/en/preview 和 blogs/en 下的 md/mdx 文件，排除 CLI 和 release notes
   const files = await fg(
     [
-      'docs/en/**/*.md',
-      'docs/en/**/*.mdx',
+      'docs/en/preview/**/*.md',
+      'docs/en/preview/**/*.mdx',
       'blogs/en/**/*.md',
       'blogs/en/**/*.mdx',
-      '!docs/en/**/cli/**',
-      '!docs/en/**/release_notes',
+      '!docs/en/preview/**/cli/**',
+      '!docs/en/preview/**/release_notes/**',
+      '!docs/en/release-*/**',  // 明确排除所有release版本目录
     ],
     { cwd: ROOT_DIR, absolute: true },
   );
@@ -28,13 +139,14 @@ async function main() {
     const relPath = path.relative(ROOT_DIR, file);
     const raw = fs.readFileSync(file, 'utf-8');
     const { data, content } = matter(raw);
+
     // 替换 path 中的 blogs/en 和 docs/en，并去除 .md/.mdx 后缀
     let normPath = relPath
-      .replace(/^blogs\/en\//, 'blogs/')
+      .replace(/^blogs\/en\//, 'blog/')
       .replace(/^docs\/en\//, 'docs/');
     normPath = normPath.replace(/\.(md|mdx)$/, '');
 
-    // 过滤掉 mdx 的 import/export 语句和宏/JSX函数（如 import ...、export ...、<XXX ... />、{ ... }）
+    // 过滤掉 mdx 的 import/export 语句和宏/JSX函数
     const filteredContent = content
       .split('\n')
       .filter(
@@ -48,13 +160,38 @@ async function main() {
       .replace(/<[^>]+>/g, '') // 去除内联 JSX 标签
       .replace(/\{[^}]+\}/g, ''); // 去除内联 JS 表达式
 
-    const description = filteredContent.replace(/\n/g, ' ').slice(0, 300);
+    // 提取更多内容，不限制在2000字符
+    const fullContent = filteredContent;
+
+    // 生成摘要和关键词
+    const summary = generateSummary(filteredContent);
+    const keywords = extractKeywords(filteredContent);
+    const metadata = extractMetadata(relPath, data);
+
+    // 提取标题层级结构
+    const headings = [];
+    const headingMatches = content.match(/^#{1,6}\s+.+$/gm);
+    if (headingMatches) {
+      headingMatches.forEach(heading => {
+        const level = (heading.match(/^#+/) || [''])[0].length;
+        const text = heading.replace(/^#+\s+/, '').trim();
+        headings.push({ level, text });
+      });
+    }
+
     return {
       id: relPath.replace(/\//g, '_').replace(/\.(md|mdx)$/, ''),
-      title: data.title || path.basename(file),
-      content: filteredContent.slice(0, 2000),
+      title: data.title || data.sidebar_label || path.basename(file, path.extname(file)),
+      content: fullContent,
       path: normPath,
-      description,
+      description: data.description || summary,
+      summary,
+      keywords,
+      headings,
+      ...metadata,
+      // 保留原有字段以兼容现有搜索
+      lastModified: fs.statSync(file).mtime.toISOString(),
+      wordCount: fullContent.split(/\s+/).length,
     };
   });
 

scripts/generate-docs-index.mjs

@@ -4,6 +4,7 @@ import SearchModal from '@/components/SearchModal';
 import { SlackIconNoColor } from '@/components/icons';
 import { useI18n } from '@/locales/client';
 import { useGlobalStore } from '@/store/global';
+import { searchBarStyles } from '@/styles/searchBar.styles';
 import {
   GitHub,
   LaunchOutlined,
@@ -16,6 +17,7 @@ import {
   Button,
   IconButton,
   Stack,
+  TextField,
   Toolbar,
   useMediaQuery,
   useTheme,
@@ -135,10 +137,26 @@ export const ElevationScrollAppBar = (props: AppBarProps) => {
             >
               KubeBlocks Cloud
             </Button>
-            <Box sx={{ minWidth: 36, maxWidth: 40, flex: 0 }}>
-              <IconButton onClick={() => setShowSearch(true)}>
-                <SearchIcon />
-              </IconButton>
+            <Box sx={searchBarStyles.container}>
+              <TextField
+                size="small"
+                placeholder={mobile ? "Search..." : "Search docs..."}
+                variant="outlined"
+                onClick={() => setShowSearch(true)}
+                InputProps={{
+                  startAdornment: <SearchIcon sx={searchBarStyles.searchIcon} />,
+                  endAdornment: !mobile && (
+                    <Box sx={searchBarStyles.shortcutContainer}>
+                      <Box component="kbd" sx={searchBarStyles.shortcutKey}>
+                        ⌘K
+                      </Box>
+                    </Box>
+                  ),
+                  readOnly: true,
+                  sx: searchBarStyles.inputRoot,
+                }}
+                sx={searchBarStyles.textField}
+              />
             </Box>
           </Stack>
           <Box

src/app/[locale]/ElevationScrollAppBar.tsx

@@ -1,4 +1,4 @@
-import { readFileSync, readdirSync } from 'fs';
+import { readFileSync, readdirSync, existsSync } from 'fs';
 import matter from 'gray-matter';
 import { NextResponse } from 'next/server';
 import { join } from 'path';
@@ -8,6 +8,15 @@ interface SearchDocument {
   title: string;
   content: string;
   path: string;
+  description?: string;
+  summary?: string;
+  keywords?: string[];
+  headings?: Array<{ level: number; text: string }>;
+  docType?: string;
+  category?: string;
+  tags?: string[];
+  lastModified?: string;
+  wordCount?: number;
 }
 
 // 递归获取所有 MDX 文件
@@ -32,8 +41,22 @@ function extractContent(filePath: string): SearchDocument {
   const content = readFileSync(filePath, 'utf-8');
   const { data, content: markdownContent } = matter(content);
 
+  // 过滤掉 mdx 的 import/export 语句和宏/JSX函数
+  const filteredContent = markdownContent
+    .split('\n')
+    .filter(
+      (line) =>
+        !line.trim().startsWith('import ') &&
+        !line.trim().startsWith('export ') &&
+        !/^<[A-Z][A-Za-z0-9]*[\s/>]/.test(line.trim()) &&
+        !/^\{.*\}$/.test(line.trim()),
+    )
+    .join('\n')
+    .replace(/<[^>]+>/g, '') // 去除内联 JSX 标签
+    .replace(/\{[^}]+\}/g, ''); // 去除内联 JS 表达式
+
   // 移除 markdown 语法，只保留纯文本
-  const plainContent = markdownContent
+  const plainContent = filteredContent
     .replace(/```[\s\S]*?```/g, '') // 移除代码块
     .replace(/`.*?`/g, '') // 移除行内代码
     .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // 将链接转换为纯文本
@@ -44,27 +67,93 @@ function extractContent(filePath: string): SearchDocument {
     .replace(/\s+/g, ' ') // 将多个空格转换为单个空格
     .trim();
 
+  // 生成摘要
+  const summary = plainContent.length > 200 ?
+    plainContent.substring(0, 200) + '...' :
+    plainContent;
+
+  // 提取关键词
+  const keywords = plainContent
+    .toLowerCase()
+    .split(/\s+/)
+    .filter(word => word.length > 3)
+    .reduce((acc: string[], word) => {
+      if (!acc.includes(word)) acc.push(word);
+      return acc;
+    }, [])
+    .slice(0, 20);
+
+  // 提取标题层级
+  const headings: Array<{ level: number; text: string }> = [];
+  const headingMatches = markdownContent.match(/^#{1,6}\s+.+$/gm);
+  if (headingMatches) {
+    headingMatches.forEach(heading => {
+      const level = (heading.match(/^#+/) || [''])[0].length;
+      const text = heading.replace(/^#+\s+/, '').trim();
+      headings.push({ level, text });
+    });
+  }
+
+  // 确定文档类型和类别
+  let docType = 'documentation';
+  let category = 'general';
+
+  if (filePath.includes('/blogs/')) {
+    docType = 'blog';
+    category = 'Blog';
+  } else if (filePath.includes('kubeblocks-for-')) {
+    const match = filePath.match(/kubeblocks-for-([^/]+)/);
+    category = match ? match[1] : 'general';
+  } else if (filePath.includes('cli')) {
+    category = 'CLI';
+  }
+
   return {
     id: filePath,
     title:
       data.title ||
+      data.sidebar_label ||
       filePath
         .split('/')
         .pop()
         ?.replace(/\.mdx?$/, '') ||
       '',
     content: plainContent,
     path: filePath.replace(/\.mdx?$/, ''),
+    description: data.description || summary,
+    summary,
+    keywords,
+    headings,
+    docType,
+    category,
+    tags: data.tags || [],
+    wordCount: plainContent.split(/\s+/).length,
   };
 }
 
 export async function GET() {
   try {
-    const docsDir = join(process.cwd(), 'docs');
-    const mdxFiles = getAllMdxFiles(docsDir);
+    const rootDir = process.cwd();
+
+    // 只获取preview目录下的文档和博客文件
+    const allFiles: string[] = [];
+
+    // 获取docs/en/preview下的文件
+    const previewDir = join(rootDir, 'docs', 'en', 'preview');
+    if (existsSync(previewDir)) {
+      const previewFiles = getAllMdxFiles(previewDir, 'docs/en/preview');
+      allFiles.push(...previewFiles.map(file => join(rootDir, file)));
+    }
+
+    // 获取blogs/en下的文件
+    const blogsEnDir = join(rootDir, 'blogs', 'en');
+    if (existsSync(blogsEnDir)) {
+      const blogFiles = getAllMdxFiles(blogsEnDir, 'blogs/en');
+      allFiles.push(...blogFiles.map(file => join(rootDir, file)));
+    }
 
-    const documents = mdxFiles.map((filePath) =>
-      extractContent(join(docsDir, filePath)),
+    const documents = allFiles.map((filePath) =>
+      extractContent(filePath),
     );
 
     return NextResponse.json(documents);