From 9e8ce6c69e87a2a3e3d714b2c446b81df6dafb36 Mon Sep 17 00:00:00 2001 From: Andy Date: Sun, 22 Dec 2019 13:29:32 -0800 Subject: [PATCH 1/8] use more colorful theme --- gatsby-config.js | 28 +- package.json | 90 +- src/components/Layout.js | 7 +- src/components/TilListItem.js | 17 +- src/html.js | 10 - src/pages/index.js | 1 + src/templates/tagIndex.js | 4 +- src/utils/globalStyles.js | 29 +- yarn.lock | 6210 ++++++++++++++++++++------------- 9 files changed, 3800 insertions(+), 2596 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 054ce8f..7d54c0a 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -31,16 +31,9 @@ module.exports = { plugins: [ `gatsby-plugin-sitemap`, `gatsby-plugin-react-helmet`, - // { - // resolve: `gatsby-source-filesystem`, - // options: { - // name: `images`, - // path: `${__dirname}/src/images`, - // }, - // }, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, - + `gatsby-plugin-transition-link`, // { // resolve: `gatsby-plugin-manifest`, // options: { @@ -84,25 +77,6 @@ module.exports = { pathToConfigModule: `src/utils/typography`, }, }, - // { - // resolve: `gatsby-plugin-segment-js`, - // options: { - // // your segment write key for your production environment - // // when process.env.NODE_ENV === 'production' - // // required; non-empty string - // prodKey: `w8DpBL4CbIx1ISHBP3DOQqCFVV3S9gbA`, - - // // if you have a development env for your segment account, paste that key here - // // when process.env.NODE_ENV === 'development' - // // optional; non-empty string - // devKey: `w8DpBL4CbIx1ISHBP3DOQqCFVV3S9gbA`, - - // // boolean (defaults to false) on whether you want - // // to include analytics.page() automatically - // // if false, see below on how to track pageviews manually - // trackPage: false, - // }, - // }, // this (optional) plugin enables Progressive Web App + Offline functionality // To learn more, visit: https://gatsby.app/offline diff --git a/package.json b/package.json index fb81b7d..c9347c3 100644 --- a/package.json +++ b/package.json @@ -4,47 +4,41 @@ "description": "Gatsby example site using the Contentful source plugin and i18n", "version": "2.0.0", "dependencies": { - "@emotion/core": "^10.0.14", - "@emotion/styled": "^10.0.14", - "dotenv": "^8.0.0", - "emotion-theming": "^10.0.14", - "eslint-config-prettier": "^5.1.0", - "form-serialize": "^0.7.2", - "gatsby": "^2.13.41", - "gatsby-image": "^2.2.7", - "gatsby-plugin-config": "^1.0.7", - "gatsby-plugin-emotion": "^4.1.2", + "@emotion/core": "^10.0.22", + "@emotion/styled": "^10.0.23", + "emotion-theming": "^10.0.19", + "eslint-config-prettier": "^6.7.0", + "gatsby": "^2.18.16", + "gatsby-image": "^2.2.37", + "gatsby-plugin-emotion": "^4.1.18", "gatsby-plugin-i18n": "^1.0.1", - "gatsby-plugin-manifest": "^2.2.4", - "gatsby-plugin-offline": "^2.2.4", - "gatsby-plugin-react-helmet": "^3.1.2", - "gatsby-plugin-sharp": "^2.2.9", - "gatsby-plugin-sitemap": "^2.2.3", - "gatsby-plugin-typography": "^2.3.2", - "gatsby-remark-autolink-headers": "^2.1.3", - "gatsby-remark-images": "^3.1.7", - "gatsby-remark-prismjs": "^3.3.3", - "gatsby-remark-smartypants": "^2.1.2", - "gatsby-source-contentful": "^2.1.15", - "gatsby-source-filesystem": "^2.1.6", - "gatsby-transformer-remark": "^2.6.9", - "gatsby-transformer-sharp": "^2.2.4", - "gatsby-transformer-yaml": "^2.2.4", - "intl": "^1.2.5", - "lodash": "^4.17.15", - "moment": "^2.24.0", + "gatsby-plugin-manifest": "^2.2.34", + "gatsby-plugin-offline": "^3.0.30", + "gatsby-plugin-react-helmet": "^3.1.18", + "gatsby-plugin-sharp": "^2.3.10", + "gatsby-plugin-sitemap": "^2.2.24", + "gatsby-plugin-transition-link": "^1.17.7", + "gatsby-plugin-typography": "^2.3.20", + "gatsby-remark-autolink-headers": "^2.1.21", + "gatsby-remark-images": "^3.1.39", + "gatsby-remark-prismjs": "^3.3.28", + "gatsby-remark-smartypants": "^2.1.19", + "gatsby-source-contentful": "^2.1.72", + "gatsby-source-filesystem": "^2.1.43", + "gatsby-transformer-remark": "^2.6.45", + "gatsby-transformer-sharp": "^2.3.9", + "gatsby-transformer-yaml": "^2.2.20", + "gsap": "^3.0.4", "object-fit-images": "^3.2.4", - "polished": "^3.4.1", - "prettier": "^1.18.2", + "polished": "^3.4.2", + "prettier": "^1.19.1", "prismjs": "^1.17.1", - "prop-types": "^15.7.2", "ramda": "^0.26.1", - "react": "^16.8.6", - "react-dom": "^16.8.6", + "react": "^16.12.0", + "react-dom": "^16.12.0", "react-helmet": "^5.2.1", - "react-icons": "^3.7.0", - "react-intl": "^2.9.0", - "react-share": "^3.0.0", + "react-icons": "^3.8.0", + "react-share": "^3.0.1", "react-typography": "^0.16.19", "recompose": "^0.30.0", "slash": "^3.0.0", @@ -56,20 +50,20 @@ "typography-theme-fairy-gates": "^0.16.19" }, "devDependencies": { - "@babel/plugin-transform-object-assign": "^7.2.0", - "babel-eslint": "10.0.2", + "@babel/plugin-transform-object-assign": "^7.7.4", + "babel-eslint": "10.0.3", "babel-loader": "^8.0.6", - "eslint": "^5.16.0", - "eslint-config-react-app": "^4.0.1", - "eslint-loader": "^2.2.1", - "eslint-plugin-flowtype": "3.12.1", - "eslint-plugin-import": "2.18.2", + "eslint": "^6.8.0", + "eslint-config-react-app": "^5.1.0", + "eslint-loader": "^3.0.3", + "eslint-plugin-flowtype": "4.5.2", + "eslint-plugin-import": "2.19.1", "eslint-plugin-jsx-a11y": "6.2.3", - "eslint-plugin-prettier": "^3.1.0", - "eslint-plugin-react": "7.14.3", - "gatsby-plugin-eslint": "^2.0.5", - "netlify": "^2.4.8", - "uuid": "^3.3.2" + "eslint-plugin-prettier": "^3.1.2", + "eslint-plugin-react": "7.17.0", + "gatsby-plugin-eslint": "^2.0.8", + "netlify": "^3.0.0", + "uuid": "^3.3.3" }, "keywords": [ "gatsby" diff --git a/src/components/Layout.js b/src/components/Layout.js index bac59dd..874b23f 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -6,10 +6,9 @@ import MetaData from './MetaData'; import Header from './Header'; import globalStyles from '../utils/globalStyles'; -// import { StringsProvider } from '../utils/strings'; -// import { FlagsProvider } from '../utils/featureFlags'; - -const Container = styled.div``; +const Container = styled.div` + background-color: var(--body-bg); +`; const Main = styled.main``; diff --git a/src/components/TilListItem.js b/src/components/TilListItem.js index fdc2ac1..ee88780 100644 --- a/src/components/TilListItem.js +++ b/src/components/TilListItem.js @@ -2,16 +2,17 @@ import React from 'react'; import toHumanDate from '../utils/toHumanDate'; import styled from '@emotion/styled'; import { rhythm } from '../utils/typography'; -import { Link } from 'gatsby'; +import AniLink from 'gatsby-plugin-transition-link/AniLink'; import Author from './Author'; const Article = styled.article` margin-top: ${rhythm(2)}; margin-bottom: ${rhythm(2)}; +`; - h2 { - margin: 0 0 ${rhythm(0.5)}; - } +const LinkContainer = styled.p` + font-size: 2em; + margin: 0; `; const TilListItem = ({ slug, title, subtitle, author, date }) => ( @@ -20,9 +21,11 @@ const TilListItem = ({ slug, title, subtitle, author, date }) => ( {toHumanDate(date)} by -

- {title} -

+ + + {title} + +

{subtitle}

diff --git a/src/html.js b/src/html.js index 8e93ec8..d2340d6 100644 --- a/src/html.js +++ b/src/html.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; export default function HTML(props) { return ( @@ -28,12 +27,3 @@ export default function HTML(props) { ); } - -HTML.propTypes = { - htmlAttributes: PropTypes.object, - headComponents: PropTypes.array, - bodyAttributes: PropTypes.object, - preBodyComponents: PropTypes.array, - body: PropTypes.string, - postBodyComponents: PropTypes.array, -}; diff --git a/src/pages/index.js b/src/pages/index.js index 8ef63d0..ce57682 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -41,6 +41,7 @@ const Page = ({