rename nginx.conf -> default.conf, update Dockerfile (use nginx config templates instead of overriding the nginx.conf, bump nginx/node version), rename SEO -> Seo,

.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: ~/dwysokinski
     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: |
@@ -25,4 +26,4 @@ workflows:
           filters:
             branches:
               only:
-                - master
+                - master

Dockerfile

@@ -1,10 +1,22 @@
-FROM node:14.1.0-alpine as build-deps
+FROM node:14.16.1-alpine as build-deps
 
 ENV NODE_ENV=production
 
-#Stage 1
-
-RUN npm install --global gatsby-cli
+RUN apk --no-cache add shadow \
+    gcc \
+    musl-dev \
+    autoconf \
+    automake \
+    make \
+    libtool \
+    nasm \
+    tiff \
+    jpeg \
+    zlib \
+    zlib-dev \
+    file \
+    pkgconf
+RUN npm install --global gatsby-cli@3.3.0
 WORKDIR /usr/src/app
 COPY package.json yarn.lock ./
 RUN yarn
@@ -13,8 +25,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
+COPY default.conf /etc/nginx/templates/default.conf.template
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

default.conf

@@ -0,0 +1,30 @@
+server {
+    # listen on port 80
+    listen 80;
+    # save logs here
+    access_log /var/log/nginx/access.log combined;
+
+    # where the root here
+    root /var/www;
+    # what file to server as index
+    index index.html index.htm;
+    error_page 404 /404/index.html;
+
+    # 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;
+      add_header Cache-Control "public";
+    }
+
+    # Javascript and CSS files
+    location ~* \.(?:css|webmanifest|js|woff2|manifest)$ {
+        expires 1y;
+        add_header Cache-Control "public";
+    }
+
+    location / {
+        # First attempt to serve request as file, then
+        # as directory, then fall back to redirecting to index.html
+        try_files $uri $uri/ =404;
+    }
+}

gatsby-config.js

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

nginx.conf

@@ -1,62 +0,0 @@
-# auto detects a good number of processes to run
-worker_processes auto;
-
-#Provides the configuration file context in which the directives that affect connection processing are specified.
-events {
-    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
-    worker_connections 8000;
-    # Tells the worker to accept multiple connections at a time
-    multi_accept on;
-}
-
-
-http {
-    # what times to include
-    include       /etc/nginx/mime.types;
-    # 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;
-
-        # where the root here
-        root /var/www;
-        # what file to server as index
-        index index.html index.htm;
-        error_page 404 /404/index.html;
-
-        # 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)$ {
-            try_files $uri =404;
-            expires 1y;
-            access_log off;
-            add_header Cache-Control "public";
-        }
-
-        location / {
-            # First attempt to serve request as file, then
-            # as directory, then fall back to redirecting to index.html
-            try_files $uri $uri/ =404;
-        }
-
-        # Any route containing a file extension (e.g. /devicesfile.js)
-        location ~ ^.+\..+$ {
-            try_files $uri =404;
-        }
-    }
-}

package.json

@@ -12,21 +12,21 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "classnames": "^2.2.6",
-    "gatsby": "^2.23.12",
+    "gatsby": "^3.3.1",
     "gatsby-background-image": "^1.1.1",
-    "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-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-theme-material-ui": "^1.0.10",
-    "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-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.1",
+    "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {

src/components/Seo.js

@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet';
 import { useStaticQuery, graphql } from 'gatsby';
 import ogThumbnail from '@images/og_thumbnail.png';
 
-function SEO({ description, lang, meta, title, pathname }) {
+function Seo({ description, lang, meta, title, pathname }) {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -68,7 +68,7 @@ function SEO({ description, lang, meta, title, pathname }) {
         },
         {
           property: `og:locale`,
-          content: `pl`,
+          content: `en`,
         },
         {
           name: `twitter:creator`,
@@ -108,17 +108,17 @@ function SEO({ description, lang, meta, title, pathname }) {
   );
 }
 
-SEO.defaultProps = {
+Seo.defaultProps = {
   lang: `pl`,
   meta: [],
   description: ``,
 };
 
-SEO.propTypes = {
+Seo.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string,
 };
 
-export default SEO;
+export default Seo;

src/features/HomePage/HomePage.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { Divider } from '@material-ui/core';
 import Layout from '@components/Layout/Layout';
-import SEO from '@components/SEO';
+import Seo from '@components/Seo';
 import Header from './components/Header';
 import MyPriorities from './components/MyPriorities/MyPriorities';
 import Technologies from './components/Technologies/Technologies';
@@ -20,7 +20,7 @@ const HomePage = ({ location }) => {
   const classes = useStyles();
   return (
     <Layout className={classes.layout} navbarProps={{ position: 'absolute' }}>
-      <SEO pathname={location.pathname} />
+      <Seo pathname={location.pathname} />
       <Header />
       <MyPriorities />
       <Divider />

src/libs/useSmoothScroll.js

@@ -1,6 +1,6 @@
 import isSmoothScrollSupported from '@utils/isSmoothScrollSupported';
 
-export default () => {
+const useSmoothScroll = () => {
   return id => e => {
     if (isSmoothScrollSupported()) {
       e.preventDefault();
@@ -12,3 +12,5 @@ export default () => {
     }
   };
 };
+
+export default useSmoothScroll;

src/pages/404.js

@@ -4,7 +4,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Container, Typography } from '@material-ui/core';
 import { Link } from 'gatsby-theme-material-ui';
 import Layout from '@components/Layout/Layout';
-import SEO from '@components/SEO';
+import Seo from '@components/Seo';
 
 const useStyles = makeStyles(() => ({
   container: {
@@ -24,7 +24,7 @@ const NotFoundPage = ({ location }) => {
 
   return (
     <Layout className={classes.layout} showNavbar={false} showFooter={false}>
-      <SEO
+      <Seo
         title="Page not found"
         description="Page not found"
         pathname={location.pathname}

src/utils/isSmoothScrollSupported.js

@@ -1 +1,4 @@
-export default () => 'scrollBehavior' in document.documentElement.style;
+const isSmoothScrollSupported = () =>
+  'scrollBehavior' in document.documentElement.style;
+
+export default isSmoothScrollSupported;