fixed the fragment url for main Readme as well

spectrocloud · Nov 27, 2024 · d137054 · d137054
1 parent 948621d
commit d137054
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 81 deletions.
diff --git a/package.json b/package.json
@@ -54,7 +54,6 @@
     "docusaurus-plugin-sass": "^0.2.5",
     "docusaurus-theme-openapi-docs": "^4.0.1",
     "fuse.js": "^6.6.2",
-    "markdown-to-jsx": "^7.0.0",
     "node-fetch": "^3.1.0",
     "p-ratelimit": "^1.0.1",
     "prism-react-renderer": "^2.1.0",

diff --git a/plugins/packs-integrations.js b/plugins/packs-integrations.js
@@ -284,7 +284,7 @@ function generateRoutes(packsAllData) {
       metadata: {
         sourceFilePath: "../docs/docs-content/integrations/packs.mdx",
       },
-      data: { name: pack.name, version: pack.latestVersion, parent: parentVersion?.title },
+      data: { name: pack.name, version: pack.latestVersion, parent: parentVersion?.title, tab: "main" },
     };
   });
 }

diff --git a/src/components/PacksInformation/PacksInformation.tsx b/src/components/PacksInformation/PacksInformation.tsx
@@ -13,6 +13,7 @@ interface PacksData {
     name: string;
     version: string;
     parent: string;
+    tab: string;
   };
 }
 
@@ -30,7 +31,7 @@ export default function Packs(props: Packs) {
         const data = props?.route?.data;
         return data ? (
           <Switch>
-            <Redirect to={`/integrations/packs?pack=${data.name}&version=${data.version}&parent=${data.parent}`} />
+            <Redirect to={`/integrations/packs?pack=${data.name}&version=${data.version}&parent=${data.parent}&tab=${data.tab}`} />
           </Switch>
         ) : (
           <PacksReadme />

diff --git a/src/components/PacksReadme/PacksReadme.tsx b/src/components/PacksReadme/PacksReadme.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect, useState, useMemo, ReactElement } from "react";
 import styles from "./PacksReadme.module.scss";
-import { Tabs, ConfigProvider, theme, TreeSelect } from "antd";
+import { ConfigProvider, theme, TreeSelect, Tabs } from "antd";
 import CustomLabel from "../Technologies/CategorySelector/CustomLabel";
 import PackCardIcon from "../Technologies/PackCardIcon";
-import Markdown from "markdown-to-jsx";
 import { useHistory } from "react-router-dom";
 import "./PacksReadme.antd.css";
 import { usePluginData } from "@docusaurus/useGlobalData";
@@ -14,10 +13,12 @@ import { useColorMode } from "@docusaurus/theme-common";
 import { packTypeNames, cloudDisplayNames } from "../../constants/packs";
 import Admonition from "@theme/Admonition";
 import { Redirect } from "react-router-dom";
-
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import ReactMarkDown from "react-markdown";
+import remarkGfm from "remark-gfm";
 interface PackReadmeProps {
   customDescription: string;
-  packUidMap: Record<string, { deprecated?: boolean; readme?: string; registryUid?: string }>;
+  packUidMap: Record<string, { deprecated?: boolean; readme?: ReactElement; registryUid?: string }>;
   versions: Version[];
   title: string;
   logoUrl: string;
@@ -62,11 +63,12 @@ function versionChange(
   setSelectedPackUid: React.Dispatch<React.SetStateAction<string>>,
   getParentVersion: (version: string) => Version | undefined,
   history: ReturnType<typeof useHistory>,
-  packName: string
+  packName: string,
+  selectedTabPane: string = "main"
 ) {
   const [version, packUid] = item.split("===");
   const parentVersion = getParentVersion(version)?.title || "";
-  history.replace({ search: `?pack=${packName}&version=${version}&parent=${parentVersion}` });
+  history.replace({ search: `?pack=${packName}&version=${version}&parent=${parentVersion}&tab=${selectedTabPane}` });
   setSelectedVersion(version);
   setSelectedPackUid(packUid);
 }
@@ -110,68 +112,54 @@ function renderVersionOptions(packData: PackData) {
     }));
 }
 
-function renderTabs(
-  selectedPackUid: string,
-  packData: PackData,
-  customReadme: ReactElement<any, any> | null,
-  fragmentIdentifier: string
-) {
-  const empty_icon_light = useBaseUrl("/img/empty_icon_table_light.svg");
-  const empty_icon_dark = useBaseUrl("/img/empty_icon_table_dark.svg");
-  const readme = selectedPackUid ? packData.packUidMap[selectedPackUid]?.readme : "";
-  const tabs = [
-    readme && {
-      label: `README`,
-      key: "1",
-      children: <Markdown>{readme}</Markdown>,
-    },
-    customReadme && {
-      label: `Additional Details`,
-      key: "2",
-      children: customReadme,
-    },
-  ].filter(Boolean) as { label: string; key: string; children: JSX.Element }[];
-
-  if (tabs.length > 1) {
-    return (
-      <Tabs defaultActiveKey={fragmentIdentifier ? "2" : "1"}>
-        {tabs.map((item) => (
-          <Tabs.TabPane tab={item.label} key={item.key}>
-            {item.children}
-          </Tabs.TabPane>
-        ))}
-      </Tabs>
-    );
-  }
-  if (tabs.length === 1) {
-    return tabs[0].children;
-  }
-  return (
-    <div className={styles.emptyContent}>
-      <ThemedImage
-        alt="Docusaurus themed image"
-        sources={{
-          light: empty_icon_light,
-          dark: empty_icon_dark,
-        }}
-        width={120}
-        height={120}
-      />
-      <div className={styles.emptyContentTitle}>No README found</div>
-    </div>
-  );
-}
-
 function getProviders(packData: PackData) {
   if (packData.provider.includes("all")) {
     return "All";
   }
-
   return packData.provider
     .map((provider) => cloudDisplayNames[provider as keyof typeof cloudDisplayNames] || provider)
     .join(", ");
 }
 
+function processPackUiMap(packUidMap: Record<string, { readme?: string }>): Record<string, { deprecated?: boolean; readme?: ReactElement; registryUid?: string }> {
+  const newPackUidMap: Record<string, { deprecated?: boolean; readme?: ReactElement; registryUid?: string }> = {};
+  Object.entries(packUidMap).map(([key, value]) => {
+    if (key) {
+      try {
+        const readmeFileName = packUidMap[key].readme;
+        let module = undefined;
+        if (readmeFileName) {
+          module = (<ReactMarkDown remarkPlugins={[remarkGfm]} components={{
+            h2: (props) => {
+              const h2Id = props.children?.toString().replace(/\s+/g, '-').toLowerCase();
+              return(
+                <h2 id={h2Id} >
+                  {props.children}
+                  <a href={`#${h2Id}`} className="hash-link" />
+                </h2>
+                )
+              },
+            }}>
+              {readmeFileName}
+            </ReactMarkDown>
+          );
+        }
+        newPackUidMap[key] = {
+          ...value,
+          readme: module ? (module as ReactElement) : undefined,
+        };
+      } catch (error) {
+        console.error("Error importing custom readme component for pack. Additional information follows: \n", error);
+        newPackUidMap[key] = {
+          ...value,
+          readme: undefined,
+        };
+      }
+    }
+  });
+  return newPackUidMap;
+}
+
 function getRegistries(packData: PackData, selectedVersion: string, selectedPackUid: string) {
   if (selectedVersion && !selectedVersion.endsWith(".x")) {
     const registryUid = packData.packUidMap[selectedPackUid]?.registryUid || "";
@@ -197,14 +185,23 @@ export default function PacksReadme() {
     const [selectedPackUid, setSelectedPackUid] = useState<string>("");
     const { colorMode } = useColorMode();
     const { defaultAlgorithm, darkAlgorithm } = theme;
+    const [selectedTabPane, setSelectedTabPane] = useState<string>("");
     const [selectedVersion, setSelectedVersion] = useState<string>("");
     const history = useHistory();
+    const isBrowser = useIsBrowser();
+    const [componentsMounted, isComponentsMounted] = useState<boolean>(false);
 
     useEffect(() => {
-      const searchParams = window ? new URLSearchParams(window.location.search) : null;
-      const hashLocationValue = window ? window.location.hash : "";
-      const pckName = searchParams?.get("pack") || "";
-      setPackName(pckName);
+      let pckName = "";
+      if (isBrowser) {
+        const searchParams = window ? new URLSearchParams(window.location.search) : null;
+        const hashLocationValue = window ? window.location.hash : "";
+        pckName = searchParams?.get("pack") || "";
+        setPackName(pckName);
+        if (hashLocationValue) {
+          setFragmentIdentifier(hashLocationValue);
+        }
+      }
       const importComponent = async () => {
         try {
           const module: MarkdownFile = await import(`../../../docs/docs-content/integrations/${pckName}.md`);
@@ -214,9 +211,6 @@ export default function PacksReadme() {
               <PackReadMeComponent />
             </div>
           );
-          if (hashLocationValue) {
-            setFragmentIdentifier(hashLocationValue);
-          }
         } catch (error) {
           console.error("Error importing custom readme component for pack. Additional information follows: \n", error);
           setCustomReadme(null);
@@ -227,20 +221,12 @@ export default function PacksReadme() {
       });
     }, []);
 
-    useEffect(() => {
-      if (document && fragmentIdentifier) {
-        const elementId = fragmentIdentifier.replace("#", "");
-        const parent = document.getElementById?.(elementId);
-        parent?.querySelector?.("a")?.click();
-      }
-    }, [fragmentIdentifier]);
-
     const packData: PackData = useMemo(() => {
       const pack = packs.find((pack) => pack.name === packName);
       if (pack) {
         const packDataInfo: PackReadmeProps = {
           customDescription: pack.description,
-          packUidMap: pack.packUidMap,
+          packUidMap: processPackUiMap(pack.packUidMap),
           versions: pack.versions,
           title: pack.title,
           logoUrl: pack.logoUrl,
@@ -268,9 +254,27 @@ export default function PacksReadme() {
       };
     }, [packName]);
 
+    useEffect(() => {
+      if (isBrowser && fragmentIdentifier && componentsMounted) {
+        const elementId = fragmentIdentifier.replace("#", "");
+        const parent = document.getElementById?.(elementId);
+        parent?.querySelector?.("a")?.click();
+      }
+    }, [fragmentIdentifier, componentsMounted]);
+
+    useEffect(() => {
+      if (packData) {
+        setTimeout(() => {
+          isComponentsMounted(true);
+        }, 1000);
+      }
+    }, [packData]);
+
     useEffect(() => {
       const searchParams = window ? new URLSearchParams(window.location.search) : null;
       const urlParamVersion = searchParams?.get("version");
+      const urlParamTag = searchParams?.get("tab");
+      setSelectedTabPane(urlParamTag || "main");
       const version = urlParamVersion || packData?.latestVersion || packData?.versions[0]?.title || "";
       if (version && !version.endsWith(".x")) {
         const parentVersionObj = getParentVersion(version, packData);
@@ -282,6 +286,56 @@ export default function PacksReadme() {
       }
     }, [packData]);
 
+    const renderTabs = () => {
+      const empty_icon_light = useBaseUrl("/img/empty_icon_table_light.svg");
+      const empty_icon_dark = useBaseUrl("/img/empty_icon_table_dark.svg");
+      const ReadMe = selectedPackUid ? packData.packUidMap[selectedPackUid]?.readme : null;
+
+      const tabs = [
+         ReadMe && {
+          label: `README`,
+          key: "main",
+          children: ReadMe,
+        },
+         customReadme && {
+          label: `Additional Details`,
+          key: "custom",
+          children: customReadme,
+        },
+      ].filter(Boolean) as { label: string; key: string; children: JSX.Element }[];
+      if (tabs.length > 1) {
+        return (
+          <div>
+            <Tabs 
+              defaultActiveKey={selectedTabPane || "main"}
+              items={tabs}
+              onChange={(key)=>{
+                setSelectedTabPane(key);
+                const parentVersion = getParentVersion(selectedVersion, packData)?.title || "";
+                history.replace({ search: `?pack=${packName}&version=${selectedVersion}&parent=${parentVersion}&tab=${key}` });
+            }} />
+          </div>
+        );
+      }
+      if (tabs.length === 1) {
+        return tabs[0].children;
+      }
+      return (
+        <div className={styles.emptyContent}>
+          <ThemedImage
+            alt="Docusaurus themed image"
+            sources={{
+              light: empty_icon_light,
+              dark: empty_icon_dark,
+            }}
+            width={120}
+            height={120}
+          />
+          <div className={styles.emptyContentTitle}>No README found</div>
+        </div>
+      );
+    }
+
     return (
       <div className={styles.wrapper}>
         <div className={styles.description}>
@@ -309,7 +363,8 @@ export default function PacksReadme() {
                     setSelectedPackUid,
                     (version) => getParentVersion(version, packData),
                     history,
-                    packName
+                    packName,
+                    selectedTabPane
                   )
                 }
                 treeData={renderVersionOptions(packData)}
@@ -339,7 +394,7 @@ export default function PacksReadme() {
         </div>
         <div className={styles.tabPane}>
           <ConfigProvider theme={{ algorithm: colorMode === "dark" ? darkAlgorithm : defaultAlgorithm }}>
-            {renderTabs(selectedPackUid, packData, customReadme, fragmentIdentifier)}
+            {renderTabs()}
           </ConfigProvider>
         </div>
       </div>

diff --git a/src/components/Technologies/TechnologyCard.tsx b/src/components/Technologies/TechnologyCard.tsx
@@ -24,7 +24,7 @@ export default function TechnologyCard({ name, title, logoUrl, type, slug, versi
     versions?.find((tagVersion) => tagVersion.children.find((child) => child.title === version))?.title || "";
   return (
     <div className={styles.card}>
-      <Link to={slug || `/integrations/packs?pack=${name}&version=${version}&parent=${parentVersion}`}>
+      <Link to={slug || `/integrations/packs?pack=${name}&version=${version}&parent=${parentVersion}&tab=main`}>
         <div className={styles.cardContent}>
           <PackCardIcon appType={slug ? "app" : "integration"} logoUrl={logoUrl} type={type} />
           <div className={styles.title}>{title}</div>