diff --git a/packages/techdocs-cli-embedded-app/package.json b/packages/techdocs-cli-embedded-app/package.json index 8771d5c14b..c7c65ad55f 100644 --- a/packages/techdocs-cli-embedded-app/package.json +++ b/packages/techdocs-cli-embedded-app/package.json @@ -17,6 +17,7 @@ "@backstage/integration-react": "^1.0.1-next.1", "@backstage/plugin-catalog": "^1.1.0-next.1", "@backstage/plugin-techdocs": "^1.0.1-next.1", + "@backstage/techdocs-addons": "^0.0.0", "@backstage/test-utils": "^1.0.1-next.1", "@backstage/theme": "^0.2.15", "@material-ui/core": "^4.11.0", diff --git a/packages/techdocs-cli-embedded-app/src/App.tsx b/packages/techdocs-cli-embedded-app/src/App.tsx index 51bdfbbb11..4583a1bc0e 100644 --- a/packages/techdocs-cli-embedded-app/src/App.tsx +++ b/packages/techdocs-cli-embedded-app/src/App.tsx @@ -16,20 +16,27 @@ import React from 'react'; import { Navigate, Route } from 'react-router'; -import { createApp } from '@backstage/app-defaults'; -import { FlatRoutes } from '@backstage/core-app-api'; -import { CatalogEntityPage } from '@backstage/plugin-catalog'; import { DefaultTechDocsHome, TechDocsIndexPage, TechDocsReaderPage, + techdocsPlugin, } from '@backstage/plugin-techdocs'; +import { + createTechDocsAddon, + TechDocsAddons, + TechDocsAddonLocations, +} from '@backstage/techdocs-addons'; +import { createApp } from '@backstage/app-defaults'; +import { FlatRoutes } from '@backstage/core-app-api'; +import { CatalogEntityPage } from '@backstage/plugin-catalog'; + import { apis } from './apis'; -import { Root } from './components/Root'; -import { techDocsPage } from './components/TechDocsPage'; import * as plugins from './plugins'; import { configLoader } from './config'; +import { Root } from './components/Root'; +import { techDocsPage, TechDocsThemeToggle } from './components/TechDocsPage'; const app = createApp({ apis, @@ -40,6 +47,14 @@ const app = createApp({ const AppProvider = app.getProvider(); const AppRouter = app.getRouter(); +const ThemeToggleAddon = techdocsPlugin.provide( + createTechDocsAddon({ + name: 'ThemeToggleAddon', + component: TechDocsThemeToggle, + location: TechDocsAddonLocations.HEADER, + }), +); + const routes = ( @@ -56,6 +71,9 @@ const routes = ( element={} > {techDocsPage} + + + ); diff --git a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx index 7bfe7642ff..8c44336d73 100644 --- a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx +++ b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx @@ -92,7 +92,7 @@ const TechdocsThemeProvider: FC = ({ children }) => { const useTechDocsTheme = () => useContext(TechDocsThemeContext); -const TechDocsThemeToggle = () => { +export const TechDocsThemeToggle = () => { const classes = useStyles(); const { theme, toggleTheme } = useTechDocsTheme(); @@ -121,12 +121,10 @@ const TechDocsThemeToggle = () => { }; export const techDocsPage = ( - - - - - - - - + + + + + + ); diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx index 8875581473..45ebe3ae0f 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { FC, useEffect } from 'react'; +import React, { useEffect } from 'react'; import Helmet from 'react-helmet'; import { Skeleton } from '@material-ui/lab';