rename one of the components (SEO -> Seo), bump all packages, update Dockerfile/nginx.conf/circleci config

.circleci/config.yml

@@ -2,11 +2,12 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:12.9.1-browsers
+      - image: circleci/node:14.16.1-browsers
     working_directory: ~/twhelpwebsite
     steps:
       - checkout
-      - setup_remote_docker
+      - setup_remote_docker:
+          version: 20.10.2
       # start proprietary DB using private Docker image
       # with credentials stored in the UI
       - run: |
@@ -26,4 +27,3 @@ workflows:
             branches:
               only:
                 - master
-  

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.1.0-alpine as build-deps
+FROM node:14.16.1-alpine as build-deps
 
 ENV NODE_ENV=production
 
@@ -11,8 +11,8 @@ RUN yarn build
 
 #Stage 2
 
-FROM nginx:1.17.5-alpine
+FROM nginx:1.20-alpine
 COPY --from=build-deps /usr/src/app/public /var/www
 COPY nginx.conf /etc/nginx/nginx.conf
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

gatsby-config.js

@@ -40,7 +40,16 @@ module.exports = {
     {
       resolve: `gatsby-theme-material-ui`,
       options: {
-        webFontsConfig: null,
+        webFontsConfig: {
+          fonts: {
+            google: [
+              {
+                family: `Montserrat`,
+                variants: [`300`],
+              },
+            ],
+          },
+        },
       },
     },
     `gatsby-plugin-sitemap`,

nginx.conf

@@ -16,16 +16,11 @@ http {
     # what is the default one
     default_type  application/octet-stream;
 
-    # Sets the path, format, and configuration for a buffered log write
-    log_format compression '$remote_addr - $remote_user [$time_local] '
-        '"$request" $status $upstream_addr '
-        '"$http_referer" "$http_user_agent"';
-
     server {
         # listen on port 80
         listen 80;
         # save logs here
-        access_log /var/log/nginx/access.log compression;
+        access_log /var/log/nginx/access.log combined;
 
         # where the root here
         root /var/www;
@@ -36,14 +31,12 @@ http {
         # Fonts and media: images, icons, video, audio, HTC
         location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|ttf)$ {
           expires 1M;
-          access_log off;
           add_header Cache-Control "public";
         }
 
         # Javascript and CSS files
         location ~* \.(?:css|webmanifest|js|woff2|manifest)$ {
             expires 1y;
-            access_log off;
             add_header Cache-Control "public";
         }
 
@@ -53,4 +46,4 @@ http {
             try_files $uri $uri/ =404;
         }
     }
-}
+}

package.json

@@ -11,21 +11,21 @@
     "@material-ui/styles": "^4.10.0",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-imports": "^2.0.0",
-    "gatsby": "^2.23.12",
-    "gatsby-image": "^2.4.9",
-    "gatsby-plugin-manifest": "^2.4.14",
-    "gatsby-plugin-offline": "^3.2.13",
-    "gatsby-plugin-react-helmet": "^3.3.6",
+    "gatsby": "^3.3.1",
+    "gatsby-image": "^3.3.0",
+    "gatsby-plugin-manifest": "^3.3.0",
+    "gatsby-plugin-offline": "^4.3.0",
+    "gatsby-plugin-react-helmet": "^4.3.0",
     "gatsby-plugin-robots-txt": "^1.5.1",
-    "gatsby-plugin-sharp": "^2.6.14",
-    "gatsby-plugin-sitemap": "^2.4.11",
-    "gatsby-source-filesystem": "^2.3.14",
-    "gatsby-source-graphql": "^2.11.0",
-    "gatsby-theme-material-ui": "^1.0.12",
-    "gatsby-transformer-sharp": "^2.5.7",
+    "gatsby-plugin-sharp": "^3.3.1",
+    "gatsby-plugin-sitemap": "^3.3.0",
+    "gatsby-source-filesystem": "^3.3.0",
+    "gatsby-source-graphql": "^3.3.0",
+    "gatsby-theme-material-ui": "^2.0.1",
+    "gatsby-transformer-sharp": "^3.3.0",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {

src/components/Seo.js

@@ -1,17 +1,10 @@
-/**
- * SEO component that queries for data with
- *  Gatsby's useStaticQuery React hook
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { useStaticQuery, graphql } from 'gatsby';
 import seoImg from '@images/seo.png';
 
-function SEO({ description, lang, meta, title, pathname }) {
+function Seo({ description, lang, meta, title, pathname }) {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -110,17 +103,17 @@ function SEO({ description, lang, meta, title, pathname }) {
   );
 }
 
-SEO.defaultProps = {
+Seo.defaultProps = {
   lang: `en`,
   meta: [],
   description: ``,
 };
 
-SEO.propTypes = {
+Seo.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
 };
 
-export default SEO;
+export default Seo;

src/pages/404.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Typography, Box, Container } from '@material-ui/core';
 import { Link } from 'gatsby-theme-material-ui';
-import SEO from '../components/SEO';
+import Seo from '../components/Seo';
 
 const NotFoundPage = ({ location }) => (
   <Box
@@ -13,7 +13,7 @@ const NotFoundPage = ({ location }) => (
     textAlign="center"
     paddingY={3}
   >
-    <SEO title="404" pathname={location.pathname} />
+    <Seo title="404" pathname={location.pathname} />
     <Container>
       <Typography variant="h1" gutterBottom>
         Page not found

src/pages/index.js

@@ -3,7 +3,7 @@ import { useStaticQuery, graphql } from 'gatsby';
 
 import { makeStyles } from '@material-ui/core/styles';
 import { Typography, Button, Box, Container } from '@material-ui/core';
-import SEO from '../components/SEO';
+import Seo from '../components/Seo';
 import Link from '../components/Link';
 
 const LinkButton = ({ children, href, to }) => {
@@ -64,7 +64,7 @@ const IndexPage = ({ location }) => {
       flexDirection="column"
       paddingY={3}
     >
-      <SEO title="Home" pathname={location.pathname} />
+      <Seo title="Home" pathname={location.pathname} />
       <Container component="main">
         <header>
           <Typography gutterBottom variant="h1">

src/pages/supported-versions.js

@@ -10,7 +10,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import Link from '../components/Link';
-import SEO from '../components/SEO';
+import Seo from '../components/Seo';
 
 const buildURLToVersionPage = (baseUrl, code) => {
   return `https://${code}.${baseUrl}`;
@@ -51,14 +51,14 @@ function SupportedVersionsPage({ location }) {
       flexDirection="column"
       paddingY={3}
     >
-      <SEO pathname={location.pathname} title="Supported versions" />
+      <Seo pathname={location.pathname} title="Supported versions" />
       <Container>
         <header>
           <Typography variant="h1" align="center">
             <Link to="/">TWHelp</Link>
           </Typography>
           <Typography variant="h2" align="center" gutterBottom>
-            Version selection
+            Supported versions
           </Typography>
         </header>
         <Grid container spacing={2}>