From 3d0590b940302a42236b5aded0e15e5dda291b3d Mon Sep 17 00:00:00 2001
From: Clinton <clinton.langosch@gmail.com>
Date: Thu, 16 Sep 2021 14:43:35 -0700
Subject: [PATCH] refactor: small updates to details page and overview tab

---
 .../quickstarts/QuickstartOverview.js         | 28 +++++++++++++
 src/templates/QuickstartDetails.js            | 39 +++++++------------
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/src/components/quickstarts/QuickstartOverview.js b/src/components/quickstarts/QuickstartOverview.js
index 535329ca0..02271d603 100644
--- a/src/components/quickstarts/QuickstartOverview.js
+++ b/src/components/quickstarts/QuickstartOverview.js
@@ -3,6 +3,23 @@ import { css } from '@emotion/react';
 
 import { quickstart } from '../../types';
 import OverviewTile from './OverviewTile';
+import Markdown from '../Markdown';
+
+const allowedElements = [
+  'h1',
+  'h2',
+  'h3',
+  'ol',
+  'ul',
+  'li',
+  'p',
+  'blockquote',
+  'code',
+  'a',
+  'strong',
+  'em',
+  'hr',
+];
 
 const QuickstartOverview = ({ quickstart }) => {
   return (
@@ -45,6 +62,17 @@ const QuickstartOverview = ({ quickstart }) => {
           />
         ))}
       </div>
+      {quickstart.description && (
+        <Markdown
+          skipHtml
+          allowedElements={allowedElements}
+          css={css`
+            margin: 2em 0;
+          `}
+        >
+          {quickstart.description}
+        </Markdown>
+      )}
     </>
   );
 };
diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js
index 54f8632b0..a4065c1d4 100644
--- a/src/templates/QuickstartDetails.js
+++ b/src/templates/QuickstartDetails.js
@@ -30,22 +30,6 @@ import {
 } from '../data/constants';
 import QuickstartOverview from '../components/quickstarts/QuickstartOverview';
 
-const allowedElements = [
-  'h1',
-  'h2',
-  'h3',
-  'ol',
-  'ul',
-  'li',
-  'p',
-  'blockquote',
-  'code',
-  'a',
-  'strong',
-  'em',
-  'hr',
-];
-
 const QuickstartDetails = ({ data, location }) => {
   const quickstart = data.quickstarts;
   const quickstartUrl = quickstart.packUrl || QUICKSTARTS_REPO;
@@ -118,8 +102,10 @@ const QuickstartDetails = ({ data, location }) => {
               border-bottom: none;
               display: grid;
               padding-bottom: 0;
-              grid-template-areas: 'title logo' 'desc logo' 'cta logo';
+              grid-template-areas: 'title logo' 'summ logo' 'cta logo';
               grid-column-gap: 1rem;
+              grid-row-gap: 1rem;
+              row-gap: 1rem;
 
               h1 {
                 font-weight: normal;
@@ -147,16 +133,20 @@ const QuickstartDetails = ({ data, location }) => {
                 `}
               />
             )}
-            {quickstart.description && (
-              <Markdown
-                skipHtml
-                allowedElements={allowedElements}
+            {quickstart.summary && (
+              <div
                 css={css`
-                  grid-area: desc;
+                  grid-area: summ;
+                  margin-bottom: 1em;
+                  max-width: 40vw;
+
+                  @media (max-width: 760px) {
+                    max-width: 100%;
+                  }
                 `}
               >
-                {quickstart.description}
-              </Markdown>
+                {quickstart.summary}
+              </div>
             )}
             <div
               css={css`
@@ -334,6 +324,7 @@ export const pageQuery = graphql`
       level
       id
       description
+      summary
       logoUrl
       packUrl
       dashboards {