@backstage/plugin-techdocs 0.12.4 → 0.12.8

package/dist/index.esm.js

@@ -1,8 +1,7 @@
 import { createApiRef, createRouteRef, useRouteRef, useApi, configApiRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension } from '@backstage/core-plugin-api';
 import { ResponseError, NotFoundError } from '@backstage/errors';
 import { EventSourcePolyfill } from 'event-source-polyfill';
-import * as React from 'react';
-import React__default, { useEffect, useState, useReducer, useRef, useMemo, useContext, createContext, useCallback } from 'react';
+import React, { useEffect, useState, Suspense, useReducer, useRef, useMemo, useContext, createContext, 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, ErrorPage, HeaderLabel, Header, Page, HeaderTabs, MissingAnnotationEmptyState } from '@backstage/core-components';
 import TextTruncate from 'react-text-truncate';
@@ -25,7 +24,6 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 import { useNavigate, useOutlet } from 'react-router';
 import { Alert } from '@material-ui/lab';
 import Close from '@material-ui/icons/Close';
-import { LazyLog } from 'react-lazylog';
 import CodeIcon from '@material-ui/icons/Code';
 
 const techdocsStorageApiRef = createApiRef({
@@ -183,11 +181,11 @@ const DocsResultListItem = ({
   const classes = useStyles$2();
   const TextItem = () => {
     var _a;
-    return /* @__PURE__ */ React__default.createElement(ListItemText, {
+    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__default.createElement(TextTruncate, {
+      secondary: /* @__PURE__ */ React.createElement(TextTruncate, {
         line: lineClamp,
         truncateText: "\u2026",
         text: result.text,
@@ -195,36 +193,33 @@ const DocsResultListItem = ({
       })
     });
   };
-  const LinkWrapper = ({children}) => asLink ? /* @__PURE__ */ React__default.createElement(Link, {
+  const LinkWrapper = ({children}) => asLink ? /* @__PURE__ */ React.createElement(Link, {
     to: result.location
-  }, children) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
-  const ListItemWrapper = ({children}) => asListItem ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ListItem, {
+  }, 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__default.createElement(Divider, {
+  }, children), /* @__PURE__ */ React.createElement(Divider, {
     component: "li"
-  })) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
-  return /* @__PURE__ */ React__default.createElement(LinkWrapper, null, /* @__PURE__ */ React__default.createElement(ListItemWrapper, null, /* @__PURE__ */ React__default.createElement(TextItem, null)));
+  })) : /* @__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",
-  title: "TechDocs Landing Page"
+  id: "techdocs:index-page"
 });
 const rootDocsRouteRef = createRouteRef({
-  id: "techdocs-reader-page",
-  title: "Docs",
+  id: "techdocs:reader-page",
   params: ["namespace", "kind", "name"]
 });
 const rootCatalogDocsRouteRef = createRouteRef({
-  id: "catalog-techdocs-reader-view",
-  title: "Docs"
+  id: "techdocs:catalog-reader-view"
 });
 
 function createCopyDocsUrlAction(copyToClipboard) {
   return (row) => {
     return {
-      icon: () => /* @__PURE__ */ React__default.createElement(ShareIcon, {
+      icon: () => /* @__PURE__ */ React.createElement(ShareIcon, {
         fontSize: "small"
       }),
       tooltip: "Click to copy documentation link to clipboard",
@@ -258,8 +253,8 @@ function createNameColumn() {
     title: "Document",
     field: "entity.metadata.name",
     highlight: true,
-    render: (row) => /* @__PURE__ */ React__default.createElement(SubvalueCell, {
-      value: /* @__PURE__ */ React__default.createElement(Link, {
+    render: (row) => /* @__PURE__ */ React.createElement(SubvalueCell, {
+      value: /* @__PURE__ */ React.createElement(Link, {
         to: row.resolved.docsUrl
       }, customTitle(row.entity)),
       subvalue: row.entity.metadata.description
@@ -270,7 +265,7 @@ function createOwnerColumn() {
   return {
     title: "Owner",
     field: "resolved.ownedByRelationsTitle",
-    render: ({resolved}) => /* @__PURE__ */ React__default.createElement(EntityRefLinks, {
+    render: ({resolved}) => /* @__PURE__ */ React.createElement(EntityRefLinks, {
       entityRefs: resolved.ownedByRelations,
       defaultKind: "group"
     })
@@ -299,7 +294,7 @@ const DocsTable$1 = ({
 }) => {
   const [, copyToClipboard] = useCopyToClipboard();
   const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const toLowerMaybe = useApi(configApiRef).getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? (str) => str : (str) => str.toLocaleLowerCase();
+  const toLowerMaybe = useApi(configApiRef).getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? (str) => str : (str) => str.toLocaleLowerCase("en-US");
   if (!entities)
     return null;
   const documents = entities.map((entity) => {
@@ -326,7 +321,7 @@ const DocsTable$1 = ({
   const defaultActions = [
     createCopyDocsUrlAction(copyToClipboard)
   ];
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, loading || documents && documents.length > 0 ? /* @__PURE__ */ React__default.createElement(Table, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading || documents && documents.length > 0 ? /* @__PURE__ */ React.createElement(Table, {
     isLoading: loading,
     options: {
       paging: true,
@@ -338,11 +333,11 @@ const DocsTable$1 = ({
     columns: columns || defaultColumns,
     actions: actions || defaultActions,
     title: title ? `${title} (${documents.length})` : `All (${documents.length})`
-  }) : /* @__PURE__ */ React__default.createElement(EmptyState, {
+  }) : /* @__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__default.createElement(Button, {
+    action: /* @__PURE__ */ React.createElement(Button, {
       color: "primary",
       to: "https://backstage.io/docs/features/techdocs/getting-started",
       variant: "contained"
@@ -369,15 +364,15 @@ const EntityListDocsTable = ({
     createStarEntityAction(isStarredEntity, toggleStarredEntity)
   ];
   if (error) {
-    return /* @__PURE__ */ React__default.createElement(WarningPanel, {
+    return /* @__PURE__ */ React.createElement(WarningPanel, {
       severity: "error",
       title: "Could not load available documentation."
-    }, /* @__PURE__ */ React__default.createElement(CodeSnippet, {
+    }, /* @__PURE__ */ React.createElement(CodeSnippet, {
       language: "text",
       text: error.toString()
     }));
   }
-  return /* @__PURE__ */ React__default.createElement(DocsTable$1, {
+  return /* @__PURE__ */ React.createElement(DocsTable$1, {
     title,
     entities,
     loading,
@@ -392,7 +387,7 @@ 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__default.createElement(PageWithHeader, {
+  return /* @__PURE__ */ React.createElement(PageWithHeader, {
     title: "Documentation",
     subtitle: generatedSubtitle,
     themeId: "documentation"
@@ -421,11 +416,11 @@ const DefaultTechDocsHome = ({
   columns,
   actions
 }) => {
-  return /* @__PURE__ */ React__default.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(ContentHeader, {
+  return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
     title: ""
-  }, /* @__PURE__ */ React__default.createElement(SupportButton, null, "Discover documentation in your ecosystem.")), /* @__PURE__ */ React__default.createElement(EntityListProvider, null, /* @__PURE__ */ React__default.createElement(FilteredEntityLayout, null, /* @__PURE__ */ React__default.createElement(FilterContainer, null, /* @__PURE__ */ React__default.createElement(TechDocsPicker, null), /* @__PURE__ */ React__default.createElement(UserListPicker, {
+  }, /* @__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__default.createElement(EntityOwnerPicker, null), /* @__PURE__ */ React__default.createElement(EntityTagPicker, null)), /* @__PURE__ */ React__default.createElement(EntityListContainer, null, /* @__PURE__ */ React__default.createElement(EntityListDocsTable, {
+  }), /* @__PURE__ */ React.createElement(EntityOwnerPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(EntityListContainer, null, /* @__PURE__ */ React.createElement(EntityListDocsTable, {
     actions,
     columns
   }))))));
@@ -435,18 +430,18 @@ const DocsCardGrid$1 = ({
   entities
 }) => {
   const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const toLowerMaybe = useApi(configApiRef).getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? (str) => str : (str) => str.toLocaleLowerCase();
+  const toLowerMaybe = useApi(configApiRef).getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? (str) => str : (str) => str.toLocaleLowerCase("en-US");
   if (!entities)
     return null;
-  return /* @__PURE__ */ React__default.createElement(ItemCardGrid, {
+  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__default.createElement(Card, {
+    return /* @__PURE__ */ React.createElement(Card, {
       key: index
-    }, /* @__PURE__ */ React__default.createElement(CardMedia, null, /* @__PURE__ */ React__default.createElement(ItemCardHeader, {
+    }, /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(ItemCardHeader, {
       title: (_a = entity.metadata.title) != null ? _a : entity.metadata.name
-    })), /* @__PURE__ */ React__default.createElement(CardContent, null, entity.metadata.description), /* @__PURE__ */ React__default.createElement(CardActions, null, /* @__PURE__ */ React__default.createElement(Button, {
+    })), /* @__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"),
         kind: toLowerMaybe(entity.kind),
@@ -466,22 +461,22 @@ var DocsCardGrid$2 = /*#__PURE__*/Object.freeze({
 const EntityListDocsGrid = () => {
   const {loading, error, entities} = useEntityListProvider();
   if (error) {
-    return /* @__PURE__ */ React__default.createElement(WarningPanel, {
+    return /* @__PURE__ */ React.createElement(WarningPanel, {
       severity: "error",
       title: "Could not load available documentation."
-    }, /* @__PURE__ */ React__default.createElement(CodeSnippet, {
+    }, /* @__PURE__ */ React.createElement(CodeSnippet, {
       language: "text",
       text: error.toString()
     }));
   }
   if (loading || !entities) {
-    return /* @__PURE__ */ React__default.createElement(Progress, null);
+    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__default.createElement(DocsCardGrid$1, {
+  return /* @__PURE__ */ React.createElement(DocsCardGrid$1, {
     entities
   });
 };
@@ -635,7 +630,7 @@ Feedback:`);
       default:
         return dom;
     }
-    ReactDOM.render(React__default.createElement(FeedbackOutlinedIcon), feedbackLink);
+    ReactDOM.render(React.createElement(FeedbackOutlinedIcon), feedbackLink);
     feedbackLink.style.paddingLeft = "5px";
     feedbackLink.title = "Leave feedback for this page";
     feedbackLink.id = "git-feedback-link";
@@ -836,10 +831,10 @@ const TechDocsSearchBar = ({
       navigate(location);
     }
   };
-  return /* @__PURE__ */ React__default.createElement(Grid, {
+  return /* @__PURE__ */ React.createElement(Grid, {
     item: true,
     xs: 12
-  }, /* @__PURE__ */ React__default.createElement(Autocomplete, {
+  }, /* @__PURE__ */ React.createElement(Autocomplete, {
     "data-testid": "techdocs-search-bar",
     size: "small",
     open,
@@ -858,7 +853,7 @@ const TechDocsSearchBar = ({
     noOptionsText: "No results found",
     value: null,
     options,
-    renderOption: ({document}) => /* @__PURE__ */ React__default.createElement(DocsResultListItem, {
+    renderOption: ({document}) => /* @__PURE__ */ React.createElement(DocsResultListItem, {
       result: document,
       lineClamp: 3,
       asListItem: false,
@@ -866,7 +861,7 @@ const TechDocsSearchBar = ({
       title: document.title
     }),
     loading,
-    renderInput: (params) => /* @__PURE__ */ React__default.createElement(TextField, {
+    renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
       ...params,
       "data-testid": "techdocs-search-bar-input",
       variant: "outlined",
@@ -876,13 +871,13 @@ const TechDocsSearchBar = ({
       onChange: handleQuery,
       InputProps: {
         ...params.InputProps,
-        startAdornment: /* @__PURE__ */ React__default.createElement(InputAdornment, {
+        startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, {
           position: "start"
-        }, /* @__PURE__ */ React__default.createElement(IconButton, {
+        }, /* @__PURE__ */ React.createElement(IconButton, {
           "aria-label": "Query",
           disabled: true
-        }, /* @__PURE__ */ React__default.createElement(SearchIcon, null))),
-        endAdornment: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, loading ? /* @__PURE__ */ React__default.createElement(CircularProgress, {
+        }, /* @__PURE__ */ React.createElement(SearchIcon, null))),
+        endAdornment: /* @__PURE__ */ React.createElement(React.Fragment, null, loading ? /* @__PURE__ */ React.createElement(CircularProgress, {
           color: "inherit",
           size: 20
         }) : null, params.InputProps.endAdornment)
@@ -897,13 +892,14 @@ const TechDocsSearch = (props) => {
     pageCursor: "",
     filters: props.entityId
   };
-  return /* @__PURE__ */ React__default.createElement(SearchContextProvider, {
+  return /* @__PURE__ */ React.createElement(SearchContextProvider, {
     initialState
-  }, /* @__PURE__ */ React__default.createElement(TechDocsSearchBar, {
+  }, /* @__PURE__ */ React.createElement(TechDocsSearchBar, {
     ...props
   }));
 };
 
+const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 const useDrawerStyles = makeStyles((theme) => createStyles({
   paper: {
     width: "100%",
@@ -945,13 +941,15 @@ const TechDocsBuildLogsDrawerContent = ({
     title: "Close the drawer",
     onClick: onClose,
     color: "inherit"
-  }, /* @__PURE__ */ React.createElement(Close, null))), /* @__PURE__ */ React.createElement(LazyLog, {
+  }, /* @__PURE__ */ React.createElement(Close, null))), /* @__PURE__ */ React.createElement(Suspense, {
+    fallback: /* @__PURE__ */ React.createElement(Progress, null)
+  }, /* @__PURE__ */ React.createElement(LazyLog, {
     text: buildLog.length === 0 ? "Waiting for logs..." : buildLog.join("\n"),
     extraLines: 1,
     follow: true,
     selectableLines: true,
     enableSearch: true
-  }));
+  })));
 };
 const TechDocsBuildLogs = ({buildLog}) => {
   const classes = useDrawerStyles();
@@ -976,7 +974,7 @@ const TechDocsNotFound = ({errorMessage}) => {
   if (techdocsBuilder !== "local") {
     additionalInfo = "Note that techdocs.builder is not set to 'local' in your config, which means this Backstage app will not generate docs if they are not found. Make sure the project's docs are generated and published by some external process (e.g. CI/CD pipeline). Or change techdocs.builder to 'local' to generate docs from this Backstage instance.";
   }
-  return /* @__PURE__ */ React__default.createElement(ErrorPage, {
+  return /* @__PURE__ */ React.createElement(ErrorPage, {
     status: "404",
     statusMessage: errorMessage || "Documentation not found",
     additionalInfo
@@ -999,64 +997,64 @@ const TechDocsStateIndicator = () => {
     syncErrorMessage,
     buildLog
   } = useTechDocsReader();
-  const ReaderProgress = state === "CHECKING" ? /* @__PURE__ */ React__default.createElement(Progress, null) : null;
+  const ReaderProgress = state === "CHECKING" ? /* @__PURE__ */ React.createElement(Progress, null) : null;
   if (state === "INITIAL_BUILD") {
-    StateAlert = /* @__PURE__ */ React__default.createElement(Alert, {
+    StateAlert = /* @__PURE__ */ React.createElement(Alert, {
       variant: "outlined",
       severity: "info",
-      icon: /* @__PURE__ */ React__default.createElement(CircularProgress, {
+      icon: /* @__PURE__ */ React.createElement(CircularProgress, {
         size: "24px"
       }),
-      action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
+      action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
         buildLog
       })
     }, "Documentation is accessed for the first time and is being prepared. The subsequent loads are much faster.");
   }
   if (state === "CONTENT_STALE_REFRESHING") {
-    StateAlert = /* @__PURE__ */ React__default.createElement(Alert, {
+    StateAlert = /* @__PURE__ */ React.createElement(Alert, {
       variant: "outlined",
       severity: "info",
-      icon: /* @__PURE__ */ React__default.createElement(CircularProgress, {
+      icon: /* @__PURE__ */ React.createElement(CircularProgress, {
         size: "24px"
       }),
-      action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
+      action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
         buildLog
       })
     }, "A newer version of this documentation is being prepared and will be available shortly.");
   }
   if (state === "CONTENT_STALE_READY") {
-    StateAlert = /* @__PURE__ */ React__default.createElement(Alert, {
+    StateAlert = /* @__PURE__ */ React.createElement(Alert, {
       variant: "outlined",
       severity: "success",
-      action: /* @__PURE__ */ React__default.createElement(Button$1, {
+      action: /* @__PURE__ */ React.createElement(Button$1, {
         color: "inherit",
         onClick: () => contentReload()
       }, "Refresh")
     }, "A newer version of this documentation is now available, please refresh to view.");
   }
   if (state === "CONTENT_STALE_ERROR") {
-    StateAlert = /* @__PURE__ */ React__default.createElement(Alert, {
+    StateAlert = /* @__PURE__ */ React.createElement(Alert, {
       variant: "outlined",
       severity: "error",
-      action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
+      action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
         buildLog
       }),
       classes: {message: classes.message}
     }, "Building a newer version of this documentation failed.", " ", syncErrorMessage);
   }
   if (state === "CONTENT_NOT_FOUND") {
-    StateAlert = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, syncErrorMessage && /* @__PURE__ */ React__default.createElement(Alert, {
+    StateAlert = /* @__PURE__ */ React.createElement(React.Fragment, null, syncErrorMessage && /* @__PURE__ */ React.createElement(Alert, {
       variant: "outlined",
       severity: "error",
-      action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
+      action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
         buildLog
       }),
       classes: {message: classes.message}
-    }, "Building a newer version of this documentation failed.", " ", syncErrorMessage), /* @__PURE__ */ React__default.createElement(TechDocsNotFound, {
+    }, "Building a newer version of this documentation failed.", " ", syncErrorMessage), /* @__PURE__ */ React.createElement(TechDocsNotFound, {
       errorMessage: contentErrorMessage
     }));
   }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ReaderProgress, StateAlert);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, ReaderProgress, StateAlert);
 };
 
 function calculateDisplayState({
@@ -1217,23 +1215,29 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 const TechDocsReaderContext = createContext({});
-const TechDocsReaderProvider = ({children}) => {
-  const {namespace = "", kind = "", name = "", "*": path} = useParams();
+const TechDocsReaderProvider = ({
+  children,
+  entityRef
+}) => {
+  const {"*": path} = useParams();
+  const {kind, namespace, name} = entityRef;
   const value = useReaderState(kind, namespace, name, path);
-  return /* @__PURE__ */ React__default.createElement(TechDocsReaderContext.Provider, {
+  return /* @__PURE__ */ React.createElement(TechDocsReaderContext.Provider, {
     value
   }, children);
 };
-const withTechDocsReaderProvider = (Component) => (props) => /* @__PURE__ */ React__default.createElement(TechDocsReaderProvider, null, /* @__PURE__ */ React__default.createElement(Component, {
+const withTechDocsReaderProvider = (Component, entityRef) => (props) => /* @__PURE__ */ React.createElement(TechDocsReaderProvider, {
+  entityRef
+}, /* @__PURE__ */ React.createElement(Component, {
   ...props
 }));
 const useTechDocsReader = () => useContext(TechDocsReaderContext);
-const useTechDocsReaderDom = () => {
+const useTechDocsReaderDom = (entityRef) => {
   const navigate = useNavigate$1();
   const theme = useTheme();
   const techdocsStorageApi = useApi(techdocsStorageApiRef);
   const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
-  const {namespace = "", kind = "", name = ""} = useParams();
+  const {namespace = "", kind = "", name = ""} = entityRef;
   const {state, path, content: rawPage} = useTechDocsReader();
   const [sidebars, setSidebars] = useState();
   const [dom, setDom] = useState(null);
@@ -1288,6 +1292,7 @@ const useTechDocsReaderDom = () => {
           .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 table:not([class]) {
@@ -1303,6 +1308,16 @@ const useTechDocsReaderDom = () => {
           .md-typeset .admonition, .md-typeset details {
             font-size: 1rem;
           }
+          
+          /* style the checkmarks of the task list */
+          .md-typeset .task-list-control .task-list-indicator::before {
+            background-color: ${theme.palette.action.disabledBackground};
+          }
+          .md-typeset .task-list-control [type="checkbox"]:checked + .task-list-indicator:before {
+            background-color: ${theme.palette.success.main};
+          }
+          /**/
+
           @media screen and (max-width: 76.1875em) {
             .md-nav {
               background-color: ${theme.palette.background.default};
@@ -1369,8 +1384,8 @@ const useTechDocsReaderDom = () => {
               --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>');
             }
             :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="M12 2A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 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="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-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>');
             }
         `
     })
@@ -1380,9 +1395,11 @@ const useTechDocsReaderDom = () => {
     namespace,
     scmIntegrationsApi,
     techdocsStorageApi,
+    theme.palette.action.disabledBackground,
     theme.palette.background.default,
     theme.palette.background.paper,
     theme.palette.primary.main,
+    theme.palette.success.main,
     theme.palette.text.primary,
     theme.typography.fontFamily
   ]);
@@ -1445,7 +1462,7 @@ const TheReader = ({
 }) => {
   var _a, _b;
   const classes = useStyles();
-  const dom = useTechDocsReaderDom();
+  const dom = useTechDocsReaderDom(entityRef);
   const shadowDomRef = useRef(null);
   const onReadyRef = useRef(onReady);
   useEffect(() => {
@@ -1460,12 +1477,12 @@ const TheReader = ({
     shadowRoot.appendChild(dom);
     onReadyRef.current();
   }, [dom]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TechDocsStateIndicator, null), withSearch && ((_b = (_a = shadowDomRef == null ? void 0 : shadowDomRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.innerHTML) && /* @__PURE__ */ React__default.createElement(Grid, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TechDocsStateIndicator, null), withSearch && ((_b = (_a = shadowDomRef == null ? void 0 : shadowDomRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.innerHTML) && /* @__PURE__ */ React.createElement(Grid, {
     container: true,
     className: classes.searchBar
-  }, /* @__PURE__ */ React__default.createElement(TechDocsSearch, {
+  }, /* @__PURE__ */ React.createElement(TechDocsSearch, {
     entityId: entityRef
-  })), /* @__PURE__ */ React__default.createElement("div", {
+  })), /* @__PURE__ */ React.createElement("div", {
     "data-testid": "techdocs-content-shadowroot",
     ref: shadowDomRef
   }));
@@ -1475,7 +1492,9 @@ const Reader = ({
   onReady = () => {
   },
   withSearch = true
-}) => /* @__PURE__ */ React__default.createElement(TechDocsReaderProvider, null, /* @__PURE__ */ React__default.createElement(TheReader, {
+}) => /* @__PURE__ */ React.createElement(TechDocsReaderProvider, {
+  entityRef
+}, /* @__PURE__ */ React.createElement(TheReader, {
   entityRef,
   onReady,
   withSearch
@@ -1492,34 +1511,34 @@ const TechDocsPageHeader = ({
   const lifecycle = spec == null ? void 0 : spec.lifecycle;
   const ownedByRelations = entityMetadata ? getEntityRelations(entityMetadata, RELATION_OWNED_BY) : [];
   const docsRootLink = useRouteRef(rootRouteRef)();
-  const labels = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(HeaderLabel, {
+  const labels = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HeaderLabel, {
     label: "Component",
-    value: /* @__PURE__ */ React__default.createElement(EntityRefLink, {
+    value: /* @__PURE__ */ React.createElement(EntityRefLink, {
       color: "inherit",
       entityRef,
       defaultKind: "Component"
     })
-  }), ownedByRelations.length > 0 && /* @__PURE__ */ React__default.createElement(HeaderLabel, {
+  }), ownedByRelations.length > 0 && /* @__PURE__ */ React.createElement(HeaderLabel, {
     label: "Owner",
-    value: /* @__PURE__ */ React__default.createElement(EntityRefLinks, {
+    value: /* @__PURE__ */ React.createElement(EntityRefLinks, {
       color: "inherit",
       entityRefs: ownedByRelations,
       defaultKind: "group"
     })
-  }), lifecycle ? /* @__PURE__ */ React__default.createElement(HeaderLabel, {
+  }), lifecycle ? /* @__PURE__ */ React.createElement(HeaderLabel, {
     label: "Lifecycle",
     value: lifecycle
-  }) : null, locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file" ? /* @__PURE__ */ React__default.createElement(HeaderLabel, {
+  }) : null, locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file" ? /* @__PURE__ */ React.createElement(HeaderLabel, {
     label: "",
-    value: /* @__PURE__ */ React__default.createElement("a", {
+    value: /* @__PURE__ */ React.createElement("a", {
       href: locationMetadata.target,
       target: "_blank",
       rel: "noopener noreferrer"
-    }, /* @__PURE__ */ React__default.createElement(CodeIcon, {
+    }, /* @__PURE__ */ React.createElement(CodeIcon, {
       style: {marginTop: "-25px", fill: "#fff"}
     }))
   }) : null);
-  return /* @__PURE__ */ React__default.createElement(Header, {
+  return /* @__PURE__ */ React.createElement(Header, {
     title: siteName ? siteName : ".",
     pageTitleOverride: siteName || name,
     subtitle: siteDescription && siteDescription !== "None" ? siteDescription : "",
@@ -1545,13 +1564,13 @@ const LegacyTechDocsPage = () => {
     setDocumentReady(true);
   }, [setDocumentReady]);
   if (entityMetadataError) {
-    return /* @__PURE__ */ React__default.createElement(TechDocsNotFound, {
+    return /* @__PURE__ */ React.createElement(TechDocsNotFound, {
       errorMessage: entityMetadataError.message
     });
   }
-  return /* @__PURE__ */ React__default.createElement(Page, {
+  return /* @__PURE__ */ React.createElement(Page, {
     themeId: "documentation"
-  }, /* @__PURE__ */ React__default.createElement(TechDocsPageHeader, {
+  }, /* @__PURE__ */ React.createElement(TechDocsPageHeader, {
     techDocsMetadata: techdocsMetadataValue,
     entityMetadata: entityMetadataValue,
     entityRef: {
@@ -1559,9 +1578,9 @@ const LegacyTechDocsPage = () => {
       namespace,
       name
     }
-  }), /* @__PURE__ */ React__default.createElement(Content, {
+  }), /* @__PURE__ */ React.createElement(Content, {
     "data-testid": "techdocs-content"
-  }, /* @__PURE__ */ React__default.createElement(Reader, {
+  }, /* @__PURE__ */ React.createElement(Reader, {
     onReady,
     entityRef: {
       kind,
@@ -1589,13 +1608,13 @@ const TechDocsPage = ({children}) => {
     setDocumentReady(true);
   }, [setDocumentReady]);
   if (entityMetadataError) {
-    return /* @__PURE__ */ React__default.createElement(TechDocsNotFound, {
+    return /* @__PURE__ */ React.createElement(TechDocsNotFound, {
       errorMessage: entityMetadataError.message
     });
   }
   if (!children)
-    return outlet || /* @__PURE__ */ React__default.createElement(LegacyTechDocsPage, null);
-  return /* @__PURE__ */ React__default.createElement(Page, {
+    return outlet || /* @__PURE__ */ React.createElement(LegacyTechDocsPage, null);
+  return /* @__PURE__ */ React.createElement(Page, {
     themeId: "documentation"
   }, children instanceof Function ? children({
     techdocsMetadataValue,
@@ -1637,12 +1656,12 @@ const CustomPanel = ({
     }
     return typeof config.filterPredicate === "function" && config.filterPredicate(entity);
   });
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ContentHeader, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, {
     title: config.title,
     description: config.description
-  }, index === 0 ? /* @__PURE__ */ React__default.createElement(SupportButton, null, "Discover documentation in your ecosystem.") : null), /* @__PURE__ */ React__default.createElement("div", {
+  }, index === 0 ? /* @__PURE__ */ React.createElement(SupportButton, null, "Discover documentation in your ecosystem.") : null), /* @__PURE__ */ React.createElement("div", {
     className: classes.panelContainer
-  }, /* @__PURE__ */ React__default.createElement(Panel, {
+  }, /* @__PURE__ */ React.createElement(Panel, {
     "data-testid": "techdocs-custom-panel",
     entities: shownEntities
   })));
@@ -1677,27 +1696,27 @@ const TechDocsCustomHome = ({
   });
   const currentTabConfig = tabsConfig[selectedTab];
   if (loading) {
-    return /* @__PURE__ */ React__default.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(Progress, null)));
+    return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Progress, null)));
   }
   if (error) {
-    return /* @__PURE__ */ React__default.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(WarningPanel, {
+    return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(WarningPanel, {
       severity: "error",
       title: "Could not load available documentation."
-    }, /* @__PURE__ */ React__default.createElement(CodeSnippet, {
+    }, /* @__PURE__ */ React.createElement(CodeSnippet, {
       language: "text",
       text: error.toString()
     }))));
   }
-  return /* @__PURE__ */ React__default.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React__default.createElement(HeaderTabs, {
+  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__default.createElement(Content, {
+  }), /* @__PURE__ */ React.createElement(Content, {
     "data-testid": "techdocs-content"
-  }, currentTabConfig.panels.map((config, index) => /* @__PURE__ */ React__default.createElement(CustomPanel, {
+  }, currentTabConfig.panels.map((config, index) => /* @__PURE__ */ React.createElement(CustomPanel, {
     key: index,
     config,
     entities: !!entities ? entities : [],
@@ -1735,14 +1754,14 @@ const LegacyTechDocsHome = () => {
       ]
     }
   ];
-  return /* @__PURE__ */ React__default.createElement(TechDocsCustomHome, {
+  return /* @__PURE__ */ React.createElement(TechDocsCustomHome, {
     tabsConfig
   });
 };
 
 const TechDocsIndexPage = () => {
   const outlet = useOutlet();
-  return outlet || /* @__PURE__ */ React__default.createElement(LegacyTechDocsHome, null);
+  return outlet || /* @__PURE__ */ React.createElement(LegacyTechDocsHome, null);
 };
 
 var TechDocsIndexPage$1 = /*#__PURE__*/Object.freeze({
@@ -1752,7 +1771,7 @@ var TechDocsIndexPage$1 = /*#__PURE__*/Object.freeze({
 
 const EntityPageDocs = ({entity}) => {
   var _a;
-  return /* @__PURE__ */ React__default.createElement(Reader, {
+  return /* @__PURE__ */ React.createElement(Reader, {
     withSearch: false,
     entityRef: {
       kind: entity.kind,
@@ -1768,12 +1787,12 @@ const isTechDocsAvailable = (entity) => {
   return Boolean((_b = (_a = entity == null ? void 0 : entity.metadata) == null ? void 0 : _a.annotations) == null ? void 0 : _b[TECHDOCS_ANNOTATION]);
 };
 const Router = () => {
-  return /* @__PURE__ */ React__default.createElement(Routes, null, /* @__PURE__ */ React__default.createElement(Route, {
+  return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
     path: "/",
-    element: /* @__PURE__ */ React__default.createElement(TechDocsIndexPage, null)
-  }), /* @__PURE__ */ React__default.createElement(Route, {
+    element: /* @__PURE__ */ React.createElement(TechDocsIndexPage, null)
+  }), /* @__PURE__ */ React.createElement(Route, {
     path: "/:namespace/:kind/:name/*",
-    element: /* @__PURE__ */ React__default.createElement(TechDocsPage, null)
+    element: /* @__PURE__ */ React.createElement(TechDocsPage, null)
   }));
 };
 const EmbeddedDocsRouter = (_props) => {
@@ -1781,13 +1800,13 @@ const EmbeddedDocsRouter = (_props) => {
   const {entity} = useEntity();
   const projectId = (_a = entity.metadata.annotations) == null ? void 0 : _a[TECHDOCS_ANNOTATION];
   if (!projectId) {
-    return /* @__PURE__ */ React__default.createElement(MissingAnnotationEmptyState, {
+    return /* @__PURE__ */ React.createElement(MissingAnnotationEmptyState, {
       annotation: TECHDOCS_ANNOTATION
     });
   }
-  return /* @__PURE__ */ React__default.createElement(Routes, null, /* @__PURE__ */ React__default.createElement(Route, {
+  return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
     path: "/*",
-    element: /* @__PURE__ */ React__default.createElement(EntityPageDocs, {
+    element: /* @__PURE__ */ React.createElement(EntityPageDocs, {
       entity
     })
   }));