Updated lighthouse integration

Updated all script
Moved utils in own dir
Improved perf

TODO.md

@@ -30,6 +30,9 @@
 - [x] always use latest NGINX image
 - [x] test prod build locally with SSL and brotli compression
 - [x] weird lighter background underneath the footer (backdrop-filter issue)
+- [ ] setup siteUrl as env var to pass to build process so lighthouse will get
+      the correct canonical url
+- [ ] use gatsby images everywhere (homepage for file savings)
 - [ ] setup scss linter
 - [ ] setup smacss to apply css sort order
 - [x] fix issue with node env version in prod build

gatsby-browser.js

@@ -4,7 +4,7 @@
  * @see https://www.gatsbyjs.org/docs/browser-apis/
  */
 
-const { isProd, isDev } = require('./gatsby/environment')
+const { isProd, isDev } = require('./utils/environment')
 const { getLocale, getLanguage } = require('./src/utils/locale')
 
 // const wrapPageElement = require('./gatsby/wrapPageElement')

gatsby-config.js

@@ -10,8 +10,8 @@ require('dotenv').config({
 })
 
 const { yellow, blue } = require('kleur')
-const { getVersion } = require('./gatsby/utils')
-const { activeEnv, isDev } = require('./gatsby/environment')
+const { getVersion, transformVersion } = require('./utils/version')
+const { activeEnv, isDev } = require('./utils/environment')
 const commonRemark = require('./gatsby/config/commonRemark')
 const siteMetadata = require('./metadata')
 
@@ -21,13 +21,13 @@ console.log(`Version: ${blue(getVersion())}\n`)
 module.exports = {
   siteMetadata,
   plugins: [
-    `gatsby-plugin-preact`, // file size saving 🍾
+    `gatsby-plugin-preact`,
     `gatsby-plugin-layout`,
     `gatsby-plugin-react-helmet-async`,
     {
       resolve: `gatsby-plugin-canonical-urls`,
       options: {
-        siteUrl: process.env.SITE_URL,
+        siteUrl: siteMetadata.siteUrl,
         stripQueryString: true,
       },
     },
@@ -225,11 +225,11 @@ module.exports = {
         analyzerMode: 'static',
         production: true,
         disable: isDev,
-        openAnalyzer: true,
-        reportFilename: `${__dirname}/reports/v${getVersion(
-          ['major', 'minor'],
-          false
-        )}/treemap.html`,
+        openAnalyzer: false,
+        reportFilename: `${__dirname}/reports/v${transformVersion(
+          getVersion(),
+          ['major', 'minor']
+        )}.0/treemap.html`,
       },
     },
   ],

gatsby/browser/corporateMessage.js

@@ -1,8 +1,3 @@
-const consoleImage = require('./consoleImage')
-
-/**
- * Print some cool stuff to the console.
- */
 module.exports = () => {
   const colorPrimary = '#00e2a1'
   const colorDark = '#1f242e'
@@ -54,6 +49,4 @@ https://github.com/muuvmuuv/portfolio 🔒
     styleBold,
     styleShared
   )
-
-  consoleImage(`${window.location.origin}/me.gif`, 50)
 }

gatsby/browser/defaultTime.js

@@ -2,7 +2,7 @@ const dayjs = require('dayjs')
 const UTC = require('dayjs/plugin/utc')
 const LocalizedFormat = require('dayjs/plugin/localizedFormat')
 
-const { isDev } = require('../environment.js')
+const { isDev } = require('../../utils/environment')
 const { getLocale } = require('../../src/utils/locale')
 
 // include locale for each language (manually!)

gatsby/node/createPages.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const { bgYellow } = require('kleur')
-const { removeTrailingSlash } = require('../utils')
+
+const { removeTrailingSlash } = require('../../utils/helper')
 
 module.exports = async ({ graphql, actions }) => {
   const { createPage } = actions

gatsby/node/onCreateNode.js

@@ -1,5 +1,6 @@
 const { createFilePath } = require('gatsby-source-filesystem')
-const { slugify } = require('../utils')
+
+const { slugify } = require('../../utils/helper')
 
 module.exports = async ({ node, getNode, actions }) => {
   const { createNodeField } = actions

gatsby/node/onCreateWebpackConfig.js

@@ -1,4 +1,4 @@
-const { getVersion } = require('../utils')
+const { getVersion } = require('../../utils/version')
 
 module.exports = ({ actions, plugins }) => {
   const { setWebpackConfig } = actions

metadata.js

@@ -93,7 +93,7 @@ module.exports = {
       name: 'League of Legends',
       icon: 'lol',
       user: 'muuvmuuv',
-      link: 'https://lolprofile.net/de/summoner/euw/muuvmuuv',
+      link: 'https://blitz.gg/lol/profile/euw1/muuvmuuv',
     },
   ],
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marvin-digital",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "private": true,
   "description": "Portfolio of and by Marvin Heilemann (@muuvmuuv)",
   "repository": {
@@ -14,17 +14,17 @@
     "build": "gatsby build",
     "rebuild": "run-s clean build",
     "clean": "gatsby clean",
-    "serve": "now dev",
+    "serve": "now dev --listen 59235",
     "−−−−−−−−−−−−−−−−−−−−  DEPLOY  −−−−−−−−−−−−−−−−–−−−−−−": "",
     "deploy": "now --local-config now.json",
     "deploy-prod": "run-s lint rebuild test now-deploy-prod",
     "now-deploy-prod": "now --local-config now.json --prod",
     "−−−−−−−−−−−−−−−−  AUDITS/ANALYTICS  −−−−−−−−−−−−−−−−–": "",
     "audit": "run-s rebuild lighthouse audit-open",
     "audit-open": "run-p audit:*",
-    "audit:report-mobile": "sh ./scripts/open.sh lhr.mobile.html",
-    "audit:report-desktop": "sh ./scripts/open.sh lhr.desktop.html",
-    "audit:treemap": "sh ./scripts/open.sh treemap.html",
+    "audit:report-mobile": "node ./scripts/open-report.js lhr.mobile.html",
+    "audit:report-desktop": "node ./scripts/open-report.js lhr.desktop.html",
+    "audit:treemap": "node ./scripts/open-report.js treemap.html",
     "lighthouse": "node ./scripts/lighthouse.js",
     "−−−−−−−−−−−−−−−−−−−  LINT/TEST  −−−−−−−−−−−−−−−−−−−−–": "",
     "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"",
@@ -70,7 +70,6 @@
     "gatsby-transformer-remark": "^2.6.48",
     "gatsby-transformer-sharp": "^2.3.13",
     "ionicons": "^4.6.3",
-    "kleur": "^3.0.3",
     "lodash": "^4.17.15",
     "node-sass": "^4.13.1",
     "normalize-url": "^4.5.0",
@@ -86,18 +85,21 @@
     "vanilla-click-outside": "^2.0.0"
   },
   "devDependencies": {
+    "chrome-launcher": "^0.12.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.9.0",
     "eslint-config-react-app": "^5.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-mdx": "^1.6.5",
     "eslint-plugin-prettier": "^3.1.2",
+    "kleur": "^3.0.3",
     "lighthouse": "^5.6.0",
     "npm-run-all": "^4.1.5",
+    "open": "^7.0.0",
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
     "prompts": "^2.3.0",
     "semver": "^7.1.1",
     "taskz": "^1.3.0"
   }
-}
+}