@backstage/plugin-techdocs 0.12.5 → 0.12.9

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 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 React, { useEffect, useState, Suspense, useReducer, useRef, useMemo, useContext, createContext, useCallback } from 'react';
+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, ErrorPage, HeaderLabel, Header, Page, HeaderTabs, MissingAnnotationEmptyState } from '@backstage/core-components';
+import { Link, SubvalueCell, Table, EmptyState, Button, WarningPanel, CodeSnippet, PageWithHeader, Content, ContentHeader, SupportButton, ItemCardGrid, ItemCardHeader, Progress, LogViewer, ErrorPage, 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';
@@ -50,12 +50,12 @@ class TechDocsClient {
     return (_a = this.configApi.getOptionalString("techdocs.requestUrl")) != null ? _a : await this.discoveryApi.getBaseUrl("techdocs");
   }
   async getTechDocsMetadata(entityId) {
-    const {kind, namespace, name} = entityId;
+    const { kind, namespace, name } = entityId;
     const apiOrigin = await this.getApiOrigin();
     const requestUrl = `${apiOrigin}/metadata/techdocs/${namespace}/${kind}/${name}`;
     const token = await this.identityApi.getIdToken();
     const request = await fetch(`${requestUrl}`, {
-      headers: token ? {Authorization: `Bearer ${token}`} : {}
+      headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     if (!request.ok) {
       throw await ResponseError.fromResponse(request);
@@ -63,12 +63,12 @@ class TechDocsClient {
     return await request.json();
   }
   async getEntityMetadata(entityId) {
-    const {kind, namespace, name} = entityId;
+    const { kind, namespace, name } = entityId;
     const apiOrigin = await this.getApiOrigin();
     const requestUrl = `${apiOrigin}/metadata/entity/${namespace}/${kind}/${name}`;
     const token = await this.identityApi.getIdToken();
     const request = await fetch(`${requestUrl}`, {
-      headers: token ? {Authorization: `Bearer ${token}`} : {}
+      headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     if (!request.ok) {
       throw await ResponseError.fromResponse(request);
@@ -98,12 +98,12 @@ class TechDocsStorageClient {
     return this.configApi.getString("techdocs.builder");
   }
   async getEntityDocs(entityId, path) {
-    const {kind, namespace, name} = entityId;
+    const { kind, namespace, name } = entityId;
     const storageUrl = await this.getStorageUrl();
     const url = `${storageUrl}/${namespace}/${kind}/${name}/${path}`;
     const token = await this.identityApi.getIdToken();
     const request = await fetch(`${url.endsWith("/") ? url : `${url}/`}index.html`, {
-      headers: token ? {Authorization: `Bearer ${token}`} : {}
+      headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     let errorMessage = "";
     switch (request.status) {
@@ -121,14 +121,14 @@ class TechDocsStorageClient {
   }
   async syncEntityDocs(entityId, logHandler = () => {
   }) {
-    const {kind, namespace, name} = entityId;
+    const { kind, namespace, name } = entityId;
     const apiOrigin = await this.getApiOrigin();
     const url = `${apiOrigin}/sync/${namespace}/${kind}/${name}`;
     const token = await this.identityApi.getIdToken();
     return new Promise((resolve, reject) => {
       const source = new EventSourcePolyfill(url, {
         withCredentials: true,
-        headers: token ? {Authorization: `Bearer ${token}`} : {}
+        headers: token ? { Authorization: `Bearer ${token}` } : {}
       });
       source.addEventListener("log", (e) => {
         if (e.data) {
@@ -138,7 +138,7 @@ class TechDocsStorageClient {
       source.addEventListener("finish", (e) => {
         let updated = false;
         if (e.data) {
-          ({updated} = JSON.parse(e.data));
+          ({ updated } = JSON.parse(e.data));
         }
         resolve(updated ? "updated" : "cached");
       });
@@ -156,7 +156,7 @@ class TechDocsStorageClient {
     });
   }
   async getBaseUrl(oldBaseUrl, entityId, path) {
-    const {kind, namespace, name} = entityId;
+    const { kind, namespace, name } = entityId;
     const apiOrigin = await this.getApiOrigin();
     return new URL(oldBaseUrl, `${apiOrigin}/static/docs/${namespace}/${kind}/${name}/${path}`).toString();
   }
@@ -183,7 +183,7 @@ const DocsResultListItem = ({
     var _a;
     return /* @__PURE__ */ React.createElement(ListItemText, {
       className: classes.itemText,
-      primaryTypographyProps: {variant: "h6"},
+      primaryTypographyProps: { variant: "h6" },
       primary: title ? title : `${result.title} | ${(_a = result.entityTitle) != null ? _a : result.name} docs`,
       secondary: /* @__PURE__ */ React.createElement(TextTruncate, {
         line: lineClamp,
@@ -193,10 +193,10 @@ const DocsResultListItem = ({
       })
     });
   };
-  const LinkWrapper = ({children}) => asLink ? /* @__PURE__ */ React.createElement(Link, {
+  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, {
+  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, {
@@ -206,17 +206,14 @@ const DocsResultListItem = ({
 };
 
 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) {
@@ -231,10 +228,10 @@ function createCopyDocsUrlAction(copyToClipboard) {
   };
 }
 function createStarEntityAction(isStarredEntity, toggleStarredEntity) {
-  return ({entity}) => {
+  return ({ entity }) => {
     const isStarred = isStarredEntity(entity);
     return {
-      cellStyle: {paddingLeft: "1em"},
+      cellStyle: { paddingLeft: "1em" },
       icon: () => favoriteEntityIcon(isStarred),
       tooltip: favoriteEntityTooltip(isStarred),
       onClick: () => toggleStarredEntity(entity)
@@ -268,7 +265,7 @@ function createOwnerColumn() {
   return {
     title: "Owner",
     field: "resolved.ownedByRelationsTitle",
-    render: ({resolved}) => /* @__PURE__ */ React.createElement(EntityRefLinks, {
+    render: ({ resolved }) => /* @__PURE__ */ React.createElement(EntityRefLinks, {
       entityRefs: resolved.ownedByRelations,
       defaultKind: "group"
     })
@@ -288,6 +285,10 @@ var columnFactories = /*#__PURE__*/Object.freeze({
   createTypeColumn: createTypeColumn
 });
 
+function toLowerMaybe(str, config) {
+  return config.getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? str : str.toLocaleLowerCase("en-US");
+}
+
 const DocsTable$1 = ({
   entities,
   title,
@@ -297,7 +298,7 @@ const DocsTable$1 = ({
 }) => {
   const [, copyToClipboard] = useCopyToClipboard();
   const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const toLowerMaybe = useApi(configApiRef).getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? (str) => str : (str) => str.toLocaleLowerCase();
+  const config = useApi(configApiRef);
   if (!entities)
     return null;
   const documents = entities.map((entity) => {
@@ -307,12 +308,12 @@ const DocsTable$1 = ({
       entity,
       resolved: {
         docsUrl: getRouteToReaderPageFor({
-          namespace: toLowerMaybe((_a = entity.metadata.namespace) != null ? _a : "default"),
-          kind: toLowerMaybe(entity.kind),
-          name: toLowerMaybe(entity.metadata.name)
+          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(", ")
+        ownedByRelationsTitle: ownedByRelations.map((r) => formatEntityRefTitle(r, { defaultKind: "group" })).join(", ")
       }
     };
   });
@@ -358,8 +359,8 @@ const EntityListDocsTable = ({
   actions
 }) => {
   var _a, _b;
-  const {loading, error, entities, filters} = useEntityListProvider();
-  const {isStarredEntity, toggleStarredEntity} = useStarredEntities();
+  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 = [
@@ -386,7 +387,7 @@ const EntityListDocsTable = ({
 EntityListDocsTable.columns = columnFactories;
 EntityListDocsTable.actions = actionFactories;
 
-const TechDocsPageWrapper = ({children}) => {
+const TechDocsPageWrapper = ({ children }) => {
   var _a;
   const configApi = useApi(configApiRef);
   const generatedSubtitle = `Documentation available in ${(_a = configApi.getOptionalString("organization.name")) != null ? _a : "Backstage"}`;
@@ -405,7 +406,7 @@ class TechDocsFilter {
   }
 }
 const TechDocsPicker = () => {
-  const {updateFilters} = useEntityListProvider();
+  const { updateFilters } = useEntityListProvider();
   useEffect(() => {
     updateFilters({
       techdocs: new TechDocsFilter()
@@ -433,7 +434,7 @@ const DocsCardGrid$1 = ({
   entities
 }) => {
   const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const toLowerMaybe = useApi(configApiRef).getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? (str) => str : (str) => str.toLocaleLowerCase();
+  const config = useApi(configApiRef);
   if (!entities)
     return null;
   return /* @__PURE__ */ React.createElement(ItemCardGrid, {
@@ -446,9 +447,9 @@ const DocsCardGrid$1 = ({
       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"),
-        kind: toLowerMaybe(entity.kind),
-        name: toLowerMaybe(entity.metadata.name)
+        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"
@@ -462,7 +463,7 @@ var DocsCardGrid$2 = /*#__PURE__*/Object.freeze({
 });
 
 const EntityListDocsGrid = () => {
-  const {loading, error, entities} = useEntityListProvider();
+  const { loading, error, entities } = useEntityListProvider();
   if (error) {
     return /* @__PURE__ */ React.createElement(WarningPanel, {
       severity: "error",
@@ -494,7 +495,7 @@ const techdocsPlugin = createPlugin({
         discoveryApi: discoveryApiRef,
         identityApi: identityApiRef
       },
-      factory: ({configApi, discoveryApi, identityApi}) => new TechDocsStorageClient({
+      factory: ({ configApi, discoveryApi, identityApi }) => new TechDocsStorageClient({
         configApi,
         discoveryApi,
         identityApi
@@ -507,7 +508,7 @@ const techdocsPlugin = createPlugin({
         discoveryApi: discoveryApiRef,
         identityApi: identityApiRef
       },
-      factory: ({configApi, discoveryApi, identityApi}) => new TechDocsClient({
+      factory: ({ configApi, discoveryApi, identityApi }) => new TechDocsClient({
         configApi,
         discoveryApi,
         identityApi
@@ -580,7 +581,7 @@ const addBaseUrl = ({
           const newValue = await techdocsStorageApi.getBaseUrl(elemAttribute, entityId, path);
           if (isSvgNeedingInlining(attributeName, elemAttribute, apiOrigin)) {
             try {
-              const svg = await fetch(newValue, {credentials: "include"});
+              const svg = await fetch(newValue, { credentials: "include" });
               const svgContent = await svg.text();
               elem.setAttribute(attributeName, `data:image/svg+xml;base64,${btoa(svgContent)}`);
             } catch (e) {
@@ -763,7 +764,7 @@ const sanitizeDOM = () => {
   };
 };
 
-const injectCss = ({css}) => {
+const injectCss = ({ css }) => {
   return (dom) => {
     dom.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", `<style>${css}</style>`);
     return dom;
@@ -807,7 +808,7 @@ const TechDocsSearchBar = ({
   const {
     term,
     setTerm,
-    result: {loading, value: searchVal}
+    result: { loading, value: searchVal }
   } = useSearch();
   const [options, setOptions] = useState([]);
   useEffect(() => {
@@ -830,7 +831,7 @@ const TechDocsSearchBar = ({
   };
   const handleSelection = (_, selection) => {
     if (selection == null ? void 0 : selection.document) {
-      const {location} = selection.document;
+      const { location } = selection.document;
       navigate(location);
     }
   };
@@ -856,7 +857,7 @@ const TechDocsSearchBar = ({
     noOptionsText: "No results found",
     value: null,
     options,
-    renderOption: ({document}) => /* @__PURE__ */ React.createElement(DocsResultListItem, {
+    renderOption: ({ document }) => /* @__PURE__ */ React.createElement(DocsResultListItem, {
       result: document,
       lineClamp: 3,
       asListItem: false,
@@ -902,7 +903,6 @@ const TechDocsSearch = (props) => {
   }));
 };
 
-const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 const useDrawerStyles = makeStyles((theme) => createStyles({
   paper: {
     width: "100%",
@@ -917,6 +917,9 @@ const useDrawerStyles = makeStyles((theme) => createStyles({
   root: {
     height: "100%",
     overflow: "hidden"
+  },
+  logs: {
+    background: theme.palette.background.default
   }
 }));
 const TechDocsBuildLogsDrawerContent = ({
@@ -924,6 +927,7 @@ const TechDocsBuildLogsDrawerContent = ({
   onClose
 }) => {
   const classes = useDrawerStyles();
+  const logText = buildLog.length === 0 ? "Waiting for logs..." : buildLog.join("\n");
   return /* @__PURE__ */ React.createElement(Grid, {
     container: true,
     direction: "column",
@@ -944,24 +948,19 @@ const TechDocsBuildLogsDrawerContent = ({
     title: "Close the drawer",
     onClick: onClose,
     color: "inherit"
-  }, /* @__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
-  })));
+  }, /* @__PURE__ */ React.createElement(Close, null))), /* @__PURE__ */ React.createElement(LogViewer, {
+    text: logText,
+    classes: { root: classes.logs }
+  }));
 };
-const TechDocsBuildLogs = ({buildLog}) => {
+const TechDocsBuildLogs = ({ buildLog }) => {
   const classes = useDrawerStyles();
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button$1, {
     color: "inherit",
     onClick: () => setOpen(true)
   }, "Show Build Logs"), /* @__PURE__ */ React.createElement(Drawer, {
-    classes: {paper: classes.paper},
+    classes: { paper: classes.paper },
     anchor: "right",
     open,
     onClose: () => setOpen(false)
@@ -971,7 +970,7 @@ const TechDocsBuildLogs = ({buildLog}) => {
   })));
 };
 
-const TechDocsNotFound = ({errorMessage}) => {
+const TechDocsNotFound = ({ errorMessage }) => {
   const techdocsBuilder = useApi(configApiRef).getOptionalString("techdocs.builder");
   let additionalInfo = "";
   if (techdocsBuilder !== "local") {
@@ -1042,7 +1041,7 @@ const TechDocsStateIndicator = () => {
       action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
         buildLog
       }),
-      classes: {message: classes.message}
+      classes: { message: classes.message }
     }, "Building a newer version of this documentation failed.", " ", syncErrorMessage);
   }
   if (state === "CONTENT_NOT_FOUND") {
@@ -1052,7 +1051,7 @@ const TechDocsStateIndicator = () => {
       action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
         buildLog
       }),
-      classes: {message: classes.message}
+      classes: { message: classes.message }
     }, "Building a newer version of this documentation failed.", " ", syncErrorMessage), /* @__PURE__ */ React.createElement(TechDocsNotFound, {
       errorMessage: contentErrorMessage
     }));
@@ -1092,7 +1091,7 @@ function calculateDisplayState({
   return "CONTENT_FRESH";
 }
 function reducer(oldState, action) {
-  const newState = {...oldState};
+  const newState = { ...oldState };
   switch (action.type) {
     case "sync":
       if (action.state === "CHECKING") {
@@ -1134,14 +1133,14 @@ function useReaderState(kind, namespace, name, path) {
     buildLog: []
   });
   const techdocsStorageApi = useApi(techdocsStorageApiRef);
-  const {retry: contentReload} = useAsyncRetry(async () => {
-    dispatch({type: "contentLoading"});
+  const { retry: contentReload } = useAsyncRetry(async () => {
+    dispatch({ type: "contentLoading" });
     try {
-      const entityDocs = await techdocsStorageApi.getEntityDocs({kind, namespace, name}, path);
-      dispatch({type: "content", content: entityDocs, path});
+      const entityDocs = await techdocsStorageApi.getEntityDocs({ kind, namespace, name }, path);
+      dispatch({ type: "content", content: entityDocs, path });
       return entityDocs;
     } catch (e) {
-      dispatch({type: "content", contentError: e, path});
+      dispatch({ type: "content", contentError: e, path });
     }
     return void 0;
   }, [techdocsStorageApi, kind, namespace, name, path]);
@@ -1150,11 +1149,11 @@ function useReaderState(kind, namespace, name, path) {
     reload: () => {
     }
   });
-  contentRef.current = {content: state.content, reload: contentReload};
+  contentRef.current = { content: state.content, reload: contentReload };
   useAsync(async () => {
-    dispatch({type: "sync", state: "CHECKING"});
+    dispatch({ type: "sync", state: "CHECKING" });
     const buildingTimeout = setTimeout(() => {
-      dispatch({type: "sync", state: "BUILDING"});
+      dispatch({ type: "sync", state: "BUILDING" });
     }, 1e3);
     try {
       const result = await techdocsStorageApi.syncEntityDocs({
@@ -1162,19 +1161,19 @@ function useReaderState(kind, namespace, name, path) {
         namespace,
         name
       }, (log) => {
-        dispatch({type: "buildLog", log});
+        dispatch({ type: "buildLog", log });
       });
       switch (result) {
         case "updated":
           if (!contentRef.current.content) {
             contentRef.current.reload();
-            dispatch({type: "sync", state: "BUILD_READY_RELOAD"});
+            dispatch({ type: "sync", state: "BUILD_READY_RELOAD" });
           } else {
-            dispatch({type: "sync", state: "BUILD_READY"});
+            dispatch({ type: "sync", state: "BUILD_READY" });
           }
           break;
         case "cached":
-          dispatch({type: "sync", state: "UP_TO_DATE"});
+          dispatch({ type: "sync", state: "UP_TO_DATE" });
           break;
         default:
           dispatch({
@@ -1185,7 +1184,7 @@ function useReaderState(kind, namespace, name, path) {
           break;
       }
     } catch (e) {
-      dispatch({type: "sync", state: "ERROR", syncError: e});
+      dispatch({ type: "sync", state: "ERROR", syncError: e });
     } finally {
       clearTimeout(buildingTimeout);
     }
@@ -1218,24 +1217,30 @@ 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.createElement(TechDocsReaderContext.Provider, {
     value
   }, children);
 };
-const withTechDocsReaderProvider = (Component) => (props) => /* @__PURE__ */ React.createElement(TechDocsReaderProvider, null, /* @__PURE__ */ React.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 {state, path, content: rawPage} = useTechDocsReader();
+  const { namespace = "", kind = "", name = "" } = entityRef;
+  const { state, path, content: rawPage } = useTechDocsReader();
   const [sidebars, setSidebars] = useState();
   const [dom, setDom] = useState(null);
   const updateSidebarPosition = useCallback(() => {
@@ -1305,6 +1310,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};
@@ -1371,8 +1386,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>');
             }
         `
     })
@@ -1382,9 +1397,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
   ]);
@@ -1429,7 +1446,7 @@ const useTechDocsReaderDom = () => {
       if (!shouldReplaceContent) {
         return;
       }
-      window.scroll({top: 0});
+      window.scroll({ top: 0 });
       const postTransformedDomElement = await postRender(preTransformedDomElement);
       setDom(postTransformedDomElement);
     });
@@ -1447,7 +1464,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(() => {
@@ -1457,7 +1474,7 @@ const TheReader = ({
     if (!dom || !shadowDomRef.current)
       return;
     const shadowDiv = shadowDomRef.current;
-    const shadowRoot = shadowDiv.shadowRoot || shadowDiv.attachShadow({mode: "open"});
+    const shadowRoot = shadowDiv.shadowRoot || shadowDiv.attachShadow({ mode: "open" });
     Array.from(shadowRoot.children).forEach((child) => shadowRoot.removeChild(child));
     shadowRoot.appendChild(dom);
     onReadyRef.current();
@@ -1477,7 +1494,9 @@ const Reader = ({
   onReady = () => {
   },
   withSearch = true
-}) => /* @__PURE__ */ React.createElement(TechDocsReaderProvider, null, /* @__PURE__ */ React.createElement(TheReader, {
+}) => /* @__PURE__ */ React.createElement(TechDocsReaderProvider, {
+  entityRef
+}, /* @__PURE__ */ React.createElement(TheReader, {
   entityRef,
   onReady,
   withSearch
@@ -1488,9 +1507,9 @@ const TechDocsPageHeader = ({
   entityMetadata,
   techDocsMetadata
 }) => {
-  const {name} = entityRef;
-  const {site_name: siteName, site_description: siteDescription} = techDocsMetadata || {};
-  const {locationMetadata, spec} = entityMetadata || {};
+  const { name } = entityRef;
+  const { site_name: siteName, site_description: siteDescription } = techDocsMetadata || {};
+  const { locationMetadata, spec } = entityMetadata || {};
   const lifecycle = spec == null ? void 0 : spec.lifecycle;
   const ownedByRelations = entityMetadata ? getEntityRelations(entityMetadata, RELATION_OWNED_BY) : [];
   const docsRootLink = useRouteRef(rootRouteRef)();
@@ -1518,7 +1537,7 @@ const TechDocsPageHeader = ({
       target: "_blank",
       rel: "noopener noreferrer"
     }, /* @__PURE__ */ React.createElement(CodeIcon, {
-      style: {marginTop: "-25px", fill: "#fff"}
+      style: { marginTop: "-25px", fill: "#fff" }
     }))
   }) : null);
   return /* @__PURE__ */ React.createElement(Header, {
@@ -1532,16 +1551,16 @@ const TechDocsPageHeader = ({
 
 const LegacyTechDocsPage = () => {
   const [documentReady, setDocumentReady] = useState(false);
-  const {namespace, kind, name} = useParams();
+  const { namespace, kind, name } = useParams();
   const techdocsApi = useApi(techdocsApiRef);
-  const {value: techdocsMetadataValue} = useAsync(() => {
+  const { value: techdocsMetadataValue } = useAsync(() => {
     if (documentReady) {
-      return techdocsApi.getTechDocsMetadata({kind, namespace, name});
+      return techdocsApi.getTechDocsMetadata({ kind, namespace, name });
     }
     return Promise.resolve(void 0);
   }, [kind, namespace, name, techdocsApi, documentReady]);
-  const {value: entityMetadataValue, error: entityMetadataError} = useAsync(() => {
-    return techdocsApi.getEntityMetadata({kind, namespace, name});
+  const { value: entityMetadataValue, error: entityMetadataError } = useAsync(() => {
+    return techdocsApi.getEntityMetadata({ kind, namespace, name });
   }, [kind, namespace, name, techdocsApi]);
   const onReady = useCallback(() => {
     setDocumentReady(true);
@@ -1573,19 +1592,19 @@ const LegacyTechDocsPage = () => {
   })));
 };
 
-const TechDocsPage = ({children}) => {
+const TechDocsPage = ({ children }) => {
   const outlet = useOutlet();
   const [documentReady, setDocumentReady] = useState(false);
-  const {namespace, kind, name} = useParams();
+  const { namespace, kind, name } = useParams();
   const techdocsApi = useApi(techdocsApiRef);
-  const {value: techdocsMetadataValue} = useAsync(() => {
+  const { value: techdocsMetadataValue } = useAsync(() => {
     if (documentReady) {
-      return techdocsApi.getTechDocsMetadata({kind, namespace, name});
+      return techdocsApi.getTechDocsMetadata({ kind, namespace, name });
     }
     return Promise.resolve(void 0);
   }, [kind, namespace, name, techdocsApi, documentReady]);
-  const {value: entityMetadataValue, error: entityMetadataError} = useAsync(() => {
-    return techdocsApi.getEntityMetadata({kind, namespace, name});
+  const { value: entityMetadataValue, error: entityMetadataError } = useAsync(() => {
+    return techdocsApi.getEntityMetadata({ kind, namespace, name });
   }, [kind, namespace, name, techdocsApi]);
   const onReady = useCallback(() => {
     setDocumentReady(true);
@@ -1602,7 +1621,7 @@ const TechDocsPage = ({children}) => {
   }, children instanceof Function ? children({
     techdocsMetadataValue,
     entityMetadataValue,
-    entityRef: {kind, namespace, name},
+    entityRef: { kind, namespace, name },
     onReady
   }) : children);
 };
@@ -1628,7 +1647,7 @@ const CustomPanel = ({
     }
   });
   const classes = useStyles();
-  const {value: user} = useOwnUser();
+  const { value: user } = useOwnUser();
   const Panel = panels[config.panelType];
   const shownEntities = entities.filter((entity) => {
     if (config.filterPredicate === "ownedByUser") {
@@ -1693,7 +1712,7 @@ const TechDocsCustomHome = ({
   return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(HeaderTabs, {
     selectedIndex: selectedTab,
     onChange: (index) => setSelectedTab(index),
-    tabs: tabsConfig.map(({label}, index) => ({
+    tabs: tabsConfig.map(({ label }, index) => ({
       id: index.toString(),
       label
     }))
@@ -1752,14 +1771,15 @@ var TechDocsIndexPage$1 = /*#__PURE__*/Object.freeze({
   TechDocsIndexPage: TechDocsIndexPage
 });
 
-const EntityPageDocs = ({entity}) => {
+const EntityPageDocs = ({ entity }) => {
   var _a;
+  const config = useApi(configApiRef);
   return /* @__PURE__ */ React.createElement(Reader, {
     withSearch: false,
     entityRef: {
-      kind: entity.kind,
-      namespace: (_a = entity.metadata.namespace) != null ? _a : "default",
-      name: entity.metadata.name
+      namespace: toLowerMaybe((_a = entity.metadata.namespace) != null ? _a : "default", config),
+      kind: toLowerMaybe(entity.kind, config),
+      name: toLowerMaybe(entity.metadata.name, config)
     }
   });
 };
@@ -1780,7 +1800,7 @@ const Router = () => {
 };
 const EmbeddedDocsRouter = (_props) => {
   var _a;
-  const {entity} = useEntity();
+  const { entity } = useEntity();
   const projectId = (_a = entity.metadata.annotations) == null ? void 0 : _a[TECHDOCS_ANNOTATION];
   if (!projectId) {
     return /* @__PURE__ */ React.createElement(MissingAnnotationEmptyState, {