@backstage/plugin-techdocs 0.0.0-nightly-20240809021939 → 0.0.0-nightly-20240810021908

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,31 +1,32 @@
1
1
  # @backstage/plugin-techdocs
2
2
 
3
- ## 0.0.0-nightly-20240809021939
3
+ ## 0.0.0-nightly-20240810021908
4
4
 
5
5
  ### Patch Changes
6
6
 
7
7
  - 69bd940: Use annotation constants from new techdocs-common package.
8
+ - 27794d1: Allow for more granular control of TechDocsReaderPage styling. Theme overrides can now be provided to TechDocs without affecting the theme in other areas of Backstage.
8
9
  - 8543e72: TechDocs redirect feature now includes a notification to the user before they are redirected.
9
10
  - 67e76f2: TechDocs now supports the `mkdocs-redirects` plugin. Redirects defined using the `mkdocs-redirect` plugin will be handled automatically in TechDocs. Redirecting to external urls is not supported. In the case that an external redirect url is provided, TechDocs will redirect to the current documentation site home.
10
11
  - bdc5471: Fixed issue where header styles were incorrectly generated when themes used CSS variables to define font size.
11
12
  - 6349099: Added config input type to the extensions
12
13
  - Updated dependencies
13
- - @backstage/frontend-plugin-api@0.0.0-nightly-20240809021939
14
- - @backstage/plugin-catalog-react@0.0.0-nightly-20240809021939
15
- - @backstage/plugin-search-react@0.0.0-nightly-20240809021939
16
- - @backstage/core-components@0.0.0-nightly-20240809021939
17
- - @backstage/core-compat-api@0.0.0-nightly-20240809021939
18
- - @backstage/plugin-search-common@0.0.0-nightly-20240809021939
19
- - @backstage/integration@0.0.0-nightly-20240809021939
20
- - @backstage/plugin-techdocs-common@0.0.0-nightly-20240809021939
21
- - @backstage/plugin-auth-react@0.0.0-nightly-20240809021939
22
- - @backstage/catalog-model@1.5.0
14
+ - @backstage/frontend-plugin-api@0.0.0-nightly-20240810021908
15
+ - @backstage/plugin-catalog-react@0.0.0-nightly-20240810021908
16
+ - @backstage/plugin-search-react@0.0.0-nightly-20240810021908
17
+ - @backstage/core-components@0.0.0-nightly-20240810021908
18
+ - @backstage/core-compat-api@0.0.0-nightly-20240810021908
19
+ - @backstage/plugin-search-common@0.0.0-nightly-20240810021908
20
+ - @backstage/integration@0.0.0-nightly-20240810021908
21
+ - @backstage/plugin-techdocs-common@0.0.0-nightly-20240810021908
22
+ - @backstage/plugin-auth-react@0.0.0-nightly-20240810021908
23
+ - @backstage/catalog-model@0.0.0-nightly-20240810021908
23
24
  - @backstage/config@1.2.0
24
25
  - @backstage/core-plugin-api@1.9.3
25
26
  - @backstage/errors@1.2.4
26
- - @backstage/integration-react@0.0.0-nightly-20240809021939
27
+ - @backstage/integration-react@0.0.0-nightly-20240810021908
27
28
  - @backstage/theme@0.5.6
28
- - @backstage/plugin-techdocs-react@0.0.0-nightly-20240809021939
29
+ - @backstage/plugin-techdocs-react@0.0.0-nightly-20240810021908
29
30
 
30
31
  ## 1.10.8-next.2
31
32
 
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@backstage/plugin-techdocs__alpha",
3
- "version": "0.0.0-nightly-20240809021939",
3
+ "version": "0.0.0-nightly-20240810021908",
4
4
  "main": "../dist/alpha.esm.js",
5
5
  "module": "../dist/alpha.esm.js",
6
6
  "types": "../dist/alpha.d.ts"
package/dist/alpha.d.ts CHANGED
@@ -13,7 +13,7 @@ declare const techDocsSearchResultListItemExtension: _backstage_frontend_plugin_
13
13
  asListItem: boolean;
14
14
  asLink: boolean;
15
15
  title?: string | undefined;
16
- }, never, never>;
16
+ }, never, never, string | undefined, string | undefined, string | undefined>;
17
17
  /** @alpha */
18
18
  declare const _default: _backstage_frontend_plugin_api.BackstagePlugin<{
19
19
  root: _backstage_frontend_plugin_api.RouteRef<undefined>;
@@ -23,6 +23,6 @@ declare const _default: _backstage_frontend_plugin_api.BackstagePlugin<{
23
23
  namespace: string;
24
24
  }>;
25
25
  entityContent: _backstage_frontend_plugin_api.RouteRef<undefined>;
26
- }, {}>;
26
+ }, {}, {}>;
27
27
 
28
28
  export { _default as default, techDocsSearchResultListItemExtension };
package/dist/index.d.ts CHANGED
@@ -6,6 +6,7 @@ import { DiscoveryApi, FetchApi, IdentityApi } from '@backstage/core-plugin-api'
6
6
  import { Config } from '@backstage/config';
7
7
  import * as React from 'react';
8
8
  import React__default, { ReactNode, PropsWithChildren } from 'react';
9
+ import { ThemeOptions } from '@material-ui/core/styles';
9
10
  import { ToolbarProps } from '@material-ui/core/Toolbar';
10
11
  import { TableColumn, TableProps, TableOptions } from '@backstage/core-components';
11
12
  import { UserListFilterKind, EntityOwnerPickerProps } from '@backstage/plugin-catalog-react';
@@ -227,6 +228,7 @@ declare const TechDocsReaderLayout: (props: TechDocsReaderLayoutProps) => React_
227
228
  type TechDocsReaderPageProps = {
228
229
  entityRef?: CompoundEntityRef;
229
230
  children?: TechDocsReaderPageRenderFunction | ReactNode;
231
+ overrideThemeOptions?: Partial<ThemeOptions>;
230
232
  };
231
233
 
232
234
  /**
@@ -8,12 +8,18 @@ import { TechDocsReaderPageSubheader } from '../TechDocsReaderPageSubheader/Tech
8
8
  import { rootDocsRouteRef } from '../../../routes.esm.js';
9
9
  import { useRouteRefParams, getComponentData } from '@backstage/core-plugin-api';
10
10
  import { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react';
11
+ import { useTheme, createTheme, ThemeProvider } from '@material-ui/core/styles';
11
12
 
12
13
  const TechDocsReaderLayout = (props) => {
13
14
  const { withSearch, withHeader = true } = props;
14
15
  return /* @__PURE__ */ React.createElement(Page, { themeId: "documentation" }, withHeader && /* @__PURE__ */ React.createElement(TechDocsReaderPageHeader, null), /* @__PURE__ */ React.createElement(TechDocsReaderPageSubheader, null), /* @__PURE__ */ React.createElement(TechDocsReaderPageContent, { withSearch }));
15
16
  };
16
17
  const TechDocsReaderPage = (props) => {
18
+ const currentTheme = useTheme();
19
+ const readerPageTheme = createTheme({
20
+ ...currentTheme,
21
+ ...props.overrideThemeOptions || {}
22
+ });
17
23
  const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef);
18
24
  const { children, entityRef = { kind, name, namespace } } = props;
19
25
  const outlet = useOutlet();
@@ -25,14 +31,14 @@ const TechDocsReaderPage = (props) => {
25
31
  const page = grandChildren.find(
26
32
  (grandChild) => !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) && !getComponentData(grandChild, TECHDOCS_ADDONS_KEY)
27
33
  );
28
- return /* @__PURE__ */ React.createElement(CookieAuthRefreshProvider, { pluginId: "techdocs" }, /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, page || /* @__PURE__ */ React.createElement(TechDocsReaderLayout, null)));
34
+ return /* @__PURE__ */ React.createElement(ThemeProvider, { theme: readerPageTheme }, /* @__PURE__ */ React.createElement(CookieAuthRefreshProvider, { pluginId: "techdocs" }, /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, page || /* @__PURE__ */ React.createElement(TechDocsReaderLayout, null))));
29
35
  }
30
- 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({
36
+ 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({
31
37
  entityRef,
32
38
  techdocsMetadataValue: metadata.value,
33
39
  entityMetadataValue: entityMetadata.value,
34
40
  onReady
35
- }) : children))));
41
+ }) : children)))));
36
42
  };
37
43
 
38
44
  export { TechDocsReaderLayout, TechDocsReaderPage };
@@ -1 +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';\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,CAAU,KAAA,KAAA,KAAA,EAAwB,KAAO,EAAA,QAAA,IAAY,EAAC;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;;;;"}
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,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;AAgBa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,eAAe,QAAS,EAAA,CAAA;AAE9B,EAAA,MAAM,kBAAkB,WAAY,CAAA;AAAA,IAClC,GAAG,YAAA;AAAA,IACH,GAAI,KAAM,CAAA,oBAAA,IAAwB,EAAC;AAAA,GACpC,CAAA,CAAA;AACD,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,CAAU,KAAA,KAAA,KAAA,EAAwB,KAAO,EAAA,QAAA,IAAY,EAAC;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,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,CAAA;AAAA,GAEJ;AAGA,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,OAAA;AAAA,GACD,CACD,GAAA,QACN,CACF,CAEJ,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@backstage/plugin-techdocs",
3
- "version": "0.0.0-nightly-20240809021939",
3
+ "version": "0.0.0-nightly-20240810021908",
4
4
  "description": "The Backstage plugin that renders technical documentation for your components",
5
5
  "backstage": {
6
6
  "role": "frontend-plugin",
@@ -58,21 +58,21 @@
58
58
  "test": "backstage-cli package test"
59
59
  },
60
60
  "dependencies": {
61
- "@backstage/catalog-model": "^1.5.0",
61
+ "@backstage/catalog-model": "^0.0.0-nightly-20240810021908",
62
62
  "@backstage/config": "^1.2.0",
63
- "@backstage/core-compat-api": "^0.0.0-nightly-20240809021939",
64
- "@backstage/core-components": "^0.0.0-nightly-20240809021939",
63
+ "@backstage/core-compat-api": "^0.0.0-nightly-20240810021908",
64
+ "@backstage/core-components": "^0.0.0-nightly-20240810021908",
65
65
  "@backstage/core-plugin-api": "^1.9.3",
66
66
  "@backstage/errors": "^1.2.4",
67
- "@backstage/frontend-plugin-api": "^0.0.0-nightly-20240809021939",
68
- "@backstage/integration": "^0.0.0-nightly-20240809021939",
69
- "@backstage/integration-react": "^0.0.0-nightly-20240809021939",
70
- "@backstage/plugin-auth-react": "^0.0.0-nightly-20240809021939",
71
- "@backstage/plugin-catalog-react": "^0.0.0-nightly-20240809021939",
72
- "@backstage/plugin-search-common": "^0.0.0-nightly-20240809021939",
73
- "@backstage/plugin-search-react": "^0.0.0-nightly-20240809021939",
74
- "@backstage/plugin-techdocs-common": "^0.0.0-nightly-20240809021939",
75
- "@backstage/plugin-techdocs-react": "^0.0.0-nightly-20240809021939",
67
+ "@backstage/frontend-plugin-api": "^0.0.0-nightly-20240810021908",
68
+ "@backstage/integration": "^0.0.0-nightly-20240810021908",
69
+ "@backstage/integration-react": "^0.0.0-nightly-20240810021908",
70
+ "@backstage/plugin-auth-react": "^0.0.0-nightly-20240810021908",
71
+ "@backstage/plugin-catalog-react": "^0.0.0-nightly-20240810021908",
72
+ "@backstage/plugin-search-common": "^0.0.0-nightly-20240810021908",
73
+ "@backstage/plugin-search-react": "^0.0.0-nightly-20240810021908",
74
+ "@backstage/plugin-techdocs-common": "^0.0.0-nightly-20240810021908",
75
+ "@backstage/plugin-techdocs-react": "^0.0.0-nightly-20240810021908",
76
76
  "@backstage/theme": "^0.5.6",
77
77
  "@material-ui/core": "^4.12.2",
78
78
  "@material-ui/icons": "^4.9.1",
@@ -88,11 +88,11 @@
88
88
  "react-use": "^17.2.4"
89
89
  },
90
90
  "devDependencies": {
91
- "@backstage/cli": "^0.0.0-nightly-20240809021939",
92
- "@backstage/core-app-api": "^0.0.0-nightly-20240809021939",
93
- "@backstage/dev-utils": "^0.0.0-nightly-20240809021939",
94
- "@backstage/plugin-techdocs-module-addons-contrib": "^0.0.0-nightly-20240809021939",
95
- "@backstage/test-utils": "^0.0.0-nightly-20240809021939",
91
+ "@backstage/cli": "^0.0.0-nightly-20240810021908",
92
+ "@backstage/core-app-api": "^0.0.0-nightly-20240810021908",
93
+ "@backstage/dev-utils": "^0.0.0-nightly-20240810021908",
94
+ "@backstage/plugin-techdocs-module-addons-contrib": "^0.0.0-nightly-20240810021908",
95
+ "@backstage/test-utils": "^0.0.0-nightly-20240810021908",
96
96
  "@testing-library/dom": "^10.0.0",
97
97
  "@testing-library/jest-dom": "^6.0.0",
98
98
  "@testing-library/react": "^15.0.0",