feat(search): migrate to unified index and add category chip (#677)

* feat(search): migrate to unified index and add category chip

(cherry picked from commit 8159d1d)

* chore: update chip variant

(cherry picked from commit 51b689b)

---------

Co-authored-by: Suhaha <jklopsdfw@gmail.com>

Author: Yuiham

src/components/Search/Results.tsx

@@ -6,8 +6,11 @@ import Typography from "@mui/material/Typography";
 import Skeleton from "@mui/material/Skeleton";
 import clsx from "clsx";
 import TablePagination from "@mui/material/TablePagination";
-
-import LinkComponent from "components/Link";
+import Chip from "@mui/material/Chip";
+import {
+  getSearchCategoryLabelKey,
+  resolveSearchCategory,
+} from "shared/utils/searchCategory";
 
 export default function SearchResults(props: {
   loading: boolean;
@@ -176,28 +179,61 @@ function SearchItemSkeleton() {
 
 function SearchItem(props: { data: any }) {
   const { data } = props;
+  const { t } = useI18next();
+  const category = React.useMemo(
+    () => resolveSearchCategory(data.url),
+    [data.url]
+  );
+  const categoryLabel = category ? t(getSearchCategoryLabelKey(category)) : "";
+
   return (
     <Stack spacing={1}>
-      <Typography
-        variant="h5"
-        component="a"
-        href={data.url}
+      <Box
         sx={{
-          textDecoration: "none",
-          width: "fit-content",
-          "& >div": {
-            width: "fit-content",
-          },
+          display: "flex",
+          alignItems: "flex-start",
+          flexWrap: "wrap",
+          gap: "0.5rem",
         }}
       >
-        {!!data._highlightResult?.hierarchy?.lvl0 && (
-          <div
-            dangerouslySetInnerHTML={{
-              __html: data._highlightResult.hierarchy.lvl0?.value,
+        <Typography
+          variant="h5"
+          component="a"
+          href={data.url}
+          sx={{
+            textDecoration: "none",
+            minWidth: 0,
+            flex: "1 1 16rem",
+            overflowWrap: "anywhere",
+            "& >div": {
+              width: "100%",
+              maxWidth: "100%",
+            },
+          }}
+        >
+          {!!data._highlightResult?.hierarchy?.lvl0 && (
+            <div
+              dangerouslySetInnerHTML={{
+                __html: data._highlightResult.hierarchy.lvl0?.value,
+              }}
+            />
+          )}
+        </Typography>
+        {!!category && !!categoryLabel && (
+          <Chip
+            size="small"
+            variant="outlined"
+            label={categoryLabel}
+            sx={{
+              height: "20px",
+              fontSize: "12px",
+              borderRadius: "10px",
+              backgroundColor: "carbon.100",
+              color: "carbon.800",
             }}
           />
         )}
-      </Typography>
+      </Box>
       {data?._highlightResult?.url ? (
         <Typography
           variant="body1"

src/components/Search/index.tsx

@@ -76,16 +76,11 @@ export default function Search(props: {
 
     if (searchType === SearchType.Onsite) {
       gtmTrack(GTMEvent.UseOnsiteSearch);
-      navigate(
-        `/search/?type=${docInfo.type}&version=${docInfo.version}&q=${q}`,
-        {
-          state: {
-            type: docInfo.type,
-            version: docInfo.version,
-            query: query,
-          },
-        }
-      );
+      navigate(`/search/?q=${q}`, {
+        state: {
+          query: query,
+        },
+      });
       onSubmit?.(query);
       return;
     }

src/shared/utils/searchCategory.ts

@@ -0,0 +1,118 @@
+export const SEARCH_CATEGORIES = {
+  Releases: "releases",
+  TiDBCloud: "tidb-cloud",
+  TiDBInKubernetes: "tidb-in-kubernetes",
+  TiDB: "tidb",
+  TiDBForAI: "tidb-for-ai",
+  Developer: "developer",
+  BestPractices: "best-practices",
+  API: "api",
+} as const;
+
+export type SearchCategory =
+  (typeof SEARCH_CATEGORIES)[keyof typeof SEARCH_CATEGORIES];
+
+const LANGUAGE_PREFIXES = new Set(["en", "zh", "ja"]);
+
+export const getSearchCategoryLabelKey = (
+  category: SearchCategory
+): string => {
+  switch (category) {
+    case SEARCH_CATEGORIES.TiDBCloud:
+      return "navbar.cloud";
+    case SEARCH_CATEGORIES.TiDBInKubernetes:
+      return "navbar.tidbOnKubernetes";
+    case SEARCH_CATEGORIES.TiDB:
+      return "navbar.tidbShortTerm";
+    case SEARCH_CATEGORIES.TiDBForAI:
+      return "navbar.tidbForAI";
+    case SEARCH_CATEGORIES.Developer:
+      return "navbar.developer";
+    case SEARCH_CATEGORIES.BestPractices:
+      return "navbar.bestPractices";
+    case SEARCH_CATEGORIES.API:
+      return "navbar.api";
+    case SEARCH_CATEGORIES.Releases:
+      return "navbar.releases";
+    default:
+      return "";
+  }
+};
+
+export const normalizeSearchResultPath = (url: string): string => {
+  if (!url) {
+    return "";
+  }
+
+  const fallbackPath = url
+    .split("?")[0]
+    .split("#")[0]
+    .replace(/^https?:\/\/[^/]+\//i, "")
+    .replace(/^\/+/, "")
+    .toLowerCase();
+
+  const normalizedPathname = (() => {
+    try {
+      const parsedUrl = new URL(url);
+      return parsedUrl.pathname.replace(/^\/+/, "").toLowerCase();
+    } catch (_) {
+      return fallbackPath;
+    }
+  })();
+
+  if (!normalizedPathname) {
+    return "";
+  }
+
+  const segments = normalizedPathname.split("/").filter(Boolean);
+  if (segments.length === 0) {
+    return "";
+  }
+
+  if (LANGUAGE_PREFIXES.has(segments[0])) {
+    segments.shift();
+  }
+
+  return segments.join("/");
+};
+
+export const resolveSearchCategory = (url: string): SearchCategory | null => {
+  const normalizedPath = normalizeSearchResultPath(url);
+  if (!normalizedPath) {
+    return null;
+  }
+
+  if (normalizedPath === "releases" || normalizedPath.startsWith("releases/")) {
+    return SEARCH_CATEGORIES.Releases;
+  }
+
+  if (normalizedPath.startsWith("tidbcloud/")) {
+    return SEARCH_CATEGORIES.TiDBCloud;
+  }
+
+  if (normalizedPath.startsWith("tidb-in-kubernetes/")) {
+    return SEARCH_CATEGORIES.TiDBInKubernetes;
+  }
+
+  if (normalizedPath.startsWith("tidb/")) {
+    return SEARCH_CATEGORIES.TiDB;
+  }
+
+  if (normalizedPath.startsWith("ai/")) {
+    return SEARCH_CATEGORIES.TiDBForAI;
+  }
+
+  if (normalizedPath.startsWith("developer/")) {
+    return SEARCH_CATEGORIES.Developer;
+  }
+
+  if (normalizedPath.startsWith("best-practices/")) {
+    return SEARCH_CATEGORIES.BestPractices;
+  }
+
+  if (normalizedPath.startsWith("api/")) {
+    return SEARCH_CATEGORIES.API;
+  }
+
+  return null;
+};