Update all libs

.nvmrc

@@ -1 +1 @@
-14.18.0
+18.15.0

gatsby-browser.js

@@ -1,26 +0,0 @@
-export const onPreRenderHTML = ({
-    getHeadComponents,
-    replaceHeadComponents,
-}) => {
-    const headComponents = getHeadComponents();
-    headComponents.forEach(head => {
-        if (head.props && head.props['data-react-helmet']) {
-            delete head.props['data-react-helmet'];
-        }
-    });
-    headComponents.sort((a, b) => {
-        if (a.type === b.type || (a.type !== 'style' && b.type !== 'style')) {
-            return 0;
-        }
-
-        if (a.type === 'style') {
-            return 1;
-        } else if (b.type === 'style') {
-            return -1;
-        }
-
-        return 0;
-    });
-
-    replaceHeadComponents(headComponents);
-};

gatsby-config.js

@@ -34,6 +34,7 @@ module.exports = {
         name: 'images',
       },
     },
+    'gatsby-plugin-image',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
     {
@@ -121,9 +122,29 @@ module.exports = {
       },
     },
     {
-      resolve: 'gatsby-plugin-netlify-cms',
+      resolve: "gatsby-plugin-decap-cms",
       options: {
         modulePath: `${__dirname}/src/cms/cms.js`,
+        enableIdentityWidget: true,
+        htmlTitle: `Kata Containers | Content Manager`,
+        includeRobots: false,
+        customizeWebpackConfig: (config) => {
+          /**
+           * Fixes Module not found: Error: Can"t resolve "path" bug.
+           * Webpack 5 doesn"t include browser polyfills for node APIs by default anymore,
+           * so we need to provide them ourselves.
+           * @see https://github.com/postcss/postcss/issues/1509#issuecomment-772097567
+           * @see https://github.com/gatsbyjs/gatsby/issues/31475
+           * @see https://github.com/gatsbyjs/gatsby/issues/31179#issuecomment-844588682
+           */
+          config.resolve = {
+            ...config.resolve,
+            fallback: {
+              ...config.resolve.fallback,
+              path: require.resolve("path-browserify"),
+            },
+          };
+        },
       },
     },
     {
@@ -135,11 +156,6 @@ module.exports = {
     }, // must be after other CSS plugins
     {
       resolve: 'gatsby-plugin-netlify', // make sure to keep it last in the array,
-      options: {
-        enableIdentityWidget: true,
-        htmlTitle: `Kata Containers | Content Manager`,
-        includeRobots: false, 
-      }
     }    
   ],
 }

gatsby-node.js

@@ -3,7 +3,6 @@ const axios = require('axios')
 const path = require('path')
 const fs = require('fs')
 const { createFilePath } = require('gatsby-source-filesystem')
-const { fmImagesToRelative } = require('gatsby-remark-relative-images')
 
 // explicit Frontmatter declaration to make category, author and date, optionals.
 // those properties only present in blog frontmatter
@@ -160,7 +159,6 @@ exports.createPages = ({ actions, graphql }) => {
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
-  fmImagesToRelative(node) // convert image paths for gatsby images
 
   if (node.internal.type === `MarkdownRemark`) {
     const value = createFilePath({ node, getNode })
@@ -203,4 +201,4 @@ exports.sourceNodes = async ({
     const node = Object.assign({}, post, nodeMeta)
     createNode(node)
   }
-}
+}

package.json

@@ -4,42 +4,44 @@
   "version": "1.0.0",
   "author": "OpenStack Foundation",
   "dependencies": {
-    "@ncwidgets/file-relation": "^0.5.0",
-    "@ncwidgets/id": "^0.5.1",
+    "@babel/core": "^7.23.2",
+    "@ncwidgets/file-relation": "^0.9.0",
+    "@ncwidgets/id": "^0.9.0",
     "axios": "^0.21.2",
     "bulma": "^0.8.0",
-    "gatsby": "^2.20.2",
-    "gatsby-cli": "^2.11.0",
-    "gatsby-image": "^2.3.0",
-    "gatsby-plugin-google-analytics": "^2.2.0",
-    "gatsby-plugin-google-gtag": "^1.2.1",
-    "gatsby-plugin-manifest": "^2.3.1",
-    "gatsby-plugin-netlify": "^2.2.0",
-    "gatsby-plugin-netlify-cms": "^4.2.0",
-    "gatsby-plugin-offline": "^3.1.0",
-    "gatsby-plugin-purgecss": "^4.0.0",
-    "gatsby-plugin-react-helmet": "^3.2.0",
-    "gatsby-plugin-sass": "^2.2.0",
-    "gatsby-plugin-sharp": "^2.5.1",
-    "gatsby-remark-copy-linked-files": "^2.2.0",
-    "gatsby-remark-images": "^3.2.0",
-    "gatsby-remark-images-medium-zoom": "^1.4.0",
-    "gatsby-remark-relative-images": "^0.2.1",
-    "gatsby-source-filesystem": "^2.2.1",
-    "gatsby-source-medium": "^2.2.0",
-    "gatsby-transformer-remark": "^2.7.0",
-    "gatsby-transformer-sharp": "^2.4.1",
+    "events": "^3.3.0",
+    "gatsby": "^5.8.1",
+    "gatsby-cli": "^5.8.0",
+    "gatsby-plugin-google-analytics": "^5.12.0",
+    "gatsby-plugin-google-gtag": "^5.12.3",
+    "gatsby-plugin-image": "^3.12.3",
+    "gatsby-plugin-manifest": "^5.12.3",
+    "gatsby-plugin-netlify": "^5.1.1",
+    "decap-cms-app": "^3.0.12",
+    "gatsby-plugin-decap-cms": "^4.0.3",
+    "gatsby-plugin-offline": "^6.12.3",
+    "gatsby-plugin-purgecss": "^6.2.1",
+    "gatsby-plugin-react-helmet": "^6.12.0",
+    "gatsby-plugin-sass": "^6.12.3",
+    "gatsby-plugin-sharp": "^5.12.3",
+    "gatsby-remark-copy-linked-files": "^6.12.0",
+    "gatsby-remark-images": "^7.12.3",
+    "gatsby-remark-relative-images": "^2.0.5",
+    "gatsby-source-filesystem": "^5.12.1",
+    "gatsby-source-medium": "^5.12.0",
+    "gatsby-transformer-remark": "^6.12.3",
+    "gatsby-transformer-sharp": "^5.12.3",
     "lodash": "^4.17.21",
     "lodash-webpack-plugin": "^0.11.4",
     "moment": "^2.29.2",
     "navigation-widget": "^1.0.16",
-    "netlify-cms-app": "2.9.7",
+    "path-browserify": "^1.0.1",
     "prop-types": "^15.6.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^5.2.0",
-    "react-medium-image-zoom": "^4.3.0",
-    "uuid": "^3.2.1"
+    "react-medium-image-zoom": "^5.1.8",
+    "uuid": "^9.0.1"
   },
   "keywords": [
     "gatsby"
@@ -49,13 +51,14 @@
   "scripts": {
     "clean": "gatsby clean",
     "start": "yarn clean develop",
+    "gatsby-clean": "gatsby clean",
     "build": "yarn clean && gatsby build",
-    "develop": "yarn clean && gatsby develop",
+    "develop": "NODE_ENV=development NODE_OPTIONS=--max-old-space-size=8192 npm run gatsby-clean && node --trace-warnings node_modules/.bin/gatsby develop --S -H 0.0.0.0",
     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "prettier": "^1.15.3",
+    "prettier": "^2.0.5",
     "sass": "^1.49.9"
   }
 }

src/cms/cms.js

@@ -1,4 +1,4 @@
-import CMS from 'netlify-cms-app'
+import CMS from 'decap-cms-app'
 
 import CommunityPagePreview from './preview-templates/CommunityPagePreview'
 import DocsPagePreview from './preview-templates/DocsPagePreview'

src/components/BlogPosts.js

@@ -72,7 +72,7 @@ export default class BlogPosts extends React.Component {
 const query = graphql`
   query {
     allMediumPost(
-      sort: { fields: [pubDate], order: DESC }
+      sort: { pubDate: DESC }
       filter: { id: { ne: "dummy" } }
     ) {
       edges {

src/components/BlogRoll.js

@@ -70,7 +70,7 @@ export default ({customFilter}) => (
     query={graphql`
       query BlogRollQuery {
         allMarkdownRemark(
-          sort: { order: DESC, fields: [frontmatter___date] }
+          sort: {frontmatter: {date: DESC}}
           filter: { frontmatter: { templateKey: { eq: "blog-post" } } }
         ) {
           edges {

src/components/ZoomImage/index.css

@@ -0,0 +1,2 @@
+@import "react-medium-image-zoom/dist/styles.css";
+/* Not sure why, but importing this directly in the component does not work */

src/components/ZoomImage/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Zoom from 'react-medium-image-zoom'
+import './index.css'
+
+const ZoomImage = (props) => {
+  return (
+    <Zoom>
+      <img {...props} />
+    </Zoom>
+  )
+}
+
+export default ZoomImage;

src/pages/learn/index.md

@@ -13,9 +13,9 @@ title: Learn
 subTitle: An overview of the Kata Containers project
 intro:
   buttons:
-    - link: /collateral/kata-containers-1pager.pdf
+    - link: ../collateral/kata-containers-1pager.pdf
       text: project overview
-    - link: /collateral/kata-containers-onboarding-deck.pptx
+    - link: ../collateral/kata-containers-onboarding-deck.pptx
       text: Onboarding Deck
     - link: 'https://github.com/kata-containers/kata-containers/releases'
       text: latest software release

src/templates/index-page.js

@@ -7,9 +7,7 @@ import Subscribe from '../components/Subscribe'
 import Header from '../components/Header'
 import { Link } from 'gatsby'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
-
-import Zoom from 'react-medium-image-zoom'
-import 'react-medium-image-zoom/dist/styles.css'
+import ZoomImage from "../components/ZoomImage";
 
 import leftArrow from '../img/svg/arrow-left.svg'
 import metadata from '../content/site-metadata.json'
@@ -47,15 +45,10 @@ export const IndexPageTemplate = ({
     <section className="section-article">
       <div className="container">
         <article className="article level">
-          <figure className="article-image level-item level-right">
-            <div>
-              <a href="#">
-                <Zoom>
-                  <img src={!!mainpitch.image.childImageSharp ? mainpitch.image.childImageSharp.fluid.src : mainpitch.image} alt="/[email protected]" />
-                </Zoom>
-              </a>
-            </div>
-          </figure>
+          <ZoomImage
+            src={mainpitch.image?.childImageSharp?.fluid?.src || mainpitch.image}
+            alt="/[email protected]"
+          />
           <div className="article-content">
             <div className="article__entry">
               <h2 id="about-kata-containers">
@@ -82,7 +75,7 @@ export const IndexPageTemplate = ({
     <div className="features-section">
       <div className="container">
         <h2 className="features">{features.title}</h2>
-        <table className="table" style={{ width: '100%' }, { backgroundColor: 'white' }}>
+        <table className="table" style={{width: '100%', backgroundColor: 'white' }}>
           <tbody>
             {features.rows.map((feature, index) => {
               // Plugin doesn't support svg images

src/templates/learn-page.js

@@ -4,9 +4,7 @@ import { graphql } from 'gatsby'
 import { Helmet } from "react-helmet"
 import Layout from '../components/Layout'
 import Content, { HTMLContent } from '../components/Content'
-
-import Zoom from 'react-medium-image-zoom'
-import 'react-medium-image-zoom/dist/styles.css'
+import ZoomImage from "../components/ZoomImage";
 
 import metadata from '../content/site-metadata.json'
 
@@ -73,13 +71,7 @@ export const LearnPageTemplate = ({ seo, title, subTitle, intro, content, conten
                     return (
                       img.image ?
                         <div className="column" key={index}>
-                          <div>
-                            <a href="#">
-                              <Zoom>
-                                <img src={!!img.image.childImageSharp ? img.image.childImageSharp.fluid.src : img.image} alt={img.alt} />
-                              </Zoom>
-                            </a>
-                          </div>
+                          <ZoomImage src={img.image?.childImageSharp?.fluid?.src || img.image} alt={img.alt} />
                         </div>
                         :
                         null

src/templates/software-page.js

@@ -4,9 +4,7 @@ import { graphql } from 'gatsby'
 import { Helmet } from 'react-helmet'
 import Layout from '../components/Layout'
 import Content, { HTMLContent } from '../components/Content'
-
-import Zoom from 'react-medium-image-zoom'
-import 'react-medium-image-zoom/dist/styles.css'
+import ZoomImage from "../components/ZoomImage";
 
 import leftArrow from '../img/svg/arrow-left.svg'
 import metadata from '../content/site-metadata.json'
@@ -73,14 +71,10 @@ export const SoftwarePageTemplate = ({ seo, title, subTitle, intro, architecture
               <h2 id="architecture">
                 <a href="#architecture" aria-hidden="true" className="header-anchor">#</a> {architecture.title}
               </h2>
-              <div>
-                <a href="#">
-                  <Zoom>
-                    <img src={!!architecture.image.childImageSharp ? architecture.image.childImageSharp.fluid.src : architecture.image}
-                      alt={!!architecture.image.childImageSharp ? architecture.image.childImageSharp.fluid.src : architecture.image} />
-                  </Zoom>
-                </a>
-              </div>
+              <ZoomImage
+                src={architecture.image?.childImageSharp?.fluid?.src || architecture.image}
+                alt={architecture.image?.childImageSharp?.fluid?.src || architecture.image}
+              />
               <br />
               <div className="columns">
                 {architecture.columns.map((col, index) => {
@@ -114,15 +108,11 @@ export const SoftwarePageTemplate = ({ seo, title, subTitle, intro, architecture
               <br />
               <h2 id="kata-containers-integration-with-kubernetes">
                 <a href="#kata-containers-integration-with-kubernetes" aria-hidden="true" className="header-anchor">#</a> {integration.title}:
-                </h2>
-              <div>
-                <a href="#">
-                  <Zoom>
-                    <img src={!!integration.image.childImageSharp ? integration.image.childImageSharp.fluid.src : integration.image}
-                      alt={!!integration.image.childImageSharp ? integration.image.childImageSharp.fluid.src : integration.image} />
-                  </Zoom>
-                </a>
-              </div>
+              </h2>
+              <ZoomImage
+                src={integration.image?.childImageSharp?.fluid?.src || integration.image}
+                alt={integration.image?.childImageSharp?.fluid?.src || integration.image}
+              />
               <p></p>
               <hr />
               <p></p>

src/templates/tags.js

@@ -28,7 +28,7 @@ export const tagPageQuery = graphql`
     }
     allMarkdownRemark(
       limit: 1000
-      sort: { fields: [frontmatter___date], order: DESC }
+      sort: {frontmatter: {date: DESC}}
       filter: { frontmatter: { category: {elemMatch: {label: {eq: $category } } }, author: { eq: $author } } }
     ) {
       totalCount

static/admin/config.yml

@@ -203,7 +203,7 @@ collections:
             ]}       
           - {label: "Title", name: title, widget: string}
           - {label: "Sub Title", name: subTitle, widget: string}          
-          - {label: "Intro", name: intro, widget: object, fields:[
+          - {label: "Intro", name: intro, widget: object, fields: [
               {label: Text, name: text, widget: text},
               {label: "Buttons", name: buttons, widget: list, fields: [
                 {label: Text, name: text, widget: string},