diff --git a/.changeset/modern-owls-mate.md b/.changeset/modern-owls-mate.md
new file mode 100644
index 0000000000..bed33c6bbc
--- /dev/null
+++ b/.changeset/modern-owls-mate.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': minor
+---
+
+Added experimental support for declarative integration via the `/alpha` subpath.
diff --git a/packages/app-next/src/App.tsx b/packages/app-next/src/App.tsx
index 6159c044d2..4d72cca14f 100644
--- a/packages/app-next/src/App.tsx
+++ b/packages/app-next/src/App.tsx
@@ -25,6 +25,7 @@ import {
createPageExtension,
} from '@backstage/frontend-plugin-api';
import { entityRouteRef } from '@backstage/plugin-catalog-react';
+import techdocsPlugin from '@backstage/plugin-techdocs/alpha';
/*
@@ -67,6 +68,7 @@ const app = createApp({
graphiqlPlugin,
pagesPlugin,
techRadarPlugin,
+ techdocsPlugin,
userSettingsPlugin,
createExtensionOverrides({
extensions: [entityPageExtension],
diff --git a/plugins/techdocs/src/alpha.tsx b/plugins/techdocs/src/alpha.tsx
index bea4b7ab34..2f991f2fcc 100644
--- a/plugins/techdocs/src/alpha.tsx
+++ b/plugins/techdocs/src/alpha.tsx
@@ -18,8 +18,32 @@ import React from 'react';
import {
createPlugin,
createSchemaFromZod,
+ createApiExtension,
+ createPageExtension,
} from '@backstage/frontend-plugin-api';
import { createSearchResultListItemExtension } from '@backstage/plugin-search-react/alpha';
+import {
+ configApiRef,
+ createApiFactory,
+ createRouteRef,
+ discoveryApiRef,
+ fetchApiRef,
+ identityApiRef,
+} from '@backstage/core-plugin-api';
+import {
+ techdocsApiRef,
+ techdocsStorageApiRef,
+} from '@backstage/plugin-techdocs-react';
+import { TechDocsClient, TechDocsStorageClient } from './client';
+
+const rootRouteRef = createRouteRef({
+ id: 'plugin.techdocs.indexPage',
+});
+
+const rootDocsRouteRef = createRouteRef({
+ id: 'plugin.techdocs.readerPage',
+ params: ['namespace', 'kind', 'name'],
+});
/** @alpha */
export const TechDocsSearchResultListItemExtension =
@@ -44,8 +68,89 @@ export const TechDocsSearchResultListItemExtension =
},
});
+/**
+ * Responsible for rendering the provided router element
+ *
+ * @alpha
+ */
+const TechDocsIndexPage = createPageExtension({
+ id: 'plugin.techdocs.indexPage',
+ defaultPath: '/docs',
+ routeRef: rootRouteRef,
+ loader: () =>
+ import('./home/components/TechDocsIndexPage').then(m => (
+
+ )),
+});
+
+/**
+ * Component responsible for composing a TechDocs reader page experience
+ *
+ * @alpha
+ */
+const TechDocsReaderPage = createPageExtension({
+ id: 'plugin.techdocs.readerPage',
+ loader: () =>
+ import('./reader/components/TechDocsReaderPage').then(m => (
+
+ )),
+ routeRef: rootDocsRouteRef,
+ defaultPath: '/docs/:namespace/:kind/:name/*',
+});
+
+/** @alpha */
+const techDocsStorage = createApiExtension({
+ api: techdocsStorageApiRef,
+
+ factory() {
+ return createApiFactory({
+ api: techdocsStorageApiRef,
+ deps: {
+ configApi: configApiRef,
+ discoveryApi: discoveryApiRef,
+ identityApi: identityApiRef,
+ fetchApi: fetchApiRef,
+ },
+ factory: ({ configApi, discoveryApi, identityApi, fetchApi }) =>
+ new TechDocsStorageClient({
+ configApi,
+ discoveryApi,
+ identityApi,
+ fetchApi,
+ }),
+ });
+ },
+});
+
+/** @alpha */
+const techDocsClient = createApiExtension({
+ api: techdocsApiRef,
+ factory() {
+ return createApiFactory({
+ api: techdocsApiRef,
+ deps: {
+ configApi: configApiRef,
+ discoveryApi: discoveryApiRef,
+ fetchApi: fetchApiRef,
+ },
+ factory: ({ configApi, discoveryApi, fetchApi }) =>
+ new TechDocsClient({
+ configApi,
+ discoveryApi,
+ fetchApi,
+ }),
+ });
+ },
+});
+
/** @alpha */
export default createPlugin({
id: 'techdocs',
- extensions: [TechDocsSearchResultListItemExtension],
+ extensions: [
+ TechDocsIndexPage,
+ TechDocsReaderPage,
+ techDocsClient,
+ techDocsStorage,
+ TechDocsSearchResultListItemExtension,
+ ],
});