From 5c3158935ea4743b029ef80c0142d3feae5ccb58 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 6 Sep 2019 10:36:09 -0700 Subject: [PATCH] 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 --- .eslintrc.json | 9 +- .npmrc | 2 - gatsby-config.js | 5 +- package.json | 65 +- src/components/AvatarShape.js | 7 +- src/components/GlobalNav.js | 30 - src/components/Header.js | 28 - src/components/Layout.js | 60 +- src/components/MemberContainer.js | 2 +- src/components/NavDropdown.js | 64 - src/components/NavItem.js | 20 - src/components/draggable.js | 1 - src/pages/index.js | 4 +- src/pages/news.js | 5 +- yarn.lock | 5457 ++++++++++++++++++++--------- 15 files changed, 3947 insertions(+), 1812 deletions(-) delete mode 100644 .npmrc delete mode 100644 src/components/GlobalNav.js delete mode 100644 src/components/Header.js delete mode 100644 src/components/NavDropdown.js delete mode 100644 src/components/NavItem.js diff --git a/.eslintrc.json b/.eslintrc.json index 924b0180..0527c94e 100644 --- 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 deleted file mode 100644 index f5357d5e..00000000 --- a/.npmrc +++ /dev/null @@ -1,2 +0,0 @@ -save=true -save-exact=true diff --git a/gatsby-config.js b/gatsby-config.js index e7b680c5..819c689c 100644 --- 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 index bdaf59da..a9a86611 100644 --- 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 index bb11bfcb..022daac6 100644 --- a/src/components/AvatarShape.js +++ b/src/components/AvatarShape.js @@ -19,7 +19,6 @@ const Shape = styled(({className, shape}) => { return })` position: relative; - z-index: 2; width: 100%; height: auto; fill: none; @@ -29,7 +28,6 @@ const Image = styled('img')` object-fit: cover; width: 100%; height: 100%; - z-index: 1; position: absolute; top: 0; left: 0; @@ -37,7 +35,6 @@ const Image = styled('img')` 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 deleted file mode 100644 index bffd4cab..00000000 --- a/src/components/GlobalNav.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import {Link, Text} from '@primer/components' -import {Link as GatsbyLink} from 'gatsby' -import NavDropdown from './NavDropdown' -import NavItem from './NavItem' - -const NavLink = props => - -export default function GlobalNav({navProps = {ml: 4}}) { - return ( - <> - - News - What’s new - - - Interface guidelines - Octicons - Prototyping - - - Primer CSS - Primer Components - - - About - - - ) -} diff --git a/src/components/Header.js b/src/components/Header.js deleted file mode 100644 index d0af79d6..00000000 --- a/src/components/Header.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' -import {Box, Flex, Link, Sticky, StyledOcticon} from '@primer/components' -import {Link as GatsbyLink} from 'gatsby' -import {MarkGithub} from '@primer/octicons-react' -import GlobalNav from './GlobalNav' - -export default function Header(props) { - return ( - <> - - - - - - Primer - - - - - - - - - - - - ) -} diff --git a/src/components/Layout.js b/src/components/Layout.js index df48c3e7..95f69860 100644 --- 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 ( <> - - - {pageTitle ? `${pageTitle} • ` : ''} - {siteMetadata.title} - - - - - - - - - - - - - - {/*