@backstage/plugin-techdocs 1.12.3 → 1.12.4-next.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @backstage/plugin-techdocs
 
+## 1.12.4-next.1
+
+### Patch Changes
+
+- fffe3c0: Fixed double scrollbar issue that would appear on the Entity TechDocs view page that would stop the page from full scrolling to the top when navigating to a new page
+- Updated dependencies
+  - @backstage/core-components@0.16.5-next.0
+  - @backstage/plugin-catalog-react@1.16.0-next.1
+  - @backstage/core-compat-api@0.3.7-next.1
+  - @backstage/catalog-client@1.9.1
+  - @backstage/catalog-model@1.7.3
+  - @backstage/config@1.3.2
+  - @backstage/core-plugin-api@1.10.4
+  - @backstage/errors@1.2.7
+  - @backstage/frontend-plugin-api@0.9.6-next.1
+  - @backstage/integration@1.16.1
+  - @backstage/integration-react@1.2.4
+  - @backstage/theme@0.6.4
+  - @backstage/plugin-auth-react@0.1.13-next.0
+  - @backstage/plugin-search-common@1.2.17
+  - @backstage/plugin-search-react@1.8.7-next.1
+  - @backstage/plugin-techdocs-common@0.1.0
+  - @backstage/plugin-techdocs-react@1.2.15-next.1
+
+## 1.12.4-next.0
+
+### Patch Changes
+
+- 065e6b9: Excludes svg styling from sanitization
+- b5a8208: Added `TechDocsAddonsBlueprint` extension to allow adding of techdocs addons.
+- ed1cb3e: Adds the page name of techdoc to the document's title.
+- fe4abb8: Updates logic to check for SVG sources when inlining svgs.
+- Updated dependencies
+  - @backstage/plugin-search-react@1.8.7-next.0
+  - @backstage/plugin-catalog-react@1.16.0-next.0
+  - @backstage/plugin-techdocs-react@1.2.15-next.0
+  - @backstage/frontend-plugin-api@0.9.6-next.0
+  - @backstage/core-compat-api@0.3.7-next.0
+  - @backstage/integration-react@1.2.4
+
 ## 1.12.3
 
 ### Patch Changes

package/dist/Router.esm.js

@@ -16,6 +16,22 @@ const Router = () => {
     }
   ));
 };
+const TechDocsReaderRouter = (props) => {
+  const { children } = props;
+  const element = useRoutes([
+    {
+      path: "*",
+      element: /* @__PURE__ */ React.createElement(TechDocsReaderPage, null),
+      children: [
+        {
+          path: "*",
+          element: children
+        }
+      ]
+    }
+  ]);
+  return element;
+};
 const EmbeddedDocsRouter = (props) => {
   const { children, emptyState, withSearch = true } = props;
   const { entity } = useEntity();
@@ -44,5 +60,5 @@ const LegacyEmbeddedDocsRouter = ({
   return /* @__PURE__ */ React.createElement(EmbeddedDocsRouter, { children, withSearch });
 };
 
-export { EmbeddedDocsRouter, LegacyEmbeddedDocsRouter, Router, isTechDocsAvailable };
+export { EmbeddedDocsRouter, LegacyEmbeddedDocsRouter, Router, TechDocsReaderRouter, isTechDocsAvailable };
 //# sourceMappingURL=Router.esm.js.map

package/dist/Router.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Router.esm.js","sources":["../src/Router.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { PropsWithChildren } from 'react';\nimport { Route, Routes, useRoutes } from 'react-router-dom';\n\nimport { Entity } from '@backstage/catalog-model';\nimport { EntityPageDocs } from './EntityPageDocs';\nimport { TechDocsIndexPage } from './home/components/TechDocsIndexPage';\nimport { TechDocsReaderPage } from './reader/components/TechDocsReaderPage';\nimport {\n  useEntity,\n  MissingAnnotationEmptyState,\n} from '@backstage/plugin-catalog-react';\nimport {\n  TECHDOCS_ANNOTATION,\n  TECHDOCS_EXTERNAL_ANNOTATION,\n} from '@backstage/plugin-techdocs-common';\n\n/**\n * Helper that takes in entity and returns true/false if TechDocs is available for the entity\n *\n * @public\n */\nexport const isTechDocsAvailable = (entity: Entity) =>\n  Boolean(entity?.metadata?.annotations?.[TECHDOCS_ANNOTATION]) ||\n  Boolean(entity?.metadata?.annotations?.[TECHDOCS_EXTERNAL_ANNOTATION]);\n\n/**\n * Responsible for registering routes for TechDocs, TechDocs Homepage and separate TechDocs page\n *\n * @public\n */\nexport const Router = () => {\n  return (\n    <Routes>\n      <Route path=\"/\" element={<TechDocsIndexPage />} />\n      <Route\n        path=\"/:namespace/:kind/:name/*\"\n        element={<TechDocsReaderPage />}\n      />\n    </Routes>\n  );\n};\n\nexport const EmbeddedDocsRouter = (\n  props: PropsWithChildren<{\n    emptyState?: React.ReactElement;\n    withSearch?: boolean;\n  }>,\n) => {\n  const { children, emptyState, withSearch = true } = props;\n  const { entity } = useEntity();\n\n  // Using objects instead of <Route> elements, otherwise \"outlet\" will be null on sub-pages and add-ons won't render\n  const element = useRoutes([\n    {\n      path: '/*',\n      element: <EntityPageDocs entity={entity} withSearch={withSearch} />,\n      children: [\n        {\n          path: '*',\n          element: children,\n        },\n      ],\n    },\n  ]);\n\n  const projectId =\n    entity.metadata.annotations?.[TECHDOCS_ANNOTATION] ||\n    entity.metadata.annotations?.[TECHDOCS_EXTERNAL_ANNOTATION];\n\n  if (!projectId) {\n    return (\n      emptyState ?? (\n        <MissingAnnotationEmptyState annotation={[TECHDOCS_ANNOTATION]} />\n      )\n    );\n  }\n\n  return element;\n};\n\n/**\n * Responsible for registering route to view docs on Entity page\n *\n * @public\n */\nexport const LegacyEmbeddedDocsRouter = ({\n  children,\n  withSearch = true,\n}: PropsWithChildren<{ withSearch?: boolean }>) => {\n  // Wrap the Router to avoid exposing the emptyState prop in the non-alpha\n  // public API and make it easier for us to change later.\n  return <EmbeddedDocsRouter children={children} withSearch={withSearch} />;\n};\n"],"names":[],"mappings":";;;;;;;;AAqCO,MAAM,mBAAsB,GAAA,CAAC,MAClC,KAAA,OAAA,CAAQ,QAAQ,QAAU,EAAA,WAAA,GAAc,mBAAmB,CAAC,KAC5D,OAAQ,CAAA,MAAA,EAAQ,QAAU,EAAA,WAAA,GAAc,4BAA4B,CAAC;AAOhE,MAAM,SAAS,MAAM;AAC1B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,MACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,EAAA,EAAA,IAAA,EAAK,KAAI,OAAS,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAkB,EAAA,IAAA,CAAA,EAAI,CAChD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,2BAAA;AAAA,MACL,OAAA,sCAAU,kBAAmB,EAAA,IAAA;AAAA;AAAA,GAEjC,CAAA;AAEJ;AAEa,MAAA,kBAAA,GAAqB,CAChC,KAIG,KAAA;AACH,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,UAAA,GAAa,MAAS,GAAA,KAAA;AACpD,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAG7B,EAAA,MAAM,UAAU,SAAU,CAAA;AAAA,IACxB;AAAA,MACE,IAAM,EAAA,IAAA;AAAA,MACN,OAAS,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,MAAA,EAAgB,UAAwB,EAAA,CAAA;AAAA,MACjE,QAAU,EAAA;AAAA,QACR;AAAA,UACE,IAAM,EAAA,GAAA;AAAA,UACN,OAAS,EAAA;AAAA;AACX;AACF;AACF,GACD,CAAA;AAED,EAAM,MAAA,SAAA,GACJ,OAAO,QAAS,CAAA,WAAA,GAAc,mBAAmB,CACjD,IAAA,MAAA,CAAO,QAAS,CAAA,WAAA,GAAc,4BAA4B,CAAA;AAE5D,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAA,OACE,8BACG,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA,EAA4B,UAAY,EAAA,CAAC,mBAAmB,CAAG,EAAA,CAAA;AAAA;AAKtE,EAAO,OAAA,OAAA;AACT;AAOO,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA,UAAa,GAAA;AACf,CAAmD,KAAA;AAGjD,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,kBAAmB,EAAA,EAAA,QAAA,EAAoB,UAAwB,EAAA,CAAA;AACzE;;;;"}
+{"version":3,"file":"Router.esm.js","sources":["../src/Router.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { PropsWithChildren } from 'react';\nimport { Route, Routes, useRoutes } from 'react-router-dom';\n\nimport { Entity } from '@backstage/catalog-model';\nimport { EntityPageDocs } from './EntityPageDocs';\nimport { TechDocsIndexPage } from './home/components/TechDocsIndexPage';\nimport { TechDocsReaderPage } from './reader/components/TechDocsReaderPage';\nimport {\n  useEntity,\n  MissingAnnotationEmptyState,\n} from '@backstage/plugin-catalog-react';\nimport {\n  TECHDOCS_ANNOTATION,\n  TECHDOCS_EXTERNAL_ANNOTATION,\n} from '@backstage/plugin-techdocs-common';\n\n/**\n * Helper that takes in entity and returns true/false if TechDocs is available for the entity\n *\n * @public\n */\nexport const isTechDocsAvailable = (entity: Entity) =>\n  Boolean(entity?.metadata?.annotations?.[TECHDOCS_ANNOTATION]) ||\n  Boolean(entity?.metadata?.annotations?.[TECHDOCS_EXTERNAL_ANNOTATION]);\n\n/**\n * Responsible for registering routes for TechDocs, TechDocs Homepage and separate TechDocs page\n *\n * @public\n */\nexport const Router = () => {\n  return (\n    <Routes>\n      <Route path=\"/\" element={<TechDocsIndexPage />} />\n      <Route\n        path=\"/:namespace/:kind/:name/*\"\n        element={<TechDocsReaderPage />}\n      />\n    </Routes>\n  );\n};\n\nexport const TechDocsReaderRouter = (props: PropsWithChildren) => {\n  const { children } = props;\n\n  // Using objects instead of <Route> elements, otherwise \"outlet\" will be null on sub-pages and add-ons won't render\n  const element = useRoutes([\n    {\n      path: '*',\n      element: <TechDocsReaderPage />,\n      children: [\n        {\n          path: '*',\n          element: children,\n        },\n      ],\n    },\n  ]);\n\n  return element;\n};\n\nexport const EmbeddedDocsRouter = (\n  props: PropsWithChildren<{\n    emptyState?: React.ReactElement;\n    withSearch?: boolean;\n  }>,\n) => {\n  const { children, emptyState, withSearch = true } = props;\n  const { entity } = useEntity();\n\n  // Using objects instead of <Route> elements, otherwise \"outlet\" will be null on sub-pages and add-ons won't render\n  const element = useRoutes([\n    {\n      path: '/*',\n      element: <EntityPageDocs entity={entity} withSearch={withSearch} />,\n      children: [\n        {\n          path: '*',\n          element: children,\n        },\n      ],\n    },\n  ]);\n\n  const projectId =\n    entity.metadata.annotations?.[TECHDOCS_ANNOTATION] ||\n    entity.metadata.annotations?.[TECHDOCS_EXTERNAL_ANNOTATION];\n\n  if (!projectId) {\n    return (\n      emptyState ?? (\n        <MissingAnnotationEmptyState annotation={[TECHDOCS_ANNOTATION]} />\n      )\n    );\n  }\n  return element;\n};\n\n/**\n * Responsible for registering route to view docs on Entity page\n *\n * @public\n */\nexport const LegacyEmbeddedDocsRouter = ({\n  children,\n  withSearch = true,\n}: PropsWithChildren<{ withSearch?: boolean }>) => {\n  // Wrap the Router to avoid exposing the emptyState prop in the non-alpha\n  // public API and make it easier for us to change later.\n  return <EmbeddedDocsRouter children={children} withSearch={withSearch} />;\n};\n"],"names":[],"mappings":";;;;;;;;AAqCO,MAAM,mBAAsB,GAAA,CAAC,MAClC,KAAA,OAAA,CAAQ,QAAQ,QAAU,EAAA,WAAA,GAAc,mBAAmB,CAAC,KAC5D,OAAQ,CAAA,MAAA,EAAQ,QAAU,EAAA,WAAA,GAAc,4BAA4B,CAAC;AAOhE,MAAM,SAAS,MAAM;AAC1B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,MACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,EAAA,EAAA,IAAA,EAAK,KAAI,OAAS,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAkB,EAAA,IAAA,CAAA,EAAI,CAChD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,2BAAA;AAAA,MACL,OAAA,sCAAU,kBAAmB,EAAA,IAAA;AAAA;AAAA,GAEjC,CAAA;AAEJ;AAEa,MAAA,oBAAA,GAAuB,CAAC,KAA6B,KAAA;AAChE,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAGrB,EAAA,MAAM,UAAU,SAAU,CAAA;AAAA,IACxB;AAAA,MACE,IAAM,EAAA,GAAA;AAAA,MACN,OAAA,sCAAU,kBAAmB,EAAA,IAAA,CAAA;AAAA,MAC7B,QAAU,EAAA;AAAA,QACR;AAAA,UACE,IAAM,EAAA,GAAA;AAAA,UACN,OAAS,EAAA;AAAA;AACX;AACF;AACF,GACD,CAAA;AAED,EAAO,OAAA,OAAA;AACT;AAEa,MAAA,kBAAA,GAAqB,CAChC,KAIG,KAAA;AACH,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,UAAA,GAAa,MAAS,GAAA,KAAA;AACpD,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAG7B,EAAA,MAAM,UAAU,SAAU,CAAA;AAAA,IACxB;AAAA,MACE,IAAM,EAAA,IAAA;AAAA,MACN,OAAS,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,MAAA,EAAgB,UAAwB,EAAA,CAAA;AAAA,MACjE,QAAU,EAAA;AAAA,QACR;AAAA,UACE,IAAM,EAAA,GAAA;AAAA,UACN,OAAS,EAAA;AAAA;AACX;AACF;AACF,GACD,CAAA;AAED,EAAM,MAAA,SAAA,GACJ,OAAO,QAAS,CAAA,WAAA,GAAc,mBAAmB,CACjD,IAAA,MAAA,CAAO,QAAS,CAAA,WAAA,GAAc,4BAA4B,CAAA;AAE5D,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAA,OACE,8BACG,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA,EAA4B,UAAY,EAAA,CAAC,mBAAmB,CAAG,EAAA,CAAA;AAAA;AAItE,EAAO,OAAA,OAAA;AACT;AAOO,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA,UAAa,GAAA;AACf,CAAmD,KAAA;AAGjD,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,kBAAmB,EAAA,EAAA,QAAA,EAAoB,UAAwB,EAAA,CAAA;AACzE;;;;"}

package/dist/alpha.d.ts

@@ -1,4 +1,5 @@
 import * as _backstage_catalog_model from '@backstage/catalog-model';
+import * as _backstage_plugin_techdocs_react from '@backstage/plugin-techdocs-react';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
 import * as _backstage_plugin_search_react_alpha from '@backstage/plugin-search-react/alpha';
@@ -46,25 +47,6 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
     }>;
     entityContent: _backstage_frontend_plugin_api.RouteRef<undefined>;
 }, {}, {
-    "page:techdocs": _backstage_frontend_plugin_api.ExtensionDefinition<{
-        kind: "page";
-        name: undefined;
-        config: {
-            path: string | undefined;
-        };
-        configInput: {
-            path?: string | undefined;
-        };
-        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<React__default.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
-            optional: true;
-        }>;
-        inputs: {};
-        params: {
-            defaultPath: string;
-            loader: () => Promise<JSX.Element>;
-            routeRef?: _backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams> | undefined;
-        };
-    }>;
     "nav-item:techdocs": _backstage_frontend_plugin_api.ExtensionDefinition<{
         kind: "nav-item";
         name: undefined;
@@ -104,6 +86,25 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
             factory: _backstage_frontend_plugin_api.AnyApiFactory;
         };
     }>;
+    "page:techdocs": _backstage_frontend_plugin_api.ExtensionDefinition<{
+        kind: "page";
+        name: undefined;
+        config: {
+            path: string | undefined;
+        };
+        configInput: {
+            path?: string | undefined;
+        };
+        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<React__default.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+            optional: true;
+        }>;
+        inputs: {};
+        params: {
+            defaultPath: string;
+            loader: () => Promise<JSX.Element>;
+            routeRef?: _backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams> | undefined;
+        };
+    }>;
     "search-result-list-item:techdocs": _backstage_frontend_plugin_api.ExtensionDefinition<{
         config: {
             title: string | undefined;
@@ -136,8 +137,6 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
         params: _backstage_plugin_search_react_alpha.SearchResultListItemBlueprintParams;
     }>;
     "page:techdocs/reader": _backstage_frontend_plugin_api.ExtensionDefinition<{
-        kind: "page";
-        name: "reader";
         config: {
             path: string | undefined;
         };
@@ -147,7 +146,14 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
         output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<React__default.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
             optional: true;
         }>;
-        inputs: {};
+        inputs: {
+            addons: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_plugin_techdocs_react.TechDocsAddonOptions, "techdocs.addon", {}>, {
+                singleton: false;
+                optional: false;
+            }>;
+        };
+        kind: "page";
+        name: "reader";
         params: {
             defaultPath: string;
             loader: () => Promise<JSX.Element>;
@@ -159,11 +165,13 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
             path: string | undefined;
             title: string | undefined;
             filter: string | undefined;
+            group: string | false | undefined;
         };
         configInput: {
             filter?: string | undefined;
             title?: string | undefined;
             path?: string | undefined;
+            group?: string | false | undefined;
         };
         output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<React__default.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
             optional: true;
@@ -171,8 +179,14 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
             optional: true;
         }> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "catalog.entity-filter-expression", {
             optional: true;
+        }> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "catalog.entity-content-group", {
+            optional: true;
         }>;
         inputs: {
+            addons: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_plugin_techdocs_react.TechDocsAddonOptions, "techdocs.addon", {}>, {
+                singleton: false;
+                optional: false;
+            }>;
             emptyState: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<React__default.JSX.Element, "core.reactElement", {
                 optional: true;
             }>, {
@@ -186,6 +200,7 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
             loader: () => Promise<JSX.Element>;
             defaultPath: string;
             defaultTitle: string;
+            defaultGroup?: (string & {}) | "documentation" | "development" | "deployment" | "observability" | undefined;
             routeRef?: _backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams> | undefined;
             filter?: string | ((entity: _backstage_catalog_model.Entity) => boolean) | undefined;
         };

package/dist/alpha.esm.js

@@ -5,9 +5,23 @@ import { createApiFactory, configApiRef, discoveryApiRef, fetchApiRef } from '@b
 import { compatWrapper, convertLegacyRouteRef, convertLegacyRouteRefs } from '@backstage/core-compat-api';
 import { EntityContentBlueprint } from '@backstage/plugin-catalog-react/alpha';
 import { SearchResultListItemBlueprint } from '@backstage/plugin-search-react/alpha';
-import { techdocsStorageApiRef, techdocsApiRef } from '@backstage/plugin-techdocs-react';
+import { AddonBlueprint, attachTechDocsAddonComponentData } from '@backstage/plugin-techdocs-react/alpha';
 import { TechDocsStorageClient, TechDocsClient } from './client.esm.js';
 import { rootRouteRef, rootDocsRouteRef, rootCatalogDocsRouteRef } from './routes.esm.js';
+import './reader/components/TechDocsReaderProvider.esm.js';
+import { TechDocsReaderLayout } from './reader/components/TechDocsReaderPage/TechDocsReaderPage.esm.js';
+import 'react-helmet';
+import '@material-ui/core/Grid';
+import '@material-ui/lab/Skeleton';
+import '@material-ui/icons/Code';
+import { techdocsStorageApiRef, techdocsApiRef, TechDocsAddons } from '@backstage/plugin-techdocs-react';
+import '@backstage/plugin-catalog-react';
+import '@backstage/catalog-model';
+import '@backstage/core-components';
+import 'lodash/capitalize';
+import 'react-router-dom';
+import './reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.esm.js';
+import './reader/components/TechDocsReaderPageSubheader/TechDocsReaderPageSubheader.esm.js';
 
 const techDocsStorageApi = ApiBlueprint.make({
   name: "storage",
@@ -74,18 +88,32 @@ const techDocsPage = PageBlueprint.make({
     )
   }
 });
-const techDocsReaderPage = PageBlueprint.make({
+const techDocsReaderPage = PageBlueprint.makeWithOverrides({
   name: "reader",
-  params: {
-    defaultPath: "/docs/:namespace/:kind/:name",
-    routeRef: convertLegacyRouteRef(rootDocsRouteRef),
-    loader: () => import('./reader/components/TechDocsReaderPage/index.esm.js').then(
-      (m) => compatWrapper(/* @__PURE__ */ React.createElement(m.TechDocsReaderPage, null))
-    )
+  inputs: {
+    addons: createExtensionInput([AddonBlueprint.dataRefs.addon])
+  },
+  factory(originalFactory, { inputs }) {
+    const addons = inputs.addons.map((output) => {
+      const options = output.get(AddonBlueprint.dataRefs.addon);
+      const Addon = options.component;
+      attachTechDocsAddonComponentData(Addon, options);
+      return /* @__PURE__ */ React.createElement(Addon, { key: options.name });
+    });
+    return originalFactory({
+      defaultPath: "/docs/:namespace/:kind/:name",
+      routeRef: convertLegacyRouteRef(rootDocsRouteRef),
+      loader: async () => await import('./Router.esm.js').then(({ TechDocsReaderRouter }) => {
+        return compatWrapper(
+          /* @__PURE__ */ React.createElement(TechDocsReaderRouter, null, /* @__PURE__ */ React.createElement(TechDocsReaderLayout, null), /* @__PURE__ */ React.createElement(TechDocsAddons, null, addons))
+        );
+      })
+    });
   }
 });
 const techDocsEntityContent = EntityContentBlueprint.makeWithOverrides({
   inputs: {
+    addons: createExtensionInput([AddonBlueprint.dataRefs.addon]),
     emptyState: createExtensionInput(
       [coreExtensionData.reactElement.optional()],
       {
@@ -100,18 +128,25 @@ const techDocsEntityContent = EntityContentBlueprint.makeWithOverrides({
         defaultPath: "docs",
         defaultTitle: "TechDocs",
         routeRef: convertLegacyRouteRef(rootCatalogDocsRouteRef),
-        loader: () => import('./Router.esm.js').then(
-          ({ EmbeddedDocsRouter }) => compatWrapper(
+        loader: () => import('./Router.esm.js').then(({ EmbeddedDocsRouter }) => {
+          const addons = context.inputs.addons.map((output) => {
+            const options = output.get(AddonBlueprint.dataRefs.addon);
+            const Addon = options.component;
+            attachTechDocsAddonComponentData(Addon, options);
+            return /* @__PURE__ */ React.createElement(Addon, { key: options.name });
+          });
+          return compatWrapper(
             /* @__PURE__ */ React.createElement(
               EmbeddedDocsRouter,
               {
                 emptyState: context.inputs.emptyState?.get(
                   coreExtensionData.reactElement
                 )
-              }
+              },
+              /* @__PURE__ */ React.createElement(TechDocsAddons, null, addons)
             )
-          )
-        )
+          );
+        })
       },
       context
     );

package/dist/alpha.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport LibraryBooks from '@material-ui/icons/LibraryBooks';\nimport {\n  createFrontendPlugin,\n  ApiBlueprint,\n  PageBlueprint,\n  NavItemBlueprint,\n  createExtensionInput,\n  coreExtensionData,\n  createExtension,\n} from '@backstage/frontend-plugin-api';\nimport {\n  configApiRef,\n  createApiFactory,\n  discoveryApiRef,\n  fetchApiRef,\n} from '@backstage/core-plugin-api';\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n  convertLegacyRouteRefs,\n} from '@backstage/core-compat-api';\nimport { EntityContentBlueprint } from '@backstage/plugin-catalog-react/alpha';\nimport { SearchResultListItemBlueprint } from '@backstage/plugin-search-react/alpha';\nimport {\n  techdocsApiRef,\n  techdocsStorageApiRef,\n} from '@backstage/plugin-techdocs-react';\nimport { TechDocsClient, TechDocsStorageClient } from './client';\nimport {\n  rootCatalogDocsRouteRef,\n  rootDocsRouteRef,\n  rootRouteRef,\n} from './routes';\n\n/** @alpha */\nconst techDocsStorageApi = ApiBlueprint.make({\n  name: 'storage',\n  params: {\n    factory: createApiFactory({\n      api: techdocsStorageApiRef,\n      deps: {\n        configApi: configApiRef,\n        discoveryApi: discoveryApiRef,\n        fetchApi: fetchApiRef,\n      },\n      factory: ({ configApi, discoveryApi, fetchApi }) =>\n        new TechDocsStorageClient({\n          configApi,\n          discoveryApi,\n          fetchApi,\n        }),\n    }),\n  },\n});\n\n/** @alpha */\nconst techDocsClientApi = ApiBlueprint.make({\n  params: {\n    factory: createApiFactory({\n      api: techdocsApiRef,\n      deps: {\n        configApi: configApiRef,\n        discoveryApi: discoveryApiRef,\n        fetchApi: fetchApiRef,\n      },\n      factory: ({ configApi, discoveryApi, fetchApi }) =>\n        new TechDocsClient({\n          configApi,\n          discoveryApi,\n          fetchApi,\n        }),\n    }),\n  },\n});\n\n/** @alpha */\nexport const techDocsSearchResultListItemExtension =\n  SearchResultListItemBlueprint.makeWithOverrides({\n    config: {\n      schema: {\n        title: z => z.string().optional(),\n        lineClamp: z => z.number().default(5),\n        asLink: z => z.boolean().default(true),\n        asListItem: z => z.boolean().default(true),\n      },\n    },\n    factory(originalFactory, { config }) {\n      return originalFactory({\n        predicate: result => result.type === 'techdocs',\n        component: async () => {\n          const { TechDocsSearchResultListItem } = await import(\n            './search/components/TechDocsSearchResultListItem'\n          );\n          return props =>\n            compatWrapper(\n              <TechDocsSearchResultListItem {...props} {...config} />,\n            );\n        },\n      });\n    },\n  });\n\n/**\n * Responsible for rendering the provided router element\n *\n * @alpha\n */\nconst techDocsPage = PageBlueprint.make({\n  params: {\n    defaultPath: '/docs',\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n    loader: () =>\n      import('./home/components/TechDocsIndexPage').then(m =>\n        compatWrapper(<m.TechDocsIndexPage />),\n      ),\n  },\n});\n\n/**\n * Component responsible for composing a TechDocs reader page experience\n *\n * @alpha\n */\nconst techDocsReaderPage = PageBlueprint.make({\n  name: 'reader',\n  params: {\n    defaultPath: '/docs/:namespace/:kind/:name',\n    routeRef: convertLegacyRouteRef(rootDocsRouteRef),\n    loader: () =>\n      import('./reader/components/TechDocsReaderPage').then(m =>\n        compatWrapper(<m.TechDocsReaderPage />),\n      ),\n  },\n});\n\n/**\n * Component responsible for rendering techdocs on entity pages\n *\n * @alpha\n */\nconst techDocsEntityContent = EntityContentBlueprint.makeWithOverrides({\n  inputs: {\n    emptyState: createExtensionInput(\n      [coreExtensionData.reactElement.optional()],\n      {\n        singleton: true,\n        optional: true,\n      },\n    ),\n  },\n  factory(originalFactory, context) {\n    return originalFactory(\n      {\n        defaultPath: 'docs',\n        defaultTitle: 'TechDocs',\n        routeRef: convertLegacyRouteRef(rootCatalogDocsRouteRef),\n        loader: () =>\n          import('./Router').then(({ EmbeddedDocsRouter }) =>\n            compatWrapper(\n              <EmbeddedDocsRouter\n                emptyState={context.inputs.emptyState?.get(\n                  coreExtensionData.reactElement,\n                )}\n              />,\n            ),\n          ),\n      },\n      context,\n    );\n  },\n});\n\nconst techDocsEntityContentEmptyState = createExtension({\n  kind: 'empty-state',\n  name: 'entity-content',\n  attachTo: { id: 'entity-content:techdocs', input: 'emptyState' },\n  output: [coreExtensionData.reactElement.optional()],\n  factory: () => [],\n});\n\n/** @alpha */\nconst techDocsNavItem = NavItemBlueprint.make({\n  params: {\n    icon: LibraryBooks,\n    title: 'Docs',\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n  },\n});\n\n/** @alpha */\nexport default createFrontendPlugin({\n  id: 'techdocs',\n  extensions: [\n    techDocsClientApi,\n    techDocsStorageApi,\n    techDocsNavItem,\n    techDocsPage,\n    techDocsReaderPage,\n    techDocsEntityContent,\n    techDocsEntityContentEmptyState,\n    techDocsSearchResultListItemExtension,\n  ],\n  routes: convertLegacyRouteRefs({\n    root: rootRouteRef,\n    docRoot: rootDocsRouteRef,\n    entityContent: rootCatalogDocsRouteRef,\n  }),\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport LibraryBooks from '@material-ui/icons/LibraryBooks';\nimport {\n  createFrontendPlugin,\n  ApiBlueprint,\n  PageBlueprint,\n  NavItemBlueprint,\n  createExtensionInput,\n  coreExtensionData,\n  createExtension,\n} from '@backstage/frontend-plugin-api';\nimport {\n  configApiRef,\n  createApiFactory,\n  discoveryApiRef,\n  fetchApiRef,\n} from '@backstage/core-plugin-api';\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n  convertLegacyRouteRefs,\n} from '@backstage/core-compat-api';\nimport { EntityContentBlueprint } from '@backstage/plugin-catalog-react/alpha';\nimport { SearchResultListItemBlueprint } from '@backstage/plugin-search-react/alpha';\nimport { AddonBlueprint } from '@backstage/plugin-techdocs-react/alpha';\nimport { TechDocsClient, TechDocsStorageClient } from './client';\nimport {\n  rootCatalogDocsRouteRef,\n  rootDocsRouteRef,\n  rootRouteRef,\n} from './routes';\nimport { TechDocsReaderLayout } from './reader';\nimport { attachTechDocsAddonComponentData } from '@backstage/plugin-techdocs-react/alpha';\nimport {\n  TechDocsAddons,\n  techdocsApiRef,\n  techdocsStorageApiRef,\n} from '@backstage/plugin-techdocs-react';\n\n/** @alpha */\nconst techDocsStorageApi = ApiBlueprint.make({\n  name: 'storage',\n  params: {\n    factory: createApiFactory({\n      api: techdocsStorageApiRef,\n      deps: {\n        configApi: configApiRef,\n        discoveryApi: discoveryApiRef,\n        fetchApi: fetchApiRef,\n      },\n      factory: ({ configApi, discoveryApi, fetchApi }) =>\n        new TechDocsStorageClient({\n          configApi,\n          discoveryApi,\n          fetchApi,\n        }),\n    }),\n  },\n});\n\n/** @alpha */\nconst techDocsClientApi = ApiBlueprint.make({\n  params: {\n    factory: createApiFactory({\n      api: techdocsApiRef,\n      deps: {\n        configApi: configApiRef,\n        discoveryApi: discoveryApiRef,\n        fetchApi: fetchApiRef,\n      },\n      factory: ({ configApi, discoveryApi, fetchApi }) =>\n        new TechDocsClient({\n          configApi,\n          discoveryApi,\n          fetchApi,\n        }),\n    }),\n  },\n});\n\n/** @alpha */\nexport const techDocsSearchResultListItemExtension =\n  SearchResultListItemBlueprint.makeWithOverrides({\n    config: {\n      schema: {\n        title: z => z.string().optional(),\n        lineClamp: z => z.number().default(5),\n        asLink: z => z.boolean().default(true),\n        asListItem: z => z.boolean().default(true),\n      },\n    },\n    factory(originalFactory, { config }) {\n      return originalFactory({\n        predicate: result => result.type === 'techdocs',\n        component: async () => {\n          const { TechDocsSearchResultListItem } = await import(\n            './search/components/TechDocsSearchResultListItem'\n          );\n          return props =>\n            compatWrapper(\n              <TechDocsSearchResultListItem {...props} {...config} />,\n            );\n        },\n      });\n    },\n  });\n\n/**\n * Responsible for rendering the provided router element\n *\n * @alpha\n */\nconst techDocsPage = PageBlueprint.make({\n  params: {\n    defaultPath: '/docs',\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n    loader: () =>\n      import('./home/components/TechDocsIndexPage').then(m =>\n        compatWrapper(<m.TechDocsIndexPage />),\n      ),\n  },\n});\n\n/**\n * Component responsible for composing a TechDocs reader page experience\n *\n * @alpha\n */\nconst techDocsReaderPage = PageBlueprint.makeWithOverrides({\n  name: 'reader',\n  inputs: {\n    addons: createExtensionInput([AddonBlueprint.dataRefs.addon]),\n  },\n  factory(originalFactory, { inputs }) {\n    const addons = inputs.addons.map(output => {\n      const options = output.get(AddonBlueprint.dataRefs.addon);\n      const Addon = options.component;\n      attachTechDocsAddonComponentData(Addon, options);\n      return <Addon key={options.name} />;\n    });\n\n    return originalFactory({\n      defaultPath: '/docs/:namespace/:kind/:name',\n      routeRef: convertLegacyRouteRef(rootDocsRouteRef),\n      loader: async () =>\n        await import('./Router').then(({ TechDocsReaderRouter }) => {\n          return compatWrapper(\n            <TechDocsReaderRouter>\n              <TechDocsReaderLayout />\n              <TechDocsAddons>{addons}</TechDocsAddons>\n            </TechDocsReaderRouter>,\n          );\n        }),\n    });\n  },\n});\n\n/**\n * Component responsible for rendering techdocs on entity pages\n *\n * @alpha\n */\nconst techDocsEntityContent = EntityContentBlueprint.makeWithOverrides({\n  inputs: {\n    addons: createExtensionInput([AddonBlueprint.dataRefs.addon]),\n    emptyState: createExtensionInput(\n      [coreExtensionData.reactElement.optional()],\n      {\n        singleton: true,\n        optional: true,\n      },\n    ),\n  },\n  factory(originalFactory, context) {\n    return originalFactory(\n      {\n        defaultPath: 'docs',\n        defaultTitle: 'TechDocs',\n        routeRef: convertLegacyRouteRef(rootCatalogDocsRouteRef),\n        loader: () =>\n          import('./Router').then(({ EmbeddedDocsRouter }) => {\n            const addons = context.inputs.addons.map(output => {\n              const options = output.get(AddonBlueprint.dataRefs.addon);\n              const Addon = options.component;\n              attachTechDocsAddonComponentData(Addon, options);\n              return <Addon key={options.name} />;\n            });\n            return compatWrapper(\n              <EmbeddedDocsRouter\n                emptyState={context.inputs.emptyState?.get(\n                  coreExtensionData.reactElement,\n                )}\n              >\n                <TechDocsAddons>{addons}</TechDocsAddons>\n              </EmbeddedDocsRouter>,\n            );\n          }),\n      },\n      context,\n    );\n  },\n});\n\nconst techDocsEntityContentEmptyState = createExtension({\n  kind: 'empty-state',\n  name: 'entity-content',\n  attachTo: { id: 'entity-content:techdocs', input: 'emptyState' },\n  output: [coreExtensionData.reactElement.optional()],\n  factory: () => [],\n});\n\n/** @alpha */\nconst techDocsNavItem = NavItemBlueprint.make({\n  params: {\n    icon: LibraryBooks,\n    title: 'Docs',\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n  },\n});\n\n/** @alpha */\nexport default createFrontendPlugin({\n  id: 'techdocs',\n  extensions: [\n    techDocsClientApi,\n    techDocsStorageApi,\n    techDocsNavItem,\n    techDocsPage,\n    techDocsReaderPage,\n    techDocsEntityContent,\n    techDocsEntityContentEmptyState,\n    techDocsSearchResultListItemExtension,\n  ],\n  routes: convertLegacyRouteRefs({\n    root: rootRouteRef,\n    docRoot: rootDocsRouteRef,\n    entityContent: rootCatalogDocsRouteRef,\n  }),\n});\n"],"names":[],"mappings":"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"}

package/dist/reader/components/TechDocsReaderPage/TechDocsReaderPage.esm.js

@@ -8,12 +8,16 @@ import { TechDocsReaderPageSubheader } from '../TechDocsReaderPageSubheader/Tech
 import { rootDocsRouteRef } from '../../../routes.esm.js';
 import { useRouteRefParams, getComponentData } from '@backstage/core-plugin-api';
 import { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react';
-import { useTheme, createTheme, ThemeProvider } from '@material-ui/core/styles';
+import { styled, useTheme, createTheme, ThemeProvider } from '@material-ui/core/styles';
 
 const TechDocsReaderLayout = (props) => {
   const { withSearch, withHeader = true } = props;
   return /* @__PURE__ */ React.createElement(Page, { themeId: "documentation" }, withHeader && /* @__PURE__ */ React.createElement(TechDocsReaderPageHeader, null), /* @__PURE__ */ React.createElement(TechDocsReaderPageSubheader, null), /* @__PURE__ */ React.createElement(TechDocsReaderPageContent, { withSearch }));
 };
+const StyledPage = styled(Page)({
+  height: "inherit",
+  overflowY: "visible"
+});
 const TechDocsReaderPage = (props) => {
   const currentTheme = useTheme();
   const readerPageTheme = createTheme({
@@ -33,12 +37,19 @@ const TechDocsReaderPage = (props) => {
     );
     return /* @__PURE__ */ React.createElement(ThemeProvider, { theme: readerPageTheme }, /* @__PURE__ */ React.createElement(CookieAuthRefreshProvider, { pluginId: "techdocs" }, /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, page || /* @__PURE__ */ React.createElement(TechDocsReaderLayout, null))));
   }
-  return /* @__PURE__ */ React.createElement(ThemeProvider, { theme: readerPageTheme }, /* @__PURE__ */ React.createElement(CookieAuthRefreshProvider, { pluginId: "techdocs" }, /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, ({ metadata, entityMetadata, onReady }) => /* @__PURE__ */ React.createElement("div", { className: "techdocs-reader-page" }, /* @__PURE__ */ React.createElement(Page, { themeId: "documentation" }, children instanceof Function ? children({
-    entityRef,
-    techdocsMetadataValue: metadata.value,
-    entityMetadataValue: entityMetadata.value,
-    onReady
-  }) : children)))));
+  return /* @__PURE__ */ React.createElement(ThemeProvider, { theme: readerPageTheme }, /* @__PURE__ */ React.createElement(CookieAuthRefreshProvider, { pluginId: "techdocs" }, /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, ({ metadata, entityMetadata, onReady }) => /* @__PURE__ */ React.createElement(
+    StyledPage,
+    {
+      themeId: "documentation",
+      className: "techdocs-reader-page"
+    },
+    children instanceof Function ? children({
+      entityRef,
+      techdocsMetadataValue: metadata.value,
+      entityMetadataValue: entityMetadata.value,
+      onReady
+    }) : children
+  ))));
 };
 
 export { TechDocsReaderLayout, TechDocsReaderPage };

package/dist/reader/components/TechDocsReaderPage/TechDocsReaderPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TechDocsReaderPage.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { ReactNode, Children, ReactElement } from 'react';\nimport { useOutlet } from 'react-router-dom';\n\nimport { Page } from '@backstage/core-components';\nimport { CompoundEntityRef } from '@backstage/catalog-model';\nimport {\n  TECHDOCS_ADDONS_WRAPPER_KEY,\n  TECHDOCS_ADDONS_KEY,\n  TechDocsReaderPageProvider,\n} from '@backstage/plugin-techdocs-react';\n\nimport { TechDocsReaderPageRenderFunction } from '../../../types';\n\nimport { TechDocsReaderPageContent } from '../TechDocsReaderPageContent';\nimport { TechDocsReaderPageHeader } from '../TechDocsReaderPageHeader';\nimport { TechDocsReaderPageSubheader } from '../TechDocsReaderPageSubheader';\nimport { rootDocsRouteRef } from '../../../routes';\nimport {\n  getComponentData,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\n\nimport { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react';\nimport { ThemeOptions } from '@material-ui/core/styles';\nimport { createTheme, ThemeProvider, useTheme } from '@material-ui/core/styles';\n\n/* An explanation for the multiple ways of customizing the TechDocs reader page\n\nPlease refer to this page on the microsite for the latest recommended approach:\nhttps://backstage.io/docs/features/techdocs/how-to-guides#how-to-customize-the-techdocs-reader-page\n\nThe <TechDocsReaderPage> component is responsible for rendering the <TechDocsReaderPageProvider> and\nits contained version of a <Page>, which in turn renders the <TechDocsReaderPageContent>.\n\nHistorically, there have been different approaches on how this <Page> can be customized, and how the\n<TechDocsReaderPageContent> inside could be exchanged for a custom implementation (which was not\npossible before). Also, the current implementation supports every scenario to avoid breaking default\nconfigurations of TechDocs.\n\nIn particular, there are 4 different TechDocs page configurations:\n\nCONFIGURATION 1: <TechDocsReaderPage> only, no children\n\n<Route path=\"/docs/:namespace/:kind/:name/*\" element={<TechDocsReaderPage />} >\n\nThis is the simplest way to use TechDocs. Only a full page is passed, assuming that it comes with\nits content inside. Since we allowed customizing it, we started providing <TechDocsReaderLayout> as\na default implementation (which contains <TechDocsReaderPageContent>).\n\nCONFIGURATION 2 (not advised): <TechDocsReaderPage> with element children\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={\n    <TechDocsReaderPage>\n      {techdocsPage}\n    </TechDocsReaderPage>\n  }\n/>\n\nPreviously, there were two ways of passing children to <TechDocsReaderPage>: either as elements (as\nshown above), or as a render function (described below in CONFIGURATION 3). The \"techdocsPage\" is\nlocated in packages/app/src/components/techdocs and is the default implementation of the content\ninside.\n\nCONFIGURATION 3 (not advised): <TechDocsReaderPage> with render function as child\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={\n    <TechDocsReaderPage>\n      {({ metadata, entityMetadata, onReady }) => (\n        techdocsPage\n      )}\n    </TechDocsReaderPage>\n  }\n/>\n\nSimilar to CONFIGURATION 2, the direct children will be passed to the <TechDocsReaderPage> but in\nthis case interpreted as render prop.\n\nCONFIGURATION 4: <TechDocsReaderPage> and provided content in <Route>\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={<TechDocsReaderPage />}\n>\n  {techDocsPage}\n  <TechDocsAddons>\n    <ExpandableNavigation />\n    <ReportIssue />\n    <TextSize />\n    <LightBox />\n  </TechDocsAddons>\n</Route>\n\nThis is the current state in packages/app/src/App.tsx and moved the location of children from inside\nthe element prop in the <Route> to the children of the <Route>. Then, in <TechDocsReaderPage> they\nare retrieved using the useOutlet hook from React Router.\n\nNOTE: Render functions are no longer supported in this approach.\n*/\n\n/**\n * Props for {@link TechDocsReaderLayout}\n * @public\n */\nexport type TechDocsReaderLayoutProps = {\n  /**\n   * Show or hide the header, defaults to true.\n   */\n  withHeader?: boolean;\n  /**\n   * Show or hide the content search bar, defaults to true.\n   */\n  withSearch?: boolean;\n};\n\n/**\n * Default TechDocs reader page structure composed with a header and content\n * @public\n */\nexport const TechDocsReaderLayout = (props: TechDocsReaderLayoutProps) => {\n  const { withSearch, withHeader = true } = props;\n  return (\n    <Page themeId=\"documentation\">\n      {withHeader && <TechDocsReaderPageHeader />}\n      <TechDocsReaderPageSubheader />\n      <TechDocsReaderPageContent withSearch={withSearch} />\n    </Page>\n  );\n};\n\n/**\n * @public\n */\nexport type TechDocsReaderPageProps = {\n  entityRef?: CompoundEntityRef;\n  children?: TechDocsReaderPageRenderFunction | ReactNode;\n  overrideThemeOptions?: Partial<ThemeOptions>;\n};\n\n/**\n * An addon-aware implementation of the TechDocsReaderPage.\n *\n * @public\n */\nexport const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {\n  const currentTheme = useTheme();\n\n  const readerPageTheme = createTheme({\n    ...currentTheme,\n    ...(props.overrideThemeOptions || {}),\n  });\n  const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef);\n  const { children, entityRef = { kind, name, namespace } } = props;\n\n  const outlet = useOutlet();\n\n  if (!children) {\n    const childrenList = outlet ? Children.toArray(outlet.props.children) : [];\n\n    const grandChildren = childrenList.flatMap<ReactElement>(\n      child => (child as ReactElement)?.props?.children ?? [],\n    );\n\n    const page: React.ReactNode = grandChildren.find(\n      grandChild =>\n        !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) &&\n        !getComponentData(grandChild, TECHDOCS_ADDONS_KEY),\n    );\n\n    // As explained above, \"page\" is configuration 4 and <TechDocsReaderLayout> is 1\n    return (\n      <ThemeProvider theme={readerPageTheme}>\n        <CookieAuthRefreshProvider pluginId=\"techdocs\">\n          <TechDocsReaderPageProvider entityRef={entityRef}>\n            {(page as JSX.Element) || <TechDocsReaderLayout />}\n          </TechDocsReaderPageProvider>\n        </CookieAuthRefreshProvider>\n      </ThemeProvider>\n    );\n  }\n\n  // As explained above, a render function is configuration 3 and React element is 2\n  return (\n    <ThemeProvider theme={readerPageTheme}>\n      <CookieAuthRefreshProvider pluginId=\"techdocs\">\n        <TechDocsReaderPageProvider entityRef={entityRef}>\n          {({ metadata, entityMetadata, onReady }) => (\n            <div className=\"techdocs-reader-page\">\n              <Page themeId=\"documentation\">\n                {children instanceof Function\n                  ? children({\n                      entityRef,\n                      techdocsMetadataValue: metadata.value,\n                      entityMetadataValue: entityMetadata.value,\n                      onReady,\n                    })\n                  : children}\n              </Page>\n            </div>\n          )}\n        </TechDocsReaderPageProvider>\n      </CookieAuthRefreshProvider>\n    </ThemeProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA0Ia,MAAA,oBAAA,GAAuB,CAAC,KAAqC,KAAA;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,UAAa,GAAA,IAAA,EAAS,GAAA,KAAA;AAC1C,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,eAAA,EAAA,EACX,8BAAe,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA,IAAyB,CACzC,kBAAA,KAAA,CAAA,aAAA,CAAC,2BAA4B,EAAA,IAAA,CAAA,kBAC5B,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA,EAA0B,YAAwB,CACrD,CAAA;AAEJ;AAgBa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,eAAe,QAAS,EAAA;AAE9B,EAAA,MAAM,kBAAkB,WAAY,CAAA;AAAA,IAClC,GAAG,YAAA;AAAA,IACH,GAAI,KAAM,CAAA,oBAAA,IAAwB;AAAC,GACpC,CAAA;AACD,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,SAAU,EAAA,GAAI,kBAAkB,gBAAgB,CAAA;AACpE,EAAM,MAAA,EAAE,UAAU,SAAY,GAAA,EAAE,MAAM,IAAM,EAAA,SAAA,IAAgB,GAAA,KAAA;AAE5D,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAM,MAAA,YAAA,GAAe,SAAS,QAAS,CAAA,OAAA,CAAQ,OAAO,KAAM,CAAA,QAAQ,IAAI,EAAC;AAEzE,IAAA,MAAM,gBAAgB,YAAa,CAAA,OAAA;AAAA,MACjC,CAAU,KAAA,KAAA,KAAA,EAAwB,KAAO,EAAA,QAAA,IAAY;AAAC,KACxD;AAEA,IAAA,MAAM,OAAwB,aAAc,CAAA,IAAA;AAAA,MAC1C,CAAA,UAAA,KACE,CAAC,gBAAiB,CAAA,UAAA,EAAY,2BAA2B,CACzD,IAAA,CAAC,gBAAiB,CAAA,UAAA,EAAY,mBAAmB;AAAA,KACrD;AAGA,IAAA,2CACG,aAAc,EAAA,EAAA,KAAA,EAAO,eACpB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,6BAA0B,QAAS,EAAA,UAAA,EAAA,kBACjC,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA,EAA2B,aACxB,IAAwB,oBAAA,KAAA,CAAA,aAAA,CAAC,oBAAqB,EAAA,IAAA,CAClD,CACF,CACF,CAAA;AAAA;AAKJ,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,KAAA,EAAO,eACpB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,yBAA0B,EAAA,EAAA,QAAA,EAAS,UAClC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,0BAA2B,EAAA,EAAA,SAAA,EAAA,EACzB,CAAC,EAAE,QAAU,EAAA,cAAA,EAAgB,OAAQ,EAAA,qBACnC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,sBAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,eAAA,EAAA,EACX,QAAoB,YAAA,QAAA,GACjB,QAAS,CAAA;AAAA,IACP,SAAA;AAAA,IACA,uBAAuB,QAAS,CAAA,KAAA;AAAA,IAChC,qBAAqB,cAAe,CAAA,KAAA;AAAA,IACpC;AAAA,GACD,CACD,GAAA,QACN,CACF,CAEJ,CACF,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TechDocsReaderPage.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { Children, ReactElement, ReactNode } from 'react';\nimport { useOutlet } from 'react-router-dom';\n\nimport { Page } from '@backstage/core-components';\nimport { CompoundEntityRef } from '@backstage/catalog-model';\nimport {\n  TECHDOCS_ADDONS_KEY,\n  TECHDOCS_ADDONS_WRAPPER_KEY,\n  TechDocsReaderPageProvider,\n} from '@backstage/plugin-techdocs-react';\n\nimport { TechDocsReaderPageRenderFunction } from '../../../types';\n\nimport { TechDocsReaderPageContent } from '../TechDocsReaderPageContent';\nimport { TechDocsReaderPageHeader } from '../TechDocsReaderPageHeader';\nimport { TechDocsReaderPageSubheader } from '../TechDocsReaderPageSubheader';\nimport { rootDocsRouteRef } from '../../../routes';\nimport {\n  getComponentData,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\n\nimport { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react';\nimport {\n  createTheme,\n  styled,\n  ThemeOptions,\n  ThemeProvider,\n  useTheme,\n} from '@material-ui/core/styles';\n\n/* An explanation for the multiple ways of customizing the TechDocs reader page\n\nPlease refer to this page on the microsite for the latest recommended approach:\nhttps://backstage.io/docs/features/techdocs/how-to-guides#how-to-customize-the-techdocs-reader-page\n\nThe <TechDocsReaderPage> component is responsible for rendering the <TechDocsReaderPageProvider> and\nits contained version of a <Page>, which in turn renders the <TechDocsReaderPageContent>.\n\nHistorically, there have been different approaches on how this <Page> can be customized, and how the\n<TechDocsReaderPageContent> inside could be exchanged for a custom implementation (which was not\npossible before). Also, the current implementation supports every scenario to avoid breaking default\nconfigurations of TechDocs.\n\nIn particular, there are 4 different TechDocs page configurations:\n\nCONFIGURATION 1: <TechDocsReaderPage> only, no children\n\n<Route path=\"/docs/:namespace/:kind/:name/*\" element={<TechDocsReaderPage />} >\n\nThis is the simplest way to use TechDocs. Only a full page is passed, assuming that it comes with\nits content inside. Since we allowed customizing it, we started providing <TechDocsReaderLayout> as\na default implementation (which contains <TechDocsReaderPageContent>).\n\nCONFIGURATION 2 (not advised): <TechDocsReaderPage> with element children\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={\n    <TechDocsReaderPage>\n      {techdocsPage}\n    </TechDocsReaderPage>\n  }\n/>\n\nPreviously, there were two ways of passing children to <TechDocsReaderPage>: either as elements (as\nshown above), or as a render function (described below in CONFIGURATION 3). The \"techdocsPage\" is\nlocated in packages/app/src/components/techdocs and is the default implementation of the content\ninside.\n\nCONFIGURATION 3 (not advised): <TechDocsReaderPage> with render function as child\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={\n    <TechDocsReaderPage>\n      {({ metadata, entityMetadata, onReady }) => (\n        techdocsPage\n      )}\n    </TechDocsReaderPage>\n  }\n/>\n\nSimilar to CONFIGURATION 2, the direct children will be passed to the <TechDocsReaderPage> but in\nthis case interpreted as render prop.\n\nCONFIGURATION 4: <TechDocsReaderPage> and provided content in <Route>\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={<TechDocsReaderPage />}\n>\n  {techDocsPage}\n  <TechDocsAddons>\n    <ExpandableNavigation />\n    <ReportIssue />\n    <TextSize />\n    <LightBox />\n  </TechDocsAddons>\n</Route>\n\nThis is the current state in packages/app/src/App.tsx and moved the location of children from inside\nthe element prop in the <Route> to the children of the <Route>. Then, in <TechDocsReaderPage> they\nare retrieved using the useOutlet hook from React Router.\n\nNOTE: Render functions are no longer supported in this approach.\n*/\n\n/**\n * Props for {@link TechDocsReaderLayout}\n * @public\n */\nexport type TechDocsReaderLayoutProps = {\n  /**\n   * Show or hide the header, defaults to true.\n   */\n  withHeader?: boolean;\n  /**\n   * Show or hide the content search bar, defaults to true.\n   */\n  withSearch?: boolean;\n};\n\n/**\n * Default TechDocs reader page structure composed with a header and content\n * @public\n */\nexport const TechDocsReaderLayout = (props: TechDocsReaderLayoutProps) => {\n  const { withSearch, withHeader = true } = props;\n  return (\n    <Page themeId=\"documentation\">\n      {withHeader && <TechDocsReaderPageHeader />}\n      <TechDocsReaderPageSubheader />\n      <TechDocsReaderPageContent withSearch={withSearch} />\n    </Page>\n  );\n};\n\n/**\n * @public\n */\nexport type TechDocsReaderPageProps = {\n  entityRef?: CompoundEntityRef;\n  children?: TechDocsReaderPageRenderFunction | ReactNode;\n  overrideThemeOptions?: Partial<ThemeOptions>;\n};\n\n/**\n * Styled Backstage Page that fills available vertical space\n */\nconst StyledPage = styled(Page)({\n  height: 'inherit',\n  overflowY: 'visible',\n});\n\n/**\n * An addon-aware implementation of the TechDocsReaderPage.\n *\n * @public\n */\nexport const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {\n  const currentTheme = useTheme();\n\n  const readerPageTheme = createTheme({\n    ...currentTheme,\n    ...(props.overrideThemeOptions || {}),\n  });\n  const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef);\n  const { children, entityRef = { kind, name, namespace } } = props;\n\n  const outlet = useOutlet();\n\n  if (!children) {\n    const childrenList = outlet ? Children.toArray(outlet.props.children) : [];\n\n    const grandChildren = childrenList.flatMap<ReactElement>(\n      child => (child as ReactElement)?.props?.children ?? [],\n    );\n\n    const page: React.ReactNode = grandChildren.find(\n      grandChild =>\n        !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) &&\n        !getComponentData(grandChild, TECHDOCS_ADDONS_KEY),\n    );\n\n    // As explained above, \"page\" is configuration 4 and <TechDocsReaderLayout> is 1\n    return (\n      <ThemeProvider theme={readerPageTheme}>\n        <CookieAuthRefreshProvider pluginId=\"techdocs\">\n          <TechDocsReaderPageProvider entityRef={entityRef}>\n            {(page as JSX.Element) || <TechDocsReaderLayout />}\n          </TechDocsReaderPageProvider>\n        </CookieAuthRefreshProvider>\n      </ThemeProvider>\n    );\n  }\n  // As explained above, a render function is configuration 3 and React element is 2\n  return (\n    <ThemeProvider theme={readerPageTheme}>\n      <CookieAuthRefreshProvider pluginId=\"techdocs\">\n        <TechDocsReaderPageProvider entityRef={entityRef}>\n          {({ metadata, entityMetadata, onReady }) => (\n            <StyledPage\n              themeId=\"documentation\"\n              className=\"techdocs-reader-page\"\n            >\n              {children instanceof Function\n                ? children({\n                    entityRef,\n                    techdocsMetadataValue: metadata.value,\n                    entityMetadataValue: entityMetadata.value,\n                    onReady,\n                  })\n                : children}\n            </StyledPage>\n          )}\n        </TechDocsReaderPageProvider>\n      </CookieAuthRefreshProvider>\n    </ThemeProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA+Ia,MAAA,oBAAA,GAAuB,CAAC,KAAqC,KAAA;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,UAAa,GAAA,IAAA,EAAS,GAAA,KAAA;AAC1C,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,eAAA,EAAA,EACX,8BAAe,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA,IAAyB,CACzC,kBAAA,KAAA,CAAA,aAAA,CAAC,2BAA4B,EAAA,IAAA,CAAA,kBAC5B,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA,EAA0B,YAAwB,CACrD,CAAA;AAEJ;AAcA,MAAM,UAAA,GAAa,MAAO,CAAA,IAAI,CAAE,CAAA;AAAA,EAC9B,MAAQ,EAAA,SAAA;AAAA,EACR,SAAW,EAAA;AACb,CAAC,CAAA;AAOY,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,eAAe,QAAS,EAAA;AAE9B,EAAA,MAAM,kBAAkB,WAAY,CAAA;AAAA,IAClC,GAAG,YAAA;AAAA,IACH,GAAI,KAAM,CAAA,oBAAA,IAAwB;AAAC,GACpC,CAAA;AACD,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,SAAU,EAAA,GAAI,kBAAkB,gBAAgB,CAAA;AACpE,EAAM,MAAA,EAAE,UAAU,SAAY,GAAA,EAAE,MAAM,IAAM,EAAA,SAAA,IAAgB,GAAA,KAAA;AAE5D,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAM,MAAA,YAAA,GAAe,SAAS,QAAS,CAAA,OAAA,CAAQ,OAAO,KAAM,CAAA,QAAQ,IAAI,EAAC;AAEzE,IAAA,MAAM,gBAAgB,YAAa,CAAA,OAAA;AAAA,MACjC,CAAU,KAAA,KAAA,KAAA,EAAwB,KAAO,EAAA,QAAA,IAAY;AAAC,KACxD;AAEA,IAAA,MAAM,OAAwB,aAAc,CAAA,IAAA;AAAA,MAC1C,CAAA,UAAA,KACE,CAAC,gBAAiB,CAAA,UAAA,EAAY,2BAA2B,CACzD,IAAA,CAAC,gBAAiB,CAAA,UAAA,EAAY,mBAAmB;AAAA,KACrD;AAGA,IAAA,2CACG,aAAc,EAAA,EAAA,KAAA,EAAO,eACpB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,6BAA0B,QAAS,EAAA,UAAA,EAAA,kBACjC,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA,EAA2B,aACxB,IAAwB,oBAAA,KAAA,CAAA,aAAA,CAAC,oBAAqB,EAAA,IAAA,CAClD,CACF,CACF,CAAA;AAAA;AAIJ,EAAA,2CACG,aAAc,EAAA,EAAA,KAAA,EAAO,eACpB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,6BAA0B,QAAS,EAAA,UAAA,EAAA,kBACjC,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA,EAA2B,aACzB,CAAC,EAAE,QAAU,EAAA,cAAA,EAAgB,SAC5B,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,eAAA;AAAA,MACR,SAAU,EAAA;AAAA,KAAA;AAAA,IAET,QAAA,YAAoB,WACjB,QAAS,CAAA;AAAA,MACP,SAAA;AAAA,MACA,uBAAuB,QAAS,CAAA,KAAA;AAAA,MAChC,qBAAqB,cAAe,CAAA,KAAA;AAAA,MACpC;AAAA,KACD,CACD,GAAA;AAAA,GAGV,CACF,CACF,CAAA;AAEJ;;;;"}

package/dist/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.esm.js

@@ -4,18 +4,21 @@ import Grid from '@material-ui/core/Grid';
 import Skeleton from '@material-ui/lab/Skeleton';
 import CodeIcon from '@material-ui/icons/Code';
 import { useTechDocsAddons, useTechDocsReaderPage, TechDocsAddonLocations } from '@backstage/plugin-techdocs-react';
-import { getEntityRelations, EntityRefLink, EntityRefLinks } from '@backstage/plugin-catalog-react';
-import { RELATION_OWNED_BY } from '@backstage/catalog-model';
+import { entityPresentationApiRef, getEntityRelations, EntityRefLink, EntityRefLinks } from '@backstage/plugin-catalog-react';
+import { RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
 import { HeaderLabel, Header } from '@backstage/core-components';
 import { useApi, configApiRef, useRouteRef } from '@backstage/core-plugin-api';
-import { capitalize } from 'lodash';
+import capitalize from 'lodash/capitalize';
 import { rootRouteRef } from '../../../routes.esm.js';
+import { useParams } from 'react-router-dom';
 
 const skeleton = /* @__PURE__ */ React.createElement(Skeleton, { animation: "wave", variant: "text", height: 40 });
 const TechDocsReaderPageHeader = (props) => {
   const { children } = props;
   const addons = useTechDocsAddons();
   const configApi = useApi(configApiRef);
+  const entityPresentationApi = useApi(entityPresentationApiRef);
+  const { "*": path = "" } = useParams();
   const {
     title,
     setTitle,
@@ -37,7 +40,6 @@ const TechDocsReaderPageHeader = (props) => {
     });
   }, [metadata, setTitle, setSubtitle]);
   const appTitle = configApi.getOptional("app.title") || "Backstage";
-  const tabTitle = [title, subtitle, appTitle].filter(Boolean).join(" | ");
   const { locationMetadata, spec } = entityMetadata || {};
   const lifecycle = spec?.lifecycle;
   const ownedByRelations = entityMetadata ? getEntityRelations(entityMetadata, RELATION_OWNED_BY) : [];
@@ -80,6 +82,15 @@ const TechDocsReaderPageHeader = (props) => {
   const noEntMetadata = !entityMetadataLoading && entityMetadata === void 0;
   const noTdMetadata = !metadataLoading && metadata === void 0;
   if (noEntMetadata || noTdMetadata) return null;
+  const stringEntityRef = stringifyEntityRef(entityRef);
+  const entityDisplayName = entityPresentationApi.forEntity(stringEntityRef).snapshot.primaryTitle;
+  const removeTrailingSlash = (str) => str.replace(/\/$/, "");
+  const normalizeAndSpace = (str) => str.replace(/-/g, " ").split(" ").map(capitalize).join(" ");
+  let techdocsTabTitleItems = [];
+  if (path !== "")
+    techdocsTabTitleItems = removeTrailingSlash(path).split("/").slice(0, 3).map(normalizeAndSpace);
+  const tabTitleItems = [appTitle, entityDisplayName, ...techdocsTabTitleItems];
+  const tabTitle = tabTitleItems.join(" | ");
   return /* @__PURE__ */ React.createElement(
     Header,
     {

package/dist/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TechDocsReaderPageHeader.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { PropsWithChildren, useEffect } from 'react';\nimport Helmet from 'react-helmet';\n\nimport Grid from '@material-ui/core/Grid';\nimport Skeleton from '@material-ui/lab/Skeleton';\nimport CodeIcon from '@material-ui/icons/Code';\n\nimport {\n  TechDocsAddonLocations as locations,\n  useTechDocsAddons,\n  useTechDocsReaderPage,\n  TechDocsEntityMetadata,\n  TechDocsMetadata,\n} from '@backstage/plugin-techdocs-react';\nimport {\n  EntityRefLink,\n  EntityRefLinks,\n  getEntityRelations,\n} from '@backstage/plugin-catalog-react';\nimport { RELATION_OWNED_BY, CompoundEntityRef } from '@backstage/catalog-model';\nimport { Header, HeaderLabel } from '@backstage/core-components';\nimport { useRouteRef, configApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { capitalize } from 'lodash';\n\nimport { rootRouteRef } from '../../../routes';\n\nconst skeleton = <Skeleton animation=\"wave\" variant=\"text\" height={40} />;\n\n/**\n * Props for {@link TechDocsReaderPageHeader}\n *\n * @public\n * @deprecated No need to pass down properties anymore. The component consumes data from `TechDocsReaderPageContext` instead. Use the {@link @backstage/plugin-techdocs-react#useTechDocsReaderPage} hook for custom header.\n */\nexport type TechDocsReaderPageHeaderProps = PropsWithChildren<{\n  entityRef?: CompoundEntityRef;\n  entityMetadata?: TechDocsEntityMetadata;\n  techDocsMetadata?: TechDocsMetadata;\n}>;\n\n/**\n * Renders the reader page header.\n * This component does not accept props, please use\n * the Tech Docs add-ons to customize it\n * @public\n */\nexport const TechDocsReaderPageHeader = (\n  props: TechDocsReaderPageHeaderProps,\n) => {\n  const { children } = props;\n  const addons = useTechDocsAddons();\n  const configApi = useApi(configApiRef);\n\n  const {\n    title,\n    setTitle,\n    subtitle,\n    setSubtitle,\n    entityRef,\n    metadata: { value: metadata, loading: metadataLoading },\n    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },\n  } = useTechDocsReaderPage();\n\n  useEffect(() => {\n    if (!metadata) return;\n    setTitle(metadata.site_name);\n    setSubtitle(() => {\n      let { site_description } = metadata;\n      if (!site_description || site_description === 'None') {\n        site_description = '';\n      }\n      return site_description;\n    });\n  }, [metadata, setTitle, setSubtitle]);\n\n  const appTitle = configApi.getOptional('app.title') || 'Backstage';\n  const tabTitle = [title, subtitle, appTitle].filter(Boolean).join(' | ');\n\n  const { locationMetadata, spec } = entityMetadata || {};\n  const lifecycle = spec?.lifecycle;\n\n  const ownedByRelations = entityMetadata\n    ? getEntityRelations(entityMetadata, RELATION_OWNED_BY)\n    : [];\n\n  const docsRootLink = useRouteRef(rootRouteRef)();\n\n  const labels = (\n    <>\n      <HeaderLabel\n        label={capitalize(entityMetadata?.kind || 'entity')}\n        value={\n          <EntityRefLink\n            color=\"inherit\"\n            entityRef={entityRef}\n            title={entityMetadata?.metadata.title}\n            defaultKind=\"Component\"\n          />\n        }\n      />\n      {ownedByRelations.length > 0 && (\n        <HeaderLabel\n          label=\"Owner\"\n          value={\n            <EntityRefLinks\n              color=\"inherit\"\n              entityRefs={ownedByRelations}\n              defaultKind=\"group\"\n            />\n          }\n        />\n      )}\n      {lifecycle ? (\n        <HeaderLabel label=\"Lifecycle\" value={String(lifecycle)} />\n      ) : null}\n      {locationMetadata &&\n      locationMetadata.type !== 'dir' &&\n      locationMetadata.type !== 'file' ? (\n        <HeaderLabel\n          label=\"\"\n          value={\n            <Grid container direction=\"column\" alignItems=\"center\">\n              <Grid style={{ padding: 0 }} item>\n                <CodeIcon style={{ marginTop: '-25px' }} />\n              </Grid>\n              <Grid style={{ padding: 0 }} item>\n                Source\n              </Grid>\n            </Grid>\n          }\n          url={locationMetadata.target}\n        />\n      ) : null}\n    </>\n  );\n\n  // If there is no entity or techdocs metadata, there's no reason to show the\n  // header (hides the header on 404 error pages).\n  const noEntMetadata = !entityMetadataLoading && entityMetadata === undefined;\n  const noTdMetadata = !metadataLoading && metadata === undefined;\n  if (noEntMetadata || noTdMetadata) return null;\n\n  return (\n    <Header\n      type=\"Documentation\"\n      typeLink={docsRootLink}\n      title={title || skeleton}\n      subtitle={subtitle === '' ? undefined : subtitle || skeleton}\n    >\n      <Helmet titleTemplate=\"%s\">\n        <title>{tabTitle}</title>\n      </Helmet>\n      {labels}\n      {children}\n      {addons.renderComponentsByLocation(locations.Header)}\n    </Header>\n  );\n};\n"],"names":["locations"],"mappings":"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"}
+{"version":3,"file":"TechDocsReaderPageHeader.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { PropsWithChildren, useEffect } from 'react';\nimport Helmet from 'react-helmet';\n\nimport Grid from '@material-ui/core/Grid';\nimport Skeleton from '@material-ui/lab/Skeleton';\nimport CodeIcon from '@material-ui/icons/Code';\n\nimport {\n  TechDocsAddonLocations as locations,\n  useTechDocsAddons,\n  useTechDocsReaderPage,\n  TechDocsEntityMetadata,\n  TechDocsMetadata,\n} from '@backstage/plugin-techdocs-react';\nimport {\n  entityPresentationApiRef,\n  EntityRefLink,\n  EntityRefLinks,\n  getEntityRelations,\n} from '@backstage/plugin-catalog-react';\nimport {\n  RELATION_OWNED_BY,\n  CompoundEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { Header, HeaderLabel } from '@backstage/core-components';\nimport { useRouteRef, configApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport capitalize from 'lodash/capitalize';\n\nimport { rootRouteRef } from '../../../routes';\nimport { useParams } from 'react-router-dom';\n\nconst skeleton = <Skeleton animation=\"wave\" variant=\"text\" height={40} />;\n\n/**\n * Props for {@link TechDocsReaderPageHeader}\n *\n * @public\n * @deprecated No need to pass down properties anymore. The component consumes data from `TechDocsReaderPageContext` instead. Use the {@link @backstage/plugin-techdocs-react#useTechDocsReaderPage} hook for custom header.\n */\nexport type TechDocsReaderPageHeaderProps = PropsWithChildren<{\n  entityRef?: CompoundEntityRef;\n  entityMetadata?: TechDocsEntityMetadata;\n  techDocsMetadata?: TechDocsMetadata;\n}>;\n\n/**\n * Renders the reader page header.\n * This component does not accept props, please use\n * the Tech Docs add-ons to customize it\n * @public\n */\nexport const TechDocsReaderPageHeader = (\n  props: TechDocsReaderPageHeaderProps,\n) => {\n  const { children } = props;\n  const addons = useTechDocsAddons();\n  const configApi = useApi(configApiRef);\n\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n  const { '*': path = '' } = useParams();\n\n  const {\n    title,\n    setTitle,\n    subtitle,\n    setSubtitle,\n    entityRef,\n    metadata: { value: metadata, loading: metadataLoading },\n    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },\n  } = useTechDocsReaderPage();\n\n  useEffect(() => {\n    if (!metadata) return;\n    setTitle(metadata.site_name);\n    setSubtitle(() => {\n      let { site_description } = metadata;\n      if (!site_description || site_description === 'None') {\n        site_description = '';\n      }\n      return site_description;\n    });\n  }, [metadata, setTitle, setSubtitle]);\n\n  const appTitle = configApi.getOptional('app.title') || 'Backstage';\n\n  const { locationMetadata, spec } = entityMetadata || {};\n  const lifecycle = spec?.lifecycle;\n\n  const ownedByRelations = entityMetadata\n    ? getEntityRelations(entityMetadata, RELATION_OWNED_BY)\n    : [];\n\n  const docsRootLink = useRouteRef(rootRouteRef)();\n\n  const labels = (\n    <>\n      <HeaderLabel\n        label={capitalize(entityMetadata?.kind || 'entity')}\n        value={\n          <EntityRefLink\n            color=\"inherit\"\n            entityRef={entityRef}\n            title={entityMetadata?.metadata.title}\n            defaultKind=\"Component\"\n          />\n        }\n      />\n      {ownedByRelations.length > 0 && (\n        <HeaderLabel\n          label=\"Owner\"\n          value={\n            <EntityRefLinks\n              color=\"inherit\"\n              entityRefs={ownedByRelations}\n              defaultKind=\"group\"\n            />\n          }\n        />\n      )}\n      {lifecycle ? (\n        <HeaderLabel label=\"Lifecycle\" value={String(lifecycle)} />\n      ) : null}\n      {locationMetadata &&\n      locationMetadata.type !== 'dir' &&\n      locationMetadata.type !== 'file' ? (\n        <HeaderLabel\n          label=\"\"\n          value={\n            <Grid container direction=\"column\" alignItems=\"center\">\n              <Grid style={{ padding: 0 }} item>\n                <CodeIcon style={{ marginTop: '-25px' }} />\n              </Grid>\n              <Grid style={{ padding: 0 }} item>\n                Source\n              </Grid>\n            </Grid>\n          }\n          url={locationMetadata.target}\n        />\n      ) : null}\n    </>\n  );\n\n  // If there is no entity or techdocs metadata, there's no reason to show the\n  // header (hides the header on 404 error pages).\n  const noEntMetadata = !entityMetadataLoading && entityMetadata === undefined;\n  const noTdMetadata = !metadataLoading && metadata === undefined;\n  if (noEntMetadata || noTdMetadata) return null;\n\n  const stringEntityRef = stringifyEntityRef(entityRef);\n\n  const entityDisplayName =\n    entityPresentationApi.forEntity(stringEntityRef).snapshot.primaryTitle;\n\n  const removeTrailingSlash = (str: string) => str.replace(/\\/$/, '');\n  const normalizeAndSpace = (str: string) =>\n    str.replace(/-/g, ' ').split(' ').map(capitalize).join(' ');\n\n  let techdocsTabTitleItems: string[] = [];\n\n  if (path !== '')\n    techdocsTabTitleItems = removeTrailingSlash(path)\n      .split('/')\n      .slice(0, 3)\n      .map(normalizeAndSpace);\n\n  const tabTitleItems = [appTitle, entityDisplayName, ...techdocsTabTitleItems];\n  const tabTitle = tabTitleItems.join(' | ');\n\n  return (\n    <Header\n      type=\"Documentation\"\n      typeLink={docsRootLink}\n      title={title || skeleton}\n      subtitle={subtitle === '' ? undefined : subtitle || skeleton}\n    >\n      <Helmet titleTemplate=\"%s\">\n        <title>{tabTitle}</title>\n      </Helmet>\n      {labels}\n      {children}\n      {addons.renderComponentsByLocation(locations.Header)}\n    </Header>\n  );\n};\n"],"names":["locations"],"mappings":"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"}

package/dist/reader/transformers/addBaseUrl.esm.js

@@ -1,5 +1,6 @@
 const isSvgNeedingInlining = (attrName, attrVal, apiOrigin) => {
-  const isSrcToSvg = attrName === "src" && attrVal.endsWith(".svg");
+  const pathname = new URL(attrVal, "https://ignored.com").pathname;
+  const isSrcToSvg = attrName === "src" && pathname.endsWith(".svg");
   const isRelativeUrl = !attrVal.match(/^([a-z]*:)?\/\//i);
   const pointsToOurBackend = attrVal.startsWith(apiOrigin);
   return isSrcToSvg && (isRelativeUrl || pointsToOurBackend);

package/dist/reader/transformers/addBaseUrl.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"addBaseUrl.esm.js","sources":["../../../src/reader/transformers/addBaseUrl.ts"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { CompoundEntityRef } from '@backstage/catalog-model';\nimport { TechDocsStorageApi } from '../../api';\nimport type { Transformer } from './transformer';\n\ntype AddBaseUrlOptions = {\n  techdocsStorageApi: TechDocsStorageApi;\n  entityId: CompoundEntityRef;\n  path: string;\n};\n\n/**\n * TechDocs backend serves SVGs with text/plain content-type for security. This\n * helper determines if an SVG is being loaded from the backend, and thus needs\n * inlining to be displayed properly.\n */\nconst isSvgNeedingInlining = (\n  attrName: string,\n  attrVal: string,\n  apiOrigin: string,\n) => {\n  const isSrcToSvg = attrName === 'src' && attrVal.endsWith('.svg');\n  const isRelativeUrl = !attrVal.match(/^([a-z]*:)?\\/\\//i);\n  const pointsToOurBackend = attrVal.startsWith(apiOrigin);\n  return isSrcToSvg && (isRelativeUrl || pointsToOurBackend);\n};\n\nexport const addBaseUrl = ({\n  techdocsStorageApi,\n  entityId,\n  path,\n}: AddBaseUrlOptions): Transformer => {\n  return async dom => {\n    const apiOrigin = await techdocsStorageApi.getApiOrigin();\n\n    const updateDom = async <T extends Element>(\n      list: HTMLCollectionOf<T> | NodeListOf<T>,\n      attributeName: string,\n    ) => {\n      for (const elem of list) {\n        if (elem.hasAttribute(attributeName)) {\n          const elemAttribute = elem.getAttribute(attributeName);\n          if (!elemAttribute) return;\n\n          // Special handling for SVG images.\n          const newValue = await techdocsStorageApi.getBaseUrl(\n            elemAttribute,\n            entityId,\n            path,\n          );\n\n          if (isSvgNeedingInlining(attributeName, elemAttribute, apiOrigin)) {\n            try {\n              const svg = await fetch(newValue, { credentials: 'include' });\n              const svgContent = await svg.text();\n              elem.setAttribute(\n                attributeName,\n                `data:image/svg+xml;base64,${btoa(\n                  unescape(encodeURIComponent(svgContent)),\n                )}`,\n              );\n            } catch (e) {\n              elem.setAttribute('alt', `Error: ${elemAttribute}`);\n            }\n          } else {\n            elem.setAttribute(attributeName, newValue);\n          }\n        }\n      }\n    };\n\n    await Promise.all([\n      updateDom<HTMLImageElement>(dom.querySelectorAll('img'), 'src'),\n      updateDom<HTMLScriptElement>(dom.querySelectorAll('script'), 'src'),\n      updateDom<HTMLSourceElement>(dom.querySelectorAll('source'), 'src'),\n      updateDom<HTMLLinkElement>(dom.querySelectorAll('link'), 'href'),\n      updateDom<HTMLAnchorElement>(dom.querySelectorAll('a[download]'), 'href'),\n    ]);\n\n    return dom;\n  };\n};\n"],"names":[],"mappings":"AA8BA,MAAM,oBAAuB,GAAA,CAC3B,QACA,EAAA,OAAA,EACA,SACG,KAAA;AACH,EAAA,MAAM,UAAa,GAAA,QAAA,KAAa,KAAS,IAAA,OAAA,CAAQ,SAAS,MAAM,CAAA;AAChE,EAAA,MAAM,aAAgB,GAAA,CAAC,OAAQ,CAAA,KAAA,CAAM,kBAAkB,CAAA;AACvD,EAAM,MAAA,kBAAA,GAAqB,OAAQ,CAAA,UAAA,CAAW,SAAS,CAAA;AACvD,EAAA,OAAO,eAAe,aAAiB,IAAA,kBAAA,CAAA;AACzC,CAAA;AAEO,MAAM,aAAa,CAAC;AAAA,EACzB,kBAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAsC,KAAA;AACpC,EAAA,OAAO,OAAM,GAAO,KAAA;AAClB,IAAM,MAAA,SAAA,GAAY,MAAM,kBAAA,CAAmB,YAAa,EAAA;AAExD,IAAM,MAAA,SAAA,GAAY,OAChB,IAAA,EACA,aACG,KAAA;AACH,MAAA,KAAA,MAAW,QAAQ,IAAM,EAAA;AACvB,QAAI,IAAA,IAAA,CAAK,YAAa,CAAA,aAAa,CAAG,EAAA;AACpC,UAAM,MAAA,aAAA,GAAgB,IAAK,CAAA,YAAA,CAAa,aAAa,CAAA;AACrD,UAAA,IAAI,CAAC,aAAe,EAAA;AAGpB,UAAM,MAAA,QAAA,GAAW,MAAM,kBAAmB,CAAA,UAAA;AAAA,YACxC,aAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA,WACF;AAEA,UAAA,IAAI,oBAAqB,CAAA,aAAA,EAAe,aAAe,EAAA,SAAS,CAAG,EAAA;AACjE,YAAI,IAAA;AACF,cAAA,MAAM,MAAM,MAAM,KAAA,CAAM,UAAU,EAAE,WAAA,EAAa,WAAW,CAAA;AAC5D,cAAM,MAAA,UAAA,GAAa,MAAM,GAAA,CAAI,IAAK,EAAA;AAClC,cAAK,IAAA,CAAA,YAAA;AAAA,gBACH,aAAA;AAAA,gBACA,CAA6B,0BAAA,EAAA,IAAA;AAAA,kBAC3B,QAAA,CAAS,kBAAmB,CAAA,UAAU,CAAC;AAAA,iBACxC,CAAA;AAAA,eACH;AAAA,qBACO,CAAG,EAAA;AACV,cAAA,IAAA,CAAK,YAAa,CAAA,KAAA,EAAO,CAAU,OAAA,EAAA,aAAa,CAAE,CAAA,CAAA;AAAA;AACpD,WACK,MAAA;AACL,YAAK,IAAA,CAAA,YAAA,CAAa,eAAe,QAAQ,CAAA;AAAA;AAC3C;AACF;AACF,KACF;AAEA,IAAA,MAAM,QAAQ,GAAI,CAAA;AAAA,MAChB,SAA4B,CAAA,GAAA,CAAI,gBAAiB,CAAA,KAAK,GAAG,KAAK,CAAA;AAAA,MAC9D,SAA6B,CAAA,GAAA,CAAI,gBAAiB,CAAA,QAAQ,GAAG,KAAK,CAAA;AAAA,MAClE,SAA6B,CAAA,GAAA,CAAI,gBAAiB,CAAA,QAAQ,GAAG,KAAK,CAAA;AAAA,MAClE,SAA2B,CAAA,GAAA,CAAI,gBAAiB,CAAA,MAAM,GAAG,MAAM,CAAA;AAAA,MAC/D,SAA6B,CAAA,GAAA,CAAI,gBAAiB,CAAA,aAAa,GAAG,MAAM;AAAA,KACzE,CAAA;AAED,IAAO,OAAA,GAAA;AAAA,GACT;AACF;;;;"}
+{"version":3,"file":"addBaseUrl.esm.js","sources":["../../../src/reader/transformers/addBaseUrl.ts"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { CompoundEntityRef } from '@backstage/catalog-model';\nimport { TechDocsStorageApi } from '../../api';\nimport type { Transformer } from './transformer';\n\ntype AddBaseUrlOptions = {\n  techdocsStorageApi: TechDocsStorageApi;\n  entityId: CompoundEntityRef;\n  path: string;\n};\n\n/**\n * TechDocs backend serves SVGs with text/plain content-type for security. This\n * helper determines if an SVG is being loaded from the backend, and thus needs\n * inlining to be displayed properly.\n */\nconst isSvgNeedingInlining = (\n  attrName: string,\n  attrVal: string,\n  apiOrigin: string,\n) => {\n  // Let's let the URL object do automatic parsing of the pathname for us\n  const pathname = new URL(attrVal, 'https://ignored.com').pathname;\n  const isSrcToSvg = attrName === 'src' && pathname.endsWith('.svg');\n\n  const isRelativeUrl = !attrVal.match(/^([a-z]*:)?\\/\\//i);\n  const pointsToOurBackend = attrVal.startsWith(apiOrigin);\n  return isSrcToSvg && (isRelativeUrl || pointsToOurBackend);\n};\n\nexport const addBaseUrl = ({\n  techdocsStorageApi,\n  entityId,\n  path,\n}: AddBaseUrlOptions): Transformer => {\n  return async dom => {\n    const apiOrigin = await techdocsStorageApi.getApiOrigin();\n\n    const updateDom = async <T extends Element>(\n      list: HTMLCollectionOf<T> | NodeListOf<T>,\n      attributeName: string,\n    ) => {\n      for (const elem of list) {\n        if (elem.hasAttribute(attributeName)) {\n          const elemAttribute = elem.getAttribute(attributeName);\n          if (!elemAttribute) return;\n\n          // Special handling for SVG images.\n          const newValue = await techdocsStorageApi.getBaseUrl(\n            elemAttribute,\n            entityId,\n            path,\n          );\n\n          if (isSvgNeedingInlining(attributeName, elemAttribute, apiOrigin)) {\n            try {\n              const svg = await fetch(newValue, { credentials: 'include' });\n              const svgContent = await svg.text();\n              elem.setAttribute(\n                attributeName,\n                `data:image/svg+xml;base64,${btoa(\n                  unescape(encodeURIComponent(svgContent)),\n                )}`,\n              );\n            } catch (e) {\n              elem.setAttribute('alt', `Error: ${elemAttribute}`);\n            }\n          } else {\n            elem.setAttribute(attributeName, newValue);\n          }\n        }\n      }\n    };\n\n    await Promise.all([\n      updateDom<HTMLImageElement>(dom.querySelectorAll('img'), 'src'),\n      updateDom<HTMLScriptElement>(dom.querySelectorAll('script'), 'src'),\n      updateDom<HTMLSourceElement>(dom.querySelectorAll('source'), 'src'),\n      updateDom<HTMLLinkElement>(dom.querySelectorAll('link'), 'href'),\n      updateDom<HTMLAnchorElement>(dom.querySelectorAll('a[download]'), 'href'),\n    ]);\n\n    return dom;\n  };\n};\n"],"names":[],"mappings":"AA8BA,MAAM,oBAAuB,GAAA,CAC3B,QACA,EAAA,OAAA,EACA,SACG,KAAA;AAEH,EAAA,MAAM,QAAW,GAAA,IAAI,GAAI,CAAA,OAAA,EAAS,qBAAqB,CAAE,CAAA,QAAA;AACzD,EAAA,MAAM,UAAa,GAAA,QAAA,KAAa,KAAS,IAAA,QAAA,CAAS,SAAS,MAAM,CAAA;AAEjE,EAAA,MAAM,aAAgB,GAAA,CAAC,OAAQ,CAAA,KAAA,CAAM,kBAAkB,CAAA;AACvD,EAAM,MAAA,kBAAA,GAAqB,OAAQ,CAAA,UAAA,CAAW,SAAS,CAAA;AACvD,EAAA,OAAO,eAAe,aAAiB,IAAA,kBAAA,CAAA;AACzC,CAAA;AAEO,MAAM,aAAa,CAAC;AAAA,EACzB,kBAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAsC,KAAA;AACpC,EAAA,OAAO,OAAM,GAAO,KAAA;AAClB,IAAM,MAAA,SAAA,GAAY,MAAM,kBAAA,CAAmB,YAAa,EAAA;AAExD,IAAM,MAAA,SAAA,GAAY,OAChB,IAAA,EACA,aACG,KAAA;AACH,MAAA,KAAA,MAAW,QAAQ,IAAM,EAAA;AACvB,QAAI,IAAA,IAAA,CAAK,YAAa,CAAA,aAAa,CAAG,EAAA;AACpC,UAAM,MAAA,aAAA,GAAgB,IAAK,CAAA,YAAA,CAAa,aAAa,CAAA;AACrD,UAAA,IAAI,CAAC,aAAe,EAAA;AAGpB,UAAM,MAAA,QAAA,GAAW,MAAM,kBAAmB,CAAA,UAAA;AAAA,YACxC,aAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA,WACF;AAEA,UAAA,IAAI,oBAAqB,CAAA,aAAA,EAAe,aAAe,EAAA,SAAS,CAAG,EAAA;AACjE,YAAI,IAAA;AACF,cAAA,MAAM,MAAM,MAAM,KAAA,CAAM,UAAU,EAAE,WAAA,EAAa,WAAW,CAAA;AAC5D,cAAM,MAAA,UAAA,GAAa,MAAM,GAAA,CAAI,IAAK,EAAA;AAClC,cAAK,IAAA,CAAA,YAAA;AAAA,gBACH,aAAA;AAAA,gBACA,CAA6B,0BAAA,EAAA,IAAA;AAAA,kBAC3B,QAAA,CAAS,kBAAmB,CAAA,UAAU,CAAC;AAAA,iBACxC,CAAA;AAAA,eACH;AAAA,qBACO,CAAG,EAAA;AACV,cAAA,IAAA,CAAK,YAAa,CAAA,KAAA,EAAO,CAAU,OAAA,EAAA,aAAa,CAAE,CAAA,CAAA;AAAA;AACpD,WACK,MAAA;AACL,YAAK,IAAA,CAAA,YAAA,CAAa,eAAe,QAAQ,CAAA;AAAA;AAC3C;AACF;AACF,KACF;AAEA,IAAA,MAAM,QAAQ,GAAI,CAAA;AAAA,MAChB,SAA4B,CAAA,GAAA,CAAI,gBAAiB,CAAA,KAAK,GAAG,KAAK,CAAA;AAAA,MAC9D,SAA6B,CAAA,GAAA,CAAI,gBAAiB,CAAA,QAAQ,GAAG,KAAK,CAAA;AAAA,MAClE,SAA6B,CAAA,GAAA,CAAI,gBAAiB,CAAA,QAAQ,GAAG,KAAK,CAAA;AAAA,MAClE,SAA2B,CAAA,GAAA,CAAI,gBAAiB,CAAA,MAAM,GAAG,MAAM,CAAA;AAAA,MAC/D,SAA6B,CAAA,GAAA,CAAI,gBAAiB,CAAA,aAAa,GAAG,MAAM;AAAA,KACzE,CAAA;AAED,IAAO,OAAA,GAAA;AAAA,GACT;AACF;;;;"}

package/dist/reader/transformers/html/transformer.esm.js

@@ -45,7 +45,7 @@ const useSanitizerTransformer = () => {
       return DOMPurify.sanitize(dom.outerHTML, {
         ADD_TAGS: tags,
         FORBID_TAGS: ["style"],
-        ADD_ATTR: ["http-equiv", "content"],
+        ADD_ATTR: ["http-equiv", "content", "dominant-baseline"],
         WHOLE_DOCUMENT: true,
         RETURN_DOM: true,
         CUSTOM_ELEMENT_HANDLING: {

package/dist/reader/transformers/html/transformer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"transformer.esm.js","sources":["../../../../src/reader/transformers/html/transformer.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport DOMPurify from 'dompurify';\nimport { useCallback, useMemo } from 'react';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { Transformer } from '../transformer';\nimport { removeUnsafeIframes, removeUnsafeLinks } from './hooks';\n\n/**\n * Returns html sanitizer configuration\n */\nconst useSanitizerConfig = () => {\n  const configApi = useApi(configApiRef);\n\n  return useMemo(() => {\n    return configApi.getOptionalConfig('techdocs.sanitizer');\n  }, [configApi]);\n};\n\n/**\n * Returns a transformer that sanitizes the dom\n */\nexport const useSanitizerTransformer = (): Transformer => {\n  const config = useSanitizerConfig();\n\n  return useCallback(\n    async (dom: Element) => {\n      const hosts = config?.getOptionalStringArray('allowedIframeHosts');\n\n      DOMPurify.addHook('beforeSanitizeElements', removeUnsafeLinks);\n      const tags = ['link', 'meta'];\n\n      if (hosts) {\n        tags.push('iframe');\n        DOMPurify.addHook('beforeSanitizeElements', removeUnsafeIframes(hosts));\n      }\n\n      // Only allow meta tags if they are used for refreshing the page. They are required for the redirect feature.\n      DOMPurify.addHook('uponSanitizeElement', (currNode, data) => {\n        if (data.tagName === 'meta') {\n          const isMetaRefreshTag =\n            currNode.getAttribute('http-equiv') === 'refresh' &&\n            currNode.getAttribute('content')?.includes('url=');\n          if (!isMetaRefreshTag) {\n            currNode.parentNode?.removeChild(currNode);\n          }\n        }\n      });\n\n      // Only allow http-equiv and content attributes on meta tags. They are required for the redirect feature.\n      DOMPurify.addHook('uponSanitizeAttribute', (currNode, data) => {\n        if (currNode.tagName !== 'meta') {\n          if (data.attrName === 'http-equiv' || data.attrName === 'content') {\n            currNode.removeAttribute(data.attrName);\n          }\n        }\n      });\n\n      const tagNameCheck = config?.getOptionalString(\n        'allowedCustomElementTagNameRegExp',\n      );\n      const attributeNameCheck = config?.getOptionalString(\n        'allowedCustomElementAttributeNameRegExp',\n      );\n\n      // using outerHTML as we want to preserve the html tag attributes (lang)\n      return DOMPurify.sanitize(dom.outerHTML, {\n        ADD_TAGS: tags,\n        FORBID_TAGS: ['style'],\n        ADD_ATTR: ['http-equiv', 'content'],\n        WHOLE_DOCUMENT: true,\n        RETURN_DOM: true,\n        CUSTOM_ELEMENT_HANDLING: {\n          tagNameCheck: tagNameCheck ? new RegExp(tagNameCheck) : undefined,\n          attributeNameCheck: attributeNameCheck\n            ? new RegExp(attributeNameCheck)\n            : undefined,\n        },\n      });\n    },\n    [config],\n  );\n};\n"],"names":[],"mappings":";;;;;;AA2BA,MAAM,qBAAqB,MAAM;AAC/B,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AAErC,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAO,OAAA,SAAA,CAAU,kBAAkB,oBAAoB,CAAA;AAAA,GACzD,EAAG,CAAC,SAAS,CAAC,CAAA;AAChB,CAAA;AAKO,MAAM,0BAA0B,MAAmB;AACxD,EAAA,MAAM,SAAS,kBAAmB,EAAA;AAElC,EAAO,OAAA,WAAA;AAAA,IACL,OAAO,GAAiB,KAAA;AACtB,MAAM,MAAA,KAAA,GAAQ,MAAQ,EAAA,sBAAA,CAAuB,oBAAoB,CAAA;AAEjE,MAAU,SAAA,CAAA,OAAA,CAAQ,0BAA0B,iBAAiB,CAAA;AAC7D,MAAM,MAAA,IAAA,GAAO,CAAC,MAAA,EAAQ,MAAM,CAAA;AAE5B,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,IAAA,CAAK,KAAK,QAAQ,CAAA;AAClB,QAAA,SAAA,CAAU,OAAQ,CAAA,wBAAA,EAA0B,mBAAoB,CAAA,KAAK,CAAC,CAAA;AAAA;AAIxE,MAAA,SAAA,CAAU,OAAQ,CAAA,qBAAA,EAAuB,CAAC,QAAA,EAAU,IAAS,KAAA;AAC3D,QAAI,IAAA,IAAA,CAAK,YAAY,MAAQ,EAAA;AAC3B,UAAM,MAAA,gBAAA,GACJ,QAAS,CAAA,YAAA,CAAa,YAAY,CAAA,KAAM,SACxC,IAAA,QAAA,CAAS,YAAa,CAAA,SAAS,CAAG,EAAA,QAAA,CAAS,MAAM,CAAA;AACnD,UAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,YAAS,QAAA,CAAA,UAAA,EAAY,YAAY,QAAQ,CAAA;AAAA;AAC3C;AACF,OACD,CAAA;AAGD,MAAA,SAAA,CAAU,OAAQ,CAAA,uBAAA,EAAyB,CAAC,QAAA,EAAU,IAAS,KAAA;AAC7D,QAAI,IAAA,QAAA,CAAS,YAAY,MAAQ,EAAA;AAC/B,UAAA,IAAI,IAAK,CAAA,QAAA,KAAa,YAAgB,IAAA,IAAA,CAAK,aAAa,SAAW,EAAA;AACjE,YAAS,QAAA,CAAA,eAAA,CAAgB,KAAK,QAAQ,CAAA;AAAA;AACxC;AACF,OACD,CAAA;AAED,MAAA,MAAM,eAAe,MAAQ,EAAA,iBAAA;AAAA,QAC3B;AAAA,OACF;AACA,MAAA,MAAM,qBAAqB,MAAQ,EAAA,iBAAA;AAAA,QACjC;AAAA,OACF;AAGA,MAAO,OAAA,SAAA,CAAU,QAAS,CAAA,GAAA,CAAI,SAAW,EAAA;AAAA,QACvC,QAAU,EAAA,IAAA;AAAA,QACV,WAAA,EAAa,CAAC,OAAO,CAAA;AAAA,QACrB,QAAA,EAAU,CAAC,YAAA,EAAc,SAAS,CAAA;AAAA,QAClC,cAAgB,EAAA,IAAA;AAAA,QAChB,UAAY,EAAA,IAAA;AAAA,QACZ,uBAAyB,EAAA;AAAA,UACvB,YAAc,EAAA,YAAA,GAAe,IAAI,MAAA,CAAO,YAAY,CAAI,GAAA,KAAA,CAAA;AAAA,UACxD,kBAAoB,EAAA,kBAAA,GAChB,IAAI,MAAA,CAAO,kBAAkB,CAC7B,GAAA,KAAA;AAAA;AACN,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AACF;;;;"}
+{"version":3,"file":"transformer.esm.js","sources":["../../../../src/reader/transformers/html/transformer.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport DOMPurify from 'dompurify';\nimport { useCallback, useMemo } from 'react';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { Transformer } from '../transformer';\nimport { removeUnsafeIframes, removeUnsafeLinks } from './hooks';\n\n/**\n * Returns html sanitizer configuration\n */\nconst useSanitizerConfig = () => {\n  const configApi = useApi(configApiRef);\n\n  return useMemo(() => {\n    return configApi.getOptionalConfig('techdocs.sanitizer');\n  }, [configApi]);\n};\n\n/**\n * Returns a transformer that sanitizes the dom\n */\nexport const useSanitizerTransformer = (): Transformer => {\n  const config = useSanitizerConfig();\n\n  return useCallback(\n    async (dom: Element) => {\n      const hosts = config?.getOptionalStringArray('allowedIframeHosts');\n\n      DOMPurify.addHook('beforeSanitizeElements', removeUnsafeLinks);\n      const tags = ['link', 'meta'];\n\n      if (hosts) {\n        tags.push('iframe');\n        DOMPurify.addHook('beforeSanitizeElements', removeUnsafeIframes(hosts));\n      }\n\n      // Only allow meta tags if they are used for refreshing the page. They are required for the redirect feature.\n      DOMPurify.addHook('uponSanitizeElement', (currNode, data) => {\n        if (data.tagName === 'meta') {\n          const isMetaRefreshTag =\n            currNode.getAttribute('http-equiv') === 'refresh' &&\n            currNode.getAttribute('content')?.includes('url=');\n          if (!isMetaRefreshTag) {\n            currNode.parentNode?.removeChild(currNode);\n          }\n        }\n      });\n\n      // Only allow http-equiv and content attributes on meta tags. They are required for the redirect feature.\n      DOMPurify.addHook('uponSanitizeAttribute', (currNode, data) => {\n        if (currNode.tagName !== 'meta') {\n          if (data.attrName === 'http-equiv' || data.attrName === 'content') {\n            currNode.removeAttribute(data.attrName);\n          }\n        }\n      });\n\n      const tagNameCheck = config?.getOptionalString(\n        'allowedCustomElementTagNameRegExp',\n      );\n      const attributeNameCheck = config?.getOptionalString(\n        'allowedCustomElementAttributeNameRegExp',\n      );\n\n      // using outerHTML as we want to preserve the html tag attributes (lang)\n      return DOMPurify.sanitize(dom.outerHTML, {\n        ADD_TAGS: tags,\n        FORBID_TAGS: ['style'],\n        ADD_ATTR: ['http-equiv', 'content', 'dominant-baseline'],\n        WHOLE_DOCUMENT: true,\n        RETURN_DOM: true,\n        CUSTOM_ELEMENT_HANDLING: {\n          tagNameCheck: tagNameCheck ? new RegExp(tagNameCheck) : undefined,\n          attributeNameCheck: attributeNameCheck\n            ? new RegExp(attributeNameCheck)\n            : undefined,\n        },\n      });\n    },\n    [config],\n  );\n};\n"],"names":[],"mappings":";;;;;;AA2BA,MAAM,qBAAqB,MAAM;AAC/B,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AAErC,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAO,OAAA,SAAA,CAAU,kBAAkB,oBAAoB,CAAA;AAAA,GACzD,EAAG,CAAC,SAAS,CAAC,CAAA;AAChB,CAAA;AAKO,MAAM,0BAA0B,MAAmB;AACxD,EAAA,MAAM,SAAS,kBAAmB,EAAA;AAElC,EAAO,OAAA,WAAA;AAAA,IACL,OAAO,GAAiB,KAAA;AACtB,MAAM,MAAA,KAAA,GAAQ,MAAQ,EAAA,sBAAA,CAAuB,oBAAoB,CAAA;AAEjE,MAAU,SAAA,CAAA,OAAA,CAAQ,0BAA0B,iBAAiB,CAAA;AAC7D,MAAM,MAAA,IAAA,GAAO,CAAC,MAAA,EAAQ,MAAM,CAAA;AAE5B,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,IAAA,CAAK,KAAK,QAAQ,CAAA;AAClB,QAAA,SAAA,CAAU,OAAQ,CAAA,wBAAA,EAA0B,mBAAoB,CAAA,KAAK,CAAC,CAAA;AAAA;AAIxE,MAAA,SAAA,CAAU,OAAQ,CAAA,qBAAA,EAAuB,CAAC,QAAA,EAAU,IAAS,KAAA;AAC3D,QAAI,IAAA,IAAA,CAAK,YAAY,MAAQ,EAAA;AAC3B,UAAM,MAAA,gBAAA,GACJ,QAAS,CAAA,YAAA,CAAa,YAAY,CAAA,KAAM,SACxC,IAAA,QAAA,CAAS,YAAa,CAAA,SAAS,CAAG,EAAA,QAAA,CAAS,MAAM,CAAA;AACnD,UAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,YAAS,QAAA,CAAA,UAAA,EAAY,YAAY,QAAQ,CAAA;AAAA;AAC3C;AACF,OACD,CAAA;AAGD,MAAA,SAAA,CAAU,OAAQ,CAAA,uBAAA,EAAyB,CAAC,QAAA,EAAU,IAAS,KAAA;AAC7D,QAAI,IAAA,QAAA,CAAS,YAAY,MAAQ,EAAA;AAC/B,UAAA,IAAI,IAAK,CAAA,QAAA,KAAa,YAAgB,IAAA,IAAA,CAAK,aAAa,SAAW,EAAA;AACjE,YAAS,QAAA,CAAA,eAAA,CAAgB,KAAK,QAAQ,CAAA;AAAA;AACxC;AACF,OACD,CAAA;AAED,MAAA,MAAM,eAAe,MAAQ,EAAA,iBAAA;AAAA,QAC3B;AAAA,OACF;AACA,MAAA,MAAM,qBAAqB,MAAQ,EAAA,iBAAA;AAAA,QACjC;AAAA,OACF;AAGA,MAAO,OAAA,SAAA,CAAU,QAAS,CAAA,GAAA,CAAI,SAAW,EAAA;AAAA,QACvC,QAAU,EAAA,IAAA;AAAA,QACV,WAAA,EAAa,CAAC,OAAO,CAAA;AAAA,QACrB,QAAU,EAAA,CAAC,YAAc,EAAA,SAAA,EAAW,mBAAmB,CAAA;AAAA,QACvD,cAAgB,EAAA,IAAA;AAAA,QAChB,UAAY,EAAA,IAAA;AAAA,QACZ,uBAAyB,EAAA;AAAA,UACvB,YAAc,EAAA,YAAA,GAAe,IAAI,MAAA,CAAO,YAAY,CAAI,GAAA,KAAA,CAAA;AAAA,UACxD,kBAAoB,EAAA,kBAAA,GAChB,IAAI,MAAA,CAAO,kBAAkB,CAC7B,GAAA,KAAA;AAAA;AACN,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AACF;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-techdocs",
-  "version": "1.12.3",
+  "version": "1.12.4-next.1",
   "description": "The Backstage plugin that renders technical documentation for your components",
   "backstage": {
     "role": "frontend-plugin",
@@ -71,23 +71,23 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "^1.9.1",
-    "@backstage/catalog-model": "^1.7.3",
-    "@backstage/config": "^1.3.2",
-    "@backstage/core-compat-api": "^0.3.6",
-    "@backstage/core-components": "^0.16.4",
-    "@backstage/core-plugin-api": "^1.10.4",
-    "@backstage/errors": "^1.2.7",
-    "@backstage/frontend-plugin-api": "^0.9.5",
-    "@backstage/integration": "^1.16.1",
-    "@backstage/integration-react": "^1.2.4",
-    "@backstage/plugin-auth-react": "^0.1.12",
-    "@backstage/plugin-catalog-react": "^1.15.2",
-    "@backstage/plugin-search-common": "^1.2.17",
-    "@backstage/plugin-search-react": "^1.8.6",
-    "@backstage/plugin-techdocs-common": "^0.1.0",
-    "@backstage/plugin-techdocs-react": "^1.2.14",
-    "@backstage/theme": "^0.6.4",
+    "@backstage/catalog-client": "1.9.1",
+    "@backstage/catalog-model": "1.7.3",
+    "@backstage/config": "1.3.2",
+    "@backstage/core-compat-api": "0.3.7-next.1",
+    "@backstage/core-components": "0.16.5-next.0",
+    "@backstage/core-plugin-api": "1.10.4",
+    "@backstage/errors": "1.2.7",
+    "@backstage/frontend-plugin-api": "0.9.6-next.1",
+    "@backstage/integration": "1.16.1",
+    "@backstage/integration-react": "1.2.4",
+    "@backstage/plugin-auth-react": "0.1.13-next.0",
+    "@backstage/plugin-catalog-react": "1.16.0-next.1",
+    "@backstage/plugin-search-common": "1.2.17",
+    "@backstage/plugin-search-react": "1.8.7-next.1",
+    "@backstage/plugin-techdocs-common": "0.1.0",
+    "@backstage/plugin-techdocs-react": "1.2.15-next.1",
+    "@backstage/theme": "0.6.4",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
@@ -101,12 +101,12 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.30.0",
-    "@backstage/core-app-api": "^1.15.5",
-    "@backstage/dev-utils": "^1.1.7",
-    "@backstage/plugin-catalog": "^1.27.0",
-    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.21",
-    "@backstage/test-utils": "^1.7.5",
+    "@backstage/cli": "0.30.1-next.0",
+    "@backstage/core-app-api": "1.15.5",
+    "@backstage/dev-utils": "1.1.8-next.1",
+    "@backstage/plugin-catalog": "1.28.0-next.1",
+    "@backstage/plugin-techdocs-module-addons-contrib": "1.1.22-next.1",
+    "@backstage/test-utils": "1.7.5",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",