feat(techdocs): techdocs landing page

plugins/techdocs/src/plugin.ts

@@ -33,6 +33,11 @@ import { createPlugin, createRouteRef } from '@backstage/core';
 import { Reader } from './reader/components/Reader';
 
 export const rootRouteRef = createRouteRef({
+  path: '/docs',
+  title: 'TechDocs Landing Page',
+});
+
+export const rootDocsRouteRef = createRouteRef({
   path: '/docs/:componentId/*',
   title: 'Docs',
 });
@@ -41,5 +46,6 @@ export const plugin = createPlugin({
   id: 'techdocs',
   register({ router }) {
     router.addRoute(rootRouteRef, Reader);
+    router.addRoute(rootDocsRouteRef, Reader);
   },
 });

plugins/techdocs/src/reader/components/Reader.tsx

@@ -23,7 +23,8 @@ import transformer, {
   addEventListener,
 } from '../transformers';
 import { docStorageURL } from '../../config';
-import { Link } from '@backstage/core';
+import { Grid } from '@material-ui/core';
+import { Link, InfoCard, Header, Content, ItemCard } from '@backstage/core';
 import { useLocation, useParams, useNavigate } from 'react-router-dom';
 import URLParser from '../urlParser';
 
@@ -89,11 +90,39 @@ export const Reader = () => {
 
   return (
     <>
-      <nav>
-        <Link to="/docs/mkdocs/">mkdocs</Link>
-        <Link to="/docs/backstage-microsite/">Backstage docs</Link>
-      </nav>
-      <div ref={shadowDomRef} />
+      {componentId ? (
+        <div ref={shadowDomRef} />
+      ) : (
+        <>
+          <Header
+            title="Documentation"
+            subtitle="Documentation available in Backstage"
+          />
+
+          <Content>
+            <Grid container>
+              <Grid item xs={12} sm={6} md={3}>
+                <ItemCard
+                  onClick={() => navigate('/docs/mkdocs')}
+                  tags={['Developer Tool']}
+                  title="MkDocs"
+                  label="Read Docs"
+                  description="MkDocs is a fast, simple and downright gorgeous static site generator that's geared towards building project documentation. "
+                />
+              </Grid>
+              <Grid item xs={12} sm={6} md={3}>
+                <ItemCard
+                  onClick={() => navigate('/docs/backstage-microsite')}
+                  tags={['Service']}
+                  title="Backstage"
+                  label="Read Docs"
+                  description="Getting started guides, API Overview, documentation around how to Create a Plugin and more. "
+                />
+              </Grid>
+            </Grid>
+          </Content>
+        </>
+      )}
     </>
   );
 };