feat(techdocs): techdocs landing page

packages/app/src/components/Root/Root.tsx

@@ -22,6 +22,7 @@ import ExploreIcon from '@material-ui/icons/Explore';
 import BuildIcon from '@material-ui/icons/BuildRounded';
 import RuleIcon from '@material-ui/icons/AssignmentTurnedIn';
 import MapIcon from '@material-ui/icons/MyLocation';
+import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
@@ -89,6 +90,7 @@ const Root: FC<{}> = ({ children }) => (
       {/* Global nav, not org-specific */}
       <SidebarItem icon={HomeIcon} to="./" text="Home" />
       <SidebarItem icon={ExploreIcon} to="explore" text="Explore" />
+      <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
       <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
       {/* End global nav */}
       <SidebarDivider />

packages/core/src/layout/index.ts

@@ -26,3 +26,4 @@ export * from './Sidebar';
 export * from './SignInPage';
 export * from './TabbedCard';
 export * from './HeaderTabs';
+export * from './ItemCard';

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>
+        </>
+      )}
     </>
   );
 };