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 <[email protected]> * Update src/components/child-pages.tsx * Update src/components/child-pages.tsx * Update src/layouts/index-layout.tsx --------- Co-authored-by: Emily Brick <[email protected]> Co-authored-by: Josep Martins <[email protected]>
primer · Jul 28, 2023 · 3d6dc79 · 3d6dc79
1 parent 54c2967
commit 3d6dc79
Show file tree

Hide file tree

Showing 14 changed files with 64 additions and 4 deletions.
diff --git a/content/about.mdx b/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'

diff --git a/content/components/index.mdx b/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" />
diff --git a/content/foundations/icons/index.mdx b/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 />
diff --git a/content/foundations/index.mdx b/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" />
diff --git a/...t/components/github-shared-components.mdx → ...github-staff/github-shared-components.mdx b/...t/components/github-shared-components.mdx → ...github-staff/github-shared-components.mdx
diff --git a/content/github-staff/index.md b/content/github-staff/index.md
@@ -0,0 +1,6 @@
+---
+title: GitHub staff
+description: Internal documentation for GitHub staff.
+---
+
+<ChildPages of="GitHub staff" />
diff --git a/content/guides/contribute/index.mdx b/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:

diff --git a/content/guides/index.mdx b/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" />
diff --git a/content/guides/status.mdx b/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'

diff --git a/content/native/index.mdx b/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" />
diff --git a/content/ui-patterns/index.mdx b/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" />
diff --git a/src/@primer/gatsby-theme-doctocat/nav.yml b/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:

diff --git a/src/components/child-pages.tsx b/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>

diff --git a/src/layouts/index-layout.tsx b/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>
+  )
+}