TechDocs: add techdocs plugins to create app (#2143)

* add techdocs plugins to create app

* add docs to sidebar in default app

* add mocked techdocs config to test

* Update packages/create-app/templates/default-app/app-config.yaml.hbs

packages/create-app/templates/default-app/app-config.yaml.hbs

@@ -42,7 +42,7 @@ proxy:
     changeOrigin: true
 
 techdocs:
-  storageUrl: https://techdocs-mock-sites.storage.googleapis.com
+  storageUrl: http://localhost:7000/techdocs/static/docs
 
 auth:
   providers: {}

packages/create-app/templates/default-app/packages/app/package.json.hbs

@@ -10,6 +10,7 @@
     "@backstage/plugin-catalog": "^{{version}}",
     "@backstage/plugin-register-component": "^{{version}}",
     "@backstage/plugin-scaffolder": "^{{version}}",
+    "@backstage/plugin-techdocs": "^{{version}}",
     "@backstage/test-utils": "^{{version}}",
     "@backstage/theme": "^{{version}}",
     "history": "^5.0.0",

packages/create-app/templates/default-app/packages/app/src/App.test.tsx

@@ -11,6 +11,9 @@ describe('App', () => {
           data: {
             app: { title: 'Test' },
             backend: { baseUrl: 'http://localhost:7000' },
+            techdocs: {
+              storageUrl: 'http://localhost:7000/techdocs/static/docs',
+            },
           },
           context: 'test',
         },

packages/create-app/templates/default-app/packages/app/src/apis.ts

@@ -18,11 +18,17 @@ import { catalogApiRef, CatalogClient } from '@backstage/plugin-catalog';
 
 import { scaffolderApiRef, ScaffolderApi } from '@backstage/plugin-scaffolder';
 
+import {
+  techdocsStorageApiRef,
+  TechDocsStorageApi,
+} from '@backstage/plugin-techdocs';
+
 export const apis = (config: ConfigApi) => {
   // eslint-disable-next-line no-console
   console.log(`Creating APIs for ${config.getString('app.title')}`);
 
   const backendUrl = config.getString('backend.baseUrl');
+  const techdocsStorageUrl = config.getString('techdocs.storageUrl');
 
   const builder = ApiRegistry.builder();
 
@@ -43,5 +49,10 @@ export const apis = (config: ConfigApi) => {
 
   builder.add(scaffolderApiRef, new ScaffolderApi({ discoveryApi }));
 
+  builder.add(
+    techdocsStorageApiRef,
+    new TechDocsStorageApi({ apiOrigin: techdocsStorageUrl }),
+  );
+
   return builder.build();
 };

packages/create-app/templates/default-app/packages/app/src/plugins.ts

@@ -1,3 +1,4 @@
 export { plugin as CatalogPlugin } from '@backstage/plugin-catalog';
 export { plugin as RegisterComponent } from '@backstage/plugin-register-component';
 export { plugin as ScaffolderPlugin } from '@backstage/plugin-scaffolder';
+export { plugin as TechDocsPlugin } from '@backstage/plugin-techdocs';

packages/create-app/templates/default-app/packages/app/src/sidebar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import HomeIcon from '@material-ui/icons/Home';
+import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import {
   Sidebar,
@@ -17,6 +18,7 @@ export const AppSidebar = () => (
     <SidebarDivider />
     {/* Global nav, not org-specific */}
     <SidebarItem icon={HomeIcon} to="./" text="Home" />
+    <SidebarItem icon={LibraryBooks} to="/docs" text="Docs" />
     <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
     {/* End global nav */}
     <SidebarDivider />

packages/create-app/templates/default-app/packages/backend/src/plugins/techdocs.ts

@@ -1,6 +1,7 @@
 import {
   createRouter,
   DirectoryPreparer,
+  GithubPreparer,
   Preparers,
   Generators,
   LocalPublish,
@@ -15,12 +16,15 @@ export default async function createPlugin({
 }: PluginEnvironment) {
   const generators = new Generators();
   const techdocsGenerator = new TechdocsGenerator(logger);
+
   generators.register('techdocs', techdocsGenerator);
 
-  const directoryPreparer = new DirectoryPreparer(logger);
   const preparers = new Preparers();
+  const directoryPreparer = new DirectoryPreparer(logger);
+  const githubPreparer = new GithubPreparer(logger);
 
   preparers.register('dir', directoryPreparer);
+  preparers.register('github', githubPreparer);
 
   const publisher = new LocalPublish(logger);