Merge pull request #62 from bitlogic/develop

Release 24-09-2024

Author: GonzalezMaxi

gatsby-config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  trailingSlash: "always",
   siteMetadata: {
     title: "Bitlogic | End-to-end software development",
     description: `Bitlogic Web is a company dedicated to the design, engineering, and agile development of software products, specializing in the digital transformation of educational institutions.`,
@@ -39,7 +40,7 @@ module.exports = {
               lastmod: homePage.updated_at,
             },
             {
-              path: "/blog",
+              path: "/blog/",
               lastmod: blogPage.updated_at,
             },
           ]
@@ -89,8 +90,9 @@ module.exports = {
     {
       resolve: `gatsby-plugin-canonical-urls`,
       options: {
+        stripQueryString: true,
         siteUrl: process.env.SITE_URL,
-        // siteUrl: "https://bitlogic.io",
+        // siteUrl: "https://en.bitlogic.io",
       },
     },
     {

src/components/Banner/Banner.js

@@ -1,133 +1,76 @@
 import React from "react"
-import { Link } from "gatsby"
 import MarkdownView from "react-showdown"
 //import ReactMarkdown from "react-markdown"
-import Lottie from 'react-lottie'
+import Lottie from "react-lottie"
 import { useTheme } from "../../context/themeContext"
-import { useLandingUrl } from '../../hooks'
 import "./Banner.scss"
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types"
+import CustomLink from "../CustomLink/CustomLink"
+import CustomImage from "../CustomImage/CustomImage"
 
 const Banner = ({ data }) => {
   const { theme } = useTheme()
   const { title, variant, summary, animation, image, imageDark, button } = data
-  const getUrl = useLandingUrl()
 
   const defaultOptions = {
     loop: true,
     autoplay: true,
     rendererSettings: {
-      preserveAspectRatio: 'xMidYMid slice'
+      preserveAspectRatio: "xMidYMid slice",
     },
   }
 
-  const Button = ({ button }) => {
-    if (button?.english_landing_page) {
-      return (
-        <Link
-          className="button"
-          araa-label={`Navigate to ${button.content}`}
-          to={getUrl(button.english_landing_page.slug)}
-        >
-          {button?.content}
-        </Link>
-      )
-    } else if (button?.url) {
-      if (button.url?.startsWith('https')) {
-        return (
-          <a href={button.url}
-            target="_blank"
-            rel="noreferrer"
-            className="button"
-            aria-label="External Link"
-          >
-            {button?.content}
-          </a>
-        )
-      } else {
-        return (
-          <a
-            href={button.url}
-            className="button"
-            aria-label={`Navigate to ${button.content}`}
-          >
-            {button?.content}
-          </a>
-        )
-      }
-    }
-
-    return null
-  };
-
   const showTitle = () => {
-    if (variant === "hero") {
-      return <h1>{title}</h1>
-    } else {
+    if (variant === "diagonal" || variant === "diagonalReverse") {
       return <h2>{title}</h2>
     }
+
+    return <h1>{title}</h1>
   }
 
   return (
-    <div
-      className={`banner ${variant}`}
-      id={data?.strapi_component + "-" + data?.id}
-    >
+    <div className={`banner ${variant}`}>
       <div className="container banner__wrapper">
-        {variant === "background" ?
-          <div
-            className="bgImage"
-            style={{
-              backgroundImage: `url(${image?.url})`,
-              backgroundPosition: 'center',
-              // backgroundSize: 'cover',
-            }}>
-            <div className="title-background ">
-              <h1 style={{ color: theme === 'dark' ? 'white' : '#3F6BE8' }}>{title}</h1>
-              {<MarkdownView
+        <div className="title container-md">
+          <div>
+            {/* {variant === "hero" ? <h1>{title}</h1> : <h2>{title}</h2>} */}
+            {showTitle()}
+            {
+              <MarkdownView
                 markdown={summary}
                 dangerouslySetInnerHTML={{ __html: summary }}
-              />}
-              <Button button={button} />
-            </div>
-          </div> :
-          <>
-            <div className="title container-md">
-              <div>
-                {/* {variant === "hero" ? <h1>{title}</h1> : <h2>{title}</h2>} */}
-                {showTitle()}
-                {<MarkdownView
-                  markdown={summary}
-                  dangerouslySetInnerHTML={{ __html: summary }}
-                />}
-                {/* <ReactMarkdown source={summary} className="banner-markdown" />*/}
-                <Button button={button} />
-              </div>
-            </div>
+              />
+            }
+            <CustomLink
+              content={button?.content}
+              url={button?.url}
+              landing={button?.english_landing_page}
+              className={"button"}
+            />
+          </div>
+        </div>
 
-            <div className="imagen">
-              {/* <img src={image?.url} alt={title} /> */}
-              {image?.url ? (
-                <img
-                  src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
-                  width={290}
-                  height={200}
-                  alt={image?.alternativeText
-                    ? image.alternativeText
-                    : title
-                  }
-                />) : (
-                <div className="cont-lottie">
-                  {animation && <Lottie options={{
+        <div className="imagen">
+          {image ? (
+            <CustomImage
+              image={theme === "dark" && imageDark ? imageDark : image}
+              width={290}
+              height={200}
+              alt={image?.alternativeText || title}
+            />
+          ) : (
+            <div className="cont-lottie">
+              {animation && (
+                <Lottie
+                  options={{
                     ...defaultOptions,
                     animationData: animation,
                   }}
-                  />}
-                </div>
+                />
               )}
             </div>
-          </>
-        }
+          )}
+        </div>
       </div>
     </div>
   )
@@ -142,15 +85,29 @@ Banner.propTypes = {
       content: PropTypes.string.isRequired,
       url: PropTypes.string,
       english_landing_page: PropTypes.shape({
-        slug: PropTypes.string.isRequired
-      })
+        slug: PropTypes.string.isRequired,
+      }),
     }),
     animation: PropTypes.object,
     image: PropTypes.shape({
       alternativeText: PropTypes.string,
       url: PropTypes.string,
-    })
-  }).isRequired
+      localFile: PropTypes.shape({
+        childImageSharp: PropTypes.shape({
+          gatsbyImageData: PropTypes.object,
+        }),
+      }),
+    }),
+    imageDark: PropTypes.shape({
+      alternativeText: PropTypes.string,
+      url: PropTypes.string,
+      localFile: PropTypes.shape({
+        childImageSharp: PropTypes.shape({
+          gatsbyImageData: PropTypes.object,
+        }),
+      }),
+    }),
+  }).isRequired,
 }
 
 export default Banner