Yolit update gatsby

gatsby-config.js

@@ -62,7 +62,7 @@ module.exports = {
       options: {
         defaults: {
           formats: [`auto`, `webp`],
-          placeholder: `blurred`,
+          // placeholder: `blurred`,
           quality: 100,
           breakpoints: [750, 1080, 1366, 1920],
           backgroundColor: `transparent`,

public/page-data/index/page-data.json

@@ -2,4 +2,4 @@
     "componentChunkName": "component---src-pages-index-js",
     "path": "/",
     "result": {"pageContext":{}},
-    "staticQueryHashes": ["1687125271","176670904","2751633039","2900147843","3549188850","3658105631","4179863467","882490824"]}
+    "staticQueryHashes": ["1128713364","1687125271","176670904","2751633039","2900147843","3549188850","4109181808","4179863467","882490824"]}

src/components/BitwayPage/Paragraph/Paragraph.scss

@@ -18,7 +18,7 @@
     line-height: 30px;
     letter-spacing: 0em;
     text-align: left;
-    padding: 0 80px 20px;
+    // padding: 0 80px 20px;
     & * {
       font-size: 20px;
     }
@@ -71,7 +71,6 @@
       line-height: 26px;
       letter-spacing: 0em;
       text-align: left;
-
     }
     & > div > p {
       font-family: $primary-font;
@@ -81,7 +80,7 @@
       line-height: 26px;
       letter-spacing: 0em;
       text-align: left;
-      padding: 0 20px 0px 0px;
+      // padding: 0 20px 0px 0px;
       & * {
         font-size: 15px;
       }
@@ -95,19 +94,22 @@
 @media (min-width: $breakpoint-desktop) {
   .bitway-paragraph {
     & h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: $extra-large;
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: $extra-large;
       & span {
-        padding:15px 10px 5px;
+        padding: 15px 10px 5px;
         & p {
           font-size: $extra-large;
         }
       }
+    }
 
-  }
+    & > div > p {
+    padding: 0 80px 20px;
+    }
   }
 }

src/components/BlogArticle/BlogArticle.js → src/components/BlogPage/BlogArticle/BlogArticle.js

@@ -1,20 +1,29 @@
 import React from "react"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import { Link } from "gatsby"
-import MarkdownView from "react-showdown"
+import showdown from "showdown"
 import "./BlogArticle.scss"
 
 
 const BlogArticle = ({ title, summary, image, slug, text }) => {
+  let converter = new showdown.Converter()
+  let html = converter.makeHtml(summary)
+
+  const ReplaceHtml = () => {
+    return { __html: html }
+  }
+
   return (
     <div className="article__container">
-      <div className="article__image">
-        <GatsbyImage image={getImage(image.localFile)} alt={title} />
-      </div>
+      <GatsbyImage
+        image={getImage(image.localFile)}
+        alt={title}
+        className="article__image"
+      />
       <div className="article__description">
         <h3>{title}</h3>
         <div>
-          <MarkdownView markdown={summary} />
+          <p dangerouslySetInnerHTML={ReplaceHtml()} />
         </div>
         <div className="article__link">
           <Link to={slug}>{text}</Link>

src/components/BlogArticle/BlogArticle.scss → src/components/BlogPage/BlogArticle/BlogArticle.scss

@@ -1,4 +1,4 @@
-@import "../../styles/global.scss";
+@import "../../../styles/global.scss";
 .article {
   &__container {
     display: flex;
@@ -9,18 +9,15 @@
   }
 
   &__image {
-    width: 290px;
-    margin: auto 0;
-
-    img {
-      height: 165px;
-    }
+    width: 100%;
+    height: 150px;
   }
 
   &__description {
     display: flex;
     flex-direction: column;
     width: 100%;
+    height: 150px;
     padding: 0 15px;
 
     h3 {
@@ -66,11 +63,7 @@
 
     &__image {
       width: 100%;
-
-      img {
-        width: 500px;
-        height: 300px;
-      }
+      height: 300px;
     }
 
     &__description {
@@ -84,7 +77,7 @@
 
       p,
       a {
-        font-size: 18px;
+        font-size: 16px;
         line-height: 30px;
       }
     }

src/components/BlogPage/BlogContainer.js

@@ -3,8 +3,8 @@ import React from "react"
 import { useBanner, useBlog } from "../../hooks"
 
 import Layout from "../../components/layout"
-import BlogGrid from '../BlogGrid/BlogGrid'
-import BlogArticle from '../BlogArticle/BlogArticle'
+import BlogGrid from './BlogGrid/BlogGrid'
+import BlogArticle from './BlogArticle/BlogArticle'
 
 import { Seo, BannerActionCall } from "../index"
 
@@ -15,7 +15,6 @@ const Blog = () => {
   const bannerData = useBanner()
   const blogData = useBlog()
   const data = blogData?.allStrapiBlogCategory?.nodes
-  console.log(data)
 
   const bannerBlog = bannerData?.allStrapiBanners?.nodes.find(
     banner => banner.page === "blog" && banner.type === "bgColor"
@@ -39,12 +38,14 @@ const Blog = () => {
       )}
       {data.length > 0 && (
         <div className="blog__container">
-          <div className="banner__container">
-            <h3 dangerouslySetInnerHTML={{ __html: bannerBlog.summary }} />
-          </div>
+          {bannerBlog && (
+            <div className="banner__container">
+              <h3 dangerouslySetInnerHTML={{ __html: bannerBlog.summary }} />
+            </div>
+          )}
           {data?.map((article, idx) => (
             <BlogGrid key={idx} title={article.name}>
-              {article?.articles?.map((item, idx) => (
+              {article?.article?.map((item, idx) => (
                 <BlogArticle
                   key={idx}
                   image={item.image}
@@ -58,9 +59,7 @@ const Blog = () => {
           ))}
         </div>
       )}
-      {bannerActionCall && (
-        <BannerActionCall banner={bannerActionCall} />
-      )}
+      {bannerActionCall && <BannerActionCall banner={bannerActionCall} />}
     </Layout>
   )
 }

src/components/BlogGrid/BlogGrid.js → src/components/BlogPage/BlogGrid/BlogGrid.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import './BlogGrid.scss'
-import Pagination from '../Pagination/Pagination'
+import Pagination from '../../Pagination/Pagination'
 
 const BlogGrid = ({title, children}) => {
   return (

src/components/BlogGrid/BlogGrid.scss → src/components/BlogPage/BlogGrid/BlogGrid.scss

@@ -1,4 +1,4 @@
-@import "../../styles/global.scss";
+@import "../../../styles/global.scss";
 .grid {
     &__container {
         display: flex;

src/components/EdTechCards/EdtechCards.scss

@@ -49,8 +49,7 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
-
-    /*    margin-right: 20px; */
+    padding-left: 10px;
   }
   &__title {
     font-size: $medium;

src/components/HomePage/HomeContainer/HomeContainer.js

@@ -10,17 +10,21 @@ const Home = () => {
   const data = useHomePage()
 
   const homeSections = data?.allStrapiHome?.nodes[0]?.sections
-  const { pageTitle, pageDescription, pageKeywords } = data?.allStrapiHome?.nodes[0].pageMetadata || {}
+  const { pageTitle, pageDescription, pageKeywords } = data?.allStrapiHome?.nodes[0]?.pageMetadata || {}
 
 
   return (
     <Layout>
-      <Seo 
-        title={pageTitle}
-        description={pageDescription}
-        keywords={pageKeywords} 
-      />
-      <CustomSection sections={homeSections} />
+      {data?.allStrapiHome?.nodes[0]?.pageMetadata && (
+        <Seo
+          title={pageTitle}
+          description={pageDescription}
+          keywords={pageKeywords}
+        />
+      )}
+      {homeSections && (
+        <CustomSection sections={homeSections} />
+      )}
     </Layout>
   )
 }

src/components/Seo/Seo.js

@@ -10,7 +10,7 @@ function Seo({ description, lang, meta, title, keywords }) {
     author,
     robots,
     siteMetadata: { siteDesc, siteKeywords, siteTitle },
-  } = data.allStrapiGlobalSeo.nodes[0]
+  } = data?.allStrapiGlobalSeo?.nodes[0]
 
   const metaDescription = description ? description : siteDesc
   const defaultTitle = siteTitle

src/components/ServiceCards/ServiceCards.scss

@@ -62,7 +62,7 @@
     margin-bottom: 10px;
   }
   &__intro {
-    font-size: $medium;
+    font-size: $small;
     font-weight: $normal;
     text-align: center;
   }
@@ -93,5 +93,9 @@
         font-size: $extra-large;
       }
     }
+
+    &__intro {
+      font-size: $medium;
+    }
   }
 }

src/hooks/useBanner.js

@@ -22,7 +22,7 @@ const useBanner = () => {
                 gatsbyImageData(
                   quality: 100
                   formats: [AUTO, WEBP]
-                  placeholder: BLURRED
+
                 )
               }
             }

src/hooks/useBlog.js

@@ -3,15 +3,15 @@ import { useStaticQuery, graphql } from "gatsby"
 const useBlog = () => {
   const query = useStaticQuery(graphql`
     {
-      allStrapiBlogCategory(sort: { fields: articles___published_at, order: DESC }) {
+      allStrapiBlogCategory {
         nodes {
           name
-          articles {
-            id
-            summary
+          article {
             title
+            summary
             slug
             image {
+              url
               localFile {
                 childImageSharp {
                   gatsbyImageData