Use header from Doctocat (#170)

* Use Head and Header componet from Doctocat * Update to doctocat 0.12.0 release candidate * Pin styled-components and gatsby-plugin-styled-components versions * We don't need to use exact version numbers * Unpin all package versions * Fix z-index issues * Update doctocat * Fix lint errors
primer · Sep 6, 2019 · 5c31589 · 5c31589 · vercel · Sep 6, 2019
1 parent b648d2c
commit 5c31589
Show file tree

Hide file tree

Showing 15 changed files with 3,947 additions and 1,812 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,11 +1,8 @@
 {
-  "extends": [
-    "plugin:github/es6",
-    "plugin:github/react",
-    "plugin:jsx-a11y/recommended"
-  ],
+  "extends": ["plugin:github/es6", "plugin:github/react", "plugin:jsx-a11y/recommended"],
   "rules": {
-    "import/no-namespace": 0
+    "import/no-namespace": 0,
+    "eslint-comments/no-use": 0
   },
   "settings": {
     "react": {

diff --git a/.npmrc b/.npmrc
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -1,10 +1,11 @@
 const path = require('path')
-const {author} = require('./package.json')
 
 module.exports = {
   siteMetadata: {
     title: 'Primer Design System',
-    author
+    shortName: '',
+    description: 'The design system that powers GitHub',
+    imageUrl: 'https://user-images.githubusercontent.com/10384315/53922681-2f6d3100-402a-11e9-9719-5d1811c8110a.png'
   },
   plugins: [
     {

diff --git a/package.json b/package.json
@@ -8,42 +8,39 @@
     "lint": "eslint *.js src"
   },
   "dependencies": {
-    "@mdx-js/mdx": "1.1.0",
-    "@mdx-js/react": "1.0.27",
-    "@primer/components": "13.2.0",
-    "@primer/css": "12.5.0",
-    "@primer/octicons-react": "9.1.1",
+    "@mdx-js/mdx": "^1.1.0",
+    "@mdx-js/react": "^1.0.27",
+    "@primer/components": "^13.2.0",
+    "@primer/css": "^12.5.0",
+    "@primer/gatsby-theme-doctocat": "^0.14.2",
+    "@primer/octicons-react": "^9.1.1",
     "@primer/releases": "0.0.0-634eadc",
-    "@svgr/webpack": "4.3.2",
-    "gatsby": "2.13.39",
-    "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",
-    "gatsby-plugin-svgr": "2.0.2",
-    "gatsby-source-filesystem": "2.1.6",
-    "gatsby-transformer-yaml": "2.2.4",
-    "isomorphic-unfetch": "3.0.0",
-    "node-fetch": "2.6.0",
-    "node-sass": "4.12.0",
-    "primer-primitives": "1.0.2",
-    "prop-types": "15.6.2",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-helmet": "5.2.1",
-    "react-markdown": "4.1.0",
-    "semver": "6.3.0",
-    "styled-components": "4.2.0",
-    "styled-system": "5.0.16"
+    "@svgr/webpack": "^4.3.2",
+    "gatsby": "^2.13.39",
+    "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",
+    "gatsby-plugin-svgr": "^2.0.2",
+    "gatsby-source-filesystem": "^2.1.6",
+    "gatsby-transformer-yaml": "^2.2.4",
+    "isomorphic-unfetch": "^3.0.0",
+    "node-fetch": "^2.6.0",
+    "node-sass": "^4.12.0",
+    "primer-primitives": "^1.0.2",
+    "prop-types": "^15.6.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-helmet": "^5.2.1",
+    "react-markdown": "^4.1.0",
+    "semver": "^6.3.0",
+    "styled-components": "^4.2.0",
+    "styled-system": "^5.0.16"
   },
   "devDependencies": {
-    "eslint": "5.6.1",
-    "eslint-plugin-github": "1.4.0"
-  },
-  "resolutions": {
-    "**/react": "16.8.6",
-    "**/react-dom": "16.8.6"
+    "eslint": "^5.6.1",
+    "eslint-plugin-github": "^1.4.0"
   }
 }
diff --git a/src/components/AvatarShape.js b/src/components/AvatarShape.js
@@ -19,7 +19,6 @@ const Shape = styled(({className, shape}) => {
   return <Tag className={className} />
 })`
   position: relative;
-  z-index: 2;
   width: 100%;
   height: auto;
   fill: none;
@@ -29,15 +28,13 @@ const Image = styled('img')`
   object-fit: cover;
   width: 100%;
   height: 100%;
-  z-index: 1;
   position: absolute;
   top: 0;
   left: 0;
 `
 
 const A = styled(Box)`
   position: relative;
-  z-index: 2;
   display: inline-block;
   clip-path: url("#clip-${props => props.shape}");
   &:after {
@@ -54,7 +51,6 @@ const A = styled(Box)`
     linear-gradient(to left, ${themeGet('colors.blue.6')} 50%, transparent);
     mix-blend-mode: multiply;
     opacity: 0;
-    z-index: 3;
   }
   &:hover:after {
     opacity: 1;
@@ -66,7 +62,7 @@ const ShapeOutline = styled(Link)`
   position: relative;
   background: transparent !important;
   display: block;
-  &:after {
+  &:before {
     content: '';
     clip-path: url("#clip-${props => props.shape}");
     ${color};
@@ -75,7 +71,6 @@ const ShapeOutline = styled(Link)`
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 1;
   }
 `
 

diff --git a/src/components/GlobalNav.js b/src/components/GlobalNav.js
diff --git a/src/components/Header.js b/src/components/Header.js
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -1,9 +1,7 @@
-import React from 'react'
-import {Helmet} from 'react-helmet'
-import {useStaticQuery, graphql} from 'gatsby'
 import {Box, Heading} from '@primer/components'
-import Header from './Header'
 import '@primer/css/layout/index.scss'
+import {Head, Header} from '@primer/gatsby-theme-doctocat'
+import React from 'react'
 
 // FIXME: this works around known issues with Heading's default prop {m: 0}
 Object.assign(Heading.defaultProps, {
@@ -12,54 +10,20 @@ Object.assign(Heading.defaultProps, {
   mb: 0
 })
 
-export default function Layout(props) {
-  const {children, title, pageContext = {}, ...rest} = props
-
-  const {
-    site: {siteMetadata}
-  } = useStaticQuery(graphql`
-    query Layout {
-      site {
-        siteMetadata {
-          title
-        }
-      }
-    }
-  `)
-
-  let pageTitle = title
-  if (pageContext.frontmatter && !pageTitle) {
-    pageTitle = pageContext.frontmatter.title
-  }
-
+export default function Layout({pageContext, children}) {
   return (
     <>
-      <Helmet>
-        <title>
-          {pageTitle ? `${pageTitle} • ` : ''}
-          {siteMetadata.title}
-        </title>
-        <meta name="keywords" content="Design System" />
-        <meta property="og:article:author" content="GitHub Design Systems team" />
-        <meta property="og:title" content="Primer" />
-        <meta property="og:type" content="website" />
-        <meta property="og:url" content="https://primer.style" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <meta property="og:description" content="The design system that powers GitHub" />
-        <meta
-          property="og:image"
-          content="https://user-images.githubusercontent.com/10384315/53922681-2f6d3100-402a-11e9-9719-5d1811c8110a.png"
-        />
-        <meta property="og:image:width" content="1200" />
-        <meta property="og:image:height" content="630" />
-        <meta property="twitter:card" content="summary_large_image" />
-        <meta property="twitter:site" content="@githubprimer" />
-        {/* <script async src="https://www.googletagmanager.com/gtag/js?id=UA-126681523-1" /> */}
-      </Helmet>
-      <Header />
-      <Box bg="black" color="blue.2" {...rest}>
+      <Head title={pageContext.frontmatter.title} description={pageContext.frontmatter.description} />
+      <Header isSearchEnabled={false} />
+      <Box bg="black" color="blue.2">
         {children}
       </Box>
     </>
   )
 }
+
+Layout.defaultProps = {
+  pageContext: {
+    frontmatter: {}
+  }
+}
diff --git a/src/components/MemberContainer.js b/src/components/MemberContainer.js
@@ -37,6 +37,7 @@ export default function Member(props) {
       <MemberQuestions member={member} colorName={colorName} />
       <Flex.Item mb={[6, 8, 8, 0, 0]} style={{flexShrink: 0, position: 'relative'}}>
         <Box mr={isOdd ? [0, 0, 0, 12, 12] : 0} ml={isOdd ? 0 : [0, 0, 12, 12, 12]}>
+          <Dots shape={shape} color={color} />
           <AvatarShape
             shape={shape}
             src={avatarImage}
@@ -47,7 +48,6 @@ export default function Member(props) {
             onMouseOver={() => setHover(true)}
             onMouseOut={() => setHover(false)}
           />
-          <Dots shape={shape} color={color} />
         </Box>
       </Flex.Item>
     </Flex>

diff --git a/src/components/NavDropdown.js b/src/components/NavDropdown.js
diff --git a/src/components/NavItem.js b/src/components/NavItem.js