#155 | First draft code changes

.nvmrc

@@ -1 +1 @@
-14
+18

Makefile

@@ -1,4 +1,7 @@
 
+clean:
+	npm run clean
+
 start:
 	npm run develop
 

gatsby-config.js

@@ -9,6 +9,7 @@ module.exports = {
         twitterHandle: '@avniproject',
         author: 'Avni'
     },
+    trailingSlash: `never`,
     plugins: [
         {
             resolve: `gatsby-plugin-google-analytics`,
@@ -95,7 +96,7 @@ module.exports = {
             },
         },
         {
-            resolve: 'gatsby-plugin-netlify-cms',
+            resolve: 'gatsby-plugin-decap-cms',
             options: {
                 modulePath: `${__dirname}/src/cms/cms.js`,
             },

package.json

@@ -1,46 +1,47 @@
 {
-  "name": "gatsby-starter-netlify-cms",
+  "name": "gatsby-starter-decap-cms",
   "description": "Example Gatsby, and Netlify CMS project",
   "version": "1.1.3",
   "author": "Austin Green",
   "dependencies": {
-    "bulma": "^0.9.1",
-    "gatsby": "^2.24.78",
-    "gatsby-image": "^2.4.21",
-    "gatsby-plugin-google-analytics": "^2.3.18",
-    "gatsby-plugin-netlify": "^2.3.19",
-    "gatsby-plugin-netlify-cms": "^4.3.16",
-    "gatsby-plugin-purgecss": "^5.0.0",
-    "gatsby-plugin-react-helmet": "^3.3.14",
-    "gatsby-plugin-sass": "^2.3.16",
-    "gatsby-plugin-sharp": "^2.6.42",
-    "gatsby-plugin-sitemap": "^2.4.17",
-    "gatsby-plugin-typography": "^2.5.13",
-    "gatsby-remark-copy-linked-files": "^2.3.19",
-    "gatsby-remark-embed-video": "^3.0.10",
-    "gatsby-remark-images": "^3.3.34",
-    "gatsby-remark-relative-images": "^2.0.2",
-    "gatsby-remark-responsive-iframe": "^2.4.17",
-    "gatsby-source-filesystem": "^2.3.34",
-    "gatsby-transformer-remark": "^2.8.40",
-    "gatsby-transformer-sharp": "^2.5.17",
-    "lodash": "^4.17.20",
-    "lodash-webpack-plugin": "^0.11.5",
-    "netlify-cms-app": "^2.12.27",
-    "netlify-cms-media-library-cloudinary": "^1.3.8",
-    "netlify-cms-media-library-uploadcare": "^0.5.9",
-    "node-sass": "^4.14.1",
-    "parcel-bundler": "^1.12.4",
-    "prop-types": "^15.7.2",
-    "react": "^16.14.0",
-    "react-calendly": "^1.1.3",
-    "react-dom": "^16.14.0",
-    "react-helmet": "^6.1.0",
-    "react-share": "^4.3.1",
-    "react-typography": "^0.16.19",
-    "sharp": "^0.26.2",
-    "typography": "^0.16.19",
-    "uuid": "^8.3.1"
+    "bulma": "^1.0.2",
+    "decap-cms-app": "^3.0.12",
+    "decap-cms-media-library-cloudinary": "^3.0.1",
+    "decap-cms-media-library-uploadcare": "^3.0.0",
+    "gatsby": "^5.14.0",
+    "gatsby-plugin-decap-cms": "^4.0.3",
+    "gatsby-plugin-google-analytics": "^5.14.0",
+    "gatsby-plugin-image": "^3.14.0",
+    "gatsby-plugin-netlify": "^5.0.0",
+    "gatsby-plugin-purgecss": "^6.0.0",
+    "gatsby-plugin-react-helmet": "^6.14.0",
+    "gatsby-plugin-sass": "^6.14.0",
+    "gatsby-plugin-sharp": "^5.14.0",
+    "gatsby-plugin-sitemap": "^6.14.0",
+    "gatsby-plugin-typography": "^5.14.0",
+    "gatsby-remark-copy-linked-files": "^6.14.0",
+    "gatsby-remark-embed-video": "^3.2.1",
+    "gatsby-remark-images": "^7.14.0",
+    "gatsby-remark-relative-images": "^2.0.5",
+    "gatsby-remark-responsive-iframe": "^6.14.0",
+    "gatsby-source-filesystem": "^5.14.0",
+    "gatsby-transformer-remark": "^6.14.0",
+    "gatsby-transformer-sharp": "^5.14.0",
+    "lodash": "^4.17.15",
+    "lodash-webpack-plugin": "^0.11.4",
+    "node-sass": "^9.0.0",
+    "parcel-bundler": "^1.12.5",
+    "prop-types": "^15.6.0",
+    "react": "^18.0.0",
+    "react-calendly": "^4.3.1",
+    "react-dom": "^18.0.0",
+    "react-helmet": "^6.0.0",
+    "react-share": "^5.1.1",
+    "react-typography": "^0.16.23",
+    "sass": "^1.43.2",
+    "sharp": "^0.33.5",
+    "typography": "^0.16.24",
+    "uuid": "^11.0.3"
   },
   "keywords": [
     "gatsby"
@@ -61,10 +62,12 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "gatsby-plugin-remove-trailing-slashes": "^2.3.13",
-    "http-proxy-middleware": "^1.0.6",
-    "netlify-lambda": "^2.0.1",
+    "http-proxy-middleware": "^3.0.3",
+    "netlify-lambda": "^2.0.16",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.1.2"
+    "prettier": "^3.3.3"
+  },
+  "engines": {
+    "node": ">= 14.15.0"
   }
 }

src/cms/cms.js

@@ -1,6 +1,6 @@
-import CMS from 'netlify-cms-app'
-import uploadcare from 'netlify-cms-media-library-uploadcare'
-import cloudinary from 'netlify-cms-media-library-cloudinary'
+import CMS from 'decap-cms-app'
+import uploadcare from 'decap-cms-media-library-uploadcare'
+import cloudinary from 'decap-cms-media-library-cloudinary'
 
 import AboutPagePreview from './preview-templates/AboutPagePreview'
 import BlogPostPreview from './preview-templates/BlogPostPreview'

src/components/PreviewCompatibleImage.js

@@ -1,23 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Img from 'gatsby-image'
+import {StaticImage} from 'gatsby-plugin-image';
 
 const PreviewCompatibleImage = ({ imageInfo }) => {
   const imageStyle = { borderRadius: '5px' }
   const { alt = '', childImageSharp, image } = imageInfo
 
   if (!!image && !!image.childImageSharp) {
     return (
-      <Img style={imageStyle} fluid={image.childImageSharp.fluid} alt={alt} />
+      <StaticImage style={imageStyle} src={image.childImageSharp.fluid} alt={alt} />
     )
   }
 
   if (!!childImageSharp) {
-    return <Img style={imageStyle} fluid={childImageSharp.fluid} alt={alt} />
+    return <StaticImage style={imageStyle} src={childImageSharp.fluid} alt={alt} />
   }
 
   if (!!image && typeof image === 'string')
-    return <img style={imageStyle} src={image} alt={alt} />
+    return <StaticImage style={imageStyle} src={image} alt={alt} />
 
   return null
 };

src/components/all.sass

@@ -1,4 +1,5 @@
-@import "~bulma/sass/utilities/initial-variables"
+@use "~bulma" as b
+@use "~bulma/sass/utilities/initial-variables" as iv
 
 // Config vars
 // Kaldi logo brand color: #FD461E
@@ -9,7 +10,7 @@ $primary: $kaldi-red
 $primary-invert: $kaldi-red-invert
 $body-color: #333
 $black: #2b2523
-$primary: $orange
+$primary: iv.$orange
 
 .navbar .navbar-menu
   box-shadow: none !important
@@ -19,10 +20,7 @@ $primary: $orange
 
 .content .taglist
   list-style: none
-  margin-bottom: 0
-  margin-left: 0
-  margin-right: 1.5rem
-  margin-top: 1.5rem
+  margin: 1.5rem 1.5rem 0 0
   display: flex
   flex-wrap: wrap
   justify-content: left
@@ -80,8 +78,8 @@ $primary: $orange
   text-decoration: none
   font-weight: 700
   text-align: center
-  background-color: $orange
-  color: $white
+  background-color: iv.$orange
+  color: iv.$white
   border: 0
 
 .margin-top-0
@@ -104,13 +102,13 @@ footer.footer
   background-color: transparent
 
 //Menu overrides
-$menu-item-color: $white-ter
+$menu-item-color: iv.$white-ter
 $menu-item-hover-color: $black !important
 $menu-item-hover-background-color: $black
 $menu-item-active-color: $kaldi-red-invert
 $menu-item-active-background-color: $kaldi-red-invert
 $menu-list-border-left: 1px solid $kaldi-red-invert
-$menu-label-color: $white-ter
+$menu-label-color: iv.$white-ter
 
 .menu-label
   font-size: 1em !important
@@ -130,7 +128,7 @@ $menu-label-color: $white-ter
 .social a
   padding: .5em .5em .3em .5em
   border-radius: 1em
-  background-color: $white-ter
+  background-color: iv.$white-ter
   margin: .5em
   width: 1em
   height: 1em
@@ -149,14 +147,12 @@ $menu-label-color: $white-ter
   flex-basis: 35%
   margin: 0 1.5em 0 0
 
-@import "~bulma"
-
 // responsiveness
-+tablet-only
+b+tablet-only
   .blog-list-item .featured-thumbnail
     flex-basis: 50%
 
-+mobile
+b+mobile
   .blog-list-item header
     display: block
   .blog-list-item .featured-thumbnail