Merge pull request #1483 from spotify/mob/techdocs-landing-page

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 />

plugins/techdocs/README.md

@@ -10,7 +10,7 @@ Welcome to the TechDocs plugin - Spotify's docs-like-code approach built directl
 
 ## Getting started
 
-Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/techdocs](http://localhost:3000/techdocs).
+Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/docs](http://localhost:3000/docs).
 
 You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
 This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.

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/DocsCard.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { FC } from 'react';
+import { Button, Card, Chip, Typography, makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  header: {
+    color: theme.palette.common.white,
+    padding: theme.spacing(2, 2, 6),
+    backgroundImage:
+      'linear-gradient(-137deg, rgb(25, 230, 140) 0%, rgb(29, 127, 110) 100%)',
+  },
+  content: {
+    padding: theme.spacing(2),
+  },
+  description: {
+    height: 175,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  footer: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+  },
+}));
+
+type DocsCardProps = {
+  description: string;
+  tags?: string[];
+  title: string;
+  type?: string;
+  label: string;
+  onClick?: () => void;
+};
+export const DocsCard: FC<DocsCardProps> = ({
+  description,
+  tags,
+  title,
+  type,
+  label,
+  onClick,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Card>
+      <div className={classes.header}>
+        {type ?? <Typography variant="subtitle2">{type}</Typography>}
+        <Typography variant="h6">{title}</Typography>
+      </div>
+      <div className={classes.content}>
+        {tags?.map(tag => (
+          <Chip label={tag} key={tag} />
+        ))}
+        <Typography variant="body2" paragraph className={classes.description}>
+          {description}
+        </Typography>
+        <div className={classes.footer}>
+          <Button onClick={onClick} color="primary">
+            {label}
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+};

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

@@ -17,15 +17,19 @@
 import React from 'react';
 import { useShadowDom } from '..';
 import { useAsync } from 'react-use';
+import { useLocation, useParams, useNavigate } from 'react-router-dom';
+
+import { Grid } from '@material-ui/core';
+import { Header, Content } from '@backstage/core';
+
 import transformer, {
   addBaseUrl,
   rewriteDocLinks,
   addEventListener,
 } from '../transformers';
 import { docStorageURL } from '../../config';
-import { Link } from '@backstage/core';
-import { useLocation, useParams, useNavigate } from 'react-router-dom';
 import URLParser from '../urlParser';
+import { DocsCard } from './DocsCard';
 
 const useFetch = (url: string) => {
   const state = useAsync(async () => {
@@ -89,11 +93,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}>
+                <DocsCard
+                  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}>
+                <DocsCard
+                  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>
+        </>
+      )}
     </>
   );
 };