add back in component layout

Author: emilybrick

src/@primer/gatsby-theme-doctocat/components/hero.js

@@ -10,11 +10,11 @@ export default function Hero() {
         <Container>
           <Note>
             <Text sx={{display: 'block'}}>
-              New look, same Primer!{' '}
+              🎉 👀 New look, same Primer!{' '}
               <Link href="https://primer-docs-preview.github.com" target="_blank">
                 Preview the new docs experience here
               </Link>{' '}
-              and let us know what you think 👀 🎉
+              and let us know what you think.
             </Text>
           </Note>
           <Box

src/components/base-layout.tsx

@@ -4,6 +4,7 @@ import Head from '@primer/gatsby-theme-doctocat/src/components/head'
 import Header from '@primer/gatsby-theme-doctocat/src/components/header'
 import Sidebar from '@primer/gatsby-theme-doctocat/src/components/sidebar'
 import {Note} from '@primer/gatsby-theme-doctocat'
+import {LinkExternalIcon} from '@primer/octicons-react'
 
 export function BaseLayout({title, description, children, showSidebar = true}) {
   return (
@@ -20,11 +21,11 @@ export function BaseLayout({title, description, children, showSidebar = true}) {
           <Box sx={{maxWidth: 1200, width: '100%', pt: [4, 5, 6, 7], px: [4, 5, 6, 7], pb: 0, mx: 'auto'}}>
             <Note>
               <Text sx={{display: 'block'}}>
-                New look, same Primer!{' '}
+                🎉 👀 New look, same Primer!{' '}
                 <Link href="https://primer-docs-preview.github.com" target="_blank">
                   Preview the new docs experience here
                 </Link>{' '}
-                and let us know what you think 👀 🎉
+                and let us know what you think.
               </Text>
             </Note>
           </Box>

src/layouts/component-layout.tsx

@@ -9,8 +9,8 @@ import {ComponentPageNav} from '../components/component-page-nav'
 import navItems from '@primer/gatsby-theme-doctocat/src/nav.yml'
 
 type NavItemData = {
-  title: string,
-  url?: string,
+  title: string
+  url?: string
   children?: NavItemData[]
 }
 
@@ -45,17 +45,23 @@ export default function ComponentLayout({pageContext, children, path}) {
 
   return (
     <BaseLayout title={title} description={description}>
-      <Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
+      <Box sx={{maxWidth: 1200, width: '100%', pb: [4, 5, 6, 7], px: [4, 5, 6, 7], pt: [2, 3, 4, 5], mx: 'auto'}}>
         {breadcrumbData.length > 1 ? (
           <Breadcrumbs sx={{mb: 4}}>
-            {breadcrumbData.map(item => item.url ? (
-              <Breadcrumbs.Item key={item.url} href={withPrefix(item.url)} selected={path === item.url}>
-                {item.title}
-              </Breadcrumbs.Item>
-            ): null).filter(item => item)}
+            {breadcrumbData
+              .map(item =>
+                item.url ? (
+                  <Breadcrumbs.Item key={item.url} href={withPrefix(item.url)} selected={path === item.url}>
+                    {item.title}
+                  </Breadcrumbs.Item>
+                ) : null,
+              )
+              .filter(item => item)}
           </Breadcrumbs>
         ) : null}
-        <Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
+        <Heading as="h1" sx={{fontSize: 7}}>
+          {title}
+        </Heading>
         {description ? (
           <Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
             {description}