diff --git a/.changeset/lucky-masks-talk.md b/.changeset/lucky-masks-talk.md new file mode 100644 index 0000000000..e15bfafcc2 --- /dev/null +++ b/.changeset/lucky-masks-talk.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs-module-addons-contrib': patch +--- + +Improved inline/type documentation for the addon. diff --git a/.changeset/popular-buses-hang.md b/.changeset/popular-buses-hang.md deleted file mode 100644 index a64c792afd..0000000000 --- a/.changeset/popular-buses-hang.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@backstage/create-app': patch -'@backstage/plugin-techdocs-module-addons-contrib': patch ---- - -Integrates TechDocs add-ons with the app package so add-ons are configured when creating an app using the Backstage CLI diff --git a/.changeset/spotty-papayas-shave.md b/.changeset/spotty-papayas-shave.md new file mode 100644 index 0000000000..5a741b6b33 --- /dev/null +++ b/.changeset/spotty-papayas-shave.md @@ -0,0 +1,37 @@ +--- +'@backstage/create-app': patch +--- + +Integrates TechDocs add-ons with the app package so add-ons are configured when creating an app using the Backstage CLI. To apply these changes to an existing application do the following: + +1. Add the `@backstage/plugin-techdocs-react` and `@backstage/plugin-techdocs-module-addons-contrib` packages to your app's dependencies; +2. And then register the `` Addon in your `packages/app/src/App.tsx` file, there where you define a route to ``: + +```diff +import { + DefaultTechDocsHome, + TechDocsIndexPage, + TechDocsReaderPage, +} from '@backstage/plugin-techdocs'; ++ import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; ++ import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; + +// ... + +const AppRoutes = () => { + + // ... other plugin routes + }> + + + } + > ++ ++ ++ + + ; +}; +``` diff --git a/docs/features/techdocs/getting-started.md b/docs/features/techdocs/getting-started.md index e57d62db14..f8bf98c0e0 100644 --- a/docs/features/techdocs/getting-started.md +++ b/docs/features/techdocs/getting-started.md @@ -54,18 +54,18 @@ const AppRoutes = () => { }; ``` -It would be nice to decorate your pages with something else... Having a link that redirects you to a new issue page when you highlight text in your documentation would be really cool, right? Let's learn how to do this using the TechDocs Add-ons Framework! +It would be nice to decorate your pages with something else... Having a link that redirects you to a new issue page when you highlight text in your documentation would be really cool, right? Let's learn how to do this using the TechDocs Addon Framework! -With the [TechDocs plugin framework](https://backstage.io/docs/features/techdocs/addons#installing-and-using-addons), you can render React components in documentation pages and these add-ons can be provided by any Backstage plugin. The framework is exported by the [@backstage/plugin-techdocs-react](https://www.npmjs.com/package/@backstage/plugin-techdocs-react) package and there is a `` add-on in the [@backstage/plugin-techdocs-module-addons-contrib](https://www.npmjs.com/package/@backstage/plugin-techdocs-module-addons-contrib) package for you to use once you have these two dependencies installed: +With the [TechDocs Addon framework](https://backstage.io/docs/features/techdocs/addons#installing-and-using-addons), you can render React components in documentation pages and these Addons can be provided by any Backstage plugin. The framework is exported by the [@backstage/plugin-techdocs-react](https://www.npmjs.com/package/@backstage/plugin-techdocs-react) package and there is a `` Addon in the [@backstage/plugin-techdocs-module-addons-contrib](https://www.npmjs.com/package/@backstage/plugin-techdocs-module-addons-contrib) package for you to use once you have these two dependencies installed: -```tsx +```diff import { DefaultTechDocsHome, TechDocsIndexPage, TechDocsReaderPage, } from '@backstage/plugin-techdocs'; -import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha'; -import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; ++ import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; ++ import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; // ... @@ -79,19 +79,15 @@ const AppRoutes = () => { path="/docs/:namespace/:kind/:name/*" element={} > - - - ++ ++ ++ ; }; ``` -In lines `6` and `7` we are importing respectively the TechDocs add-on framework and a `ReportIssue` add-on component. From lines `21` to `23` we are registering the `` to be rendered in all TechDocs pages whenever some text is highlighted. - -The Report Issue addon can be customized with properties (see [here](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.reportissue)) and it takes one more step to be ready to use, so you should set up an `edit_uri` for your documentation pages as explained [here](https://backstage.io/docs/features/techdocs/faqs#is-it-possible-for-users-to-suggest-changes-or-provide-feedback-on-a-techdocs-page). - -That's all, now you can go ahead and configure your TechDocs Backend, but... I know, you're curious to see how it looks, aren't you? See the image below: +I know, you're curious to see how it looks, aren't you? See the image below: TechDocs Report Issue Add-on diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx index 81edd47918..c4877263f0 100644 --- a/packages/create-app/templates/default-app/packages/app/src/App.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx @@ -19,7 +19,7 @@ import { techdocsPlugin, TechDocsReaderPage, } from '@backstage/plugin-techdocs'; -import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha'; +import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; import { UserSettingsPage } from '@backstage/plugin-user-settings'; import { apis } from './apis'; diff --git a/plugins/techdocs-module-addons-contrib/src/plugin.ts b/plugins/techdocs-module-addons-contrib/src/plugin.ts index 37de4113bf..6136f176d0 100644 --- a/plugins/techdocs-module-addons-contrib/src/plugin.ts +++ b/plugins/techdocs-module-addons-contrib/src/plugin.ts @@ -93,7 +93,7 @@ export const ExpandableNavigation = techdocsModuleAddonsContribPlugin.provide( * TechDocsIndexPage, * TechDocsReaderPage, * } from '@backstage/plugin-techdocs'; - * import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha'; + * import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; * import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; * * @@ -123,7 +123,7 @@ export const ExpandableNavigation = techdocsModuleAddonsContribPlugin.provide( * TechDocsIndexPage, * TechDocsReaderPage, * } from '@backstage/plugin-techdocs'; - * import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha'; + * import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; * import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; * * const templateBuilder = ({ selection }: ReportIssueTemplateBuilder) => (({ @@ -172,7 +172,7 @@ export const ReportIssue = techdocsModuleAddonsContribPlugin.provide( * TechDocsIndexPage, * TechDocsReaderPage, * } from '@backstage/plugin-techdocs'; - * import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha'; + * import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; * import { TextSize } from '@backstage/plugin-techdocs-module-addons-contrib'; * *