use more colorful theme

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

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

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",

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 => (
   <Header>
     <SiteTitle>
-      <Link to="/">The Daily TIL</Link>
+      <AniLink top="entry" direction="right" swipe to="/">
+        The Daily TIL
+      </AniLink>
     </SiteTitle>
   </Header>
 );

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``;
 

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 }) => (
       <small>
         {toHumanDate(date)} by <Author {...author} />
       </small>
-      <h2>
-        <Link to={`/til/${slug}`}>{title}</Link>
-      </h2>
+      <LinkContainer>
+        <AniLink swipe top="exit" direction="left" to={`/til/${slug}`}>
+          {title}
+        </AniLink>
+      </LinkContainer>
     </header>
     <section>
       <p>{subtitle}</p>

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>
   );
 }
-
-HTML.propTypes = {
-  htmlAttributes: PropTypes.object,
-  headComponents: PropTypes.array,
-  bodyAttributes: PropTypes.object,
-  preBodyComponents: PropTypes.array,
-  body: PropTypes.string,
-  postBodyComponents: PropTypes.array,
-};

src/pages/index.js

@@ -41,8 +41,9 @@ const Page = ({
     <Intro style={{ textAlign: 'center' }}>
       <Badges>
         <iframe
+          title="github-stars"
           src="https://ghbtns.com/github-btn.html?user=andycmaj&repo=TIL&type=star&count=true"
-          frameborder="0"
+          frameBorder="0"
           scrolling="0"
           width="100px"
           height="20px"
@@ -64,6 +65,8 @@ const Page = ({
   </Layout>
 );
 
+Page.whyDidYouRender = true;
+
 export default Page;
 
 export const pageQuery = graphql`

src/templates/TIL.js

@@ -26,6 +26,7 @@ const Tags = styled.small`
 const TagIcon = styled(FaTag)`
   vertical-align: middle;
   margin-right: 0.25em;
+  fill: var(--textLink);
 `;
 
 const ArticleTitle = styled.h2`

src/templates/tagIndex.js

@@ -29,10 +29,10 @@ const TagIndexPage = ({
       description="Stuff I learned one day"
     >
       <header>
-        <h2>
+        <h3>
           <TagIcon />
           {tag}
-        </h2>
+        </h3>
       </header>
       {indexedTils.map(til => (
         <TilListItem key={til.slug} {...til} />

src/utils/globalStyles.js

@@ -4,14 +4,23 @@ import { rhythm } from './typography';
 
 const globalStyles = css`
   body.light {
-    --bg: #ffffff;
-    --textNormal: #222;
-    --textTitle: #222;
-    --textLink: #00a385;
+    --textNormal: #3d3836;
+    --textSelection: #ccd59d;
+    --textTitle: #005633;
+    --textLink: #324299;
     --hr: hsla(0, 0%, 0%, 0.2);
-    --inlineCode-bg: rgba(255, 229, 100, 0.2);
+    --inlineCode-bg: #f4e5b7;
     --inlineCode-text: #1a1a1a;
-    --blockCode-bg: #252728;
+    --blockCode-bg: #3d3836;
+    --body-bg: #f4e5b7;
+  }
+
+  body {
+    background-color: var(--body-bg);
+  }
+
+  ::selection {
+    background-color: var(--textSelection);
   }
 
   ul,
@@ -23,6 +32,34 @@ const globalStyles = css`
     border-bottom: none;
   }
 
+  h1 {
+    color: var(--textNormal);
+  }
+
+  h2 {
+    font-size: 3em;
+  }
+
+  h3 {
+    font-size: 2em;
+  }
+
+  h4 {
+    font-size: 1.5em;
+  }
+
+  h5 {
+    font-size: 1em;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5 {
+    color: var(--textTitle);
+    font-weight: 700;
+  }
+
   header,
   section > table,
   section > h4,
@@ -155,7 +192,7 @@ const globalStyles = css`
   }
 
   .token.comment {
-    color: #757372;
+    color: #aaa;
   }
 
   .token.string,