Merge pull request #162 from primer/nav-update

Update nav links
primer · Aug 1, 2019 · 95ac067 · 95ac067
2 parents 3d30cbd + 3e51394
commit 95ac067
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 1,477 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -22,7 +22,6 @@ module.exports = {
         }
       }
     },
-    'gatsby-plugin-client-side-redirect',
     'gatsby-plugin-sass',
     'gatsby-plugin-styled-components',
     {
@@ -41,5 +40,6 @@ module.exports = {
         layout: 'default'
       }
     },
+    'gatsby-plugin-meta-redirect'
   ]
 }
diff --git a/package.json b/package.json
@@ -10,15 +10,14 @@
   "dependencies": {
     "@mdx-js/mdx": "1.1.0",
     "@mdx-js/react": "1.0.27",
-    "@primer/blueprints": "4.0.1",
     "@primer/components": "13.2.0",
     "@primer/css": "12.5.0",
-    "@primer/octicons-react": "9.1.0",
+    "@primer/octicons-react": "9.1.1",
     "@svgr/webpack": "4.3.2",
     "gatsby": "2.13.39",
-    "gatsby-plugin-client-side-redirect": "0.0.2",
     "gatsby-plugin-manifest": "2.2.4",
     "gatsby-plugin-mdx": "1.0.17",
+    "gatsby-plugin-meta-redirect": "1.1.1",
     "gatsby-plugin-react-helmet": "3.1.2",
     "gatsby-plugin-sass": "2.1.3",
     "gatsby-plugin-styled-components": "3.1.2",

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -6,11 +6,10 @@ import NavDropdown from './NavDropdown'
 import NavItem from './NavItem'
 
 const NavLink = props => <Link color="blue.2" as={GatsbyLink} {...props} />
-const DropdownLink = props => <NavItem as={GatsbyLink} {...props} />
 
 export default function Header(props) {
   return (
-    <Sticky {...props}>
+    <Sticky zIndex={100} {...props}>
       <Flex bg="black" px={5} py={3} alignItems="center" justifyContent="space-between">
         <Flex alignItems="center">
           <StyledOcticon color="blue.4" icon={MarkGithub} size="medium" mr={3} />
@@ -19,17 +18,29 @@ export default function Header(props) {
           </Link>
         </Flex>
         <Flex as="nav" alignItems="center">
-          <NavLink to="/news">What’s new</NavLink>
-          <NavDropdown title="Design">
-            <DropdownLink to="/design">Interface guidelines</DropdownLink>
-            <DropdownLink to="https://octicons.github.com">Octicons</DropdownLink>
-            <DropdownLink to="/css/tools/prototyping">Prototyping</DropdownLink>
+          <NavLink to="/news" ml={4}>
+            What’s new
+          </NavLink>
+          <NavDropdown title="Design" ml={4}>
+            <NavItem as={GatsbyLink} to="/design">
+              Interface guidelines
+            </NavItem>
+            <NavItem href="https://octicons.github.com">Octicons</NavItem>
+            <NavItem as={GatsbyLink} to="/css/tools/prototyping">
+              Prototyping
+            </NavItem>
           </NavDropdown>
-          <NavDropdown title="Development">
-            <DropdownLink to="/css">Primer CSS</DropdownLink>
-            <DropdownLink to="/components">Primer Components</DropdownLink>
+          <NavDropdown title="Development" ml={4}>
+            <NavItem as={GatsbyLink} to="/css">
+              Primer CSS
+            </NavItem>
+            <NavItem as={GatsbyLink} to="/components">
+              Primer Components
+            </NavItem>
           </NavDropdown>
-          <NavLink to="/about">About</NavLink>
+          <NavLink to="/about" ml={4}>
+            About
+          </NavLink>
         </Flex>
       </Flex>
     </Sticky>

diff --git a/src/components/Hero.js b/src/components/Hero.js
@@ -5,6 +5,8 @@ import IndexGrid from './IndexGrid'
 import {ReactComponent as HeroImage} from '../svg/Hero.svg'
 import {ReactComponent as HeroOverlay} from '../svg/HeroOverlay.svg'
 
+const DOT = '・'
+
 export default function Hero() {
   return (
     <Box pt={[4, 2, 5]}>
@@ -21,25 +23,25 @@ export default function Hero() {
           <Heading color="blue.4" mb={2} fontSize={[48, 56, 84]} fontWeight="bold">
             Primer
           </Heading>
-          <Text color="blue.2" fontSize={[4, 5, 5, 7]} lineHeight={1.25}>
-            Resources, tooling, and design guidelines for building interfaces with GitHub’s design system
+          <Text as="div" color="white" fontSize={[4, 5, 5, 7]} lineHeight={1.25} mb={3}>
+            Design, build, and create with GitHub’s design system
+          </Text>
+          <Text as="div" color="blue.2">
+            Primer was created for GitHub by GitHub. We love it so much, we chose to open-source it to allow the
+            community to design and build their own projects with Primer.
           </Text>
           <Text fontFamily="mono" as="p" color="blue.3" mt={5}>
-            <LinkLight fontSize={[0, 1, 2]} href="https://primer.style/team">
-              Team
-            </LinkLight>{' '}
-            ・
-            <LinkLight ml={2} fontSize={[0, 1, 2]} href="https://primer.style/components">
-              Components
-            </LinkLight>{' '}
-            ・
-            <LinkLight ml={2} fontSize={[0, 1, 2]} href="https://spectrum.chat/primer">
-              Community
-            </LinkLight>{' '}
-            ・
+            <LinkLight fontSize={[0, 1, 2]} href="/about">
+              About
+            </LinkLight>
+            {DOT}
             <LinkLight ml={2} fontSize={[0, 1, 2]} href="https://github.com/primer/">
               Open-source
             </LinkLight>
+            {DOT}
+            <LinkLight ml={2} fontSize={[0, 1, 2]} href="https://spectrum.chat/primer">
+              Community
+            </LinkLight>
           </Text>
         </Flex.Item>
       </IndexGrid>

diff --git a/src/components/NavDropdown.js b/src/components/NavDropdown.js
@@ -18,14 +18,13 @@ export default function NavDropdown({children, title, color, direction = 'se', .
     <Box {...rest}>
       <Details
         overlay
-        mx={3}
         render={({toggle}) => (
           <>
             <Text color={color} as="summary" onClick={toggle}>
               {title} <StyledOcticon icon={ChevronDown} />
             </Text>
             <Relative>
-              <DropdownMenu as={Absolute} py={2} zIndex={90} bg="black" direction={direction}>
+              <DropdownMenu as={Absolute} py={2} bg="black" direction={direction}>
                 {children}
               </DropdownMenu>
             </Relative>

diff --git a/src/pages/about.md b/src/pages/about.md
@@ -1,6 +1,10 @@
+---
+title: About
+---
+
 import Team from '../components/Team'
 import Layout from '../components/Layout'
 
-<Team id="team" pt={8} px={5} />
-
-export default props => <Layout title="Team" {...props} />
+<div id="team/">
+  <Team id="team" pt={8} px={5} />
+</div>