diff --git a/gatsby-browser.js b/gatsby-browser.js
index f7c1630..a3b7190 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,8 +1,17 @@
+import React from 'react';
+
// auto track routes via `page()`
import('./src/analytics/base.js').then(analytics => analytics.init());
export const onRouteUpdate = ({ location }) => {};
+export const onClientEntry = () => {
+ if (process.env.NODE_ENV !== 'production') {
+ const whyDidYouRender = require('@welldone-software/why-did-you-render');
+ whyDidYouRender(React);
+ }
+};
+
// export const wrapPageElement = ({ element, props }) => {
// // props provide same data to Layout as Page element will get
// // including location, data, etc - you don't need to pass it
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..23007e0 100644
--- a/package.json
+++ b/package.json
@@ -4,47 +4,42 @@
"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.27",
+ "@emotion/styled": "^10.0.27",
+ "@welldone-software/why-did-you-render": "^3.5.0",
+ "emotion-theming": "^10.0.27",
+ "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,29 +51,26 @@
"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"
],
"license": "MIT",
"main": "n/a",
- "resolutions": {
- "contentful": "6.1.0"
- },
"scripts": {
"dev": "gatsby develop",
"build": "gatsby build",
diff --git a/src/components/Header.js b/src/components/Header.js
index 17c7517..961e900 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,5 +1,5 @@
import React from 'react';
-import Link from 'gatsby-link';
+import AniLink from 'gatsby-plugin-transition-link/AniLink';
import styled from '@emotion/styled';
const Header = styled.header``;
@@ -12,7 +12,9 @@ const SiteTitle = styled.h1`
export default props => (
- The Daily TIL
+
+ The Daily TIL
+
);
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..c5a68a9 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) {