add logic to add pagefind weight for pages and tags (heading, paragraph, connectorDetailsHeader)

Author: aniketkatkar97

components/ConnectorDetailsHeader/ConnectorDetailsHeader.interface.ts

@@ -4,4 +4,5 @@ export interface ConnectorDetailsHeaderProps {
   platform: string;
   availableFeatures: Array<string>;
   unavailableFeatures: Array<string>;
+  searchWeight: string;
 }

components/ConnectorDetailsHeader/ConnectorDetailsHeader.tsx

@@ -17,18 +17,29 @@ function ConnectorDetailsHeader({
   platform,
   availableFeatures,
   unavailableFeatures,
+  searchWeight,
 }: Readonly<ConnectorDetailsHeaderProps>) {
   const showSubHeading = useMemo(
     () => !isEmpty(availableFeatures) || !isEmpty(unavailableFeatures),
     [availableFeatures, unavailableFeatures]
   );
 
+  let otherProps = {};
+
+  if (searchWeight) {
+    otherProps = {
+      ["data-pagefind-weight"]: searchWeight,
+    };
+  }
+
   return (
     <div className={styles.Container}>
       <div className={styles.Heading}>
         <div className="flex items-center gap-3">
           <div className={styles.ImageContainer}>{getConnectorImage(name)}</div>
-          <div className={styles.ConnectorName}>{name}</div>
+          <div className={styles.ConnectorName} {...otherProps}>
+            {name}
+          </div>
           {getStageBadge(stage)}
         </div>
         <div className={styles.PlatformDetails}>

components/Heading/Heading.interface.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+export interface HeadingProps {
+  children: ReactNode;
+  id?: string;
+  level?: number;
+  className?: string;
+  searchWeight?: string;
+}

components/Heading/Heading.tsx

@@ -1,9 +1,16 @@
 import classNames from "classnames";
 import { useState } from "react";
+import { HeadingProps } from "./Heading.interface";
 import styles from "./Heading.module.css";
 import HeadingElement from "./HeadingElement";
 
-export function Heading({ id = "", level = 1, children, className }) {
+export function Heading({
+  id = "",
+  level = 1,
+  children,
+  className = "",
+  searchWeight,
+}: Readonly<HeadingProps>) {
   const [copied, setCopied] = useState(false);
 
   const copyLinkUnbound = async () => {
@@ -14,14 +21,26 @@ export function Heading({ id = "", level = 1, children, className }) {
     window.setTimeout(() => setCopied(false), 2000);
   };
 
+  let otherProps = {};
+
+  if (searchWeight) {
+    otherProps = {
+      ["data-pagefind-weight"]: searchWeight,
+    };
+  }
+
   return (
     <div
       className={classNames(className, styles.HeaderLink, {
         [styles.H1Element]: level === 1,
       })}
     >
       <a id={id} className={styles.HashLink} />
-      <HeadingElement className={styles.HeaderElement} level={level}>
+      <HeadingElement
+        className={styles.HeaderElement}
+        level={level}
+        {...otherProps}
+      >
         {children}
       </HeadingElement>
       {copied ? (

components/Heading/HeadingElement.tsx

@@ -8,21 +8,50 @@ export default function HeadingElement({
   level,
   className = "",
   children,
-}: Props) {
+  ...otherProps
+}: Readonly<Props>) {
   switch (level) {
     case 1:
-      return <h1 className={className}>{children}</h1>;
+      return (
+        <h1 className={className} {...otherProps}>
+          {children}
+        </h1>
+      );
     case 2:
-      return <h2 className={className}>{children}</h2>;
+      return (
+        <h2 className={className} {...otherProps}>
+          {children}
+        </h2>
+      );
     case 3:
-      return <h3 className={className}>{children}</h3>;
+      return (
+        <h3 className={className} {...otherProps}>
+          {children}
+        </h3>
+      );
     case 4:
-      return <h4 className={className}>{children}</h4>;
+      return (
+        <h4 className={className} {...otherProps}>
+          {children}
+        </h4>
+      );
     case 5:
-      return <h5 className={className}>{children}</h5>;
+      return (
+        <h5 className={className} {...otherProps}>
+          {children}
+        </h5>
+      );
     case 6:
-      return <h6 className={className}>{children}</h6>;
+      return (
+        <h6 className={className} {...otherProps}>
+          {children}
+        </h6>
+      );
     default:
-      return <h6 className={className}>{children}</h6>;
+      return (
+        <h6 className={className} {...otherProps}>
+          {children}
+        </h6>
+      );
   }
 }

components/Search/Search.tsx

@@ -149,7 +149,9 @@ export default function Search({
       setIsLoading(true);
       if (window[`pageFind${docVersion}`]) {
         const search = await window[`pageFind${docVersion}`].search(
-          isEmpty(searchValue) ? "releases" : searchValue
+          // To show results for "releases" as a default suggestions when no search text is present
+          isEmpty(searchValue) ? "releases" : searchValue,
+          { sort: { weight: "desc" } }
         );
 
         // Select only top 20 results

components/common/Paragraph/Paragraph.interface.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+export interface ParagraphProps {
+  children: ReactNode;
+  searchWeight?: string;
+}

components/common/Paragraph/Paragraph.tsx

@@ -0,0 +1,14 @@
+import { ParagraphProps } from "./Paragraph.interface";
+
+function Paragraph({ searchWeight, children }: ParagraphProps) {
+  let otherProps = {};
+
+  if (searchWeight) {
+    otherProps = {
+      ["data-pagefind-weight"]: searchWeight,
+    };
+  }
+  return <p {...otherProps}>{children}</p>;
+}
+
+export default Paragraph;

lib/markdoc.ts

@@ -26,6 +26,7 @@ import Image from "../components/common/Image/Image";
 import InlineCallout from "../components/common/InlineCallout/InlineCallout";
 import InlineCalloutContainer from "../components/common/InlineCallout/InlineCalloutContainer";
 import Note from "../components/common/Note/Note";
+import Paragraph from "../components/common/Paragraph/Paragraph";
 import MultiTablesWrapper from "../components/common/Table/MultiTablesWrapper";
 import Table from "../components/common/Table/Table";
 import Tile from "../components/common/Tiles/Tile/Tile";
@@ -51,6 +52,7 @@ export const components = {
   CodePreview,
   Code,
   Heading,
+  Paragraph,
   Image,
   Step,
   StepsContainer,

markdoc/nodes/heading.markdoc.ts

@@ -38,6 +38,7 @@ export const heading = {
     level: { type: Number, required: true, default: 1 },
     className: { type: String },
     children: { type: String },
+    searchWeight: { type: String },
   },
   transform(node, config) {
     const attributes = node.transformAttributes(config);

markdoc/nodes/index.ts

@@ -1,6 +1,8 @@
 /* Use this file to export your markdoc nodes */
 export * from "./code.markdoc";
 export * from "./fence.markdoc";
-export * from "./link.markdoc";
 export * from "./heading.markdoc";
+export * from "./link.markdoc";
+export * from "./paragraph.markdoc";
 export * from "./table/table.markdoc";
+

markdoc/nodes/paragraph.markdoc.ts

@@ -0,0 +1,6 @@
+export const paragraph = {
+  render: "Paragraph",
+  attributes: {
+    searchWeight: { type: String },
+  },
+};

markdoc/tags/connectorDetailsHeader.markdoc.ts

@@ -25,5 +25,6 @@ export const connectorDetailsHeader = {
       type: Array<string>,
       description: "List of unavailable features for the connector.",
     },
+    searchWeight: { type: String },
   },
 };

pages/[version]/[...slug].tsx

@@ -87,7 +87,9 @@ export default function Article({
       <ErrorBoundary>
         <div
           className="hidden"
+          data-pagefind-sort="weight[data-weight]"
           data-pagefind-meta="title"
+          data-weight={metaData.weight ?? "0"}
           id="article-title-metadata"
         >
           {metaData.title}