chore: Upgrade packages, fix style

README.md

@@ -2,13 +2,14 @@
 
 Website for zanechua.com
 
-# Deployment
-```bash
-yarn deploy
-```
-
 # Development
 ```bash
 yarn install
 yarn develop
 ```
+
+# Deployment
+```bash
+yarn release
+git push --follow-tags origin master
+```

gatsby-config.js

@@ -12,25 +12,20 @@ module.exports = {
   },
   plugins: [
     {
-      resolve: `gatsby-plugin-google-gtag`,
+      resolve: "gatsby-plugin-google-tagmanager",
       options: {
-        // You can add multiple tracking ids and a pageview event will be fired for all of them.
-        trackingIds: [
-          "UA-27711815-1", // Google Analytics / GA
-        ],
-        // This object gets passed directly to the gtag config command
-        // This config will be shared across all trackingIds
-        gtagConfig: {
-          anonymize_ip: true,
-          cookie_expires: 0,
-        },
-        // This object is used for configuration specific to this plugin
-        pluginConfig: {
-          // Puts tracking script in the head instead of the body
-          head: false,
-          // Setting this parameter is also optional
-          respectDNT: true,
-        },
+        id: "GTM-KCCLDWG",
+
+        // Include GTM in development.
+        //
+        // Defaults to false meaning GTM will only be loaded in production.
+        includeInDevelopment: false,
+
+        // datalayer to be set before GTM is loaded
+        // should be an object or a function that is executed in the browser
+        //
+        // Defaults to null
+        defaultDataLayer: { platform: "gatsby" },
       },
     },
     `gatsby-plugin-eslint`,
@@ -63,7 +58,7 @@ module.exports = {
       resolve: `gatsby-plugin-purgecss`,
       options: {
         printRejected: true, // Print removed selectors and processed file names
-        develop: true, // Enable while using `gatsby develop`
+        develop: false, // Enable while using `gatsby develop`
         tailwind: true, // Enable tailwindcss support
         // whitelist: ['whitelist'], // Don't remove this selector
         ignore: [

netlify.toml

@@ -1,13 +1,23 @@
 [build]
-# This is the directory to change to before starting a build.
+# Directory to change to before starting a build.
+# This is where we will look for package.json/.nvmrc/etc.
+# If not set, defaults to the root directory.
 base    = "/"
-# NOTE: This is where we will look for package.json/.nvmrc/etc, not root.
-# This is the directory that you are publishing from (relative to root of your repo)
+
+# Directory that contains the deploy-ready HTML files and assets generated by
+# the build. This is relative to the base directory if one has been set, or the
+# root directory if a base has not been set. This sample publishes the
+# directory located at the absolute path "root/project/build-output"
 publish = "public/"
+
 # This will be your default build command
 command = "yarn run build"
-# This is where we will look for your lambda functions
-functions = "functions/"
+
+[functions]
+# Directory with serverless functions, including background functions,
+# to deploy. This is relative to the base directory if one has been set,
+# or the root directory if a base hasn’t been set.
+directory = "functions/"
 
 [[plugins]]
 package = "netlify-plugin-gatsby-cache"

package.json

@@ -9,24 +9,25 @@
   "author": "Zane J. Chua <[email protected]>",
   "dependencies": {
     "axios": "^0.21.1",
-    "gatsby": "^3.5.0",
-    "gatsby-image": "^3.5.0",
+    "gatsby": "^3.8.1",
+    "gatsby-image": "^3.8.0",
     "gatsby-plugin-google-fonts": "^1.0.1",
-    "gatsby-plugin-google-gtag": "^3.6.0",
-    "gatsby-plugin-manifest": "^3.5.0",
-    "gatsby-plugin-offline": "^4.5.0",
-    "gatsby-plugin-postcss": "^4.5.0",
-    "gatsby-plugin-purgecss": "^6.0.1",
-    "gatsby-plugin-react-helmet": "^4.5.0",
-    "gatsby-plugin-sharp": "^3.5.0",
-    "gatsby-remark-images": "^5.2.0",
-    "gatsby-remark-prismjs": "^5.2.0",
-    "gatsby-source-filesystem": "^3.5.0",
-    "gatsby-transformer-remark": "^4.2.0",
-    "gatsby-transformer-sharp": "^3.5.0",
-    "gatsby-transformer-yaml": "^3.5.0",
+    "gatsby-plugin-google-tagmanager": "^3.8.0",
+    "gatsby-plugin-manifest": "^3.8.0",
+    "gatsby-plugin-offline": "^4.8.0",
+    "gatsby-plugin-postcss": "^4.8.0",
+    "gatsby-plugin-purgecss": "^6.0.2",
+    "gatsby-plugin-react-helmet": "^4.8.0",
+    "gatsby-plugin-sharp": "^3.8.0",
+    "gatsby-remark-images": "^5.5.0",
+    "gatsby-remark-prismjs": "^5.5.0",
+    "gatsby-source-filesystem": "^3.8.0",
+    "gatsby-transformer-remark": "^4.5.0",
+    "gatsby-transformer-sharp": "^3.8.0",
+    "gatsby-transformer-yaml": "^3.8.0",
     "gh-pages": "^3.1.0",
-    "prismjs": "^1.23.0",
+    "postcss": "^8.3.5",
+    "prismjs": "^1.24.1",
     "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -53,21 +54,23 @@
     "deploy": "gatsby build && gh-pages -d public"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.14.2",
-    "@babel/plugin-proposal-decorators": "^7.14.2",
+    "@babel/core": "^7.14.6",
+    "@babel/eslint-parser": "^7.14.7",
+    "@babel/plugin-proposal-decorators": "^7.14.5",
     "@tailwindcss/custom-forms": "0.2.1",
-    "autoprefixer": "10.2.5",
-    "babel-preset-gatsby": "^1.5.0",
-    "cssnano": "^5.0.2",
-    "eslint": "^7.26.0",
+    "autoprefixer": "10.2.6",
+    "babel-preset-gatsby": "^1.8.0",
+    "cssnano": "^5.0.6",
+    "eslint": "^7.30.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": "^2.23.2",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-webpack-plugin": "^2.5.4",
     "gatsby-plugin-eslint": "^3.0.0",
-    "prettier": "^2.3.0",
+    "prettier": "^2.3.2",
     "standard-version": "^9.3.0",
-    "tailwindcss": "^2.1.2"
+    "tailwindcss": "^2.2.4",
+    "webpack": "^5.42.1"
   },
   "resolutionsComments": {
     "first": "The sharp resolution is required for M1 Macs as anything below 0.28 doesn't have the sharp binaries for arm64v8"

src/components/footer.js

@@ -8,7 +8,7 @@ function Footer() {
         <p className="text-white">
           <Link
             className="font-bold no-underline"
-            key={'kopirun-main'}
+            key={'zanechua-main'}
             to={'/'}
           >
             &#169; zanechua.com {new Date().getFullYear()}

src/css/markdown.css

@@ -6,17 +6,30 @@
 }
 
 /* Headers */
-.markdown h1,
-.markdown h2 {
+.markdown h1 {
     @apply text-2xl my-6 font-bold;
 }
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6 {
+
+.markdown h2 {
     @apply text-xl my-3 font-semibold;
 }
 
+.markdown h3 {
+    @apply text-lg my-3 font-semibold;
+}
+
+.markdown h4 {
+    @apply text-base my-3 font-semibold;
+}
+
+.markdown h5 {
+    @apply text-sm mt-3 font-semibold;
+}
+
+.markdown h6 {
+    @apply text-xs mt-3 font-semibold;
+}
+
 /* Links */
 .markdown a {
     @apply text-blue-500;

src/css/prism.css

@@ -43,4 +43,6 @@
 /* Adjust the position of the line number row */
 .gatsby-highlight pre[class*="language-"].line-numbers .line-numbers-rows {
     margin-left: 0.3em;
-}
+}
+
+code[class*="language-"] { white-space: pre-wrap !important; }

src/css/style.css

@@ -56,7 +56,11 @@ p {
 @media (prefers-color-scheme: dark) {
     body { background: #000000; color: #ffffff; }
     h1, h2, h3, h4, h5, h6, a, p { color: #ffffff; }
-    ul li {
+    ul li, ol li {
         color: #ffffff;
     }
+
+    blockquote p {
+        color: #000000;
+    }
 }

src/html.js

@@ -0,0 +1,36 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default function HTML(props) {
+  return (
+    <html {...props.htmlAttributes}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        {props.headComponents}
+      </head>
+      <body {...props.bodyAttributes}>
+        {props.preBodyComponents}
+        <div
+          key={`body`}
+          id="___gatsby"
+          dangerouslySetInnerHTML={{ __html: props.body }}
+        />
+        {props.postBodyComponents}
+      </body>
+    </html>
+  )
+}
+
+HTML.propTypes = {
+  htmlAttributes: PropTypes.object,
+  headComponents: PropTypes.array,
+  bodyAttributes: PropTypes.object,
+  preBodyComponents: PropTypes.array,
+  body: PropTypes.string,
+  postBodyComponents: PropTypes.array,
+}