Merge pull request #95 from bitlogic/develop

Release 09-12-2024

Author: marino-martin

src/components/BannerList/Banner.scss

@@ -9,11 +9,17 @@
     gap: 16px;
   }
 
+  h2 {
+    font-size: 52px;
+    margin: 0;
+  }
+
+
   .card_item {
     gap: 8px;
     align-items: center;
 
-    h2 {
+    h3 {
       font-size: 28px;
       margin: 0;
     }

src/components/BannerList/BannerList.js

@@ -25,12 +25,12 @@ export default function BannerList({ data }) {
         <div className="card_item col-9 pe-2">
           {item?.english_landing_page ? (
             <Link to={getUrl(item.english_landing_page.slug)}>
-              <h2>{item.title}</h2>
+              <h3>{item.title}</h3>
               <p>{item.description}</p>
             </Link>
           ) : (
             <>
-              <h2>{item.title}</h2>
+              <h3>{item.title}</h3>
               <p>{item.description}</p>
             </>
           )}
@@ -42,12 +42,12 @@ export default function BannerList({ data }) {
   return (
     <div className="container pt-5">
       <div className="bannerList d-md-flex flex-row">
-        <h1 className="bannerList__title col-md-6 col-xl-6 align-self-center mb-4">
+        <h2 className="bannerList__title col-md-6 col-xl-6 align-self-center mb-4">
           {title}
           {contactForm && concactFormAnchor && callToAction && (
             <a href={concactFormAnchor}>{callToAction}</a>
           )}
-        </h1>
+        </h2>
         <div className="bannerList__cards col-md-6 col-xl-6">{cards}</div>
       </div>
     </div>

src/components/FaIcon/FaIcon.js

@@ -1,20 +1,34 @@
 import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import "../FontAwesomeOne/FontAwesomeOne"
+import { faEnvelope, faLocationDot } from "@fortawesome/free-solid-svg-icons"
+import { faLinkedin, faTwitter, faInstagram, faYoutube, faSpotify } from "@fortawesome/free-brands-svg-icons"
 import PropTypes from "prop-types"
 
+// Mapeo de los íconos que se usan
+const iconMap = {
+  "fa-envelope": faEnvelope,
+  "fa-location-dot": faLocationDot,
+  "fa-linkedin": faLinkedin,
+  "fa-twitter": faTwitter,
+  "fa-instagram": faInstagram,
+  "fa-youtube": faYoutube,
+  "fa-spotify": faSpotify,
+}
 
 const FaIcon = ({ type, code }) => {
-  return (
-    <div>
-      <FontAwesomeIcon icon={[type, code]} />
-    </div>
-  )
+  const icon = iconMap[code]
+
+  if (!icon) {
+    console.warn(`Icono no encontrado: type=${type}, code=${code}`)
+    return null
+  }
+
+  return <FontAwesomeIcon icon={icon} />
 }
 
 FaIcon.propTypes = {
   type: PropTypes.string.isRequired,
-  code: PropTypes.string.isRequired
+  code: PropTypes.string.isRequired,
 }
 
 export default FaIcon

src/components/FontAwesomeOne/FontAwesomeOne.js

@@ -1,8 +1,11 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { fas } from '@fortawesome/free-solid-svg-icons'
-import { far } from '@fortawesome/free-regular-svg-icons'
-import { fab } from '@fortawesome/free-brands-svg-icons'
+import { faEnvelope, faLocationDot } from "@fortawesome/free-solid-svg-icons"
+import { faLinkedin, faTwitter, faInstagram, faYoutube, faSpotify } from "@fortawesome/free-brands-svg-icons"
 
-library.add(fas)
-library.add(far)
-library.add(fab)
+library.add(faEnvelope)
+library.add(faLocationDot)
+library.add(faLinkedin)
+library.add(faTwitter)
+library.add(faInstagram)
+library.add(faYoutube)
+library.add(faSpotify)

src/components/animatedTransitionContinous/AnimatedTransitionContinous.js

@@ -30,7 +30,7 @@ const AnimatedTransitionContinous = ({ data }) => {
                   className={""}
                 />
               )}
-              <h1 style={{ color: color }}>{innerText || ""}</h1>
+              <h2 style={{ color: color }}>{innerText || ""}</h2>
               {(imagePosition === "last" || !imagePosition) && image && (
                 <CustomImage
                   image={image}

src/components/animatedTransitionContinous/animatedTransitionContinous.scss

@@ -9,6 +9,10 @@
   z-index: 1;
   margin: 2rem auto;
 
+  h2{
+    font-size: 52px;
+  }
+
   &__title {
     display: flex;
     position: absolute;

src/components/videoBackground/VideoBackground.js

@@ -103,7 +103,7 @@ function getVideoContent(video, videoRef, isIntersecting, pausePlay, handleKeyDo
 
     }
   } else {
-    videoContent = imageData ? <GatsbyImage className="image" image={imageData} alt={image.alternativeText || "Image"} /> : <div><br /></div>
+    videoContent = imageData ? <GatsbyImage width={290} height={200} className="image" image={imageData} alt={image.alternativeText || "Image"} /> : <div><br /></div>
   }
 
   return videoContent;

src/hooks/useBlog.js

@@ -38,6 +38,11 @@ const useBlog = () => {
           blog_category {
             name
           }
+          seo {
+            pageTitle
+            pageKeywords
+            pageDescription
+          }
         }
       }
       allStrapiBlogPage: allStrapiEnglishBlogPage {

src/templates/BlogItemDetail.js

@@ -5,21 +5,53 @@ import Layout from "../components/layout"
 import { Seo, BannerTop } from "../components/index.js"
 import "./BlogItemDetail.scss"
 import PropTypes from "prop-types"
+import { Helmet } from "react-helmet"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
 
 const BlogDetail = ({ data }) => {
-  const { title, description, image, imagePage, author, seo } =
+  const { title, description, image, imagePage, author, seo, published_at, updated_at } =
     data?.allStrapiArticle?.nodes[0] || {}
 
   const bannerTop = imagePage ? { title, imagePage } : { title, image }
 
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": seo?.pageTitle || title, // Usa pageTitle de SEO o el título
+    "description": seo?.pageDescription || description,
+    "image": imagePage?.url || image?.url, // Imagen principal
+    "author": author?.map(auth => ({
+      "@type": "Person",
+      "name": auth.name,
+    })),
+    "datePublished": published_at, // Ajusta con la fecha real
+    "dateModified": updated_at, // Ajusta con la fecha real
+    "mainEntityOfPage": {
+      "@type": "WebPage",
+      "@id": `https://es.bitlogic.io/blog/${data?.allStrapiArticle?.nodes[0]?.slug}`,
+    },
+    "publisher": {
+      "@type": "Organization",
+      "name": "Bitlogic",
+      "logo": {
+        "@type": "ImageObject",
+        "url": "https://bitlogic.io/static/64f396cb88cfcbfda46b86c5218242f2/de081/Logo_Bit_azul_7e725e9726.webp", // URL del logo del sitio
+      },
+    },
+  }
+
   return (
     <Layout>
       <Seo
-        title={title}
+        title={seo?.pageTitle}
         description={seo?.pageDescription}
         keywords={seo?.pageKeywords}
       />
+      <Helmet>
+        <script type="application/ld+json">
+          {JSON.stringify(structuredData)}
+        </script>
+      </Helmet>
       <BannerTop banner={bannerTop} />
       <div className="detail__container row">
         <div className="col-lg-12">
@@ -110,6 +142,8 @@ export const query = graphql`
         title
         description
         slug
+        published_at
+        updated_at
         seo {
           pageTitle
           pageDescription

src/templates/LandingPage.js

@@ -16,11 +16,11 @@ const LandingPage = ({ data, location }) => {
     ref: wrapperRef,
   }
 
-  const { pageKeywords, pageDescription } = seo || {}
+  const {pageTitle, pageKeywords, pageDescription } = seo || {}
 
   return (
     <Layout location={location} options={{ hasHeader: true }}>
-      <Seo title={name} description={pageDescription} keywords={pageKeywords} />
+      <Seo title={pageTitle} description={pageDescription} keywords={pageKeywords} />
       {body?.length > 0 && navigation ? (
         <>
           <CustomSection sections={body.slice(0, 1)} />
@@ -72,6 +72,7 @@ export const query = graphql`
           slug
         }
         seo {
+          pageTitle
           pageKeywords
           pageDescription
         }