@backstage/plugin-techdocs 1.10.4-next.1 → 1.10.5-next.0

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

@@ -0,0 +1,94 @@
+import { LogViewer } from '@backstage/core-components';
+import Button from '@material-ui/core/Button';
+import Drawer from '@material-ui/core/Drawer';
+import Grid from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Close from '@material-ui/icons/Close';
+import React, { useState } from 'react';
+
+const useDrawerStyles = makeStyles(
+  (theme) => createStyles({
+    paper: {
+      width: "100%",
+      [theme.breakpoints.up("sm")]: {
+        width: "75%"
+      },
+      [theme.breakpoints.up("md")]: {
+        width: "50%"
+      },
+      padding: theme.spacing(2.5)
+    },
+    root: {
+      height: "100%",
+      overflow: "hidden"
+    },
+    logs: {
+      background: theme.palette.background.default
+    }
+  })
+);
+const TechDocsBuildLogsDrawerContent = ({
+  buildLog,
+  onClose
+}) => {
+  const classes = useDrawerStyles();
+  const logText = buildLog.length === 0 ? "Waiting for logs..." : buildLog.join("\n");
+  return /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "column",
+      className: classes.root,
+      spacing: 0,
+      wrap: "nowrap"
+    },
+    /* @__PURE__ */ React.createElement(
+      Grid,
+      {
+        item: true,
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        spacing: 0,
+        wrap: "nowrap"
+      },
+      /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Build Details"),
+      /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          key: "dismiss",
+          title: "Close the drawer",
+          onClick: onClose,
+          color: "inherit"
+        },
+        /* @__PURE__ */ React.createElement(Close, null)
+      )
+    ),
+    /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(LogViewer, { text: logText, classes: { root: classes.logs } }))
+  );
+};
+const TechDocsBuildLogs = ({ buildLog }) => {
+  const classes = useDrawerStyles();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, { color: "inherit", onClick: () => setOpen(true) }, "Show Build Logs"), /* @__PURE__ */ React.createElement(
+    Drawer,
+    {
+      classes: { paper: classes.paper },
+      anchor: "right",
+      open,
+      onClose: () => setOpen(false)
+    },
+    /* @__PURE__ */ React.createElement(
+      TechDocsBuildLogsDrawerContent,
+      {
+        buildLog,
+        onClose: () => setOpen(false)
+      }
+    )
+  ));
+};
+
+export { TechDocsBuildLogs, TechDocsBuildLogsDrawerContent };
+//# sourceMappingURL=TechDocsBuildLogs.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TechDocsBuildLogs.esm.js","sources":["../../../src/reader/components/TechDocsBuildLogs.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 { LogViewer } from '@backstage/core-components';\nimport Button from '@material-ui/core/Button';\nimport Drawer from '@material-ui/core/Drawer';\nimport Grid from '@material-ui/core/Grid';\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from '@material-ui/core/Typography';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport Close from '@material-ui/icons/Close';\nimport React, { useState } from 'react';\n\nconst useDrawerStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    paper: {\n      width: '100%',\n      [theme.breakpoints.up('sm')]: {\n        width: '75%',\n      },\n      [theme.breakpoints.up('md')]: {\n        width: '50%',\n      },\n      padding: theme.spacing(2.5),\n    },\n    root: {\n      height: '100%',\n      overflow: 'hidden',\n    },\n    logs: {\n      background: theme.palette.background.default,\n    },\n  }),\n);\n\nexport const TechDocsBuildLogsDrawerContent = ({\n  buildLog,\n  onClose,\n}: {\n  buildLog: string[];\n  onClose: () => void;\n}) => {\n  const classes = useDrawerStyles();\n  const logText =\n    buildLog.length === 0 ? 'Waiting for logs...' : buildLog.join('\\n');\n  return (\n    <Grid\n      container\n      direction=\"column\"\n      className={classes.root}\n      spacing={0}\n      wrap=\"nowrap\"\n    >\n      <Grid\n        item\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        spacing={0}\n        wrap=\"nowrap\"\n      >\n        <Typography variant=\"h5\">Build Details</Typography>\n        <IconButton\n          key=\"dismiss\"\n          title=\"Close the drawer\"\n          onClick={onClose}\n          color=\"inherit\"\n        >\n          <Close />\n        </IconButton>\n      </Grid>\n      <Grid item xs>\n        <LogViewer text={logText} classes={{ root: classes.logs }} />\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const TechDocsBuildLogs = ({ buildLog }: { buildLog: string[] }) => {\n  const classes = useDrawerStyles();\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button color=\"inherit\" onClick={() => setOpen(true)}>\n        Show Build Logs\n      </Button>\n      <Drawer\n        classes={{ paper: classes.paper }}\n        anchor=\"right\"\n        open={open}\n        onClose={() => setOpen(false)}\n      >\n        <TechDocsBuildLogsDrawerContent\n          buildLog={buildLog}\n          onClose={() => setOpen(false)}\n        />\n      </Drawer>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import { useApi, configApiRef, useAnalytics } from '@backstage/core-plugin-api';
+import { ErrorPage } from '@backstage/core-components';
+import { useTechDocsReaderPage } from '@backstage/plugin-techdocs-react';
+import { useLocation } from 'react-router-dom';
+
+const TechDocsNotFound = ({ errorMessage }) => {
+  const techdocsBuilder = useApi(configApiRef).getOptionalString("techdocs.builder");
+  const analyticsApi = useAnalytics();
+  const { entityRef } = useTechDocsReaderPage();
+  const location = useLocation();
+  useEffect(() => {
+    const { pathname, search, hash } = location;
+    analyticsApi.captureEvent("not-found", `${pathname}${search}${hash}`, {
+      attributes: entityRef
+    });
+  }, [analyticsApi, entityRef, location]);
+  let additionalInfo = "";
+  if (techdocsBuilder !== "local") {
+    additionalInfo = "Note that techdocs.builder is not set to 'local' in your config, which means this Backstage app will not generate docs if they are not found. Make sure the project's docs are generated and published by some external process (e.g. CI/CD pipeline). Or change techdocs.builder to 'local' to generate docs from this Backstage instance.";
+  }
+  return /* @__PURE__ */ React.createElement(
+    ErrorPage,
+    {
+      status: "404",
+      statusMessage: errorMessage || "Documentation not found",
+      additionalInfo
+    }
+  );
+};
+
+export { TechDocsNotFound };
+//# sourceMappingURL=TechDocsNotFound.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TechDocsNotFound.esm.js","sources":["../../../src/reader/components/TechDocsNotFound.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, { useEffect } from 'react';\nimport { useApi, configApiRef, useAnalytics } from '@backstage/core-plugin-api';\nimport { ErrorPage } from '@backstage/core-components';\nimport { useTechDocsReaderPage } from '@backstage/plugin-techdocs-react';\nimport { useLocation } from 'react-router-dom';\n\ntype Props = {\n  errorMessage?: string;\n};\n\nexport const TechDocsNotFound = ({ errorMessage }: Props) => {\n  const techdocsBuilder =\n    useApi(configApiRef).getOptionalString('techdocs.builder');\n  const analyticsApi = useAnalytics();\n  const { entityRef } = useTechDocsReaderPage();\n  const location = useLocation();\n\n  useEffect(() => {\n    const { pathname, search, hash } = location;\n    analyticsApi.captureEvent('not-found', `${pathname}${search}${hash}`, {\n      attributes: entityRef,\n    });\n  }, [analyticsApi, entityRef, location]);\n\n  let additionalInfo = '';\n  if (techdocsBuilder !== 'local') {\n    additionalInfo =\n      \"Note that techdocs.builder is not set to 'local' in your config, which means this Backstage app will not \" +\n      \"generate docs if they are not found. Make sure the project's docs are generated and published by some external \" +\n      \"process (e.g. CI/CD pipeline). Or change techdocs.builder to 'local' to generate docs from this Backstage \" +\n      'instance.';\n  }\n\n  return (\n    <ErrorPage\n      status=\"404\"\n      statusMessage={errorMessage || 'Documentation not found'}\n      additionalInfo={additionalInfo}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0BO,MAAM,gBAAmB,GAAA,CAAC,EAAE,YAAA,EAA0B,KAAA;AAC3D,EAAA,MAAM,eACJ,GAAA,MAAA,CAAO,YAAY,CAAA,CAAE,kBAAkB,kBAAkB,CAAA,CAAA;AAC3D,EAAA,MAAM,eAAe,YAAa,EAAA,CAAA;AAClC,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,qBAAsB,EAAA,CAAA;AAC5C,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAE7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,IAAA,EAAS,GAAA,QAAA,CAAA;AACnC,IAAa,YAAA,CAAA,YAAA,CAAa,aAAa,CAAG,EAAA,QAAQ,GAAG,MAAM,CAAA,EAAG,IAAI,CAAI,CAAA,EAAA;AAAA,MACpE,UAAY,EAAA,SAAA;AAAA,KACb,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,SAAA,EAAW,QAAQ,CAAC,CAAA,CAAA;AAEtC,EAAA,IAAI,cAAiB,GAAA,EAAA,CAAA;AACrB,EAAA,IAAI,oBAAoB,OAAS,EAAA;AAC/B,IACE,cAAA,GAAA,6UAAA,CAAA;AAAA,GAIJ;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,KAAA;AAAA,MACP,eAAe,YAAgB,IAAA,yBAAA;AAAA,MAC/B,cAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,42 @@
+import React, { Children } from 'react';
+import { useOutlet } from 'react-router-dom';
+import { Page } from '@backstage/core-components';
+import { TECHDOCS_ADDONS_WRAPPER_KEY, TECHDOCS_ADDONS_KEY, TechDocsReaderPageProvider } from '@backstage/plugin-techdocs-react';
+import { TechDocsReaderPageContent } from '../TechDocsReaderPageContent/TechDocsReaderPageContent.esm.js';
+import { TechDocsReaderPageHeader } from '../TechDocsReaderPageHeader/TechDocsReaderPageHeader.esm.js';
+import { TechDocsReaderPageSubheader } from '../TechDocsReaderPageSubheader/TechDocsReaderPageSubheader.esm.js';
+import { rootDocsRouteRef } from '../../../routes.esm.js';
+import { useRouteRefParams, getComponentData } from '@backstage/core-plugin-api';
+import { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react';
+
+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 TechDocsReaderPage = (props) => {
+  const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef);
+  const { children, entityRef = { kind, name, namespace } } = props;
+  const outlet = useOutlet();
+  if (!children) {
+    const childrenList = outlet ? Children.toArray(outlet.props.children) : [];
+    const grandChildren = childrenList.flatMap(
+      (child) => {
+        var _a, _b;
+        return (_b = (_a = child == null ? void 0 : child.props) == null ? void 0 : _a.children) != null ? _b : [];
+      }
+    );
+    const page = grandChildren.find(
+      (grandChild) => !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) && !getComponentData(grandChild, TECHDOCS_ADDONS_KEY)
+    );
+    return /* @__PURE__ */ React.createElement(CookieAuthRefreshProvider, { pluginId: "techdocs" }, /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, page || /* @__PURE__ */ React.createElement(TechDocsReaderLayout, null)));
+  }
+  return /* @__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))));
+};
+
+export { TechDocsReaderLayout, TechDocsReaderPage };
+//# sourceMappingURL=TechDocsReaderPage.esm.js.map

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

@@ -0,0 +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';\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};\n\n/**\n * An addon-aware implementation of the TechDocsReaderPage.\n *\n * @public\n */\nexport const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {\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      <CookieAuthRefreshProvider pluginId=\"techdocs\">\n        <TechDocsReaderPageProvider entityRef={entityRef}>\n          {(page as JSX.Element) || <TechDocsReaderLayout />}\n        </TechDocsReaderPageProvider>\n      </CookieAuthRefreshProvider>\n    );\n  }\n\n  // As explained above, a render function is configuration 3 and React element is 2\n  return (\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  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAwIa,MAAA,oBAAA,GAAuB,CAAC,KAAqC,KAAA;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,UAAa,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;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,CAAA;AAEJ,EAAA;AAea,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,SAAU,EAAA,GAAI,kBAAkB,gBAAgB,CAAA,CAAA;AACpE,EAAM,MAAA,EAAE,UAAU,SAAY,GAAA,EAAE,MAAM,IAAM,EAAA,SAAA,IAAgB,GAAA,KAAA,CAAA;AAE5D,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AAEzB,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAM,MAAA,YAAA,GAAe,SAAS,QAAS,CAAA,OAAA,CAAQ,OAAO,KAAM,CAAA,QAAQ,IAAI,EAAC,CAAA;AAEzE,IAAA,MAAM,gBAAgB,YAAa,CAAA,OAAA;AAAA,MACjC,CAAM,KAAA,KAAA;AA1KZ,QAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA0KgB,QAAA,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAwB,KAAxB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAA+B,QAA/B,KAAA,IAAA,GAAA,EAAA,GAA2C,EAAC,CAAA;AAAA,OAAA;AAAA,KACxD,CAAA;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,CAAA;AAAA,KACrD,CAAA;AAGA,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,yBAA0B,EAAA,EAAA,QAAA,EAAS,UAClC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,0BAA2B,EAAA,EAAA,SAAA,EAAA,EACxB,IAAwB,oBAAA,KAAA,CAAA,aAAA,CAAC,oBAAqB,EAAA,IAAA,CAClD,CACF,CAAA,CAAA;AAAA,GAEJ;AAGA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,6BAA0B,QAAS,EAAA,UAAA,EAAA,sCACjC,0BAA2B,EAAA,EAAA,SAAA,EAAA,EACzB,CAAC,EAAE,QAAU,EAAA,cAAA,EAAgB,SAC5B,qBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,sBACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,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,OAAA;AAAA,GACD,CAAA,GACD,QACN,CACF,CAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,2 @@
+export { TechDocsReaderLayout, TechDocsReaderPage } from './TechDocsReaderPage.esm.js';
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,77 @@
+import React, { useEffect, useCallback } from 'react';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+import { useTechDocsReaderPage, useShadowDomStylesLoading, useShadowRootElements, TechDocsShadowDom } from '@backstage/plugin-techdocs-react';
+import { ErrorPage, Content } from '@backstage/core-components';
+import { TechDocsSearch } from '../../../search/components/TechDocsSearch.esm.js';
+import { TechDocsStateIndicator } from '../TechDocsStateIndicator.esm.js';
+import { useTechDocsReaderDom } from './dom.esm.js';
+import { withTechDocsReaderProvider } from '../TechDocsReaderProvider.esm.js';
+import { TechDocsReaderPageContentAddons } from './TechDocsReaderPageContentAddons.esm.js';
+
+const useStyles = makeStyles({
+  search: {
+    width: "100%",
+    "@media (min-width: 76.1875em)": {
+      width: "calc(100% - 34.4rem)",
+      margin: "0 auto"
+    },
+    "@media print": {
+      display: "none"
+    }
+  }
+});
+const TechDocsReaderPageContent = withTechDocsReaderProvider(
+  (props) => {
+    var _a;
+    const { withSearch = true, onReady } = props;
+    const classes = useStyles();
+    const {
+      entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },
+      entityRef,
+      setShadowRoot
+    } = useTechDocsReaderPage();
+    const dom = useTechDocsReaderDom(entityRef);
+    const path = window.location.pathname;
+    const hash = window.location.hash;
+    const isStyleLoading = useShadowDomStylesLoading(dom);
+    const [hashElement] = useShadowRootElements([`[id="${hash.slice(1)}"]`]);
+    useEffect(() => {
+      var _a2;
+      if (isStyleLoading)
+        return;
+      if (hash) {
+        if (hashElement) {
+          hashElement.scrollIntoView();
+        }
+      } else {
+        (_a2 = document == null ? void 0 : document.querySelector("header")) == null ? void 0 : _a2.scrollIntoView();
+      }
+    }, [path, hash, hashElement, isStyleLoading]);
+    const handleAppend = useCallback(
+      (newShadowRoot) => {
+        setShadowRoot(newShadowRoot);
+        if (onReady instanceof Function) {
+          onReady();
+        }
+      },
+      [setShadowRoot, onReady]
+    );
+    if (entityMetadataLoading === false && !entityMetadata)
+      return /* @__PURE__ */ React.createElement(ErrorPage, { status: "404", statusMessage: "PAGE NOT FOUND" });
+    if (!dom) {
+      return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { xs: 12, item: true }, /* @__PURE__ */ React.createElement(TechDocsStateIndicator, null))));
+    }
+    return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { xs: 12, item: true }, /* @__PURE__ */ React.createElement(TechDocsStateIndicator, null)), withSearch && /* @__PURE__ */ React.createElement(Grid, { className: classes.search, xs: "auto", item: true }, /* @__PURE__ */ React.createElement(
+      TechDocsSearch,
+      {
+        entityId: entityRef,
+        entityTitle: (_a = entityMetadata == null ? void 0 : entityMetadata.metadata) == null ? void 0 : _a.title
+      }
+    )), /* @__PURE__ */ React.createElement(Grid, { xs: 12, item: true }, /* @__PURE__ */ React.createElement(TechDocsShadowDom, { element: dom, onAppend: handleAppend }, /* @__PURE__ */ React.createElement(TechDocsReaderPageContentAddons, null)))));
+  }
+);
+const Reader = TechDocsReaderPageContent;
+
+export { Reader, TechDocsReaderPageContent };
+//# sourceMappingURL=TechDocsReaderPageContent.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TechDocsReaderPageContent.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.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, { useCallback, useEffect } from 'react';\n\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport {\n  TechDocsShadowDom,\n  useShadowDomStylesLoading,\n  useShadowRootElements,\n  useTechDocsReaderPage,\n} from '@backstage/plugin-techdocs-react';\nimport { CompoundEntityRef } from '@backstage/catalog-model';\nimport { Content, ErrorPage } from '@backstage/core-components';\n\nimport { TechDocsSearch } from '../../../search';\nimport { TechDocsStateIndicator } from '../TechDocsStateIndicator';\n\nimport { useTechDocsReaderDom } from './dom';\nimport { withTechDocsReaderProvider } from '../TechDocsReaderProvider';\nimport { TechDocsReaderPageContentAddons } from './TechDocsReaderPageContentAddons';\n\nconst useStyles = makeStyles({\n  search: {\n    width: '100%',\n    '@media (min-width: 76.1875em)': {\n      width: 'calc(100% - 34.4rem)',\n      margin: '0 auto',\n    },\n    '@media print': {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Props for {@link TechDocsReaderPageContent}\n * @public\n */\nexport type TechDocsReaderPageContentProps = {\n  /**\n   * @deprecated No need to pass down entityRef as property anymore. Consumes the entityName from `TechDocsReaderPageContext`. Use the {@link @backstage/plugin-techdocs-react#useTechDocsReaderPage} hook for custom reader page content.\n   */\n  entityRef?: CompoundEntityRef;\n  /**\n   * Show or hide the search bar, defaults to true.\n   */\n  withSearch?: boolean;\n  /**\n   * Callback called when the content is rendered.\n   */\n  onReady?: () => void;\n};\n\n/**\n * Renders the reader page content\n * @public\n */\nexport const TechDocsReaderPageContent = withTechDocsReaderProvider(\n  (props: TechDocsReaderPageContentProps) => {\n    const { withSearch = true, onReady } = props;\n    const classes = useStyles();\n\n    const {\n      entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },\n      entityRef,\n      setShadowRoot,\n    } = useTechDocsReaderPage();\n    const dom = useTechDocsReaderDom(entityRef);\n    const path = window.location.pathname;\n    const hash = window.location.hash;\n    const isStyleLoading = useShadowDomStylesLoading(dom);\n    const [hashElement] = useShadowRootElements([`[id=\"${hash.slice(1)}\"]`]);\n\n    useEffect(() => {\n      if (isStyleLoading) return;\n\n      if (hash) {\n        if (hashElement) {\n          hashElement.scrollIntoView();\n        }\n      } else {\n        document?.querySelector('header')?.scrollIntoView();\n      }\n    }, [path, hash, hashElement, isStyleLoading]);\n\n    const handleAppend = useCallback(\n      (newShadowRoot: ShadowRoot) => {\n        setShadowRoot(newShadowRoot);\n        if (onReady instanceof Function) {\n          onReady();\n        }\n      },\n      [setShadowRoot, onReady],\n    );\n\n    // No entity metadata = 404. Don't render content at all.\n    if (entityMetadataLoading === false && !entityMetadata)\n      return <ErrorPage status=\"404\" statusMessage=\"PAGE NOT FOUND\" />;\n\n    // Do not return content until dom is ready; instead, render a state\n    // indicator, which handles progress and content errors on our behalf.\n    if (!dom) {\n      return (\n        <Content>\n          <Grid container>\n            <Grid xs={12} item>\n              <TechDocsStateIndicator />\n            </Grid>\n          </Grid>\n        </Content>\n      );\n    }\n\n    return (\n      <Content>\n        <Grid container>\n          <Grid xs={12} item>\n            <TechDocsStateIndicator />\n          </Grid>\n          {withSearch && (\n            <Grid className={classes.search} xs=\"auto\" item>\n              <TechDocsSearch\n                entityId={entityRef}\n                entityTitle={entityMetadata?.metadata?.title}\n              />\n            </Grid>\n          )}\n          <Grid xs={12} item>\n            {/* Centers the styles loaded event to avoid having multiple locations setting the opacity style in Shadow Dom causing the screen to flash multiple times */}\n            <TechDocsShadowDom element={dom} onAppend={handleAppend}>\n              <TechDocsReaderPageContentAddons />\n            </TechDocsShadowDom>\n          </Grid>\n        </Grid>\n      </Content>\n    );\n  },\n);\n\n/**\n * Props for {@link Reader}\n *\n * @public\n * @deprecated use `TechDocsReaderPageContentProps` instead.\n */\nexport type ReaderProps = TechDocsReaderPageContentProps;\n\n/**\n * Component responsible for rendering TechDocs documentation\n * @public\n * @deprecated use `TechDocsReaderPageContent` component instead.\n */\nexport const Reader = TechDocsReaderPageContent;\n"],"names":["_a"],"mappings":"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"}

package/dist/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContentAddons.esm.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import Portal from '@material-ui/core/Portal';
+import { useTechDocsAddons, useTechDocsReaderPage, TechDocsAddonLocations } from '@backstage/plugin-techdocs-react';
+
+const TechDocsReaderPageContentAddons = () => {
+  const addons = useTechDocsAddons();
+  const { shadowRoot } = useTechDocsReaderPage();
+  const contentElement = shadowRoot == null ? void 0 : shadowRoot.querySelector(
+    '[data-md-component="content"]'
+  );
+  const primarySidebarElement = shadowRoot == null ? void 0 : shadowRoot.querySelector(
+    'div[data-md-component="sidebar"][data-md-type="navigation"], div[data-md-component="navigation"]'
+  );
+  let primarySidebarAddonLocation = primarySidebarElement == null ? void 0 : primarySidebarElement.querySelector(
+    '[data-techdocs-addons-location="primary sidebar"]'
+  );
+  if (!primarySidebarAddonLocation) {
+    primarySidebarAddonLocation = document.createElement("div");
+    primarySidebarAddonLocation.setAttribute(
+      "data-techdocs-addons-location",
+      "primary sidebar"
+    );
+    primarySidebarElement == null ? void 0 : primarySidebarElement.prepend(primarySidebarAddonLocation);
+  }
+  const secondarySidebarElement = shadowRoot == null ? void 0 : shadowRoot.querySelector(
+    'div[data-md-component="sidebar"][data-md-type="toc"], div[data-md-component="toc"]'
+  );
+  let secondarySidebarAddonLocation = secondarySidebarElement == null ? void 0 : secondarySidebarElement.querySelector(
+    '[data-techdocs-addons-location="secondary sidebar"]'
+  );
+  if (!secondarySidebarAddonLocation) {
+    secondarySidebarAddonLocation = document.createElement("div");
+    secondarySidebarAddonLocation.setAttribute(
+      "data-techdocs-addons-location",
+      "secondary sidebar"
+    );
+    secondarySidebarElement == null ? void 0 : secondarySidebarElement.prepend(secondarySidebarAddonLocation);
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Portal, { container: primarySidebarAddonLocation }, addons.renderComponentsByLocation(TechDocsAddonLocations.PrimarySidebar)), /* @__PURE__ */ React.createElement(Portal, { container: contentElement }, addons.renderComponentsByLocation(TechDocsAddonLocations.Content)), /* @__PURE__ */ React.createElement(Portal, { container: secondarySidebarAddonLocation }, addons.renderComponentsByLocation(TechDocsAddonLocations.SecondarySidebar)));
+};
+
+export { TechDocsReaderPageContentAddons };
+//# sourceMappingURL=TechDocsReaderPageContentAddons.esm.js.map

package/dist/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContentAddons.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TechDocsReaderPageContentAddons.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContentAddons.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 from 'react';\nimport Portal from '@material-ui/core/Portal';\nimport {\n  useTechDocsAddons,\n  TechDocsAddonLocations as locations,\n  useTechDocsReaderPage,\n} from '@backstage/plugin-techdocs-react';\n\nexport const TechDocsReaderPageContentAddons = () => {\n  const addons = useTechDocsAddons();\n\n  const { shadowRoot } = useTechDocsReaderPage();\n\n  const contentElement = shadowRoot?.querySelector(\n    '[data-md-component=\"content\"]',\n  );\n\n  const primarySidebarElement = shadowRoot?.querySelector(\n    'div[data-md-component=\"sidebar\"][data-md-type=\"navigation\"], div[data-md-component=\"navigation\"]',\n  );\n  let primarySidebarAddonLocation = primarySidebarElement?.querySelector(\n    '[data-techdocs-addons-location=\"primary sidebar\"]',\n  );\n  if (!primarySidebarAddonLocation) {\n    primarySidebarAddonLocation = document.createElement('div');\n    primarySidebarAddonLocation.setAttribute(\n      'data-techdocs-addons-location',\n      'primary sidebar',\n    );\n    primarySidebarElement?.prepend(primarySidebarAddonLocation);\n  }\n\n  const secondarySidebarElement = shadowRoot?.querySelector(\n    'div[data-md-component=\"sidebar\"][data-md-type=\"toc\"], div[data-md-component=\"toc\"]',\n  );\n  let secondarySidebarAddonLocation = secondarySidebarElement?.querySelector(\n    '[data-techdocs-addons-location=\"secondary sidebar\"]',\n  );\n  if (!secondarySidebarAddonLocation) {\n    secondarySidebarAddonLocation = document.createElement('div');\n    secondarySidebarAddonLocation.setAttribute(\n      'data-techdocs-addons-location',\n      'secondary sidebar',\n    );\n    secondarySidebarElement?.prepend(secondarySidebarAddonLocation);\n  }\n\n  return (\n    <>\n      <Portal container={primarySidebarAddonLocation}>\n        {addons.renderComponentsByLocation(locations.PrimarySidebar)}\n      </Portal>\n      <Portal container={contentElement}>\n        {addons.renderComponentsByLocation(locations.Content)}\n      </Portal>\n      <Portal container={secondarySidebarAddonLocation}>\n        {addons.renderComponentsByLocation(locations.SecondarySidebar)}\n      </Portal>\n    </>\n  );\n};\n"],"names":["locations"],"mappings":";;;;AAwBO,MAAM,kCAAkC,MAAM;AACnD,EAAA,MAAM,SAAS,iBAAkB,EAAA,CAAA;AAEjC,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,qBAAsB,EAAA,CAAA;AAE7C,EAAA,MAAM,iBAAiB,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,aAAA;AAAA,IACjC,+BAAA;AAAA,GAAA,CAAA;AAGF,EAAA,MAAM,wBAAwB,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,aAAA;AAAA,IACxC,kGAAA;AAAA,GAAA,CAAA;AAEF,EAAA,IAAI,8BAA8B,qBAAuB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,qBAAA,CAAA,aAAA;AAAA,IACvD,mDAAA;AAAA,GAAA,CAAA;AAEF,EAAA,IAAI,CAAC,2BAA6B,EAAA;AAChC,IAA8B,2BAAA,GAAA,QAAA,CAAS,cAAc,KAAK,CAAA,CAAA;AAC1D,IAA4B,2BAAA,CAAA,YAAA;AAAA,MAC1B,+BAAA;AAAA,MACA,iBAAA;AAAA,KACF,CAAA;AACA,IAAA,qBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,qBAAA,CAAuB,OAAQ,CAAA,2BAAA,CAAA,CAAA;AAAA,GACjC;AAEA,EAAA,MAAM,0BAA0B,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,aAAA;AAAA,IAC1C,oFAAA;AAAA,GAAA,CAAA;AAEF,EAAA,IAAI,gCAAgC,uBAAyB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,uBAAA,CAAA,aAAA;AAAA,IAC3D,qDAAA;AAAA,GAAA,CAAA;AAEF,EAAA,IAAI,CAAC,6BAA+B,EAAA;AAClC,IAAgC,6BAAA,GAAA,QAAA,CAAS,cAAc,KAAK,CAAA,CAAA;AAC5D,IAA8B,6BAAA,CAAA,YAAA;AAAA,MAC5B,+BAAA;AAAA,MACA,mBAAA;AAAA,KACF,CAAA;AACA,IAAA,uBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,uBAAA,CAAyB,OAAQ,CAAA,6BAAA,CAAA,CAAA;AAAA,GACnC;AAEA,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,SAAA,EAAW,2BAChB,EAAA,EAAA,MAAA,CAAO,0BAA2B,CAAAA,sBAAA,CAAU,cAAc,CAC7D,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAO,SAAW,EAAA,cAAA,EAAA,EAChB,MAAO,CAAA,0BAAA,CAA2BA,sBAAU,CAAA,OAAO,CACtD,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,SAAW,EAAA,6BAAA,EAAA,EAChB,MAAO,CAAA,0BAAA,CAA2BA,sBAAU,CAAA,gBAAgB,CAC/D,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/reader/components/TechDocsReaderPageContent/dom.esm.js

@@ -0,0 +1,203 @@
+import { useState, useCallback, useEffect } from 'react';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { useTheme } from '@material-ui/core/styles';
+import { useAnalytics, useApi } from '@backstage/core-plugin-api';
+import { scmIntegrationsApiRef } from '@backstage/integration-react';
+import { techdocsStorageApiRef, useShadowDomStylesLoading } from '@backstage/plugin-techdocs-react';
+import { useTechDocsReader } from '../TechDocsReaderProvider.esm.js';
+import { useSanitizerTransformer } from '../../transformers/html/transformer.esm.js';
+import { useStylesTransformer } from '../../transformers/styles/transformer.esm.js';
+import { addBaseUrl } from '../../transformers/addBaseUrl.esm.js';
+import { addGitFeedbackLink } from '../../transformers/addGitFeedbackLink.esm.js';
+import { addSidebarToggle } from '../../transformers/addSidebarToggle.esm.js';
+import { rewriteDocLinks } from '../../transformers/rewriteDocLinks.esm.js';
+import { addLinkClickListener } from '../../transformers/addLinkClickListener.esm.js';
+import { copyToClipboard } from '../../transformers/copyToClipboard.esm.js';
+import { removeMkdocsHeader } from '../../transformers/removeMkdocsHeader.esm.js';
+import { simplifyMkdocsFooter } from '../../transformers/simplifyMkdocsFooter.esm.js';
+import { onCssReady } from '../../transformers/onCssReady.esm.js';
+import { scrollIntoNavigation } from '../../transformers/scrollIntoNavigation.esm.js';
+import { transform } from '../../transformers/transformer.esm.js';
+import { useNavigateUrl } from './useNavigateUrl.esm.js';
+
+const MOBILE_MEDIA_QUERY = "screen and (max-width: 76.1875em)";
+const useTechDocsReaderDom = (entityRef) => {
+  const navigate = useNavigateUrl();
+  const theme = useTheme();
+  const isMobileMedia = useMediaQuery(MOBILE_MEDIA_QUERY);
+  const sanitizerTransformer = useSanitizerTransformer();
+  const stylesTransformer = useStylesTransformer();
+  const analytics = useAnalytics();
+  const techdocsStorageApi = useApi(techdocsStorageApiRef);
+  const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
+  const { state, path, content: rawPage } = useTechDocsReader();
+  const [dom, setDom] = useState(null);
+  const isStyleLoading = useShadowDomStylesLoading(dom);
+  const updateSidebarPositionAndHeight = useCallback(() => {
+    if (!dom)
+      return;
+    const sidebars = dom.querySelectorAll(".md-sidebar");
+    sidebars.forEach((element) => {
+      var _a, _b, _c, _d;
+      if (isMobileMedia) {
+        element.style.top = "0px";
+      } else {
+        const page = document == null ? void 0 : document.querySelector(".techdocs-reader-page");
+        const pageTop = (_a = page == null ? void 0 : page.getBoundingClientRect().top) != null ? _a : 0;
+        let domTop = (_b = dom.getBoundingClientRect().top) != null ? _b : 0;
+        const tabs = dom.querySelector(".md-container > .md-tabs");
+        const tabsHeight = (_c = tabs == null ? void 0 : tabs.getBoundingClientRect().height) != null ? _c : 0;
+        if (domTop < pageTop) {
+          domTop = pageTop;
+        }
+        const scrollbarTopPx = Math.max(domTop, 0) + tabsHeight;
+        element.style.top = `${scrollbarTopPx}px`;
+        const footer = dom.querySelector(".md-container > .md-footer");
+        const scrollbarEndPx = (_d = footer == null ? void 0 : footer.getBoundingClientRect().top) != null ? _d : window.innerHeight;
+        element.style.height = `${scrollbarEndPx - scrollbarTopPx}px`;
+      }
+      element.style.setProperty("opacity", "1");
+    });
+  }, [dom, isMobileMedia]);
+  useEffect(() => {
+    window.addEventListener("resize", updateSidebarPositionAndHeight);
+    window.addEventListener("scroll", updateSidebarPositionAndHeight, true);
+    return () => {
+      window.removeEventListener("resize", updateSidebarPositionAndHeight);
+      window.removeEventListener(
+        "scroll",
+        updateSidebarPositionAndHeight,
+        true
+      );
+    };
+  }, [dom, updateSidebarPositionAndHeight]);
+  const updateFooterWidth = useCallback(() => {
+    if (!dom)
+      return;
+    const footer = dom.querySelector(".md-footer");
+    if (footer) {
+      footer.style.width = `${dom.getBoundingClientRect().width}px`;
+    }
+  }, [dom]);
+  useEffect(() => {
+    window.addEventListener("resize", updateFooterWidth);
+    return () => {
+      window.removeEventListener("resize", updateFooterWidth);
+    };
+  }, [dom, updateFooterWidth]);
+  useEffect(() => {
+    if (!isStyleLoading) {
+      updateFooterWidth();
+      updateSidebarPositionAndHeight();
+    }
+  }, [
+    state,
+    isStyleLoading,
+    updateFooterWidth,
+    updateSidebarPositionAndHeight
+  ]);
+  const preRender = useCallback(
+    (rawContent, contentPath) => transform(rawContent, [
+      sanitizerTransformer,
+      addBaseUrl({
+        techdocsStorageApi,
+        entityId: entityRef,
+        path: contentPath
+      }),
+      rewriteDocLinks(),
+      addSidebarToggle(),
+      removeMkdocsHeader(),
+      simplifyMkdocsFooter(),
+      addGitFeedbackLink(scmIntegrationsApi),
+      stylesTransformer
+    ]),
+    [
+      // only add dependencies that are in state or memorized variables to avoid unnecessary calls between re-renders
+      entityRef,
+      scmIntegrationsApi,
+      techdocsStorageApi,
+      sanitizerTransformer,
+      stylesTransformer
+    ]
+  );
+  const postRender = useCallback(
+    async (transformedElement) => transform(transformedElement, [
+      scrollIntoNavigation(),
+      copyToClipboard(theme),
+      addLinkClickListener({
+        baseUrl: window.location.origin,
+        onClick: (event, url) => {
+          var _a, _b;
+          const modifierActive = event.ctrlKey || event.metaKey;
+          const parsedUrl = new URL(url);
+          const linkText = ((_a = event.target) == null ? void 0 : _a.innerText) || url;
+          const to = url.replace(window.location.origin, "");
+          analytics.captureEvent("click", linkText, { attributes: { to } });
+          if (parsedUrl.hash) {
+            if (modifierActive) {
+              window.open(url, "_blank");
+            } else {
+              navigate(url);
+              (_b = transformedElement == null ? void 0 : transformedElement.querySelector(`[id="${parsedUrl.hash.slice(1)}"]`)) == null ? void 0 : _b.scrollIntoView();
+            }
+          } else {
+            if (modifierActive) {
+              window.open(url, "_blank");
+            } else {
+              navigate(url);
+            }
+          }
+        }
+      }),
+      // disable MkDocs drawer toggling ('for' attribute => checkbox mechanism)
+      onCssReady({
+        onLoading: () => {
+        },
+        onLoaded: () => {
+          var _a;
+          (_a = transformedElement.querySelector(".md-nav__title")) == null ? void 0 : _a.removeAttribute("for");
+        }
+      }),
+      // hide sidebars until their positions are updated
+      onCssReady({
+        onLoading: () => {
+          const sidebars = Array.from(
+            transformedElement.querySelectorAll(".md-sidebar")
+          );
+          sidebars.forEach((element) => {
+            element.style.setProperty("opacity", "0");
+          });
+        },
+        onLoaded: () => {
+        }
+      })
+    ]),
+    [theme, navigate, analytics]
+  );
+  useEffect(() => {
+    if (!rawPage)
+      return () => {
+      };
+    let shouldReplaceContent = true;
+    preRender(rawPage, path).then(async (preTransformedDomElement) => {
+      if (!(preTransformedDomElement == null ? void 0 : preTransformedDomElement.innerHTML)) {
+        return;
+      }
+      if (!shouldReplaceContent) {
+        return;
+      }
+      window.scroll({ top: 0 });
+      const postTransformedDomElement = await postRender(
+        preTransformedDomElement
+      );
+      setDom(postTransformedDomElement);
+    });
+    return () => {
+      shouldReplaceContent = false;
+    };
+  }, [rawPage, path, preRender, postRender]);
+  return dom;
+};
+
+export { useTechDocsReaderDom };
+//# sourceMappingURL=dom.esm.js.map

package/dist/reader/components/TechDocsReaderPageContent/dom.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPageContent/dom.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 { useCallback, useEffect, useState } from 'react';\n\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport { useTheme } from '@material-ui/core/styles';\n\nimport { CompoundEntityRef } from '@backstage/catalog-model';\nimport { useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport { scmIntegrationsApiRef } from '@backstage/integration-react';\n\nimport {\n  techdocsStorageApiRef,\n  useShadowDomStylesLoading,\n} from '@backstage/plugin-techdocs-react';\n\nimport { useTechDocsReader } from '../TechDocsReaderProvider';\n\nimport {\n  addBaseUrl,\n  addGitFeedbackLink,\n  addLinkClickListener,\n  addSidebarToggle,\n  onCssReady,\n  removeMkdocsHeader,\n  rewriteDocLinks,\n  simplifyMkdocsFooter,\n  scrollIntoNavigation,\n  transform as transformer,\n  copyToClipboard,\n  useSanitizerTransformer,\n  useStylesTransformer,\n} from '../../transformers';\nimport { useNavigateUrl } from './useNavigateUrl';\n\nconst MOBILE_MEDIA_QUERY = 'screen and (max-width: 76.1875em)';\n\n/**\n * Hook that encapsulates the behavior of getting raw HTML and applying\n * transforms to it in order to make it function at a basic level in the\n * Backstage UI.\n */\nexport const useTechDocsReaderDom = (\n  entityRef: CompoundEntityRef,\n): Element | null => {\n  const navigate = useNavigateUrl();\n  const theme = useTheme();\n  const isMobileMedia = useMediaQuery(MOBILE_MEDIA_QUERY);\n  const sanitizerTransformer = useSanitizerTransformer();\n  const stylesTransformer = useStylesTransformer();\n  const analytics = useAnalytics();\n\n  const techdocsStorageApi = useApi(techdocsStorageApiRef);\n  const scmIntegrationsApi = useApi(scmIntegrationsApiRef);\n\n  const { state, path, content: rawPage } = useTechDocsReader();\n\n  const [dom, setDom] = useState<HTMLElement | null>(null);\n  const isStyleLoading = useShadowDomStylesLoading(dom);\n\n  const updateSidebarPositionAndHeight = useCallback(() => {\n    if (!dom) return;\n\n    const sidebars = dom.querySelectorAll<HTMLElement>('.md-sidebar');\n\n    sidebars.forEach(element => {\n      // set sidebar position to render in correct position\n      if (isMobileMedia) {\n        element.style.top = '0px';\n      } else {\n        const page = document?.querySelector('.techdocs-reader-page');\n        const pageTop = page?.getBoundingClientRect().top ?? 0;\n        let domTop = dom.getBoundingClientRect().top ?? 0;\n\n        const tabs = dom.querySelector('.md-container > .md-tabs');\n        const tabsHeight = tabs?.getBoundingClientRect().height ?? 0;\n\n        // the sidebars should not scroll beyond the total height of the header and tabs\n        if (domTop < pageTop) {\n          domTop = pageTop;\n        }\n\n        const scrollbarTopPx = Math.max(domTop, 0) + tabsHeight;\n\n        element.style.top = `${scrollbarTopPx}px`;\n\n        // set scrollbar height to ensure all links can be seen when content is small\n        const footer = dom.querySelector('.md-container > .md-footer');\n        // if no footer, fallback to using the bottom of the window\n        const scrollbarEndPx =\n          footer?.getBoundingClientRect().top ?? window.innerHeight;\n\n        element.style.height = `${scrollbarEndPx - scrollbarTopPx}px`;\n      }\n\n      // show the sidebar only after updating its position\n      element.style.setProperty('opacity', '1');\n    });\n  }, [dom, isMobileMedia]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateSidebarPositionAndHeight);\n    window.addEventListener('scroll', updateSidebarPositionAndHeight, true);\n    return () => {\n      window.removeEventListener('resize', updateSidebarPositionAndHeight);\n      window.removeEventListener(\n        'scroll',\n        updateSidebarPositionAndHeight,\n        true,\n      );\n    };\n  }, [dom, updateSidebarPositionAndHeight]);\n\n  // dynamically set width of footer to accommodate for pinning of the sidebar\n  const updateFooterWidth = useCallback(() => {\n    if (!dom) return;\n    const footer = dom.querySelector<HTMLElement>('.md-footer');\n    if (footer) {\n      footer.style.width = `${dom.getBoundingClientRect().width}px`;\n    }\n  }, [dom]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateFooterWidth);\n    return () => {\n      window.removeEventListener('resize', updateFooterWidth);\n    };\n  }, [dom, updateFooterWidth]);\n\n  // an update to \"state\" might lead to an updated UI so we include it as a trigger\n  useEffect(() => {\n    if (!isStyleLoading) {\n      updateFooterWidth();\n      updateSidebarPositionAndHeight();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    state,\n    isStyleLoading,\n    updateFooterWidth,\n    updateSidebarPositionAndHeight,\n  ]);\n\n  // a function that performs transformations that are executed prior to adding it to the DOM\n  const preRender = useCallback(\n    (rawContent: string, contentPath: string) =>\n      transformer(rawContent, [\n        sanitizerTransformer,\n        addBaseUrl({\n          techdocsStorageApi,\n          entityId: entityRef,\n          path: contentPath,\n        }),\n        rewriteDocLinks(),\n        addSidebarToggle(),\n        removeMkdocsHeader(),\n        simplifyMkdocsFooter(),\n        addGitFeedbackLink(scmIntegrationsApi),\n        stylesTransformer,\n      ]),\n    [\n      // only add dependencies that are in state or memorized variables to avoid unnecessary calls between re-renders\n      entityRef,\n      scmIntegrationsApi,\n      techdocsStorageApi,\n      sanitizerTransformer,\n      stylesTransformer,\n    ],\n  );\n\n  // a function that performs transformations that are executed after adding it to the DOM\n  const postRender = useCallback(\n    async (transformedElement: Element) =>\n      transformer(transformedElement, [\n        scrollIntoNavigation(),\n        copyToClipboard(theme),\n        addLinkClickListener({\n          baseUrl: window.location.origin,\n          onClick: (event: MouseEvent, url: string) => {\n            // detect if CTRL or META keys are pressed so that links can be opened in a new tab with `window.open`\n            const modifierActive = event.ctrlKey || event.metaKey;\n            const parsedUrl = new URL(url);\n\n            // capture link clicks within documentation\n            const linkText =\n              (event.target as HTMLAnchorElement | undefined)?.innerText || url;\n            const to = url.replace(window.location.origin, '');\n            analytics.captureEvent('click', linkText, { attributes: { to } });\n\n            // hash exists when anchor is clicked on secondary sidebar\n            if (parsedUrl.hash) {\n              if (modifierActive) {\n                window.open(url, '_blank');\n              } else {\n                navigate(url);\n                // Scroll to hash if it's on the current page\n                transformedElement\n                  ?.querySelector(`[id=\"${parsedUrl.hash.slice(1)}\"]`)\n                  ?.scrollIntoView();\n              }\n            } else {\n              if (modifierActive) {\n                window.open(url, '_blank');\n              } else {\n                navigate(url);\n              }\n            }\n          },\n        }),\n        // disable MkDocs drawer toggling ('for' attribute => checkbox mechanism)\n        onCssReady({\n          onLoading: () => {},\n          onLoaded: () => {\n            transformedElement\n              .querySelector('.md-nav__title')\n              ?.removeAttribute('for');\n          },\n        }),\n        // hide sidebars until their positions are updated\n        onCssReady({\n          onLoading: () => {\n            const sidebars = Array.from(\n              transformedElement.querySelectorAll<HTMLElement>('.md-sidebar'),\n            );\n            sidebars.forEach(element => {\n              element.style.setProperty('opacity', '0');\n            });\n          },\n          onLoaded: () => {},\n        }),\n      ]),\n    [theme, navigate, analytics],\n  );\n\n  useEffect(() => {\n    if (!rawPage) return () => {};\n\n    // if false, there is already a newer execution of this effect\n    let shouldReplaceContent = true;\n\n    // Pre-render\n    preRender(rawPage, path).then(async preTransformedDomElement => {\n      if (!preTransformedDomElement?.innerHTML) {\n        return; // An unexpected error occurred\n      }\n\n      // don't manipulate the shadow dom if this isn't the latest effect execution\n      if (!shouldReplaceContent) {\n        return;\n      }\n\n      // Scroll to top after render\n      window.scroll({ top: 0 });\n\n      // Post-render\n      const postTransformedDomElement = await postRender(\n        preTransformedDomElement,\n      );\n      setDom(postTransformedDomElement as HTMLElement);\n    });\n\n    // cancel this execution\n    return () => {\n      shouldReplaceContent = false;\n    };\n  }, [rawPage, path, preRender, postRender]);\n\n  return dom;\n};\n"],"names":["transformer"],"mappings":"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"}