Updates design of index pages (#540)

* updates design of index pages

* reverts unintentional package.json changes

* Update content/github-staff/index.md

Co-authored-by: Josep Martins <josepmartins@github.com>

* Update src/components/child-pages.tsx

* Update src/components/child-pages.tsx

* Update src/layouts/index-layout.tsx

---------

Co-authored-by: Emily Brick <emilybrick@github.com>
Co-authored-by: Josep Martins <josepmartins@github.com>

content/about.mdx

@@ -1,5 +1,6 @@
 ---
 title: Meet the team
+description: Learn about the core team who works on Primer.
 ---
 
 import {Team} from '~/src/components/team'

content/components/index.mdx

@@ -1,5 +1,9 @@
 ---
 title: Components
+description: Design and usage guidelines for individual Primer components.
 ---
 
+import IndexLayout from '~/src/layouts/index-layout'
+export default IndexLayout
+
 <ChildPages of="Components" />

content/foundations/icons/index.mdx

@@ -1,11 +1,10 @@
 ---
 title: Octicons
+description: A scalable set of icons handcrafted by GitHub.
 source: https://github.com/primer/octicons
 ---
 
 import Icons from '../../../src/components/icons'
 import {HeartFillIcon} from '@primer/octicons-react'
 
-A scalable set of icons handcrafted with <HeartFillIcon /> by GitHub
-
 <Icons />

content/foundations/index.mdx

@@ -1,5 +1,9 @@
 ---
 title: Foundations
+description: The fundamental parts of the design system that underpin all GitHub interfaces, such as color and typography.
 ---
 
+import IndexLayout from '~/src/layouts/index-layout'
+export default IndexLayout
+
 <ChildPages of="Foundations" />

content/github-staff/index.md

@@ -0,0 +1,6 @@
+---
+title: GitHub staff
+description: Internal documentation for GitHub staff.
+---
+
+<ChildPages of="GitHub staff" />

content/guides/contribute/index.mdx

@@ -1,5 +1,6 @@
 ---
 title: Contribution guidelines
+description: Information about how to contribute to Primer.
 ---
 
 If you're interested in contributing to Primer, you can find all the information you need here, including:

content/guides/index.mdx

@@ -1,5 +1,9 @@
 ---
 title: Guides
+description: Standards, guidelines, and tools to getting started with Primer.
 ---
 
+import IndexLayout from '~/src/layouts/index-layout'
+export default IndexLayout
+
 <ChildPages of="Guides" />

content/guides/status.mdx

@@ -1,5 +1,6 @@
 ---
 title: Component status
+description: Check the status of accessibility reviews and the component lifecycle status of each component.
 ---
 
 import {StatusTable} from '../../src/components/status'

content/native/index.mdx

@@ -1,5 +1,9 @@
 ---
 title: Native
+description: Principles, foundations and usage guidelines for designing for GitHub's native products.
 ---
 
+import IndexLayout from '~/src/layouts/index-layout'
+export default IndexLayout
+
 <ChildPages of="Native" />

content/ui-patterns/index.mdx

@@ -1,5 +1,9 @@
 ---
 title: UI patterns
+description: Design guidelines covering common user workflows.
 ---
 
+import IndexLayout from '~/src/layouts/index-layout'
+export default IndexLayout
+
 <ChildPages of="UI patterns" />

src/@primer/gatsby-theme-doctocat/nav.yml

@@ -1,4 +1,5 @@
 - title: Guides
+  url: /guides
   children:
     - title: Introduction
       url: /guides/introduction
@@ -65,6 +66,7 @@
         - title: Adding new components
           url: /guides/contribute/adding-new-components
 - title: Foundations
+  url: /foundations
   children:
     - title: Color
       url: /foundations/color
@@ -279,9 +281,10 @@
     - title: Underline panels
       url: /components/underline-panels
 - title: GitHub staff
+  url: /github-staff
   children:
     - title: GitHub shared components
-      url: /components/github-shared-components
+      url: /github-staff/github-shared-components
 - title: Native
   url: /native
   children:

src/components/child-pages.tsx

@@ -54,7 +54,7 @@ export function ChildPages({of: title}: {of: string}) {
               {item.title}
             </Link>
           </Heading>
-          <Text as="p" sx={{m: 0, maxWidth: '80ch'}}>
+          <Text as="p" sx={{m: 0, maxWidth: '80ch', fontSize: 2, color: 'fg.subtle'}}>
             {descriptionsByPath[item.url]}
           </Text>
         </Box>

src/layouts/index-layout.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import {Box, Heading, Text} from '@primer/react'
+import PageFooter from '@primer/gatsby-theme-doctocat/src/components/page-footer'
+import {BaseLayout} from '../components/base-layout'
+
+// TODO: render the background graphic at the top of the page once we have the assets
+
+export default function IndexLayout(props) {
+  const {pageContext, children} = props
+  const {title, description} = pageContext.frontmatter
+
+  return (
+    <BaseLayout title={title} description={description}>
+      <Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
+        <Box sx={{display: "flex", flexDirection: 'column', gap: 2, mb: 7}}>
+          {/* TODO: update `fontSize` to `8` once we can upgrade to the latest version of PRC, which supports that fontSize value */}
+          <Heading as="h1" sx={{fontSize: 48}}>{title}</Heading>
+          {description ? (
+            <Text as="p" sx={{fontSize: 4, m: 0, mb: 3, maxWidth: '60ch'}}>
+              {description}
+            </Text>
+          ) : null}
+        </Box>
+        {children}
+        <PageFooter editUrl={pageContext.editUrl} contributors={pageContext.contributors} />
+      </Box>
+    </BaseLayout>
+  )
+}