Merge pull request #325 from bitlogic/dev

Release 09-12-2025

Author: marino-martin

src/components/FaIcon/FaIcon.js

@@ -1,19 +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,
 }
 
-export default FaIcon
+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/videoBackground/VideoBackground.js

@@ -106,7 +106,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/templates/BlogItemDetail.js

@@ -4,21 +4,54 @@ import MarkdownView from "react-showdown"
 import Layout from "../components/layout"
 import { Seo, BannerTop, CustomImage } from "../components/index.js"
 import PropTypes from "prop-types"
+import { Helmet } from "react-helmet" // Importa Helmet
 import "./BlogItemDetail.scss"
 
 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 }
 
+  // Define datos estructurados
+  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">
@@ -29,7 +62,7 @@ const BlogDetail = ({ data }) => {
             />
             <div className="detail__description-author">
               {author?.map(author => (
-                <div className="detail__box-author" key={author.id}>
+                <div className="detail__box-author" key={author.name}>
                   <div className="detail__box-author-image">
                     <CustomImage
                       image={author?.image}
@@ -112,6 +145,8 @@ export const query = graphql`
         title
         description
         slug
+        published_at
+        updated_at
         seo {
           pageTitle
           pageDescription