feat: new case study template

gatsby-config.ts

@@ -27,7 +27,23 @@ const strapiConfig = {
         "job-posting",
         "product-comparison-page",
         "employee",
-        "case-study",
+        {
+            singularName: "case-study",
+            queryParams: {
+                populate: {
+                    Logo: {
+                        populate: '*',
+                    },
+                    About: {
+                        populate: {
+                            Topics: {
+                                populate: '*'
+                            }
+                        }
+                    }
+                }
+            }
+        },
     ],
     singleTypes: [],
     // remoteFileHeaders: {
@@ -58,6 +74,18 @@ const rehypeSelectors = {
             enableToc: false,
         },
     },
+    [`STRAPI_CASE_STUDY_SIDECONTENT_TEXTNODE`]: {
+        extractor: node => node.SideContent,
+        pluginOpts: {
+            enableToc: false,
+        },
+    },
+    [`STRAPI__COMPONENT_CASE_STUDY_CASE_STUDY_ABOUT_DESCRIPTION_TEXTNODE`]: {
+        extractor: node => node.Description,
+        pluginOpts: {
+            enableToc: false,
+        },
+    },
 }
 
 /**

gatsby-node.ts

@@ -17,7 +17,7 @@ const { createFilePath } = require(`gatsby-source-filesystem`)
 const blogPost = path.resolve(`./src/templates/blog-post.tsx`)
 const blog = path.resolve(`./src/templates/blog.tsx`)
 const comparisonTemplate = path.resolve(`./src/templates/product-comparison.tsx`)
-const caseStudyTemplate = path.resolve(`./src/templates/CaseStudy/index.tsx`)
+const caseStudyTemplate = path.resolve(`./src/layouts/CaseStudy/index.tsx`)
 
 const connector = path.resolve(`./src/templates/connector.tsx`)
 const connection = path.resolve(`./src/templates/connection.tsx`)

src/layouts/CaseStudy/Sections/About.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+
+import { ProcessedPost } from '../../../components/BlogPostProcessor'
+import { GatsbyImage } from "gatsby-plugin-image"
+
+const Topic = ({ Title, Description, Icon }) => {
+    return (
+        <div className="topic">
+            <div className="icon">
+                <GatsbyImage
+                    alt={Title}
+                    image={Icon.localFile.childImageSharp.gatsbyImageData}
+                    loading="lazy"
+                />
+            </div>
+            <div className="content">
+                <p className="title">{Title}</p>
+                <p className="description">{Description}</p>
+            </div>
+        </div>
+    )
+}
+
+const CaseStudyAbout = ({ Title, Description, Topics }) => {
+    return (
+        <div className="about">
+            <p className="title">{Title}</p>
+            <div className="topics">
+                {Topics.map((topic, index) => <Topic key={index} {...topic} />)}
+            </div>
+            <div className="description">
+                <ProcessedPost body={Description.data.childHtmlRehype.html} />
+            </div>
+        </div>
+    )
+}
+
+export default CaseStudyAbout

src/layouts/CaseStudy/Sections/Body.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+
+import { ProcessedPost } from '../../../components/BlogPostProcessor'
+
+const CaseStudyBody = ({ content }) => {
+    return (
+        <div className="body">
+            <ProcessedPost body={content.data.childHtmlRehype.html} />
+        </div>
+    )
+}
+
+export default CaseStudyBody

src/layouts/CaseStudy/Sections/Content.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+
+import { ProcessedPost } from '../../../components/BlogPostProcessor'
+
+const CaseStudyContent = ({ content }) => {
+    return (
+        <div className="side-content">
+            <ProcessedPost body={content.data.childHtmlRehype.html} />
+        </div>
+    )
+}
+
+export default CaseStudyContent

src/layouts/CaseStudy/Sections/Hero.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { GatsbyImage } from "gatsby-plugin-image"
+
+const CaseStudyHero = ({ title, description, image }) => {
+    return (
+        <header className="above-the-fold">
+            <div className="content">
+                <h2>{title}</h2>
+                <h1>{description}</h1>
+            </div>
+            <div className="logo">
+                <GatsbyImage
+                    alt={title}
+                    image={image}
+                    loading="eager"
+                />
+            </div>
+        </header>
+    )
+}
+
+export default CaseStudyHero

src/layouts/CaseStudy/Wrapper/index.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+
+import Layout from "../../../components/layout"
+
+const CaseStudyWrapper = ({ children }) => {
+    return (
+        <Layout headerTheme="light">
+            <article
+                className="case-study"
+                itemScope
+                itemType="http://schema.org/Article"
+            >
+                {children}
+            </article>
+        </Layout>
+    )
+}
+
+export default CaseStudyWrapper

src/layouts/CaseStudy/index.tsx

@@ -0,0 +1,111 @@
+import './style.less'
+
+import React from "react"
+import { graphql } from "gatsby"
+
+import dayjs from "dayjs"
+import reltime from "dayjs/plugin/relativeTime"
+
+import Header from './Head'
+import Wrapper from './Wrapper'
+
+import SectionHero from './Sections/Hero'
+import SectionContent from './Sections/Content'
+import SectionAbout from './Sections/About'
+import SectionBody from './Sections/Body'
+
+dayjs.extend(reltime)
+
+const CaseStudyTemplate = ({ data: { caseStudy, relatedStudies } }) => {
+    const { Title, Description, Logo, SideContent, About, Body } = caseStudy
+
+    return (
+        <Wrapper>
+            <SectionHero title={Title} description={Description} image={Logo.localFile.childImageSharp.gatsbyImageData} />
+            <div className="two-columns">
+                <SectionContent content={SideContent} />
+                <SectionAbout {...About} />
+            </div>
+            <SectionBody content={Body} />
+        </Wrapper>
+    )
+}
+
+export default CaseStudyTemplate
+
+export const Head = Header
+
+export const pageQuery = graphql`
+    query CaseStudyQueryById($id: String!) {
+        site {
+            siteMetadata {
+                siteUrl
+            }
+        }
+        caseStudy: strapiCaseStudy(id: { eq: $id }) {
+            machineReadablePublishDate: publishedAt(formatString: "YYYY-MM-DD")
+            Slug
+            Title
+            Description
+            Logo {
+                localFile {
+                    childImageSharp {
+                        gatsbyImageData(
+                            layout: FULL_WIDTH
+                            placeholder: BLURRED
+                            formats: [AUTO, WEBP, AVIF]
+                        )
+                        meta_img: fixed(width: 500) {
+                            src
+                        }
+                    }
+                }
+            }
+            SideContent {
+                data {
+                    SideContent
+                    childHtmlRehype {
+                        html
+                        tableOfContents
+                    }
+                }
+            }
+            About {
+                Title
+                Description {
+                    data {
+                        Description
+                        childHtmlRehype {
+                            html
+                            tableOfContents
+                        }
+                    }
+                }
+                Topics {
+                    Title
+                    Description
+                    Icon {
+                        localFile {
+                            childImageSharp {
+                                gatsbyImageData(
+                                    layout: FULL_WIDTH
+                                    placeholder: BLURRED
+                                    formats: [AUTO, WEBP, AVIF]
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+            Body {
+                data {
+                    Body
+                    childHtmlRehype {
+                        html
+                        tableOfContents
+                    }
+                }
+            }
+        }
+    }
+`