Move case studies to Contentful (#39)

* Install gatsby contentful plugin

* Configure Contentful in gatsby config

* Add contentful secrets for build publish workflow

* Remove unused gatsby plugins and update node version

* Delete articles unused components

* Update gatsby and react

* Generate URLs of case studies using Contentful

* Fetch case study list from Contentful

* Remove defaultProps

* Remove duplicate CSS in case study template

* Query case study from contentful

* Display takeaways from Ghost

* Style quick takeaways section

* Remove prop-types from navigation

* Update gatsby plugin sharp

* Rename images to remove blankspaces

* Remove unused blog hero

* Remove unused ghost icon

* Replace cta bg query with static import of cta image

* Remove StaticQuery

* Install dependencies

* Set object fit to cover

Author: pcarapic15

.github/workflows/build_publish.yml

@@ -24,3 +24,5 @@ jobs:
           SITEPATH: ""
           GHOST_API_URL: ${{ secrets.GHOST_API_URL }}
           GHOST_CONTENT_API_KEY: ${{ secrets.GHOST_CONTENT_API_KEY }}
+          CONTENTFUL_ACCESS_TOKEN: ${{ secrets.CONTENTFUL_ACCESS_TOKEN }}
+          CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }}

.nvmrc

@@ -1 +1 @@
-v20.11.1
+v20.18.1

gatsby-config.js

@@ -44,6 +44,13 @@ module.exports = {
       resolve: `gatsby-source-ghost`,
       options: ghostConfig.production,
     },
+    {
+      resolve: `gatsby-source-contentful`,
+      options: {
+        spaceId: process.env.CONTENTFUL_SPACE_ID,
+        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
+      },
+    },
     {
       resolve: `gatsby-plugin-google-gtag`,
       options: {

gatsby-node.js

@@ -1,6 +1,4 @@
 const path = require(`path`);
-const { postsPerPage } = require(`./src/utils/siteConfig`);
-const { paginate } = require(`gatsby-awesome-pagination`);
 const util = require("util");
 const glob = require("glob");
 const fs = require("fs");
@@ -38,32 +36,32 @@ exports.onPostBuild = async () => {
 
 /**
  * Here is the place where Gatsby creates the URLs for all the
- * posts, tags, pages and authors that we fetched from the Ghost site.
+ * posts, tags, pages and authors that we fetched from the Contentful.
  */
 
 exports.createPages = async ({ actions, graphql }) => {
   const { createPage } = actions;
 
   const result = await graphql(`
     {
-      allGhostPost(
-        filter: {
-          tags: { elemMatch: { slug: { eq: "hash-community-case-study" } } }
-        }
-      ) {
-        nodes {
-          slug
+      caseStudies: allContentfulCaseStudy(sort: { datePublished: DESC }) {
+        edges {
+          node {
+            url
+          }
         }
       }
     }
   `);
 
-  result.data.allGhostPost.nodes.forEach((post) => {
+  const caseStudies = result.data.caseStudies.edges;
+
+  caseStudies.forEach(({ node }) => {
     createPage({
-      path: `/community-case-studies/${post.slug}/`,
+      path: `/community-case-studies/${node.url}/`,
       component: require.resolve(`./src/templates/CaseStudy.js`),
       context: {
-        slug: post.slug,
+        url: node.url,
       },
     });
   });

package.json

@@ -14,7 +14,7 @@
     "gatsby-plugin-sharp/probe-image-size": "^7.0.0"
   },
   "engines": {
-    "node": ">= 20.11.1"
+    "node": ">= 20.18.1"
   },
   "bugs": {
     "url": "https://github.com/tryghost/gatsby-starter-ghost/issues"
@@ -48,10 +48,7 @@
     "autoprefixer": "^10.2.5",
     "cheerio": "1.0.0-rc.5",
     "dotenv": "^8.2.0",
-    "gatsby": "^3.1.2",
-    "gatsby-awesome-pagination": "0.3.6",
-    "gatsby-image": "^3.2.0",
-    "gatsby-plugin-advanced-sitemap": "1.6.0",
+    "gatsby": "^5.0.0",
     "gatsby-plugin-anchor-links": "^1.2.1",
     "gatsby-plugin-catch-links": "2.10.0",
     "gatsby-plugin-force-trailing-slashes": "1.0.5",
@@ -65,19 +62,20 @@
     "gatsby-plugin-react-svg": "^3.0.1",
     "gatsby-plugin-sass": "^5.0.0",
     "gatsby-plugin-scroll-reveal": "^0.0.7",
-    "gatsby-plugin-sharp": "2.14.3",
+    "gatsby-plugin-sharp": "^5.8.1",
     "gatsby-remark-prismjs": "^5.2.0",
+    "gatsby-source-contentful": "^8.13.2",
     "gatsby-source-filesystem": "2.11.1",
     "gatsby-source-ghost": "^5.0.3",
-    "gatsby-transformer-remark": "^4.2.0",
-    "gatsby-transformer-sharp": "2.12.1",
+    "gatsby-transformer-remark": "^6.11.0",
+    "gatsby-transformer-sharp": "^5.8.0",
     "hamburger-react": "^2.4.0",
     "lodash": "4.17.21",
     "md5": "^2.3.0",
     "postcss": "^8.2.10",
     "prismjs": "^1.23.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "^18.0.1",
+    "react-dom": "^18.0.1",
     "react-helmet": "6.1.0",
     "recharts": "^2.15.3",
     "sass": "^1.32.10",