@backstage/plugin-techdocs 1.3.0 → 1.3.1-next.2

package/dist/esm/{index-248fb87c.esm.js → index-2ba55936.esm.js}

@@ -92,7 +92,9 @@ class TechDocsStorageClient {
     const { kind, namespace, name } = entityId;
     const storageUrl = await this.getStorageUrl();
     const url = `${storageUrl}/${namespace}/${kind}/${name}/${path}`;
-    const request = await this.fetchApi.fetch(`${url.endsWith("/") ? url : `${url}/`}index.html`);
+    const request = await this.fetchApi.fetch(
+      `${url.endsWith("/") ? url : `${url}/`}index.html`
+    );
     let errorMessage = "";
     switch (request.status) {
       case 404:
@@ -147,7 +149,10 @@ class TechDocsStorageClient {
     const { kind, namespace, name } = entityId;
     const apiOrigin = await this.getApiOrigin();
     const newBaseUrl = `${apiOrigin}/static/docs/${namespace}/${kind}/${name}/${path}`;
-    return new URL(oldBaseUrl, newBaseUrl.endsWith("/") ? newBaseUrl : `${newBaseUrl}/`).toString();
+    return new URL(
+      oldBaseUrl,
+      newBaseUrl.endsWith("/") ? newBaseUrl : `${newBaseUrl}/`
+    ).toString();
   }
 }
 
@@ -228,7 +233,10 @@ function useReaderState(kind, namespace, name, path) {
   const { retry: contentReload } = useAsyncRetry(async () => {
     dispatch({ type: "contentLoading" });
     try {
-      const entityDocs = await techdocsStorageApi.getEntityDocs({ kind, namespace, name }, path);
+      const entityDocs = await techdocsStorageApi.getEntityDocs(
+        { kind, namespace, name },
+        path
+      );
       dispatch({ type: "content", content: entityDocs, path });
       return entityDocs;
     } catch (e) {
@@ -248,13 +256,16 @@ function useReaderState(kind, namespace, name, path) {
       dispatch({ type: "sync", state: "BUILDING" });
     }, 1e3);
     try {
-      const result = await techdocsStorageApi.syncEntityDocs({
-        kind,
-        namespace,
-        name
-      }, (log) => {
-        dispatch({ type: "buildLog", log });
-      });
+      const result = await techdocsStorageApi.syncEntityDocs(
+        {
+          kind,
+          namespace,
+          name
+        },
+        (log) => {
+          dispatch({ type: "buildLog", log });
+        }
+      );
       switch (result) {
         case "updated":
           if (!contentRef.current.content) {
@@ -281,11 +292,14 @@ function useReaderState(kind, namespace, name, path) {
       clearTimeout(buildingTimeout);
     }
   }, [kind, name, namespace, techdocsStorageApi, dispatch, contentRef]);
-  const displayState = useMemo(() => calculateDisplayState({
-    activeSyncState: state.activeSyncState,
-    contentLoading: state.contentLoading,
-    content: state.content
-  }), [state.activeSyncState, state.content, state.contentLoading]);
+  const displayState = useMemo(
+    () => calculateDisplayState({
+      activeSyncState: state.activeSyncState,
+      contentLoading: state.contentLoading,
+      content: state.content
+    }),
+    [state.activeSyncState, state.content, state.contentLoading]
+  );
   return {
     state: displayState,
     contentReload,
@@ -510,25 +524,27 @@ const TechDocsSearch = (props) => {
   }));
 };
 
-const useDrawerStyles = makeStyles((theme) => createStyles({
-  paper: {
-    width: "100%",
-    [theme.breakpoints.up("sm")]: {
-      width: "75%"
+const useDrawerStyles = makeStyles(
+  (theme) => createStyles({
+    paper: {
+      width: "100%",
+      [theme.breakpoints.up("sm")]: {
+        width: "75%"
+      },
+      [theme.breakpoints.up("md")]: {
+        width: "50%"
+      },
+      padding: theme.spacing(2.5)
     },
-    [theme.breakpoints.up("md")]: {
-      width: "50%"
+    root: {
+      height: "100%",
+      overflow: "hidden"
     },
-    padding: theme.spacing(2.5)
-  },
-  root: {
-    height: "100%",
-    overflow: "hidden"
-  },
-  logs: {
-    background: theme.palette.background.default
-  }
-}));
+    logs: {
+      background: theme.palette.background.default
+    }
+  })
+);
 const TechDocsBuildLogsDrawerContent = ({
   buildLog,
   onClose
@@ -714,21 +730,24 @@ const useSanitizerConfig = () => {
 };
 const useSanitizerTransformer = () => {
   const config = useSanitizerConfig();
-  return useCallback(async (dom) => {
-    const hosts = config == null ? void 0 : config.getOptionalStringArray("allowedIframeHosts");
-    DOMPurify.addHook("beforeSanitizeElements", removeUnsafeLinks);
-    const tags = ["link"];
-    if (hosts) {
-      tags.push("iframe");
-      DOMPurify.addHook("beforeSanitizeElements", removeUnsafeIframes(hosts));
-    }
-    return DOMPurify.sanitize(dom.innerHTML, {
-      ADD_TAGS: tags,
-      FORBID_TAGS: ["style"],
-      WHOLE_DOCUMENT: true,
-      RETURN_DOM: true
-    });
-  }, [config]);
+  return useCallback(
+    async (dom) => {
+      const hosts = config == null ? void 0 : config.getOptionalStringArray("allowedIframeHosts");
+      DOMPurify.addHook("beforeSanitizeElements", removeUnsafeLinks);
+      const tags = ["link"];
+      if (hosts) {
+        tags.push("iframe");
+        DOMPurify.addHook("beforeSanitizeElements", removeUnsafeIframes(hosts));
+      }
+      return DOMPurify.sanitize(dom.innerHTML, {
+        ADD_TAGS: tags,
+        FORBID_TAGS: ["style"],
+        WHOLE_DOCUMENT: true,
+        RETURN_DOM: true
+      });
+    },
+    [config]
+  );
 };
 
 var variables = ({ theme }) => `
@@ -743,20 +762,32 @@ var variables = ({ theme }) => `
   --md-default-fg-color: ${theme.palette.text.primary};
   --md-default-fg-color--light: ${theme.palette.text.secondary};
   --md-default-fg-color--lighter: ${lighten(theme.palette.text.secondary, 0.7)};
-  --md-default-fg-color--lightest: ${lighten(theme.palette.text.secondary, 0.3)};
+  --md-default-fg-color--lightest: ${lighten(
+  theme.palette.text.secondary,
+  0.3
+)};
 
   /* BACKGROUND */
   --md-default-bg-color:${theme.palette.background.default};
   --md-default-bg-color--light: ${theme.palette.background.paper};
-  --md-default-bg-color--lighter: ${lighten(theme.palette.background.paper, 0.7)};
-  --md-default-bg-color--lightest: ${lighten(theme.palette.background.paper, 0.3)};
+  --md-default-bg-color--lighter: ${lighten(
+  theme.palette.background.paper,
+  0.7
+)};
+  --md-default-bg-color--lightest: ${lighten(
+  theme.palette.background.paper,
+  0.3
+)};
 
   /* PRIMARY */
   --md-primary-fg-color: ${theme.palette.primary.main};
   --md-primary-fg-color--light: ${theme.palette.primary.light};
   --md-primary-fg-color--dark: ${theme.palette.primary.dark};
   --md-primary-bg-color: ${theme.palette.primary.contrastText};
-  --md-primary-bg-color--light: ${lighten(theme.palette.primary.contrastText, 0.7)};
+  --md-primary-bg-color--light: ${lighten(
+  theme.palette.primary.contrastText,
+  0.7
+)};
 
   /* ACCENT */
   --md-accent-fg-color: var(--md-primary-fg-color);
@@ -853,6 +884,7 @@ body {
 }
 `;
 
+const SIDEBAR_WIDTH = "224px";
 var layout = ({ theme, sidebar }) => `
 /*==================  Layout  ==================*/
 
@@ -884,6 +916,11 @@ var layout = ({ theme, sidebar }) => `
   height: 20px !important;
 }
 
+.md-nav__item--active > .md-nav__link, a.md-nav__link--active {
+  text-decoration: underline;
+  color: var(--md-typeset-a-color);
+}
+
 .md-main__inner {
   margin-top: 0;
 }
@@ -898,7 +935,7 @@ var layout = ({ theme, sidebar }) => `
   scrollbar-width: thin;
 }
 .md-sidebar .md-sidebar__scrollwrap {
-  width: calc(16rem - 10px);
+  width: calc(12.1rem);
 }
 .md-sidebar--secondary {
   right: ${theme.spacing(3)}px;
@@ -1005,7 +1042,7 @@ var layout = ({ theme, sidebar }) => `
   .md-sidebar--primary {
     width: 12.1rem !important;
     z-index: 200;
-    left: ${sidebar.isPinned ? "calc(-12.1rem + 242px)" : "calc(-12.1rem + 72px)"} !important;
+    left: ${sidebar.isPinned ? `calc(-12.1rem + ${SIDEBAR_WIDTH})` : "calc(-12.1rem + 72px)"} !important;
   }
   .md-sidebar--secondary:not([hidden]) {
     display: none;
@@ -1230,10 +1267,13 @@ const useRuleStyles = () => {
 };
 const useStylesTransformer = () => {
   const styles = useRuleStyles();
-  return useCallback((dom) => {
-    dom.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", `<style>${styles}</style>`);
-    return dom;
-  }, [styles]);
+  return useCallback(
+    (dom) => {
+      dom.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", `<style>${styles}</style>`);
+      return dom;
+    },
+    [styles]
+  );
 };
 
 const isSvgNeedingInlining = (attrName, attrVal, apiOrigin) => {
@@ -1255,12 +1295,21 @@ const addBaseUrl = ({
           const elemAttribute = elem.getAttribute(attributeName);
           if (!elemAttribute)
             return;
-          const newValue = await techdocsStorageApi.getBaseUrl(elemAttribute, entityId, path);
+          const newValue = await techdocsStorageApi.getBaseUrl(
+            elemAttribute,
+            entityId,
+            path
+          );
           if (isSvgNeedingInlining(attributeName, elemAttribute, apiOrigin)) {
             try {
               const svg = await fetch(newValue, { credentials: "include" });
               const svgContent = await svg.text();
-              elem.setAttribute(attributeName, `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgContent)))}`);
+              elem.setAttribute(
+                attributeName,
+                `data:image/svg+xml;base64,${btoa(
+                  unescape(encodeURIComponent(svgContent))
+                )}`
+              );
             } catch (e) {
               elem.setAttribute("alt", `Error: ${elemAttribute}`);
             }
@@ -1284,7 +1333,9 @@ const addBaseUrl = ({
 const addGitFeedbackLink = (scmIntegrationsApi) => {
   return (dom) => {
     var _a;
-    const sourceAnchor = dom.querySelector('[title="Edit this page"]');
+    const sourceAnchor = dom.querySelector(
+      '[title="Edit this page"]'
+    );
     if (!sourceAnchor || !sourceAnchor.href) {
       return dom;
     }
@@ -1295,10 +1346,12 @@ const addGitFeedbackLink = (scmIntegrationsApi) => {
     }
     const title = ((_a = dom.querySelector("article>h1")) == null ? void 0 : _a.childNodes[0].textContent) || "";
     const issueTitle = encodeURIComponent(`Documentation Feedback: ${title}`);
-    const issueDesc = encodeURIComponent(`Page source:
+    const issueDesc = encodeURIComponent(
+      `Page source:
 ${sourceAnchor.href}
 
-Feedback:`);
+Feedback:`
+    );
     const gitUrl = (integration == null ? void 0 : integration.type) === "github" ? replaceGitHubUrlType(sourceURL.href, "blob") : sourceURL.href;
     const gitInfo = parseGitUrl(gitUrl);
     const repoPath = `/${gitInfo.organization}/${gitInfo.name}`;
@@ -1324,7 +1377,9 @@ Feedback:`);
 
 const addSidebarToggle = () => {
   return (dom) => {
-    const mkdocsToggleSidebar = dom.querySelector('.md-header label[for="__drawer"]');
+    const mkdocsToggleSidebar = dom.querySelector(
+      '.md-header label[for="__drawer"]'
+    );
     const article = dom.querySelector("article");
     if (!mkdocsToggleSidebar || !article) {
       return dom;
@@ -1351,8 +1406,13 @@ const rewriteDocLinks = () => {
             elem.setAttribute("target", "_blank");
           }
           try {
-            const normalizedWindowLocation = normalizeUrl(window.location.href);
-            elem.setAttribute(attributeName, new URL(elemAttribute, normalizedWindowLocation).toString());
+            const normalizedWindowLocation = normalizeUrl(
+              window.location.href
+            );
+            elem.setAttribute(
+              attributeName,
+              new URL(elemAttribute, normalizedWindowLocation).toString()
+            );
           } catch (_e) {
             elem.replaceWith(elem.textContent || elemAttribute);
           }
@@ -1433,11 +1493,14 @@ const copyToClipboard = (theme) => {
       const text = code.textContent || "";
       const container = document.createElement("div");
       (_a = code == null ? void 0 : code.parentElement) == null ? void 0 : _a.prepend(container);
-      ReactDOM.render(/* @__PURE__ */ React.createElement(ThemeProvider, {
-        theme
-      }, /* @__PURE__ */ React.createElement(CopyToClipboardButton, {
-        text
-      })), container);
+      ReactDOM.render(
+        /* @__PURE__ */ React.createElement(ThemeProvider, {
+          theme
+        }, /* @__PURE__ */ React.createElement(CopyToClipboardButton, {
+          text
+        })),
+        container
+      );
     }
     return dom;
   };
@@ -1466,10 +1529,16 @@ const onCssReady = ({
 }) => {
   return (dom) => {
     onLoading();
-    dom.addEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, function handleShadowDomStyleLoad() {
-      onLoaded();
-      dom.removeEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, handleShadowDomStyleLoad);
-    });
+    dom.addEventListener(
+      SHADOW_DOM_STYLE_LOAD_EVENT,
+      function handleShadowDomStyleLoad() {
+        onLoaded();
+        dom.removeEventListener(
+          SHADOW_DOM_STYLE_LOAD_EVENT,
+          handleShadowDomStyleLoad
+        );
+      }
+    );
     return dom;
   };
 };
@@ -1487,6 +1556,25 @@ const scrollIntoAnchor = () => {
   };
 };
 
+const scrollIntoNavigation = () => {
+  return (dom) => {
+    setTimeout(() => {
+      const activeNavItems = dom == null ? void 0 : dom.querySelectorAll(`li.md-nav__item--active`);
+      if (activeNavItems.length !== 0) {
+        activeNavItems.forEach((activeNavItem) => {
+          const checkbox = activeNavItem == null ? void 0 : activeNavItem.querySelector("input");
+          if (!(checkbox == null ? void 0 : checkbox.checked)) {
+            checkbox == null ? void 0 : checkbox.click();
+          }
+        });
+        const lastItem = activeNavItems[activeNavItems.length - 1];
+        lastItem.scrollIntoView();
+      }
+    }, 200);
+    return dom;
+  };
+};
+
 const transform = async (html, transformers) => {
   let dom;
   if (typeof html === "string") {
@@ -1564,70 +1652,79 @@ const useTechDocsReaderDom = (entityRef) => {
       updateSidebarPosition();
     }
   }, [state, isStyleLoading, updateFooterWidth, updateSidebarPosition]);
-  const preRender = useCallback((rawContent, contentPath) => transform(rawContent, [
-    sanitizerTransformer,
-    addBaseUrl({
+  const preRender = useCallback(
+    (rawContent, contentPath) => transform(rawContent, [
+      sanitizerTransformer,
+      addBaseUrl({
+        techdocsStorageApi,
+        entityId: entityRef,
+        path: contentPath
+      }),
+      rewriteDocLinks(),
+      addSidebarToggle(),
+      removeMkdocsHeader(),
+      simplifyMkdocsFooter(),
+      addGitFeedbackLink(scmIntegrationsApi),
+      stylesTransformer
+    ]),
+    [
+      entityRef,
+      scmIntegrationsApi,
       techdocsStorageApi,
-      entityId: entityRef,
-      path: contentPath
-    }),
-    rewriteDocLinks(),
-    addSidebarToggle(),
-    removeMkdocsHeader(),
-    simplifyMkdocsFooter(),
-    addGitFeedbackLink(scmIntegrationsApi),
-    stylesTransformer
-  ]), [
-    entityRef,
-    scmIntegrationsApi,
-    techdocsStorageApi,
-    sanitizerTransformer,
-    stylesTransformer
-  ]);
-  const postRender = useCallback(async (transformedElement) => transform(transformedElement, [
-    scrollIntoAnchor(),
-    copyToClipboard(theme),
-    addLinkClickListener({
-      baseUrl: window.location.origin,
-      onClick: (event, url) => {
-        var _a;
-        const modifierActive = event.ctrlKey || event.metaKey;
-        const parsedUrl = new URL(url);
-        if (parsedUrl.hash) {
-          if (modifierActive) {
-            window.open(`${parsedUrl.pathname}${parsedUrl.hash}`, "_blank");
-          } else {
-            navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
-            (_a = transformedElement == null ? void 0 : transformedElement.querySelector(`#${parsedUrl.hash.slice(1)}`)) == null ? void 0 : _a.scrollIntoView();
-          }
-        } else {
-          if (modifierActive) {
-            window.open(parsedUrl.pathname, "_blank");
+      sanitizerTransformer,
+      stylesTransformer
+    ]
+  );
+  const postRender = useCallback(
+    async (transformedElement) => transform(transformedElement, [
+      scrollIntoAnchor(),
+      scrollIntoNavigation(),
+      copyToClipboard(theme),
+      addLinkClickListener({
+        baseUrl: window.location.origin,
+        onClick: (event, url) => {
+          var _a;
+          const modifierActive = event.ctrlKey || event.metaKey;
+          const parsedUrl = new URL(url);
+          if (parsedUrl.hash) {
+            if (modifierActive) {
+              window.open(`${parsedUrl.pathname}${parsedUrl.hash}`, "_blank");
+            } else {
+              navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
+              (_a = transformedElement == null ? void 0 : transformedElement.querySelector(`#${parsedUrl.hash.slice(1)}`)) == null ? void 0 : _a.scrollIntoView();
+            }
           } else {
-            navigate(parsedUrl.pathname);
+            if (modifierActive) {
+              window.open(parsedUrl.pathname, "_blank");
+            } else {
+              navigate(parsedUrl.pathname);
+            }
           }
         }
-      }
-    }),
-    onCssReady({
-      onLoading: () => {
-      },
-      onLoaded: () => {
-        var _a;
-        (_a = transformedElement.querySelector(".md-nav__title")) == null ? void 0 : _a.removeAttribute("for");
-      }
-    }),
-    onCssReady({
-      onLoading: () => {
-        const sidebars = Array.from(transformedElement.querySelectorAll(".md-sidebar"));
-        sidebars.forEach((element) => {
-          element.style.setProperty("opacity", "0");
-        });
-      },
-      onLoaded: () => {
-      }
-    })
-  ]), [theme, navigate]);
+      }),
+      onCssReady({
+        onLoading: () => {
+        },
+        onLoaded: () => {
+          var _a;
+          (_a = transformedElement.querySelector(".md-nav__title")) == null ? void 0 : _a.removeAttribute("for");
+        }
+      }),
+      onCssReady({
+        onLoading: () => {
+          const sidebars = Array.from(
+            transformedElement.querySelectorAll(".md-sidebar")
+          );
+          sidebars.forEach((element) => {
+            element.style.setProperty("opacity", "0");
+          });
+        },
+        onLoaded: () => {
+        }
+      })
+    ]),
+    [theme, navigate]
+  );
   useEffect(() => {
     if (!rawPage)
       return () => {
@@ -1641,7 +1738,9 @@ const useTechDocsReaderDom = (entityRef) => {
         return;
       }
       window.scroll({ top: 0 });
-      const postTransformedDomElement = await postRender(preTransformedDomElement);
+      const postTransformedDomElement = await postRender(
+        preTransformedDomElement
+      );
       setDom(postTransformedDomElement);
     });
     return () => {
@@ -1654,19 +1753,35 @@ const useTechDocsReaderDom = (entityRef) => {
 const TechDocsReaderPageContentAddons = () => {
   const addons = useTechDocsAddons();
   const { shadowRoot } = useTechDocsReaderPage();
-  const contentElement = shadowRoot == null ? void 0 : shadowRoot.querySelector('[data-md-component="content"]');
-  const primarySidebarElement = shadowRoot == null ? void 0 : shadowRoot.querySelector('div[data-md-component="sidebar"][data-md-type="navigation"], div[data-md-component="navigation"]');
-  let primarySidebarAddonLocation = primarySidebarElement == null ? void 0 : primarySidebarElement.querySelector('[data-techdocs-addons-location="primary sidebar"]');
+  const contentElement = shadowRoot == null ? void 0 : shadowRoot.querySelector(
+    '[data-md-component="content"]'
+  );
+  const primarySidebarElement = shadowRoot == null ? void 0 : shadowRoot.querySelector(
+    'div[data-md-component="sidebar"][data-md-type="navigation"], div[data-md-component="navigation"]'
+  );
+  let primarySidebarAddonLocation = primarySidebarElement == null ? void 0 : primarySidebarElement.querySelector(
+    '[data-techdocs-addons-location="primary sidebar"]'
+  );
   if (!primarySidebarAddonLocation) {
     primarySidebarAddonLocation = document.createElement("div");
-    primarySidebarAddonLocation.setAttribute("data-techdocs-addons-location", "primary sidebar");
+    primarySidebarAddonLocation.setAttribute(
+      "data-techdocs-addons-location",
+      "primary sidebar"
+    );
     primarySidebarElement == null ? void 0 : primarySidebarElement.prepend(primarySidebarAddonLocation);
   }
-  const secondarySidebarElement = shadowRoot == null ? void 0 : shadowRoot.querySelector('div[data-md-component="sidebar"][data-md-type="toc"], div[data-md-component="toc"]');
-  let secondarySidebarAddonLocation = secondarySidebarElement == null ? void 0 : secondarySidebarElement.querySelector('[data-techdocs-addons-location="secondary sidebar"]');
+  const secondarySidebarElement = shadowRoot == null ? void 0 : shadowRoot.querySelector(
+    'div[data-md-component="sidebar"][data-md-type="toc"], div[data-md-component="toc"]'
+  );
+  let secondarySidebarAddonLocation = secondarySidebarElement == null ? void 0 : secondarySidebarElement.querySelector(
+    '[data-techdocs-addons-location="secondary sidebar"]'
+  );
   if (!secondarySidebarAddonLocation) {
     secondarySidebarAddonLocation = document.createElement("div");
-    secondarySidebarAddonLocation.setAttribute("data-techdocs-addons-location", "secondary sidebar");
+    secondarySidebarAddonLocation.setAttribute(
+      "data-techdocs-addons-location",
+      "secondary sidebar"
+    );
     secondarySidebarElement == null ? void 0 : secondarySidebarElement.prepend(secondarySidebarAddonLocation);
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Portal, {
@@ -1687,55 +1802,60 @@ const useStyles$1 = makeStyles({
     }
   }
 });
-const TechDocsReaderPageContent = withTechDocsReaderProvider((props) => {
-  var _a;
-  const { withSearch = true, onReady } = props;
-  const classes = useStyles$1();
-  const {
-    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },
-    entityRef,
-    setShadowRoot
-  } = useTechDocsReaderPage();
-  const dom = useTechDocsReaderDom(entityRef);
-  const handleAppend = useCallback((newShadowRoot) => {
-    setShadowRoot(newShadowRoot);
-    if (onReady instanceof Function) {
-      onReady();
+const TechDocsReaderPageContent = withTechDocsReaderProvider(
+  (props) => {
+    var _a;
+    const { withSearch = true, onReady } = props;
+    const classes = useStyles$1();
+    const {
+      entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },
+      entityRef,
+      setShadowRoot
+    } = useTechDocsReaderPage();
+    const dom = useTechDocsReaderDom(entityRef);
+    const handleAppend = useCallback(
+      (newShadowRoot) => {
+        setShadowRoot(newShadowRoot);
+        if (onReady instanceof Function) {
+          onReady();
+        }
+      },
+      [setShadowRoot, onReady]
+    );
+    if (entityMetadataLoading === false && !entityMetadata)
+      return /* @__PURE__ */ React.createElement(ErrorPage, {
+        status: "404",
+        statusMessage: "PAGE NOT FOUND"
+      });
+    if (!dom) {
+      return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, {
+        container: true
+      }, /* @__PURE__ */ React.createElement(Grid, {
+        xs: 12,
+        item: true
+      }, /* @__PURE__ */ React.createElement(TechDocsStateIndicator, null))));
     }
-  }, [setShadowRoot, onReady]);
-  if (entityMetadataLoading === false && !entityMetadata)
-    return /* @__PURE__ */ React.createElement(ErrorPage, {
-      status: "404",
-      statusMessage: "PAGE NOT FOUND"
-    });
-  if (!dom) {
     return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, {
       container: true
     }, /* @__PURE__ */ React.createElement(Grid, {
       xs: 12,
       item: true
-    }, /* @__PURE__ */ React.createElement(TechDocsStateIndicator, null))));
+    }, /* @__PURE__ */ React.createElement(TechDocsStateIndicator, null)), withSearch && /* @__PURE__ */ React.createElement(Grid, {
+      className: classes.search,
+      xs: "auto",
+      item: true
+    }, /* @__PURE__ */ React.createElement(TechDocsSearch, {
+      entityId: entityRef,
+      entityTitle: (_a = entityMetadata == null ? void 0 : entityMetadata.metadata) == null ? void 0 : _a.title
+    })), /* @__PURE__ */ React.createElement(Grid, {
+      xs: 12,
+      item: true
+    }, /* @__PURE__ */ React.createElement(TechDocsShadowDom, {
+      element: dom,
+      onAppend: handleAppend
+    }, /* @__PURE__ */ React.createElement(TechDocsReaderPageContentAddons, null)))));
   }
-  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, {
-    container: true
-  }, /* @__PURE__ */ React.createElement(Grid, {
-    xs: 12,
-    item: true
-  }, /* @__PURE__ */ React.createElement(TechDocsStateIndicator, null)), withSearch && /* @__PURE__ */ React.createElement(Grid, {
-    className: classes.search,
-    xs: "auto",
-    item: true
-  }, /* @__PURE__ */ React.createElement(TechDocsSearch, {
-    entityId: entityRef,
-    entityTitle: (_a = entityMetadata == null ? void 0 : entityMetadata.metadata) == null ? void 0 : _a.title
-  })), /* @__PURE__ */ React.createElement(Grid, {
-    xs: 12,
-    item: true
-  }, /* @__PURE__ */ React.createElement(TechDocsShadowDom, {
-    element: dom,
-    onAppend: handleAppend
-  }, /* @__PURE__ */ React.createElement(TechDocsReaderPageContentAddons, null)))));
-});
+);
 const Reader = TechDocsReaderPageContent;
 
 const rootRouteRef = createRouteRef({
@@ -1853,7 +1973,9 @@ const TechDocsReaderPageSubheader = ({
     entityMetadata: { value: entityMetadata, loading: entityMetadataLoading }
   } = useTechDocsReaderPage();
   const addons = useTechDocsAddons();
-  const subheaderAddons = addons.renderComponentsByLocation(TechDocsAddonLocations.Subheader);
+  const subheaderAddons = addons.renderComponentsByLocation(
+    TechDocsAddonLocations.Subheader
+  );
   const settingsAddons = addons.renderComponentsByLocation(TechDocsAddonLocations.Settings);
   if (!subheaderAddons && !settingsAddons)
     return null;
@@ -1924,7 +2046,9 @@ const TechDocsReaderPage$1 = (props) => {
 };
 
 function toLowerMaybe(str, config) {
-  return config.getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? str : str.toLocaleLowerCase("en-US");
+  return config.getOptionalBoolean(
+    "techdocs.legacyUseCaseSensitiveTripletPaths"
+  ) ? str : str.toLocaleLowerCase("en-US");
 }
 
 const DocsCardGrid = (props) => {
@@ -1943,7 +2067,10 @@ const DocsCardGrid = (props) => {
       title: (_a = entity.metadata.title) != null ? _a : entity.metadata.name
     })), /* @__PURE__ */ React.createElement(CardContent, null, entity.metadata.description), /* @__PURE__ */ React.createElement(CardActions, null, /* @__PURE__ */ React.createElement(Button$1, {
       to: getRouteToReaderPageFor({
-        namespace: toLowerMaybe((_b = entity.metadata.namespace) != null ? _b : "default", config),
+        namespace: toLowerMaybe(
+          (_b = entity.metadata.namespace) != null ? _b : "default",
+          config
+        ),
         kind: toLowerMaybe(entity.kind, config),
         name: toLowerMaybe(entity.metadata.name, config)
       }),
@@ -1967,10 +2094,14 @@ const EntityListDocsGrid = () => {
   if (loading || !entities) {
     return /* @__PURE__ */ React.createElement(Progress, null);
   }
-  entities.sort((a, b) => {
-    var _a, _b;
-    return ((_a = a.metadata.title) != null ? _a : a.metadata.name).localeCompare((_b = b.metadata.title) != null ? _b : b.metadata.name);
-  });
+  entities.sort(
+    (a, b) => {
+      var _a, _b;
+      return ((_a = a.metadata.title) != null ? _a : a.metadata.name).localeCompare(
+        (_b = b.metadata.title) != null ? _b : b.metadata.name
+      );
+    }
+  );
   return /* @__PURE__ */ React.createElement(DocsCardGrid, {
     entities
   });
@@ -2055,7 +2186,10 @@ const DocsTable = (props) => {
       entity,
       resolved: {
         docsUrl: getRouteToReaderPageFor({
-          namespace: toLowerMaybe((_a = entity.metadata.namespace) != null ? _a : "default", config),
+          namespace: toLowerMaybe(
+            (_a = entity.metadata.namespace) != null ? _a : "default",
+            config
+          ),
           kind: toLowerMaybe(entity.kind, config),
           name: toLowerMaybe(entity.metadata.name, config)
         }),
@@ -2107,7 +2241,10 @@ const EntityListDocsTable = (props) => {
   const title = capitalize((_b = (_a = filters.user) == null ? void 0 : _a.value) != null ? _b : "all");
   const defaultActions = [
     actionFactories.createCopyDocsUrlAction(copyToClipboard),
-    actionFactories.createStarEntityAction(isStarredEntity, toggleStarredEntity)
+    actionFactories.createStarEntityAction(
+      isStarredEntity,
+      toggleStarredEntity
+    )
   ];
   if (error) {
     return /* @__PURE__ */ React.createElement(WarningPanel, {
@@ -2208,31 +2345,47 @@ const techdocsPlugin = createPlugin({
     entityContent: rootCatalogDocsRouteRef
   }
 });
-const TechdocsPage = techdocsPlugin.provide(createRoutableExtension({
-  name: "TechdocsPage",
-  component: () => Promise.resolve().then(function () { return Router$1; }).then((m) => m.Router),
-  mountPoint: rootRouteRef
-}));
-const EntityTechdocsContent = techdocsPlugin.provide(createRoutableExtension({
-  name: "EntityTechdocsContent",
-  component: () => Promise.resolve().then(function () { return Router$1; }).then((m) => m.EmbeddedDocsRouter),
-  mountPoint: rootCatalogDocsRouteRef
-}));
-const TechDocsCustomHome = techdocsPlugin.provide(createRoutableExtension({
-  name: "TechDocsCustomHome",
-  component: () => import('./TechDocsCustomHome-23b75ea1.esm.js').then((m) => m.TechDocsCustomHome),
-  mountPoint: rootRouteRef
-}));
-const TechDocsIndexPage$2 = techdocsPlugin.provide(createRoutableExtension({
-  name: "TechDocsIndexPage",
-  component: () => Promise.resolve().then(function () { return TechDocsIndexPage$1; }).then((m) => m.TechDocsIndexPage),
-  mountPoint: rootRouteRef
-}));
-const TechDocsReaderPage = techdocsPlugin.provide(createRoutableExtension({
-  name: "TechDocsReaderPage",
-  component: () => import('./index-7bae3ba3.esm.js').then((m) => m.TechDocsReaderPage),
-  mountPoint: rootDocsRouteRef
-}));
+const TechdocsPage = techdocsPlugin.provide(
+  createRoutableExtension({
+    name: "TechdocsPage",
+    component: () => Promise.resolve().then(function () { return Router$1; }).then((m) => m.Router),
+    mountPoint: rootRouteRef
+  })
+);
+const EntityTechdocsContent = techdocsPlugin.provide(
+  createRoutableExtension({
+    name: "EntityTechdocsContent",
+    component: () => Promise.resolve().then(function () { return Router$1; }).then((m) => m.EmbeddedDocsRouter),
+    mountPoint: rootCatalogDocsRouteRef
+  })
+);
+const TechDocsCustomHome = techdocsPlugin.provide(
+  createRoutableExtension({
+    name: "TechDocsCustomHome",
+    component: () => import('./TechDocsCustomHome-3c888994.esm.js').then(
+      (m) => m.TechDocsCustomHome
+    ),
+    mountPoint: rootRouteRef
+  })
+);
+const TechDocsIndexPage$2 = techdocsPlugin.provide(
+  createRoutableExtension({
+    name: "TechDocsIndexPage",
+    component: () => Promise.resolve().then(function () { return TechDocsIndexPage$1; }).then(
+      (m) => m.TechDocsIndexPage
+    ),
+    mountPoint: rootRouteRef
+  })
+);
+const TechDocsReaderPage = techdocsPlugin.provide(
+  createRoutableExtension({
+    name: "TechDocsReaderPage",
+    component: () => import('./index-4754b215.esm.js').then(
+      (m) => m.TechDocsReaderPage
+    ),
+    mountPoint: rootDocsRouteRef
+  })
+);
 
 const EntityPageDocs = ({ entity }) => {
   const entityRef = getCompoundEntityRef(entity);
@@ -2304,4 +2457,4 @@ var Router$1 = /*#__PURE__*/Object.freeze({
 });
 
 export { DocsTable as D, EntityTechdocsContent as E, Reader as R, TechDocsPageWrapper as T, DocsCardGrid as a, TechDocsReaderPage$1 as b, TechDocsReaderLayout as c, TechDocsCustomHome as d, TechDocsIndexPage$2 as e, TechdocsPage as f, TechDocsReaderPage as g, techdocsStorageApiRef as h, techdocsApiRef as i, TechDocsClient as j, TechDocsStorageClient as k, TechDocsReaderProvider as l, TechDocsReaderPageHeader as m, TechDocsReaderPageContent as n, TechDocsReaderPageSubheader as o, TechDocsSearchResultListItem as p, TechDocsSearch as q, EntityListDocsGrid as r, EntityListDocsTable as s, techdocsPlugin as t, DefaultTechDocsHome as u, TechDocsPicker as v, isTechDocsAvailable as w, Router as x, EmbeddedDocsRouter as y };
-//# sourceMappingURL=index-248fb87c.esm.js.map
+//# sourceMappingURL=index-2ba55936.esm.js.map