@backstage/plugin-techdocs 0.13.4 → 0.15.1-next.0

package/dist/index.esm.js

@@ -1,23 +1,18 @@
-import { createApiRef, createRouteRef, useRouteRef, useApi, configApiRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, fetchApiRef, createRoutableExtension, createComponentExtension } from '@backstage/core-plugin-api';
+import { createApiRef, useApi, configApiRef, createRouteRef, useRouteRef, useApp, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, fetchApiRef, createRoutableExtension } from '@backstage/core-plugin-api';
 import { ResponseError, NotFoundError } from '@backstage/errors';
 import { EventSourcePolyfill } from 'event-source-polyfill';
-import React, { useEffect, useState, useReducer, useRef, useMemo, createContext, useContext, useCallback } from 'react';
-import { makeStyles, ListItemText, ListItem, Divider, Card, CardMedia, CardContent, CardActions, Grid, TextField, InputAdornment, IconButton, CircularProgress, createStyles, Button as Button$1, Drawer, Typography, useTheme } from '@material-ui/core';
-import { Link, SubvalueCell, Table, EmptyState, Button, WarningPanel, CodeSnippet, PageWithHeader, Content, ContentHeader, SupportButton, ItemCardGrid, ItemCardHeader, Progress, LogViewer, ErrorPage, SidebarPinStateContext, HeaderLabel, Header, Page, HeaderTabs, MissingAnnotationEmptyState } from '@backstage/core-components';
-import TextTruncate from 'react-text-truncate';
-import { FilteredEntityLayout, FilterContainer, EntityListContainer } from '@backstage/plugin-catalog';
-import { favoriteEntityIcon, favoriteEntityTooltip, EntityRefLinks, getEntityRelations, formatEntityRefTitle, useEntityListProvider, useStarredEntities, CATALOG_FILTER_EXISTS, EntityListProvider, UserListPicker, EntityOwnerPicker, EntityTagPicker, EntityRefLink, catalogApiRef, useOwnUser, isOwnerOf, useEntity } from '@backstage/plugin-catalog-react';
-import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
-import { capitalize } from 'lodash';
-import { RELATION_OWNED_BY } from '@backstage/catalog-model';
-import ShareIcon from '@material-ui/icons/Share';
+import React, { useState, useCallback, useEffect, useReducer, useRef, useMemo, createContext, useContext } from 'react';
 import { useNavigate as useNavigate$1, useParams, Routes, Route } from 'react-router-dom';
+import { withStyles, Tooltip, ThemeProvider, SvgIcon, makeStyles, ListItemText, ListItem, Divider, TextField, InputAdornment, IconButton, CircularProgress, createStyles, Button, Drawer, Grid, Typography, useTheme, lighten, alpha, Card, CardMedia, CardContent, CardActions } from '@material-ui/core';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
+import { Link, LogViewer, ErrorPage, Progress, SidebarPinStateContext, HeaderLabel, Header, Page, Content, ItemCardGrid, ItemCardHeader, Button as Button$1, WarningPanel, CodeSnippet, SubvalueCell, Table, EmptyState, PageWithHeader, ContentHeader, SupportButton, MissingAnnotationEmptyState } from '@backstage/core-components';
 import { replaceGitHubUrlType } from '@backstage/integration';
 import FeedbackOutlinedIcon from '@material-ui/icons/FeedbackOutlined';
 import ReactDOM from 'react-dom';
 import parseGitUrl from 'git-url-parse';
+import MenuIcon from '@material-ui/icons/Menu';
 import DOMPurify from 'dompurify';
+import TextTruncate from 'react-text-truncate';
 import { SearchContextProvider, useSearch } from '@backstage/plugin-search';
 import SearchIcon from '@material-ui/icons/Search';
 import Autocomplete from '@material-ui/lab/Autocomplete';
@@ -28,6 +23,15 @@ import Close from '@material-ui/icons/Close';
 import useAsync from 'react-use/lib/useAsync';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import CodeIcon from '@material-ui/icons/Code';
+import { RELATION_OWNED_BY } from '@backstage/catalog-model';
+import { getEntityRelations, EntityRefLink, EntityRefLinks, useEntityList, humanizeEntityRef, useStarredEntities, CATALOG_FILTER_EXISTS, EntityListProvider, UserListPicker, EntityOwnerPicker, EntityTagPicker, useEntity } from '@backstage/plugin-catalog-react';
+import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
+import { capitalize } from 'lodash';
+import ShareIcon from '@material-ui/icons/Share';
+import { withStyles as withStyles$1 } from '@material-ui/styles';
+import Star from '@material-ui/icons/Star';
+import StarBorder from '@material-ui/icons/StarBorder';
+import { FilteredEntityLayout, FilterContainer, EntityListContainer } from '@backstage/plugin-catalog';
 
 const techdocsStorageApiRef = createApiRef({
   id: "plugin.techdocs.storageservice"
@@ -148,577 +152,232 @@ class TechDocsStorageClient {
   }
 }
 
-const useStyles$2 = makeStyles({
-  flexContainer: {
-    flexWrap: "wrap"
-  },
-  itemText: {
-    width: "100%",
-    marginBottom: "1rem"
-  }
-});
-const DocsResultListItem = ({
-  result,
-  lineClamp = 5,
-  asListItem = true,
-  asLink = true,
-  title
+const isSvgNeedingInlining = (attrName, attrVal, apiOrigin) => {
+  const isSrcToSvg = attrName === "src" && attrVal.endsWith(".svg");
+  const isRelativeUrl = !attrVal.match(/^([a-z]*:)?\/\//i);
+  const pointsToOurBackend = attrVal.startsWith(apiOrigin);
+  return isSrcToSvg && (isRelativeUrl || pointsToOurBackend);
+};
+const addBaseUrl = ({
+  techdocsStorageApi,
+  entityId,
+  path
 }) => {
-  const classes = useStyles$2();
-  const TextItem = () => {
-    var _a;
-    return /* @__PURE__ */ React.createElement(ListItemText, {
-      className: classes.itemText,
-      primaryTypographyProps: { variant: "h6" },
-      primary: title ? title : `${result.title} | ${(_a = result.entityTitle) != null ? _a : result.name} docs`,
-      secondary: /* @__PURE__ */ React.createElement(TextTruncate, {
-        line: lineClamp,
-        truncateText: "\u2026",
-        text: result.text,
-        element: "span"
-      })
-    });
+  return async (dom) => {
+    const apiOrigin = await techdocsStorageApi.getApiOrigin();
+    const updateDom = async (list, attributeName) => {
+      for (const elem of list) {
+        if (elem.hasAttribute(attributeName)) {
+          const elemAttribute = elem.getAttribute(attributeName);
+          if (!elemAttribute)
+            return;
+          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(svgContent)}`);
+            } catch (e) {
+              elem.setAttribute("alt", `Error: ${elemAttribute}`);
+            }
+          } else {
+            elem.setAttribute(attributeName, newValue);
+          }
+        }
+      }
+    };
+    await Promise.all([
+      updateDom(dom.querySelectorAll("img"), "src"),
+      updateDom(dom.querySelectorAll("script"), "src"),
+      updateDom(dom.querySelectorAll("source"), "src"),
+      updateDom(dom.querySelectorAll("link"), "href"),
+      updateDom(dom.querySelectorAll("a[download]"), "href")
+    ]);
+    return dom;
   };
-  const LinkWrapper = ({ children }) => asLink ? /* @__PURE__ */ React.createElement(Link, {
-    to: result.location
-  }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-  const ListItemWrapper = ({ children }) => asListItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, {
-    alignItems: "flex-start",
-    className: classes.flexContainer
-  }, children), /* @__PURE__ */ React.createElement(Divider, {
-    component: "li"
-  })) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-  return /* @__PURE__ */ React.createElement(LinkWrapper, null, /* @__PURE__ */ React.createElement(ListItemWrapper, null, /* @__PURE__ */ React.createElement(TextItem, null)));
 };
 
-const rootRouteRef = createRouteRef({
-  id: "techdocs:index-page"
-});
-const rootDocsRouteRef = createRouteRef({
-  id: "techdocs:reader-page",
-  params: ["namespace", "kind", "name"]
-});
-const rootCatalogDocsRouteRef = createRouteRef({
-  id: "techdocs:catalog-reader-view"
-});
+const addGitFeedbackLink = (scmIntegrationsApi) => {
+  return (dom) => {
+    const sourceAnchor = dom.querySelector('[title="Edit this page"]');
+    if (!sourceAnchor || !sourceAnchor.href) {
+      return dom;
+    }
+    const sourceURL = new URL(sourceAnchor.href);
+    const integration = scmIntegrationsApi.byUrl(sourceURL);
+    if ((integration == null ? void 0 : integration.type) !== "github" && (integration == null ? void 0 : integration.type) !== "gitlab") {
+      return dom;
+    }
+    const title = dom.querySelector("article>h1").childNodes[0].textContent;
+    const issueTitle = encodeURIComponent(`Documentation Feedback: ${title}`);
+    const issueDesc = encodeURIComponent(`Page source:
+${sourceAnchor.href}
 
-function createCopyDocsUrlAction(copyToClipboard) {
-  return (row) => {
-    return {
-      icon: () => /* @__PURE__ */ React.createElement(ShareIcon, {
-        fontSize: "small"
-      }),
-      tooltip: "Click to copy documentation link to clipboard",
-      onClick: () => copyToClipboard(`${window.location.origin}${row.resolved.docsUrl}`)
-    };
-  };
-}
-function createStarEntityAction(isStarredEntity, toggleStarredEntity) {
-  return ({ entity }) => {
-    const isStarred = isStarredEntity(entity);
-    return {
-      cellStyle: { paddingLeft: "1em" },
-      icon: () => favoriteEntityIcon(isStarred),
-      tooltip: favoriteEntityTooltip(isStarred),
-      onClick: () => toggleStarredEntity(entity)
-    };
+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}`;
+    const feedbackLink = sourceAnchor.cloneNode();
+    switch (integration == null ? void 0 : integration.type) {
+      case "gitlab":
+        feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?issue[title]=${issueTitle}&issue[description]=${issueDesc}`;
+        break;
+      case "github":
+        feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?title=${issueTitle}&body=${issueDesc}`;
+        break;
+      default:
+        return dom;
+    }
+    ReactDOM.render(React.createElement(FeedbackOutlinedIcon), feedbackLink);
+    feedbackLink.style.paddingLeft = "5px";
+    feedbackLink.title = "Leave feedback for this page";
+    feedbackLink.id = "git-feedback-link";
+    sourceAnchor == null ? void 0 : sourceAnchor.insertAdjacentElement("beforebegin", feedbackLink);
+    return dom;
   };
-}
+};
 
-var actionFactories = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  createCopyDocsUrlAction: createCopyDocsUrlAction,
-  createStarEntityAction: createStarEntityAction
-});
+const addSidebarToggle = () => {
+  return (dom) => {
+    const mkdocsToggleSidebar = dom.querySelector('.md-header label[for="__drawer"]');
+    const article = dom.querySelector("article");
+    if (!mkdocsToggleSidebar || !article) {
+      return dom;
+    }
+    const toggleSidebar = mkdocsToggleSidebar.cloneNode();
+    ReactDOM.render(React.createElement(MenuIcon), toggleSidebar);
+    toggleSidebar.style.paddingLeft = "5px";
+    toggleSidebar.classList.add("md-content__button");
+    toggleSidebar.title = "Toggle Sidebar";
+    toggleSidebar.id = "toggle-sidebar";
+    article == null ? void 0 : article.prepend(toggleSidebar);
+    return dom;
+  };
+};
 
-function customTitle(entity) {
-  return entity.metadata.title || entity.metadata.name;
-}
-function createNameColumn() {
-  return {
-    title: "Document",
-    field: "entity.metadata.name",
-    highlight: true,
-    render: (row) => /* @__PURE__ */ React.createElement(SubvalueCell, {
-      value: /* @__PURE__ */ React.createElement(Link, {
-        to: row.resolved.docsUrl
-      }, customTitle(row.entity)),
-      subvalue: row.entity.metadata.description
-    })
+const rewriteDocLinks = () => {
+  return (dom) => {
+    const updateDom = (list, attributeName) => {
+      Array.from(list).filter((elem) => elem.hasAttribute(attributeName)).forEach((elem) => {
+        const elemAttribute = elem.getAttribute(attributeName);
+        if (elemAttribute) {
+          if (elemAttribute.match(/^https?:\/\//i)) {
+            elem.setAttribute("target", "_blank");
+          }
+          try {
+            const normalizedWindowLocation = normalizeUrl(window.location.href);
+            elem.setAttribute(attributeName, new URL(elemAttribute, normalizedWindowLocation).toString());
+          } catch (_e) {
+            elem.replaceWith(elem.textContent || elemAttribute);
+          }
+        }
+      });
+    };
+    updateDom(Array.from(dom.getElementsByTagName("a")), "href");
+    return dom;
   };
+};
+function normalizeUrl(input) {
+  const url = new URL(input);
+  if (!url.pathname.endsWith("/") && !url.pathname.endsWith(".html")) {
+    url.pathname += "/";
+  }
+  return url.toString();
 }
-function createOwnerColumn() {
-  return {
-    title: "Owner",
-    field: "resolved.ownedByRelationsTitle",
-    render: ({ resolved }) => /* @__PURE__ */ React.createElement(EntityRefLinks, {
-      entityRefs: resolved.ownedByRelations,
-      defaultKind: "group"
-    })
+
+const addLinkClickListener = ({
+  baseUrl,
+  onClick
+}) => {
+  return (dom) => {
+    Array.from(dom.getElementsByTagName("a")).forEach((elem) => {
+      elem.addEventListener("click", (e) => {
+        const target = elem;
+        const href = target.getAttribute("href");
+        if (!href)
+          return;
+        if (href.startsWith(baseUrl) && !elem.hasAttribute("download")) {
+          e.preventDefault();
+          onClick(e, href);
+        }
+      });
+    });
+    return dom;
   };
-}
-function createTypeColumn() {
-  return {
-    title: "Type",
-    field: "entity.spec.type"
+};
+
+const CopyToClipboardTooltip = withStyles((theme) => ({
+  tooltip: {
+    fontSize: "inherit",
+    color: theme.palette.text.primary,
+    margin: 0,
+    padding: theme.spacing(0.5),
+    backgroundColor: "transparent",
+    boxShadow: "none"
+  }
+}))(Tooltip);
+const CopyToClipboardIcon = () => /* @__PURE__ */ React.createElement(SvgIcon, null, /* @__PURE__ */ React.createElement("path", {
+  d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+}));
+const CopyToClipboardButton = ({ text }) => {
+  const [open, setOpen] = useState(false);
+  const handleClick = useCallback(() => {
+    navigator.clipboard.writeText(text);
+    setOpen(true);
+  }, [text]);
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  return /* @__PURE__ */ React.createElement(CopyToClipboardTooltip, {
+    title: "Copied to clipboard",
+    placement: "left",
+    open,
+    onClose: handleClose,
+    leaveDelay: 1e3
+  }, /* @__PURE__ */ React.createElement("button", {
+    className: "md-clipboard md-icon",
+    onClick: handleClick
+  }, /* @__PURE__ */ React.createElement(CopyToClipboardIcon, null)));
+};
+const copyToClipboard = (theme) => {
+  return (dom) => {
+    var _a;
+    const codes = dom.querySelectorAll("pre > code");
+    for (const code of codes) {
+      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);
+    }
+    return dom;
   };
-}
+};
 
-var columnFactories = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  createNameColumn: createNameColumn,
-  createOwnerColumn: createOwnerColumn,
-  createTypeColumn: createTypeColumn
-});
+const removeMkdocsHeader = () => {
+  return (dom) => {
+    var _a;
+    (_a = dom.querySelector(".md-header")) == null ? void 0 : _a.remove();
+    return dom;
+  };
+};
 
-function toLowerMaybe(str, config) {
-  return config.getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? str : str.toLocaleLowerCase("en-US");
-}
+const simplifyMkdocsFooter = () => {
+  return (dom) => {
+    var _a, _b;
+    (_a = dom.querySelector(".md-footer .md-copyright")) == null ? void 0 : _a.remove();
+    (_b = dom.querySelector(".md-footer-copyright")) == null ? void 0 : _b.remove();
+    return dom;
+  };
+};
 
-const DocsTable$1 = ({
-  entities,
-  title,
-  loading,
-  columns,
-  actions
-}) => {
-  const [, copyToClipboard] = useCopyToClipboard();
-  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const config = useApi(configApiRef);
-  if (!entities)
-    return null;
-  const documents = entities.map((entity) => {
-    var _a;
-    const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
-    return {
-      entity,
-      resolved: {
-        docsUrl: getRouteToReaderPageFor({
-          namespace: toLowerMaybe((_a = entity.metadata.namespace) != null ? _a : "default", config),
-          kind: toLowerMaybe(entity.kind, config),
-          name: toLowerMaybe(entity.metadata.name, config)
-        }),
-        ownedByRelations,
-        ownedByRelationsTitle: ownedByRelations.map((r) => formatEntityRefTitle(r, { defaultKind: "group" })).join(", ")
-      }
-    };
-  });
-  const defaultColumns = [
-    createNameColumn(),
-    createOwnerColumn(),
-    createTypeColumn()
-  ];
-  const defaultActions = [
-    createCopyDocsUrlAction(copyToClipboard)
-  ];
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading || documents && documents.length > 0 ? /* @__PURE__ */ React.createElement(Table, {
-    isLoading: loading,
-    options: {
-      paging: true,
-      pageSize: 20,
-      search: true,
-      actionsColumnIndex: -1
-    },
-    data: documents,
-    columns: columns || defaultColumns,
-    actions: actions || defaultActions,
-    title: title ? `${title} (${documents.length})` : `All (${documents.length})`
-  }) : /* @__PURE__ */ React.createElement(EmptyState, {
-    missing: "data",
-    title: "No documents to show",
-    description: "Create your own document. Check out our Getting Started Information",
-    action: /* @__PURE__ */ React.createElement(Button, {
-      color: "primary",
-      to: "https://backstage.io/docs/features/techdocs/getting-started",
-      variant: "contained"
-    }, "DOCS")
-  }));
-};
-
-var DocsTable$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DocsTable: DocsTable$1
-});
-
-const EntityListDocsTable = ({
-  columns,
-  actions
-}) => {
-  var _a, _b;
-  const { loading, error, entities, filters } = useEntityListProvider();
-  const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
-  const [, copyToClipboard] = useCopyToClipboard();
-  const title = capitalize((_b = (_a = filters.user) == null ? void 0 : _a.value) != null ? _b : "all");
-  const defaultActions = [
-    createCopyDocsUrlAction(copyToClipboard),
-    createStarEntityAction(isStarredEntity, toggleStarredEntity)
-  ];
-  if (error) {
-    return /* @__PURE__ */ React.createElement(WarningPanel, {
-      severity: "error",
-      title: "Could not load available documentation."
-    }, /* @__PURE__ */ React.createElement(CodeSnippet, {
-      language: "text",
-      text: error.toString()
-    }));
-  }
-  return /* @__PURE__ */ React.createElement(DocsTable$1, {
-    title,
-    entities,
-    loading,
-    actions: actions || defaultActions,
-    columns
-  });
-};
-EntityListDocsTable.columns = columnFactories;
-EntityListDocsTable.actions = actionFactories;
-
-const TechDocsPageWrapper = ({ children }) => {
-  var _a;
-  const configApi = useApi(configApiRef);
-  const generatedSubtitle = `Documentation available in ${(_a = configApi.getOptionalString("organization.name")) != null ? _a : "Backstage"}`;
-  return /* @__PURE__ */ React.createElement(PageWithHeader, {
-    title: "Documentation",
-    subtitle: generatedSubtitle,
-    themeId: "documentation"
-  }, children);
-};
-
-class TechDocsFilter {
-  getCatalogFilters() {
-    return {
-      "metadata.annotations.backstage.io/techdocs-ref": CATALOG_FILTER_EXISTS
-    };
-  }
-}
-const TechDocsPicker = () => {
-  const { updateFilters } = useEntityListProvider();
-  useEffect(() => {
-    updateFilters({
-      techdocs: new TechDocsFilter()
-    });
-  }, [updateFilters]);
-  return null;
-};
-
-const DefaultTechDocsHome = ({
-  initialFilter = "all",
-  columns,
-  actions
-}) => {
-  return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
-    title: ""
-  }, /* @__PURE__ */ React.createElement(SupportButton, null, "Discover documentation in your ecosystem.")), /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(FilteredEntityLayout, null, /* @__PURE__ */ React.createElement(FilterContainer, null, /* @__PURE__ */ React.createElement(TechDocsPicker, null), /* @__PURE__ */ React.createElement(UserListPicker, {
-    initialFilter
-  }), /* @__PURE__ */ React.createElement(EntityOwnerPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(EntityListContainer, null, /* @__PURE__ */ React.createElement(EntityListDocsTable, {
-    actions,
-    columns
-  }))))));
-};
-
-const DocsCardGrid$1 = ({
-  entities
-}) => {
-  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const config = useApi(configApiRef);
-  if (!entities)
-    return null;
-  return /* @__PURE__ */ React.createElement(ItemCardGrid, {
-    "data-testid": "docs-explore"
-  }, !(entities == null ? void 0 : entities.length) ? null : entities.map((entity, index) => {
-    var _a, _b;
-    return /* @__PURE__ */ React.createElement(Card, {
-      key: index
-    }, /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(ItemCardHeader, {
-      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, {
-      to: getRouteToReaderPageFor({
-        namespace: toLowerMaybe((_b = entity.metadata.namespace) != null ? _b : "default", config),
-        kind: toLowerMaybe(entity.kind, config),
-        name: toLowerMaybe(entity.metadata.name, config)
-      }),
-      color: "primary",
-      "data-testid": "read_docs"
-    }, "Read Docs")));
-  }));
-};
-
-var DocsCardGrid$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DocsCardGrid: DocsCardGrid$1
-});
-
-const EntityListDocsGrid = () => {
-  const { loading, error, entities } = useEntityListProvider();
-  if (error) {
-    return /* @__PURE__ */ React.createElement(WarningPanel, {
-      severity: "error",
-      title: "Could not load available documentation."
-    }, /* @__PURE__ */ React.createElement(CodeSnippet, {
-      language: "text",
-      text: error.toString()
-    }));
-  }
-  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);
-  });
-  return /* @__PURE__ */ React.createElement(DocsCardGrid$1, {
-    entities
-  });
-};
-
-const techdocsPlugin = createPlugin({
-  id: "techdocs",
-  apis: [
-    createApiFactory({
-      api: techdocsStorageApiRef,
-      deps: {
-        configApi: configApiRef,
-        discoveryApi: discoveryApiRef,
-        identityApi: identityApiRef,
-        fetchApi: fetchApiRef
-      },
-      factory: ({ configApi, discoveryApi, identityApi, fetchApi }) => new TechDocsStorageClient({
-        configApi,
-        discoveryApi,
-        identityApi,
-        fetchApi
-      })
-    }),
-    createApiFactory({
-      api: techdocsApiRef,
-      deps: {
-        configApi: configApiRef,
-        discoveryApi: discoveryApiRef,
-        fetchApi: fetchApiRef
-      },
-      factory: ({ configApi, discoveryApi, fetchApi }) => new TechDocsClient({
-        configApi,
-        discoveryApi,
-        fetchApi
-      })
-    })
-  ],
-  routes: {
-    root: rootRouteRef,
-    docRoot: rootDocsRouteRef,
-    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 DocsCardGrid = techdocsPlugin.provide(createComponentExtension({
-  name: "DocsCardGrid",
-  component: {
-    lazy: () => Promise.resolve().then(function () { return DocsCardGrid$2; }).then((m) => m.DocsCardGrid)
-  }
-}));
-const DocsTable = techdocsPlugin.provide(createComponentExtension({
-  name: "DocsTable",
-  component: {
-    lazy: () => Promise.resolve().then(function () { return DocsTable$2; }).then((m) => m.DocsTable)
-  }
-}));
-const TechDocsCustomHome$2 = techdocsPlugin.provide(createRoutableExtension({
-  name: "TechDocsCustomHome",
-  component: () => Promise.resolve().then(function () { return TechDocsCustomHome$1; }).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: () => Promise.resolve().then(function () { return TechDocsPage$1; }).then((m) => m.TechDocsPage),
-  mountPoint: rootDocsRouteRef
-}));
-
-const isSvgNeedingInlining = (attrName, attrVal, apiOrigin) => {
-  const isSrcToSvg = attrName === "src" && attrVal.endsWith(".svg");
-  const isRelativeUrl = !attrVal.match(/^([a-z]*:)?\/\//i);
-  const pointsToOurBackend = attrVal.startsWith(apiOrigin);
-  return isSrcToSvg && (isRelativeUrl || pointsToOurBackend);
-};
-const addBaseUrl = ({
-  techdocsStorageApi,
-  entityId,
-  path
-}) => {
-  return async (dom) => {
-    const apiOrigin = await techdocsStorageApi.getApiOrigin();
-    const updateDom = async (list, attributeName) => {
-      for (const elem of list) {
-        if (elem.hasAttribute(attributeName)) {
-          const elemAttribute = elem.getAttribute(attributeName);
-          if (!elemAttribute)
-            return;
-          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(svgContent)}`);
-            } catch (e) {
-              elem.setAttribute("alt", `Error: ${elemAttribute}`);
-            }
-          } else {
-            elem.setAttribute(attributeName, newValue);
-          }
-        }
-      }
-    };
-    await Promise.all([
-      updateDom(dom.querySelectorAll("img"), "src"),
-      updateDom(dom.querySelectorAll("script"), "src"),
-      updateDom(dom.querySelectorAll("source"), "src"),
-      updateDom(dom.querySelectorAll("link"), "href"),
-      updateDom(dom.querySelectorAll("a[download]"), "href")
-    ]);
-    return dom;
-  };
-};
-
-const addGitFeedbackLink = (scmIntegrationsApi) => {
-  return (dom) => {
-    const sourceAnchor = dom.querySelector('[title="Edit this page"]');
-    if (!sourceAnchor || !sourceAnchor.href) {
-      return dom;
-    }
-    const sourceURL = new URL(sourceAnchor.href);
-    const integration = scmIntegrationsApi.byUrl(sourceURL);
-    if ((integration == null ? void 0 : integration.type) !== "github" && (integration == null ? void 0 : integration.type) !== "gitlab") {
-      return dom;
-    }
-    const title = dom.querySelector("article>h1").childNodes[0].textContent;
-    const issueTitle = encodeURIComponent(`Documentation Feedback: ${title}`);
-    const issueDesc = encodeURIComponent(`Page source:
-${sourceAnchor.href}
-
-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}`;
-    const feedbackLink = sourceAnchor.cloneNode();
-    switch (integration == null ? void 0 : integration.type) {
-      case "gitlab":
-        feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?issue[title]=${issueTitle}&issue[description]=${issueDesc}`;
-        break;
-      case "github":
-        feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?title=${issueTitle}&body=${issueDesc}`;
-        break;
-      default:
-        return dom;
-    }
-    ReactDOM.render(React.createElement(FeedbackOutlinedIcon), feedbackLink);
-    feedbackLink.style.paddingLeft = "5px";
-    feedbackLink.title = "Leave feedback for this page";
-    feedbackLink.id = "git-feedback-link";
-    sourceAnchor == null ? void 0 : sourceAnchor.insertAdjacentElement("beforebegin", feedbackLink);
-    return dom;
-  };
-};
-
-const rewriteDocLinks = () => {
-  return (dom) => {
-    const updateDom = (list, attributeName) => {
-      Array.from(list).filter((elem) => elem.hasAttribute(attributeName)).forEach((elem) => {
-        const elemAttribute = elem.getAttribute(attributeName);
-        if (elemAttribute) {
-          if (elemAttribute.match(/^https?:\/\//i)) {
-            elem.setAttribute("target", "_blank");
-          }
-          try {
-            const normalizedWindowLocation = normalizeUrl(window.location.href);
-            elem.setAttribute(attributeName, new URL(elemAttribute, normalizedWindowLocation).toString());
-          } catch (_e) {
-            elem.replaceWith(elem.textContent || elemAttribute);
-          }
-        }
-      });
-    };
-    updateDom(Array.from(dom.getElementsByTagName("a")), "href");
-    return dom;
-  };
-};
-function normalizeUrl(input) {
-  const url = new URL(input);
-  if (!url.pathname.endsWith("/") && !url.pathname.endsWith(".html")) {
-    url.pathname += "/";
-  }
-  return url.toString();
-}
-
-const addLinkClickListener = ({
-  baseUrl,
-  onClick
-}) => {
-  return (dom) => {
-    Array.from(dom.getElementsByTagName("a")).forEach((elem) => {
-      elem.addEventListener("click", (e) => {
-        const target = elem;
-        const href = target.getAttribute("href");
-        if (!href)
-          return;
-        if (href.startsWith(baseUrl) && !elem.hasAttribute("download")) {
-          e.preventDefault();
-          onClick(e, href);
-        }
-      });
-    });
-    return dom;
-  };
-};
-
-const copyToClipboard = () => {
-  return (dom) => {
-    Array.from(dom.querySelectorAll("pre > code")).forEach((codeElem) => {
-      var _a;
-      const button = document.createElement("button");
-      const toBeCopied = codeElem.textContent || "";
-      button.className = "md-clipboard md-icon";
-      button.title = "Copy to clipboard";
-      button.innerHTML = '<svg viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg>';
-      button.addEventListener("click", () => navigator.clipboard.writeText(toBeCopied));
-      (_a = codeElem == null ? void 0 : codeElem.parentElement) == null ? void 0 : _a.prepend(button);
-    });
-    return dom;
-  };
-};
-
-const removeMkdocsHeader = () => {
-  return (dom) => {
-    var _a;
-    (_a = dom.querySelector(".md-header")) == null ? void 0 : _a.remove();
-    return dom;
-  };
-};
-
-const simplifyMkdocsFooter = () => {
-  return (dom) => {
-    var _a;
-    (_a = dom.querySelector(".md-footer-copyright")) == null ? void 0 : _a.remove();
-    return dom;
-  };
-};
-
-const onCssReady = ({
-  docStorageUrl,
-  onLoading,
-  onLoaded
+const onCssReady = ({
+  docStorageUrl,
+  onLoading,
+  onLoaded
 }) => {
   return (dom) => {
     const cssPages = Array.from(dom.querySelectorAll('head > link[rel="stylesheet"]')).filter((elem) => {
@@ -830,17 +489,67 @@ const transform = async (html, transformers) => {
   return dom;
 };
 
-const TechDocsSearchBar = ({
-  entityId,
-  debounceTime = 150
-}) => {
+const useStyles$3 = makeStyles({
+  flexContainer: {
+    flexWrap: "wrap"
+  },
+  itemText: {
+    width: "100%",
+    marginBottom: "1rem"
+  }
+});
+const TechDocsSearchResultListItem = (props) => {
+  const {
+    result,
+    lineClamp = 5,
+    asListItem = true,
+    asLink = true,
+    title
+  } = props;
+  const classes = useStyles$3();
+  const TextItem = () => {
+    var _a;
+    return /* @__PURE__ */ React.createElement(ListItemText, {
+      className: classes.itemText,
+      primaryTypographyProps: { variant: "h6" },
+      primary: title ? title : `${result.title} | ${(_a = result.entityTitle) != null ? _a : result.name} docs`,
+      secondary: /* @__PURE__ */ React.createElement(TextTruncate, {
+        line: lineClamp,
+        truncateText: "\u2026",
+        text: result.text,
+        element: "span"
+      })
+    });
+  };
+  const LinkWrapper = ({ children }) => asLink ? /* @__PURE__ */ React.createElement(Link, {
+    to: result.location
+  }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  const ListItemWrapper = ({ children }) => asListItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, {
+    alignItems: "flex-start",
+    className: classes.flexContainer
+  }, children), /* @__PURE__ */ React.createElement(Divider, {
+    component: "li"
+  })) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return /* @__PURE__ */ React.createElement(LinkWrapper, null, /* @__PURE__ */ React.createElement(ListItemWrapper, null, /* @__PURE__ */ React.createElement(TextItem, null)));
+};
+const DocsResultListItem = TechDocsSearchResultListItem;
+
+const useStyles$2 = makeStyles({
+  root: {
+    width: "100%"
+  }
+});
+const TechDocsSearchBar = (props) => {
+  const { entityId, debounceTime = 150 } = props;
   const [open, setOpen] = useState(false);
   const navigate = useNavigate();
   const {
     term,
     setTerm,
+    setFilters,
     result: { loading, value: searchVal }
   } = useSearch();
+  const classes = useStyles$2();
   const [options, setOptions] = useState([]);
   useEffect(() => {
     let mounted = true;
@@ -854,6 +563,17 @@ const TechDocsSearchBar = ({
   }, [loading, searchVal]);
   const [value, setValue] = useState(term);
   useDebounce(() => setTerm(value), debounceTime, [value]);
+  const { kind, name, namespace } = entityId;
+  useEffect(() => {
+    setFilters((prevFilters) => {
+      return {
+        ...prevFilters,
+        kind,
+        namespace,
+        name
+      };
+    });
+  }, [kind, namespace, name, setFilters]);
   const handleQuery = (e) => {
     if (!open) {
       setOpen(true);
@@ -866,10 +586,8 @@ const TechDocsSearchBar = ({
       navigate(location);
     }
   };
-  return /* @__PURE__ */ React.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /* @__PURE__ */ React.createElement(Autocomplete, {
+  return /* @__PURE__ */ React.createElement(Autocomplete, {
+    classes: { root: classes.root },
     "data-testid": "techdocs-search-bar",
     size: "small",
     open,
@@ -888,7 +606,7 @@ const TechDocsSearchBar = ({
     noOptionsText: "No results found",
     value: null,
     options,
-    renderOption: ({ document }) => /* @__PURE__ */ React.createElement(DocsResultListItem, {
+    renderOption: ({ document }) => /* @__PURE__ */ React.createElement(TechDocsSearchResultListItem, {
       result: document,
       lineClamp: 3,
       asListItem: false,
@@ -918,7 +636,7 @@ const TechDocsSearchBar = ({
         }) : null, params.InputProps.endAdornment)
       }
     })
-  }));
+  });
 };
 const TechDocsSearch = (props) => {
   const initialState = {
@@ -987,7 +705,7 @@ const TechDocsBuildLogsDrawerContent = ({
 const TechDocsBuildLogs = ({ buildLog }) => {
   const classes = useDrawerStyles();
   const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button$1, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
     color: "inherit",
     onClick: () => setOpen(true)
   }, "Show Build Logs"), /* @__PURE__ */ React.createElement(Drawer, {
@@ -1014,7 +732,10 @@ const TechDocsNotFound = ({ errorMessage }) => {
   });
 };
 
-const useStyles$1 = makeStyles(() => ({
+const useStyles$1 = makeStyles((theme) => ({
+  root: {
+    marginBottom: theme.spacing(2)
+  },
   message: {
     wordBreak: "break-word",
     overflowWrap: "anywhere"
@@ -1033,6 +754,7 @@ const TechDocsStateIndicator = () => {
   const ReaderProgress = state === "CHECKING" ? /* @__PURE__ */ React.createElement(Progress, null) : null;
   if (state === "INITIAL_BUILD") {
     StateAlert = /* @__PURE__ */ React.createElement(Alert, {
+      classes: { root: classes.root },
       variant: "outlined",
       severity: "info",
       icon: /* @__PURE__ */ React.createElement(CircularProgress, {
@@ -1052,17 +774,19 @@ const TechDocsStateIndicator = () => {
       }),
       action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
         buildLog
-      })
+      }),
+      classes: { root: classes.root }
     }, "A newer version of this documentation is being prepared and will be available shortly.");
   }
   if (state === "CONTENT_STALE_READY") {
     StateAlert = /* @__PURE__ */ React.createElement(Alert, {
       variant: "outlined",
       severity: "success",
-      action: /* @__PURE__ */ React.createElement(Button$1, {
+      action: /* @__PURE__ */ React.createElement(Button, {
         color: "inherit",
         onClick: () => contentReload()
-      }, "Refresh")
+      }, "Refresh"),
+      classes: { root: classes.root }
     }, "A newer version of this documentation is now available, please refresh to view.");
   }
   if (state === "CONTENT_STALE_ERROR") {
@@ -1072,7 +796,7 @@ const TechDocsStateIndicator = () => {
       action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
         buildLog
       }),
-      classes: { message: classes.message }
+      classes: { root: classes.root, message: classes.message }
     }, "Building a newer version of this documentation failed.", " ", syncErrorMessage);
   }
   if (state === "CONTENT_NOT_FOUND") {
@@ -1082,7 +806,7 @@ const TechDocsStateIndicator = () => {
       action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
         buildLog
       }),
-      classes: { message: classes.message }
+      classes: { root: classes.root, message: classes.message }
     }, "Building a newer version of this documentation failed.", " ", syncErrorMessage), /* @__PURE__ */ React.createElement(TechDocsNotFound, {
       errorMessage: contentErrorMessage
     }));
@@ -1238,12 +962,13 @@ function useReaderState(kind, namespace, name, path) {
 
 const useStyles = makeStyles((theme) => ({
   searchBar: {
-    marginLeft: "20rem",
-    maxWidth: "calc(100% - 20rem * 2 - 3rem)",
-    marginTop: theme.spacing(1),
+    maxWidth: "calc(100% - 16rem * 2 - 2.4rem)",
+    marginTop: 0,
+    marginBottom: theme.spacing(1),
+    marginLeft: "calc(16rem + 1.2rem)",
     "@media screen and (max-width: 76.1875em)": {
-      marginLeft: "10rem",
-      maxWidth: "calc(100% - 10rem)"
+      marginLeft: "0",
+      maxWidth: "100%"
     }
   }
 }));
@@ -1265,6 +990,7 @@ const withTechDocsReaderProvider = (Component, entityRef) => (props) => /* @__PU
   ...props
 }));
 const useTechDocsReader = () => useContext(TechDocsReaderContext);
+const headings = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const useTechDocsReaderDom = (entityRef) => {
   const navigate = useNavigate$1();
   const theme = useTheme();
@@ -1281,9 +1007,16 @@ const useTechDocsReaderDom = (entityRef) => {
     if (!dom || !sidebars)
       return;
     const mdTabs = dom.querySelector(".md-container > .md-tabs");
+    const sidebarsCollapsed = window.matchMedia("screen and (max-width: 76.1875em)").matches;
+    const newTop = Math.max(dom.getBoundingClientRect().top, 0);
     sidebars.forEach((sidebar) => {
-      const newTop = Math.max(dom.getBoundingClientRect().top, 0);
-      sidebar.style.top = mdTabs ? `${newTop + mdTabs.getBoundingClientRect().height}px` : `${newTop}px`;
+      if (sidebarsCollapsed) {
+        sidebar.style.top = "0px";
+      } else if (mdTabs) {
+        sidebar.style.top = `${newTop + mdTabs.getBoundingClientRect().height}px`;
+      } else {
+        sidebar.style.top = `${newTop}px`;
+      }
     });
   }, [dom, sidebars]);
   useEffect(() => {
@@ -1322,179 +1055,463 @@ const useTechDocsReaderDom = (entityRef) => {
       path: contentPath
     }),
     rewriteDocLinks(),
+    addSidebarToggle(),
     removeMkdocsHeader(),
     simplifyMkdocsFooter(),
     addGitFeedbackLink(scmIntegrationsApi),
     injectCss({
       css: `
-          body {
-            font-family: ${theme.typography.fontFamily};
-            --md-text-color: ${theme.palette.text.primary};
-            --md-text-link-color: ${theme.palette.primary.main};
+          /*
+            As the MkDocs output is rendered in shadow DOM, the CSS variable definitions on the root selector are not applied. Instead, they have to be applied on :host.
+            As there is no way to transform the served main*.css yet (for example in the backend), we have to copy from main*.css and modify them.
+          */
+          :host {
+            /* FONT */
+            --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)};
+
+            /* 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)};
+
+            /* 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)};
+
+            /* ACCENT */
+            --md-accent-fg-color: var(--md-primary-fg-color);
 
+            /* SHADOW */
+            --md-shadow-z1: ${theme.shadows[1]};
+            --md-shadow-z2: ${theme.shadows[2]};
+            --md-shadow-z3: ${theme.shadows[3]};
+
+            /* EXTENSIONS */
+            --md-admonition-fg-color: var(--md-default-fg-color);
+            --md-admonition-bg-color: var(--md-default-bg-color);
+            /* Admonitions and others are using SVG masks to define icons. These masks are defined as CSS variables. */
+            --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>');
+            --md-admonition-icon--abstract: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 5h16v2H4V5m0 4h16v2H4V9m0 4h16v2H4v-2m0 4h10v2H4v-2z"/></svg>');
+            --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2z"/></svg>');
+            --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.55 11.2c-.23-.3-.5-.56-.76-.82-.65-.6-1.4-1.03-2.03-1.66C13.3 7.26 13 4.85 13.91 3c-.91.23-1.75.75-2.45 1.32-2.54 2.08-3.54 5.75-2.34 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.22.1-.46.04-.64-.12a.83.83 0 01-.15-.17c-1.1-1.43-1.28-3.48-.53-5.12C5.89 10 5 12.3 5.14 14.47c.04.5.1 1 .27 1.5.14.6.4 1.2.72 1.73 1.04 1.73 2.87 2.97 4.84 3.22 2.1.27 4.35-.12 5.96-1.6 1.8-1.66 2.45-4.32 1.5-6.6l-.13-.26c-.2-.46-.47-.87-.8-1.25l.05-.01m-3.1 6.3c-.28.24-.73.5-1.08.6-1.1.4-2.2-.16-2.87-.82 1.19-.28 1.89-1.16 2.09-2.05.17-.8-.14-1.46-.27-2.23-.12-.74-.1-1.37.18-2.06.17.38.37.76.6 1.06.76 1 1.95 1.44 2.2 2.8.04.14.06.28.06.43.03.82-.32 1.72-.92 2.27h.01z"/></svg>');
+            --md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
+            --md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.07 11.25l-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 00-2-2 2 2 0 00-2 2H8a4 4 0 014-4 4 4 0 014 4 3.2 3.2 0 01-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10c0-5.53-4.5-10-10-10z"/></svg>');
+            --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"/></svg>');
+            --md-admonition-icon--failure: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12 6.47 2 12 2m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41 15.59 7z"/></svg>');
+            --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.5 20l4.86-9.73H13V4l-5 9.73h3.5V20M12 2c2.75 0 5.1 1 7.05 2.95C21 6.9 22 9.25 22 12s-1 5.1-2.95 7.05C17.1 21 14.75 22 12 22s-5.1-1-7.05-2.95C3 17.1 2 14.75 2 12s1-5.1 2.95-7.05C6.9 3 9.25 2 12 2z"/></svg>');
+            --md-admonition-icon--bug: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 00-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 00-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z"/></svg>');
+            --md-admonition-icon--example: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 01.75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z"/></svg>');
+            --md-admonition-icon--quote: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z"/></svg>');
+            --md-footnotes-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.42L5.83 13H21V7h-2z"/></svg>');
+            --md-details-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z"/></svg>');
+            --md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>');
+            --md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
+            --md-nav-icon--prev: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>');
+            --md-nav-icon--next: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z"/></svg>');
+            --md-toc-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9h14V7H3v2m0 4h14v-2H3v2m0 4h14v-2H3v2m16 0h2v-2h-2v2m0-10v2h2V7h-2m0 6h2v-2h-2v2z"/></svg>');
+            --md-clipboard-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12V1z"/></svg>');
+            --md-search-result-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h7c-.41-.25-.8-.56-1.14-.9-.33-.33-.61-.7-.86-1.1H6V4h7v5h5v1.18c.71.16 1.39.43 2 .82V8l-6-6m6.31 16.9c1.33-2.11.69-4.9-1.4-6.22-2.11-1.33-4.91-.68-6.22 1.4-1.34 2.11-.69 4.89 1.4 6.22 1.46.93 3.32.93 4.79.02L22 23.39 23.39 22l-3.08-3.1m-3.81.1a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5z"/></svg>');
+            --md-source-forks-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm0 2.122a2.25 2.25 0 1 0-1.5 0v.878A2.25 2.25 0 0 0 5.75 8.5h1.5v2.128a2.251 2.251 0 1 0 1.5 0V8.5h1.5a2.25 2.25 0 0 0 2.25-2.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 5 6.25v-.878zm3.75 7.378a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm3-8.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/></svg>');
+            --md-source-repositories-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 1 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 0 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 0 1 1-1h8zM5 12.25v3.25a.25.25 0 0 0 .4.2l1.45-1.087a.25.25 0 0 1 .3 0L8.6 15.7a.25.25 0 0 0 .4-.2v-3.25a.25.25 0 0 0-.25-.25h-3.5a.25.25 0 0 0-.25.25z"/></svg>');
+            --md-source-stars-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694v.001z"/></svg>');
+            --md-source-version-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 0 1 .25-.25h5.025a.25.25 0 0 1 .177.073l6.25 6.25a.25.25 0 0 1 0 .354l-5.025 5.025a.25.25 0 0 1-.354 0l-6.25-6.25a.25.25 0 0 1-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.75 1.75 0 0 1 1 7.775zM6 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>');
+            --md-version-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="m310.6 246.6-127.1 128c-7.1 6.3-15.3 9.4-23.5 9.4s-16.38-3.125-22.63-9.375l-127.1-128C.224 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75s3.12 25.75-6.08 34.85z"/></svg>');
+          }
+
+          :host > * {
+            /* CODE */
             --md-code-fg-color: ${theme.palette.text.primary};
             --md-code-bg-color: ${theme.palette.background.paper};
-            --md-accent-fg-color: ${theme.palette.primary.main};
-            --md-default-fg-color--lightest: ${theme.palette.textVerySubtle};
-          }
-          .codehilite .gd, .highlight .gd { 
-            background-color: ${isDarkTheme ? "rgba(248,81,73,0.65)" : "#fdd"};
-          }
-          .codehilite .gi, .highlight .gi {
-            background-color: ${isDarkTheme ? "rgba(46,160,67,0.65)" : "#dfd"};
-          }
-          .highlight .kd {
-            color: ${isDarkTheme ? "#4aaaf7" : "#3b78e7"};
-          }
-           .highlight .k {
-            color: ${isDarkTheme ? "#4aaaf7" : "#3b78e7"};
-          }
-          .highlight .nx {
-            color: ${isDarkTheme ? "#ff53a3" : "#ec407a"};
-          }
-          .highlight .s1 {
-            color: ${isDarkTheme ? "#1cad46" : "rgb(13, 144, 79)"};
-          }
-          .highlight .kt {
-            color: ${isDarkTheme ? "#4aaaf7" : "#3e61a2"};
-          }
-          .md-main__inner { margin-top: 0; }
-          .md-sidebar {  position: fixed; bottom: 100px; width: 20rem; }
-          .md-sidebar--secondary { right: 2rem; }
-          .md-content { margin-bottom: 50px }
-          .md-footer { position: fixed; bottom: 0px; }
-          .md-footer-nav__link { width: 20rem;}
-          .md-content { margin-left: 20rem; max-width: calc(100% - 20rem * 2 - 3rem); }
-          .md-typeset { font-size: 1rem; }
-          .md-typeset h1, .md-typeset h2, .md-typeset h3 { font-weight: bold; }
-          .md-nav { font-size: 1rem; }
-          .md-grid { max-width: 90vw; margin: 0 }
-          .md-typeset blockquote {
-            color: ${theme.palette.textSubtle};
-            border-left: 0.2rem solid ${theme.palette.textVerySubtle};
-          }
-          .md-typeset hr {
-            border-bottom: 0.05rem dotted ${theme.palette.textVerySubtle};
-          }
-          .md-typeset table:not([class]) {
-            font-size: 1rem;
-            border: 1px solid ${theme.palette.text.primary};
-            border-bottom: none;
-            border-collapse: collapse;
-          }
-          .md-typeset table:not([class]) td, .md-typeset table:not([class]) th {
-            border-bottom: 1px solid ${theme.palette.text.primary};
-          }
-          .md-typeset table:not([class]) th { font-weight: bold; }
-          .md-typeset .admonition, .md-typeset details {
-            font-size: inherit;
+            --md-code-hl-color: ${alpha(theme.palette.warning.main, 0.5)};
+            --md-code-hl-keyword-color: ${isDarkTheme ? theme.palette.primary.light : theme.palette.primary.dark};
+            --md-code-hl-function-color: ${isDarkTheme ? theme.palette.secondary.light : theme.palette.secondary.dark};
+            --md-code-hl-string-color: ${isDarkTheme ? theme.palette.success.light : theme.palette.success.dark};
+            --md-code-hl-number-color: ${isDarkTheme ? theme.palette.error.light : theme.palette.error.dark};
+            --md-code-hl-constant-color: var(--md-code-hl-function-color);
+            --md-code-hl-special-color: var(--md-code-hl-function-color);
+            --md-code-hl-name-color: var(--md-code-fg-color);
+            --md-code-hl-comment-color: var(--md-default-fg-color--light);
+            --md-code-hl-generic-color: var(--md-default-fg-color--light);
+            --md-code-hl-variable-color: var(--md-default-fg-color--light);
+            --md-code-hl-operator-color: var(--md-default-fg-color--light);
+            --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
+
+            /* TYPESET */
+            --md-typeset-font-size: 1rem;
+            --md-typeset-color: var(--md-default-fg-color);
+            --md-typeset-a-color: var(--md-accent-fg-color);
+            --md-typeset-table-color: ${theme.palette.text.primary};
+            --md-typeset-del-color: ${isDarkTheme ? alpha(theme.palette.error.dark, 0.5) : alpha(theme.palette.error.light, 0.5)};
+            --md-typeset-ins-color: ${isDarkTheme ? alpha(theme.palette.success.dark, 0.5) : alpha(theme.palette.success.light, 0.5)};
+            --md-typeset-mark-color: ${isDarkTheme ? alpha(theme.palette.warning.dark, 0.5) : alpha(theme.palette.warning.light, 0.5)};
           }
-          
-          /* style the checkmarks of the task list */
-          .md-typeset .task-list-control .task-list-indicator::before {
-            background-color: ${theme.palette.action.disabledBackground};
+
+          @media screen and (max-width: 76.1875em) {
+            :host > * {
+              /* TYPESET */
+              --md-typeset-font-size: .9rem;
+            }
           }
-          .md-typeset .task-list-control [type="checkbox"]:checked + .task-list-indicator:before {
-            background-color: ${theme.palette.success.main};
+
+          @media screen and (max-width: 600px) {
+            :host > * {
+              /* TYPESET */
+              --md-typeset-font-size: .7rem;
+            }
           }
-          /**/
+          `
+    }),
+    injectCss({
+      css: `
+            body {
+              --md-text-color: var(--md-default-fg-color);
+              --md-text-link-color: var(--md-accent-fg-color);
+              --md-text-font-family: ${theme.typography.fontFamily};
+              font-family: var(--md-text-font-family);
+              background-color: unset;
+            }
+          `
+    }),
+    injectCss({
+      css: `
+            .md-grid {
+              max-width: 100%;
+              margin: 0;
+            }
 
-          @media screen and (max-width: 76.1875em) {
             .md-nav {
-              background-color: ${theme.palette.background.default};
-              transition: none !important
+              font-size: calc(var(--md-typeset-font-size) * 0.9);
+            }
+            .md-nav__link {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            }
+            .md-nav__icon {
+              height: 20px !important;
+              width: 20px !important;
+              margin-left:${theme.spacing(1)}px;
+            }
+            .md-nav__icon svg {
+              margin: 0;
+              width: 20px !important;
+              height: 20px !important;
+            }
+            .md-nav__icon:after {
+              width: 20px !important;
+              height: 20px !important;
+            }
+
+            .md-main__inner {
+              margin-top: 0;
+            }
+
+            .md-sidebar {
+              height: calc(100% - 100px);
+              position: fixed;
+              width: 16rem;
             }
-            .md-sidebar--secondary { display: none; }
-            .md-sidebar--primary { left: ${isPinned ? "242px" : "72px"}; width: 10rem }
-            .md-content { margin-left: 10rem; max-width: calc(100% - 10rem); }
-            .md-content__inner { font-size: 0.9rem }
+            .md-sidebar .md-sidebar__scrollwrap {
+              max-height: calc(100% - 100px);
+            }
+            .md-sidebar--secondary {
+              right: ${theme.spacing(3)}px;
+            }
+
+            .md-content {
+              max-width: calc(100% - 16rem * 2);
+              margin-left: 16rem;
+              margin-bottom: 50px;
+            }
+
             .md-footer {
-              position: static;
-              padding-left: 10rem;
+              position: fixed;
+              bottom: 0px;
+            }
+            .md-footer__title {
+              background-color: unset;
             }
             .md-footer-nav__link {
-              /* footer links begin to overlap at small sizes without setting width */
-              width: 50%;
+              width: 16rem;
             }
-            .md-nav--primary .md-nav__title {
-              white-space: normal;
-              height: auto;
-              line-height: 1rem;
-              cursor: auto;
+
+            .md-dialog {
+              background-color: unset;
             }
-            .md-nav--primary > .md-nav__title [for="none"] {
-              padding-top: 0;
+
+            @media screen and (max-width: 76.1875em) {
+              .md-nav {
+                transition: none !important;
+                background-color: var(--md-default-bg-color)
+              }
+              .md-nav--primary .md-nav__title {
+                cursor: auto;
+                color: var(--md-default-fg-color);
+                font-weight: 700;
+                white-space: normal;
+                line-height: 1rem;
+                height: auto;
+                display: flex;
+                flex-flow: column;
+                row-gap: 1.6rem;
+                padding: 1.2rem .8rem .8rem;
+                background-color: var(--md-default-bg-color);
+              }
+              .md-nav--primary .md-nav__title~.md-nav__list {
+                box-shadow: none;
+              }
+              .md-nav--primary .md-nav__title ~ .md-nav__list > :first-child {
+                border-top: none;
+              }
+              .md-nav--primary .md-nav__title .md-nav__button {
+                display: none;
+              }
+              .md-nav--primary .md-nav__title .md-nav__icon {
+                color: var(--md-default-fg-color);
+                position: static;
+                height: auto;
+                margin: 0 0 0 -0.2rem;
+              }
+              .md-nav--primary > .md-nav__title [for="none"] {
+                padding-top: 0;
+              }
+              .md-nav--primary .md-nav__item {
+                border-top: none;
+              }
+              .md-nav--primary :is(.md-nav__title,.md-nav__item) {
+                font-size : var(--md-typeset-font-size);
+              }
+              .md-nav .md-source {
+                display: none;
+              }
+
+              .md-sidebar {
+                height: 100%;
+              }
+              .md-sidebar--primary {
+                width: 12.1rem !important;
+                z-index: 200;
+                left: ${isPinned ? "calc(-12.1rem + 242px)" : "calc(-12.1rem + 72px)"} !important;
+              }
+              .md-sidebar--secondary:not([hidden]) {
+                display: none;
+              }
+
+              .md-content {
+                max-width: 100%;
+                margin-left: 0;
+              }
+
+              .md-header__button {
+                margin: 0.4rem 0;
+                margin-left: 0.4rem;
+                padding: 0;
+              }
+
+              .md-overlay {
+                left: 0;
+              }
+
+              .md-footer {
+                position: static;
+                padding-left: 0;
+              }
+              .md-footer-nav__link {
+                /* footer links begin to overlap at small sizes without setting width */
+                width: 50%;
+              }
             }
-          }
-        `
-    }),
-    injectCss({
-      css: `
-            .md-nav__link, .md-typeset a, .md-typeset a::before, .md-typeset .headerlink {
-              transition: none;
+
+            @media screen and (max-width: 600px) {
+              .md-sidebar--primary {
+                left: -12.1rem !important;
+                width: 12.1rem;
+              }
             }
           `
     }),
     injectCss({
       css: `
+            .md-typeset {
+              font-size: var(--md-typeset-font-size);
+            }
+
+            ${headings.reduce((style, heading) => {
+        const styles = theme.typography[heading];
+        const { lineHeight, fontFamily, fontWeight, fontSize } = styles;
+        const calculate = (value) => {
+          let factor = 1;
+          if (typeof value === "number") {
+            factor = value / 16 * 0.6;
+          }
+          if (typeof value === "string") {
+            factor = value.replace("rem", "");
+          }
+          return `calc(${factor} * var(--md-typeset-font-size))`;
+        };
+        return style.concat(`
+                .md-typeset ${heading} {
+                  color: var(--md-default-fg-color);
+                  line-height: ${lineHeight};
+                  font-family: ${fontFamily};
+                  font-weight: ${fontWeight};
+                  font-size: ${calculate(fontSize)};
+                }
+              `);
+      }, "")}
+
+            .md-typeset .md-content__button {
+              color: var(--md-default-fg-color);
+            }
+
+            .md-typeset hr {
+              border-bottom: 0.05rem dotted ${theme.palette.divider};
+            }
+
+            .md-typeset details {
+              font-size: var(--md-typeset-font-size) !important;
+            }
+            .md-typeset details summary {
+              padding-left: 2.5rem !important;
+            }
+            .md-typeset details summary:before,
+            .md-typeset details summary:after {
+              top: 50% !important;
+              width: 20px !important;
+              height: 20px !important;
+              transform: rotate(0deg) translateY(-50%) !important;
+            }
+            .md-typeset details[open] > summary:after {
+              transform: rotate(90deg) translateX(-50%) !important;
+            }
+
+            .md-typeset blockquote {
+              color: var(--md-default-fg-color--light);
+              border-left: 0.2rem solid var(--md-default-fg-color--light);
+            }
+
+            .md-typeset table:not([class]) {
+              font-size: var(--md-typeset-font-size);
+              border: 1px solid var(--md-default-fg-color);
+              border-bottom: none;
+              border-collapse: collapse;
+            }
+            .md-typeset table:not([class]) th {
+              font-weight: bold;
+            }
+            .md-typeset table:not([class]) td, .md-typeset table:not([class]) th {
+              border-bottom: 1px solid var(--md-default-fg-color);
+            }
+
             .md-typeset pre > code::-webkit-scrollbar-thumb {
               background-color: hsla(0, 0%, 0%, 0.32);
             }
             .md-typeset pre > code::-webkit-scrollbar-thumb:hover {
               background-color: hsla(0, 0%, 0%, 0.87);
             }
-        `
+          `
+    }),
+    injectCss({
+      css: `
+            /*
+              Disable CSS animations on link colors as they lead to issues in dark mode.
+              The dark mode color theme is applied later and theirfore there is always an animation from light to dark mode when navigation between pages.
+            */
+            .md-dialog, .md-nav__link, .md-footer__link, .md-typeset a, .md-typeset a::before, .md-typeset .headerlink {
+              transition: none;
+            }
+          `
     }),
     injectCss({
       css: `
-            :host {
-              --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>');
-              --md-admonition-icon--abstract: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 5h16v2H4V5m0 4h16v2H4V9m0 4h16v2H4v-2m0 4h10v2H4v-2z"/></svg>');
-              --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2z"/></svg>');
-              --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.55 11.2c-.23-.3-.5-.56-.76-.82-.65-.6-1.4-1.03-2.03-1.66C13.3 7.26 13 4.85 13.91 3c-.91.23-1.75.75-2.45 1.32-2.54 2.08-3.54 5.75-2.34 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.22.1-.46.04-.64-.12a.83.83 0 01-.15-.17c-1.1-1.43-1.28-3.48-.53-5.12C5.89 10 5 12.3 5.14 14.47c.04.5.1 1 .27 1.5.14.6.4 1.2.72 1.73 1.04 1.73 2.87 2.97 4.84 3.22 2.1.27 4.35-.12 5.96-1.6 1.8-1.66 2.45-4.32 1.5-6.6l-.13-.26c-.2-.46-.47-.87-.8-1.25l.05-.01m-3.1 6.3c-.28.24-.73.5-1.08.6-1.1.4-2.2-.16-2.87-.82 1.19-.28 1.89-1.16 2.09-2.05.17-.8-.14-1.46-.27-2.23-.12-.74-.1-1.37.18-2.06.17.38.37.76.6 1.06.76 1 1.95 1.44 2.2 2.8.04.14.06.28.06.43.03.82-.32 1.72-.92 2.27h.01z"/></svg>');
-              --md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
-              --md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.07 11.25l-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 00-2-2 2 2 0 00-2 2H8a4 4 0 014-4 4 4 0 014 4 3.2 3.2 0 01-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10c0-5.53-4.5-10-10-10z"/></svg>');
-              --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"/></svg>');
-              --md-admonition-icon--failure: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12 6.47 2 12 2m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41 15.59 7z"/></svg>');
-              --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.5 20l4.86-9.73H13V4l-5 9.73h3.5V20M12 2c2.75 0 5.1 1 7.05 2.95C21 6.9 22 9.25 22 12s-1 5.1-2.95 7.05C17.1 21 14.75 22 12 22s-5.1-1-7.05-2.95C3 17.1 2 14.75 2 12s1-5.1 2.95-7.05C6.9 3 9.25 2 12 2z"/></svg>');
-              --md-admonition-icon--bug: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 00-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 00-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z"/></svg>');
-              --md-admonition-icon--example: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 01.75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z"/></svg>');
-              --md-admonition-icon--quote: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z"/></svg>');
+            /* HIGHLIGHT */
+            .highlight .md-clipboard:after {
+              content: unset;
+            }
+
+            .highlight .nx {
+              color: ${isDarkTheme ? "#ff53a3" : "#ec407a"};
             }
-            :host {
-              --md-footnotes-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.42L5.83 13H21V7h-2z"/></svg>');
+
+            /* CODE HILITE */
+            .codehilite .gd {
+              background-color: ${isDarkTheme ? "rgba(248,81,73,0.65)" : "#fdd"};
+            }
+
+            .codehilite .gi {
+              background-color: ${isDarkTheme ? "rgba(46,160,67,0.65)" : "#dfd"};
+            }
+
+            /* TABBED */
+            .tabbed-set>input:nth-child(1):checked~.tabbed-labels>:nth-child(1),
+            .tabbed-set>input:nth-child(2):checked~.tabbed-labels>:nth-child(2),
+            .tabbed-set>input:nth-child(3):checked~.tabbed-labels>:nth-child(3),
+            .tabbed-set>input:nth-child(4):checked~.tabbed-labels>:nth-child(4),
+            .tabbed-set>input:nth-child(5):checked~.tabbed-labels>:nth-child(5),
+            .tabbed-set>input:nth-child(6):checked~.tabbed-labels>:nth-child(6),
+            .tabbed-set>input:nth-child(7):checked~.tabbed-labels>:nth-child(7),
+            .tabbed-set>input:nth-child(8):checked~.tabbed-labels>:nth-child(8),
+            .tabbed-set>input:nth-child(9):checked~.tabbed-labels>:nth-child(9),
+            .tabbed-set>input:nth-child(10):checked~.tabbed-labels>:nth-child(10),
+            .tabbed-set>input:nth-child(11):checked~.tabbed-labels>:nth-child(11),
+            .tabbed-set>input:nth-child(12):checked~.tabbed-labels>:nth-child(12),
+            .tabbed-set>input:nth-child(13):checked~.tabbed-labels>:nth-child(13),
+            .tabbed-set>input:nth-child(14):checked~.tabbed-labels>:nth-child(14),
+            .tabbed-set>input:nth-child(15):checked~.tabbed-labels>:nth-child(15),
+            .tabbed-set>input:nth-child(16):checked~.tabbed-labels>:nth-child(16),
+            .tabbed-set>input:nth-child(17):checked~.tabbed-labels>:nth-child(17),
+            .tabbed-set>input:nth-child(18):checked~.tabbed-labels>:nth-child(18),
+            .tabbed-set>input:nth-child(19):checked~.tabbed-labels>:nth-child(19),
+            .tabbed-set>input:nth-child(20):checked~.tabbed-labels>:nth-child(20) {
+              color: var(--md-accent-fg-color);
+              border-color: var(--md-accent-fg-color);
+            }
+
+            /* TASK-LIST */
+            .task-list-control .task-list-indicator::before {
+              background-color: ${theme.palette.action.disabledBackground};
+            }
+            .task-list-control [type="checkbox"]:checked + .task-list-indicator:before {
+             background-color: ${theme.palette.success.main};
             }
-            :host {
-              --md-details-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.58L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z"/></svg>');
+
+            /* ADMONITION */
+            .admonition {
+              font-size: var(--md-typeset-font-size) !important;
+            }
+            .admonition .admonition-title {
+              padding-left: 2.5rem !important;
             }
-            :host {
-              --md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>');
-              --md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
+
+            .admonition .admonition-title:before {
+              top: 50% !important;
+              width: 20px !important;
+              height: 20px !important;
+              transform: translateY(-50%) !important;
             }
-        `
+          `
     })
   ]), [
-    techdocsSanitizer,
-    techdocsStorageApi,
     kind,
     name,
     namespace,
     scmIntegrationsApi,
-    theme.typography.fontFamily,
-    theme.palette.text.primary,
-    theme.palette.primary.main,
-    theme.palette.background.paper,
-    theme.palette.background.default,
-    theme.palette.textVerySubtle,
-    theme.palette.textSubtle,
-    theme.palette.action.disabledBackground,
-    theme.palette.success.main,
+    techdocsSanitizer,
+    techdocsStorageApi,
+    theme,
     isDarkTheme,
     isPinned
   ]);
   const postRender = useCallback(async (transformedElement) => transform(transformedElement, [
     scrollIntoAnchor(),
-    copyToClipboard(),
+    copyToClipboard(theme),
     addLinkClickListener({
       baseUrl: window.location.origin,
       onClick: (event, url) => {
@@ -1530,7 +1547,7 @@ const useTechDocsReaderDom = (entityRef) => {
         setSidebars(Array.from(renderedElement.querySelectorAll(".md-sidebar")));
       }
     })
-  ]), [navigate, techdocsStorageApi]);
+  ]), [theme, navigate, techdocsStorageApi]);
   useEffect(() => {
     if (!rawPage)
       return () => {
@@ -1586,24 +1603,31 @@ const TheReader = ({
     ref: shadowDomRef
   }));
 };
-const Reader = ({
-  entityRef,
-  onReady = () => {
-  },
-  withSearch = true
-}) => /* @__PURE__ */ React.createElement(TechDocsReaderProvider, {
-  entityRef
-}, /* @__PURE__ */ React.createElement(TheReader, {
-  entityRef,
-  onReady,
-  withSearch
-}));
+const Reader = (props) => {
+  const { entityRef, onReady = () => {
+  }, withSearch = true } = props;
+  return /* @__PURE__ */ React.createElement(TechDocsReaderProvider, {
+    entityRef
+  }, /* @__PURE__ */ React.createElement(TheReader, {
+    entityRef,
+    onReady,
+    withSearch
+  }));
+};
 
-const TechDocsPageHeader = ({
-  entityRef,
-  entityMetadata,
-  techDocsMetadata
-}) => {
+const rootRouteRef = createRouteRef({
+  id: "techdocs:index-page"
+});
+const rootDocsRouteRef = createRouteRef({
+  id: "techdocs:reader-page",
+  params: ["namespace", "kind", "name"]
+});
+const rootCatalogDocsRouteRef = createRouteRef({
+  id: "techdocs:catalog-reader-view"
+});
+
+const TechDocsReaderPageHeader = (props) => {
+  const { entityRef, entityMetadata, techDocsMetadata, children } = props;
   const { name } = entityRef;
   const { site_name: siteName, site_description: siteDescription } = techDocsMetadata || {};
   const { locationMetadata, spec } = entityMetadata || {};
@@ -1643,8 +1667,9 @@ const TechDocsPageHeader = ({
     subtitle: siteDescription && siteDescription !== "None" ? siteDescription : "",
     type: "Docs",
     typeLink: docsRootLink
-  }, labels);
+  }, labels, children);
 };
+const TechDocsPageHeader = TechDocsReaderPageHeader;
 
 const LegacyTechDocsPage = () => {
   const [documentReady, setDocumentReady] = useState(false);
@@ -1669,7 +1694,7 @@ const LegacyTechDocsPage = () => {
   }
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "documentation"
-  }, /* @__PURE__ */ React.createElement(TechDocsPageHeader, {
+  }, /* @__PURE__ */ React.createElement(TechDocsReaderPageHeader, {
     techDocsMetadata: techdocsMetadataValue,
     entityMetadata: entityMetadataValue,
     entityRef: {
@@ -1689,7 +1714,9 @@ const LegacyTechDocsPage = () => {
   })));
 };
 
-const TechDocsPage = ({ children }) => {
+const TechDocsReaderPage$1 = (props) => {
+  const { children } = props;
+  const { NotFoundErrorPage } = useApp().getComponents();
   const outlet = useOutlet();
   const [documentReady, setDocumentReady] = useState(false);
   const { namespace, kind, name } = useParams();
@@ -1702,15 +1729,12 @@ const TechDocsPage = ({ children }) => {
   }, [kind, namespace, name, techdocsApi, documentReady]);
   const { value: entityMetadataValue, error: entityMetadataError } = useAsync(() => {
     return techdocsApi.getEntityMetadata({ kind, namespace, name });
-  }, [kind, namespace, name, techdocsApi]);
-  const onReady = useCallback(() => {
-    setDocumentReady(true);
-  }, [setDocumentReady]);
-  if (entityMetadataError) {
-    return /* @__PURE__ */ React.createElement(TechDocsNotFound, {
-      errorMessage: entityMetadataError.message
-    });
-  }
+  }, [kind, namespace, name, techdocsApi]);
+  const onReady = useCallback(() => {
+    setDocumentReady(true);
+  }, [setDocumentReady]);
+  if (entityMetadataError)
+    return /* @__PURE__ */ React.createElement(NotFoundErrorPage, null);
   if (!children)
     return outlet || /* @__PURE__ */ React.createElement(LegacyTechDocsPage, null);
   return /* @__PURE__ */ React.createElement(Page, {
@@ -1722,145 +1746,328 @@ const TechDocsPage = ({ children }) => {
     onReady
   }) : children);
 };
+const TechDocsPage = TechDocsReaderPage$1;
 
-var TechDocsPage$1 = /*#__PURE__*/Object.freeze({
+var TechDocsReaderPage$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  TechDocsReaderPage: TechDocsReaderPage$1,
   TechDocsPage: TechDocsPage
 });
 
-const panels = {
-  DocsTable: DocsTable$1,
-  DocsCardGrid: DocsCardGrid$1
+function toLowerMaybe(str, config) {
+  return config.getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? str : str.toLocaleLowerCase("en-US");
+}
+
+const DocsCardGrid = (props) => {
+  const { entities } = props;
+  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
+  const config = useApi(configApiRef);
+  if (!entities)
+    return null;
+  return /* @__PURE__ */ React.createElement(ItemCardGrid, {
+    "data-testid": "docs-explore"
+  }, !(entities == null ? void 0 : entities.length) ? null : entities.map((entity, index) => {
+    var _a, _b;
+    return /* @__PURE__ */ React.createElement(Card, {
+      key: index
+    }, /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(ItemCardHeader, {
+      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),
+        kind: toLowerMaybe(entity.kind, config),
+        name: toLowerMaybe(entity.metadata.name, config)
+      }),
+      color: "primary",
+      "data-testid": "read_docs"
+    }, "Read Docs")));
+  }));
 };
-const CustomPanel = ({
-  config,
-  entities,
-  index
-}) => {
-  const useStyles = makeStyles({
-    panelContainer: {
-      marginBottom: "2rem",
-      ...config.panelCSS ? config.panelCSS : {}
-    }
+
+const EntityListDocsGrid = () => {
+  const { loading, error, entities } = useEntityList();
+  if (error) {
+    return /* @__PURE__ */ React.createElement(WarningPanel, {
+      severity: "error",
+      title: "Could not load available documentation."
+    }, /* @__PURE__ */ React.createElement(CodeSnippet, {
+      language: "text",
+      text: error.toString()
+    }));
+  }
+  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);
   });
-  const classes = useStyles();
-  const { value: user } = useOwnUser();
-  const Panel = panels[config.panelType];
-  const shownEntities = entities.filter((entity) => {
-    if (config.filterPredicate === "ownedByUser") {
-      if (!user) {
-        return false;
-      }
-      return isOwnerOf(user, entity);
-    }
-    return typeof config.filterPredicate === "function" && config.filterPredicate(entity);
+  return /* @__PURE__ */ React.createElement(DocsCardGrid, {
+    entities
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, {
-    title: config.title,
-    description: config.description
-  }, index === 0 ? /* @__PURE__ */ React.createElement(SupportButton, null, "Discover documentation in your ecosystem.") : null), /* @__PURE__ */ React.createElement("div", {
-    className: classes.panelContainer
-  }, /* @__PURE__ */ React.createElement(Panel, {
-    "data-testid": "techdocs-custom-panel",
-    entities: shownEntities
-  })));
 };
-const TechDocsCustomHome = ({
-  tabsConfig
-}) => {
-  const [selectedTab, setSelectedTab] = useState(0);
-  const catalogApi = useApi(catalogApiRef);
-  const {
-    value: entities,
-    loading,
-    error
-  } = useAsync(async () => {
-    const response = await catalogApi.getEntities({
-      filter: {
-        "metadata.annotations.backstage.io/techdocs-ref": CATALOG_FILTER_EXISTS
-      },
-      fields: [
-        "apiVersion",
-        "kind",
-        "metadata",
-        "relations",
-        "spec.owner",
-        "spec.type"
-      ]
-    });
-    return response.items.filter((entity) => {
-      var _a;
-      return !!((_a = entity.metadata.annotations) == null ? void 0 : _a["backstage.io/techdocs-ref"]);
-    });
-  });
-  const currentTabConfig = tabsConfig[selectedTab];
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Progress, null)));
+
+const YellowStar = withStyles$1({
+  root: {
+    color: "#f3ba37"
+  }
+})(Star);
+const actionFactories = {
+  createCopyDocsUrlAction(copyToClipboard) {
+    return (row) => {
+      return {
+        icon: () => /* @__PURE__ */ React.createElement(ShareIcon, {
+          fontSize: "small"
+        }),
+        tooltip: "Click to copy documentation link to clipboard",
+        onClick: () => copyToClipboard(`${window.location.origin}${row.resolved.docsUrl}`)
+      };
+    };
+  },
+  createStarEntityAction(isStarredEntity, toggleStarredEntity) {
+    return ({ entity }) => {
+      const isStarred = isStarredEntity(entity);
+      return {
+        cellStyle: { paddingLeft: "1em" },
+        icon: () => isStarred ? /* @__PURE__ */ React.createElement(YellowStar, null) : /* @__PURE__ */ React.createElement(StarBorder, null),
+        tooltip: isStarred ? "Remove from favorites" : "Add to favorites",
+        onClick: () => toggleStarredEntity(entity)
+      };
+    };
+  }
+};
+
+function customTitle(entity) {
+  return entity.metadata.title || entity.metadata.name;
+}
+const columnFactories = {
+  createNameColumn() {
+    return {
+      title: "Document",
+      field: "entity.metadata.name",
+      highlight: true,
+      render: (row) => /* @__PURE__ */ React.createElement(SubvalueCell, {
+        value: /* @__PURE__ */ React.createElement(Link, {
+          to: row.resolved.docsUrl
+        }, customTitle(row.entity)),
+        subvalue: row.entity.metadata.description
+      })
+    };
+  },
+  createOwnerColumn() {
+    return {
+      title: "Owner",
+      field: "resolved.ownedByRelationsTitle",
+      render: ({ resolved }) => /* @__PURE__ */ React.createElement(EntityRefLinks, {
+        entityRefs: resolved.ownedByRelations,
+        defaultKind: "group"
+      })
+    };
+  },
+  createTypeColumn() {
+    return {
+      title: "Type",
+      field: "entity.spec.type"
+    };
   }
+};
+
+const DocsTable = (props) => {
+  const { entities, title, loading, columns, actions } = props;
+  const [, copyToClipboard] = useCopyToClipboard();
+  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
+  const config = useApi(configApiRef);
+  if (!entities)
+    return null;
+  const documents = entities.map((entity) => {
+    var _a;
+    const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
+    return {
+      entity,
+      resolved: {
+        docsUrl: getRouteToReaderPageFor({
+          namespace: toLowerMaybe((_a = entity.metadata.namespace) != null ? _a : "default", config),
+          kind: toLowerMaybe(entity.kind, config),
+          name: toLowerMaybe(entity.metadata.name, config)
+        }),
+        ownedByRelations,
+        ownedByRelationsTitle: ownedByRelations.map((r) => humanizeEntityRef(r, { defaultKind: "group" })).join(", ")
+      }
+    };
+  });
+  const defaultColumns = [
+    columnFactories.createNameColumn(),
+    columnFactories.createOwnerColumn(),
+    columnFactories.createTypeColumn()
+  ];
+  const defaultActions = [
+    actionFactories.createCopyDocsUrlAction(copyToClipboard)
+  ];
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading || documents && documents.length > 0 ? /* @__PURE__ */ React.createElement(Table, {
+    isLoading: loading,
+    options: {
+      paging: true,
+      pageSize: 20,
+      search: true,
+      actionsColumnIndex: -1
+    },
+    data: documents,
+    columns: columns || defaultColumns,
+    actions: actions || defaultActions,
+    title: title ? `${title} (${documents.length})` : `All (${documents.length})`
+  }) : /* @__PURE__ */ React.createElement(EmptyState, {
+    missing: "data",
+    title: "No documents to show",
+    description: "Create your own document. Check out our Getting Started Information",
+    action: /* @__PURE__ */ React.createElement(Button$1, {
+      color: "primary",
+      to: "https://backstage.io/docs/features/techdocs/getting-started",
+      variant: "contained"
+    }, "DOCS")
+  }));
+};
+DocsTable.columns = columnFactories;
+DocsTable.actions = actionFactories;
+
+const EntityListDocsTable = (props) => {
+  var _a, _b;
+  const { columns, actions } = props;
+  const { loading, error, entities, filters } = useEntityList();
+  const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
+  const [, copyToClipboard] = useCopyToClipboard();
+  const title = capitalize((_b = (_a = filters.user) == null ? void 0 : _a.value) != null ? _b : "all");
+  const defaultActions = [
+    actionFactories.createCopyDocsUrlAction(copyToClipboard),
+    actionFactories.createStarEntityAction(isStarredEntity, toggleStarredEntity)
+  ];
   if (error) {
-    return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(WarningPanel, {
+    return /* @__PURE__ */ React.createElement(WarningPanel, {
       severity: "error",
       title: "Could not load available documentation."
     }, /* @__PURE__ */ React.createElement(CodeSnippet, {
       language: "text",
       text: error.toString()
-    }))));
+    }));
   }
-  return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(HeaderTabs, {
-    selectedIndex: selectedTab,
-    onChange: (index) => setSelectedTab(index),
-    tabs: tabsConfig.map(({ label }, index) => ({
-      id: index.toString(),
-      label
-    }))
-  }), /* @__PURE__ */ React.createElement(Content, {
-    "data-testid": "techdocs-content"
-  }, currentTabConfig.panels.map((config, index) => /* @__PURE__ */ React.createElement(CustomPanel, {
-    key: index,
-    config,
-    entities: !!entities ? entities : [],
-    index
-  }))));
+  return /* @__PURE__ */ React.createElement(DocsTable, {
+    title,
+    entities,
+    loading,
+    actions: actions || defaultActions,
+    columns
+  });
 };
+EntityListDocsTable.columns = columnFactories;
+EntityListDocsTable.actions = actionFactories;
 
-var TechDocsCustomHome$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  TechDocsCustomHome: TechDocsCustomHome
-});
+const TechDocsPageWrapper = (props) => {
+  var _a;
+  const { children } = props;
+  const configApi = useApi(configApiRef);
+  const generatedSubtitle = `Documentation available in ${(_a = configApi.getOptionalString("organization.name")) != null ? _a : "Backstage"}`;
+  return /* @__PURE__ */ React.createElement(PageWithHeader, {
+    title: "Documentation",
+    subtitle: generatedSubtitle,
+    themeId: "documentation"
+  }, children);
+};
 
-const LegacyTechDocsHome = () => {
-  const tabsConfig = [
-    {
-      label: "Overview",
-      panels: [
-        {
-          title: "Overview",
-          description: "Explore your internal technical ecosystem through documentation.",
-          panelType: "DocsCardGrid",
-          filterPredicate: () => true
-        }
-      ]
-    },
-    {
-      label: "Owned Documents",
-      panels: [
-        {
-          title: "Owned documents",
-          description: "Access your documentation.",
-          panelType: "DocsTable",
-          filterPredicate: "ownedByUser"
-        }
-      ]
-    }
-  ];
-  return /* @__PURE__ */ React.createElement(TechDocsCustomHome, {
-    tabsConfig
-  });
+class TechDocsFilter {
+  getCatalogFilters() {
+    return {
+      "metadata.annotations.backstage.io/techdocs-ref": CATALOG_FILTER_EXISTS
+    };
+  }
+}
+const TechDocsPicker = () => {
+  const { updateFilters } = useEntityList();
+  useEffect(() => {
+    updateFilters({
+      techdocs: new TechDocsFilter()
+    });
+  }, [updateFilters]);
+  return null;
+};
+
+const DefaultTechDocsHome = (props) => {
+  const { initialFilter = "all", columns, actions } = props;
+  return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
+    title: ""
+  }, /* @__PURE__ */ React.createElement(SupportButton, null, "Discover documentation in your ecosystem.")), /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(FilteredEntityLayout, null, /* @__PURE__ */ React.createElement(FilterContainer, null, /* @__PURE__ */ React.createElement(TechDocsPicker, null), /* @__PURE__ */ React.createElement(UserListPicker, {
+    initialFilter
+  }), /* @__PURE__ */ React.createElement(EntityOwnerPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(EntityListContainer, null, /* @__PURE__ */ React.createElement(EntityListDocsTable, {
+    actions,
+    columns
+  }))))));
 };
 
+const techdocsPlugin = createPlugin({
+  id: "techdocs",
+  apis: [
+    createApiFactory({
+      api: techdocsStorageApiRef,
+      deps: {
+        configApi: configApiRef,
+        discoveryApi: discoveryApiRef,
+        identityApi: identityApiRef,
+        fetchApi: fetchApiRef
+      },
+      factory: ({ configApi, discoveryApi, identityApi, fetchApi }) => new TechDocsStorageClient({
+        configApi,
+        discoveryApi,
+        identityApi,
+        fetchApi
+      })
+    }),
+    createApiFactory({
+      api: techdocsApiRef,
+      deps: {
+        configApi: configApiRef,
+        discoveryApi: discoveryApiRef,
+        fetchApi: fetchApiRef
+      },
+      factory: ({ configApi, discoveryApi, fetchApi }) => new TechDocsClient({
+        configApi,
+        discoveryApi,
+        fetchApi
+      })
+    })
+  ],
+  routes: {
+    root: rootRouteRef,
+    docRoot: rootDocsRouteRef,
+    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('./esm/TechDocsCustomHome-a4f542cd.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: () => Promise.resolve().then(function () { return TechDocsReaderPage$2; }).then((m) => m.TechDocsReaderPage),
+  mountPoint: rootDocsRouteRef
+}));
+
 const TechDocsIndexPage = () => {
   const outlet = useOutlet();
-  return outlet || /* @__PURE__ */ React.createElement(LegacyTechDocsHome, null);
+  return outlet || /* @__PURE__ */ React.createElement(DefaultTechDocsHome, null);
 };
 
 var TechDocsIndexPage$1 = /*#__PURE__*/Object.freeze({
@@ -1892,10 +2099,10 @@ const Router = () => {
     element: /* @__PURE__ */ React.createElement(TechDocsIndexPage, null)
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "/:namespace/:kind/:name/*",
-    element: /* @__PURE__ */ React.createElement(TechDocsPage, null)
+    element: /* @__PURE__ */ React.createElement(TechDocsReaderPage$1, null)
   }));
 };
-const EmbeddedDocsRouter = (_props) => {
+const EmbeddedDocsRouter = () => {
   var _a;
   const { entity } = useEntity();
   const projectId = (_a = entity.metadata.annotations) == null ? void 0 : _a[TECHDOCS_ANNOTATION];
@@ -1919,5 +2126,5 @@ var Router$1 = /*#__PURE__*/Object.freeze({
   EmbeddedDocsRouter: EmbeddedDocsRouter
 });
 
-export { DefaultTechDocsHome, DocsCardGrid, DocsResultListItem, DocsTable, EmbeddedDocsRouter, EntityListDocsGrid, EntityListDocsTable, EntityTechdocsContent, Reader, Router, TechDocsClient, TechDocsCustomHome$2 as TechDocsCustomHome, TechDocsIndexPage$2 as TechDocsIndexPage, TechDocsPage, TechDocsPageHeader, TechDocsPageWrapper, TechDocsPicker, TechDocsReaderPage, TechDocsSearch, TechDocsStateIndicator, TechDocsStorageClient, TechdocsPage, isTechDocsAvailable, techdocsPlugin as plugin, techdocsApiRef, techdocsPlugin, techdocsStorageApiRef, useTechDocsReader, useTechDocsReaderDom, withTechDocsReaderProvider };
+export { DefaultTechDocsHome, DocsCardGrid, DocsResultListItem, DocsTable, EmbeddedDocsRouter, EntityListDocsGrid, EntityListDocsTable, EntityTechdocsContent, Reader, Router, TechDocsClient, TechDocsCustomHome, TechDocsIndexPage$2 as TechDocsIndexPage, TechDocsPage, TechDocsPageHeader, TechDocsPageWrapper, TechDocsPicker, TechDocsReaderPage, TechDocsReaderPageHeader, TechDocsSearch, TechDocsSearchResultListItem, TechDocsStateIndicator, TechDocsStorageClient, TechdocsPage, isTechDocsAvailable, techdocsPlugin as plugin, techdocsApiRef, techdocsPlugin, techdocsStorageApiRef, useTechDocsReader, useTechDocsReaderDom, withTechDocsReaderProvider };
 //# sourceMappingURL=index.esm.js.map