-
+
@@ -60,6 +61,9 @@ SocialLinks.propTypes = {
url: PropTypes.string,
name: PropTypes.string,
icon: PropTypes.shape({
+ name: PropTypes.string,
+ type: PropTypes.string,
+ code: PropTypes.string,
url: PropTypes.string,
alternativeText: PropTypes.string,
localFile: PropTypes.shape({
diff --git a/src/components/Footer/SocialLinks/socialLinks.scss b/src/components/Footer/SocialLinks/socialLinks.scss
index f06ada4..2be8675 100644
--- a/src/components/Footer/SocialLinks/socialLinks.scss
+++ b/src/components/Footer/SocialLinks/socialLinks.scss
@@ -10,6 +10,9 @@
color: $white;
width: 21px;
height: 21px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
}
}
diff --git a/src/components/Form/PipedriveForm.js b/src/components/Form/PipedriveForm.js
index a50ba51..81b9bef 100644
--- a/src/components/Form/PipedriveForm.js
+++ b/src/components/Form/PipedriveForm.js
@@ -40,7 +40,7 @@ const PipedriveForm = ({ data }) => {
{title && (
- majorVersion) return false
return currentVersion.minor < minorVersion
}
+function getQS(name) {
+ if (typeof window === "undefined") return null
+ return new URLSearchParams(window.location.search).get(name)
+}
+
+
+function resolvePoster(poster, image) {
+ const posterLocal =
+ poster?.localFile ||
+ poster?.data?.attributes?.localFile ||
+ null
+ const sharp = posterLocal ? getImage(posterLocal) : null
+
+ const rawUrl =
+ poster?.url ||
+ poster?.data?.attributes?.url ||
+ poster?.formats?.large?.url ||
+ poster?.formats?.medium?.url ||
+ poster?.formats?.small?.url ||
+ poster?.formats?.thumbnail?.url ||
+ null
+
+ const toAbs = u =>
+ !u ? null : (u.startsWith("http")
+ ? u
+ : `https://strapi-s3-bitlogic.s3.sa-east-1.amazonaws.com${u}`)
+
+ const url = toAbs(rawUrl)
+
+ const imageSharp = image?.localFile ? getImage(image.localFile) : null
+
+ return { sharp: sharp || imageSharp, url }
+}
function getVideoContent(
video,
@@ -36,29 +68,14 @@ function getVideoContent(
image,
posterData
) {
- const posterUrl = posterData?.url?.startsWith("http")
- ? getImage(posterData.url)
- : getImage(`https://strapi-s3-bitlogic.s3.sa-east-1.amazonaws.com${posterData?.url}`)
- const posterSharp = posterData?.localFile && getImage(posterData.localFile)
+ const { sharp: pSharp, url: pUrl } = resolvePoster(posterData, image)
+ const posterUrl = pUrl || pSharp?.images?.fallback?.src
const url = videoUrl?.replace("watch?v=", "embed/")
let code = url?.substring(url.lastIndexOf("/") + 1) || ""
const codeIndex = code.indexOf("?")
if (codeIndex !== -1) code = code.substring(0, codeIndex)
- const isOldIOS = isIOSPriorTo("17.4")
- if (isOldIOS && posterSharp) {
- return (
-
{title}
+{title}
)} {content && (
+
+ )
+ }
const videoContent = getVideoContent(
video,
@@ -200,7 +297,7 @@ const VideoBackground = ({ data }) => {
}}
>
+
+ {posterSharp ? (
+ 
+ ) : (
+
+
+
+ (sin poster disponible)
+
+ )}
+
+ {description && (
+
+
+ )}
+ {description}
+ {button && ( +
-
+
{videoContent}
{description && (
@@ -223,31 +320,38 @@ const VideoBackground = ({ data }) => {
VideoBackground.propTypes = {
data: PropTypes.shape({
video: PropTypes.shape({
- url: PropTypes.string.isRequired,
- mime: PropTypes.string.isRequired,
+ url: PropTypes.string,
+ mime: PropTypes.string,
}),
videoUrl: PropTypes.string,
description: PropTypes.string,
- backgroundImage: PropTypes.shape({ url: PropTypes.string.isRequired }),
+ backgroundImage: PropTypes.shape({ url: PropTypes.string }),
image: PropTypes.shape({
alternativeText: PropTypes.string,
localFile: PropTypes.object,
}),
poster: PropTypes.shape({
- url: PropTypes.string.isRequired,
+ url: PropTypes.string,
alternativeText: PropTypes.string,
localFile: PropTypes.shape({
- childImageSharp: PropTypes.object.isRequired,
+ childImageSharp: PropTypes.object,
+ }),
+ formats: PropTypes.object,
+ data: PropTypes.shape({
+ attributes: PropTypes.shape({
+ url: PropTypes.string,
+ localFile: PropTypes.object,
+ }),
}),
}),
button: PropTypes.shape({
- content: PropTypes.string.isRequired,
+ content: PropTypes.string,
url: PropTypes.string,
landing_page: PropTypes.shape({
- slug: PropTypes.string.isRequired,
+ slug: PropTypes.string,
}),
}),
}),
}
-export default VideoBackground
+export default VideoBackground
\ No newline at end of file
diff --git a/src/schema/blogSchema.js b/src/schema/blogSchema.js
index a93f224..bf0d5aa 100644
--- a/src/schema/blogSchema.js
+++ b/src/schema/blogSchema.js
@@ -1,4 +1,6 @@
const blogSchema = `
+ union ArticleBodyDynamicZone = ComponentHowtoHowTo
+
type StrapiEnglishBlogCategory implements Node {
parent: Node
children: [Node!]!
@@ -42,6 +44,7 @@ const blogSchema = `
seo: ComponentSeo
blog_category: StrapiEnglishBlogCategory
author: [StrapiEnglishArticleAuthor]
+ body: [ArticleBodyDynamicZone]
published_at(
formatString: String
fromNow: Boolean
diff --git a/src/schema/generalSchema.js b/src/schema/generalSchema.js
index 8a68b42..57ab57b 100644
--- a/src/schema/generalSchema.js
+++ b/src/schema/generalSchema.js
@@ -58,6 +58,7 @@ const generalSchema = `
summary: String
text: String
description: String
+ descripcion: String
concactFormAnchor: String
callToAction: String
videoUrl: String
@@ -72,6 +73,8 @@ const generalSchema = `
contactForm: Boolean
allBlog: Boolean
show: Boolean
+ tieneHowTo: Boolean
+ totalMinutes: Int
image: LocalFile
imageDark: LocalFile
backgroundImage: LocalFile
@@ -86,6 +89,8 @@ const generalSchema = `
ListItem: [ComponentContentPageCard]
eng_professionals: [StrapiEnglishProfessional]
english_articles: [StrapiEnglishArticle]
+ tools: [ComponentHowtoTool]
+ steps: [ComponentHowtoStep]
}
type ComponentSeo {
@@ -94,6 +99,25 @@ const generalSchema = `
pageKeywords: String
}
+ type ComponentHowtoHowTo {
+ id: ID!
+ tieneHowTo: Boolean
+ title: String
+ descripcion: String
+ totalMinutes: Int
+ tools: [ComponentHowtoTool]
+ steps: [ComponentHowtoStep]
+ }
+ type ComponentHowtoStep {
+ id: ID!
+ name: String
+ text: String
+ }
+ type ComponentHowtoTool {
+ id: ID!
+ name: String
+ }
+
type ComponentButton {
id: Int
content: String
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 7861fdf..bc51f84 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -268,3 +268,15 @@ body {
font-size: 3em;
}
}
+
+.visually-hidden {
+ position: absolute !important;
+ width: 1px !important;
+ height: 1px !important;
+ padding: 0 !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ clip: rect(0, 0, 0, 0) !important;
+ white-space: nowrap !important;
+ border: 0 !important;
+}
diff --git a/src/templates/BlogItemDetail.js b/src/templates/BlogItemDetail.js
index 9137e92..06502cb 100644
--- a/src/templates/BlogItemDetail.js
+++ b/src/templates/BlogItemDetail.js
@@ -2,44 +2,78 @@ import React from "react"
import { graphql } from "gatsby"
import MarkdownView from "react-showdown"
import Layout from "../components/layout"
-import { Seo, BannerTop } from "../components/index.js"
-import "./BlogItemDetail.scss"
+import { Seo, BannerTop, CustomImage } from "../components/index.js"
import PropTypes from "prop-types"
-import { Helmet } from "react-helmet"
-import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { Helmet } from "react-helmet"
+import "./BlogItemDetail.scss"
+
+const stripHtml = s => (s ? s.replace(/<[^>]+>/g, "").trim() : s)
+const toISODuration = m => (m ? `PT${Math.max(0, Number(m))}M` : undefined)
+const pickHowTo = (blocks = []) =>
+ blocks.find(b => {
+ const uid = b?.strapi_component || b?.__component
+ return uid && uid.includes("howto") && b?.tieneHowTo === true
+ })
const BlogDetail = ({ data }) => {
- const { title, description, image, imagePage, author, seo, published_at, updated_at } =
+ const { title, description, image, imagePage, author, seo, published_at, updated_at, body } =
data?.allStrapiArticle?.nodes[0] || {}
const bannerTop = imagePage ? { title, imagePage } : { title, image }
+ const img = imagePage || image;
+ const imgWidth = img.width || img.localFile.childImageSharp.original.width;
+ const imgHeight = img.height || img.localFile.childImageSharp.original.height;
const structuredData = {
"@context": "https://schema.org",
- "@type": "Article",
- "headline": seo?.pageTitle || title, // Usa pageTitle de SEO o el título
+ "@type": "BlogPosting",
+ "headline": seo?.pageTitle || title,
"description": seo?.pageDescription || description,
- "image": imagePage?.url || image?.url, // Imagen principal
+ "image": {
+ "@type": "ImageObject",
+ "url": img.url,
+ "width": imgWidth,
+ "height": imgHeight
+ },
"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
+ "datePublished": published_at,
+ "dateModified": updated_at,
"mainEntityOfPage": {
"@type": "WebPage",
- "@id": `https://es.bitlogic.io/blog/${data?.allStrapiArticle?.nodes[0]?.slug}`,
+ "@id": `https://en.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
- },
+ "url": "https://bitlogic.io/static/64f396cb88cfcbfda46b86c5218242f2/de081/Logo_Bit_azul_7e725e9726.webp",
+ "width": 633,
+ "height": 187
+ }
},
}
+ const blocks = Array.isArray(body) ? body : []
+ const howto = pickHowTo(blocks)
+
+ const structuredHowTo = howto && {
+ "@context": "https://schema.org",
+ "@type": "HowTo",
+ name: howto.title || title,
+ description: stripHtml(howto.descripcion || howto.description),
+ totalTime: toISODuration(howto.totalMinutes),
+ tool: (howto.tools || []).map(t => t?.name).filter(Boolean),
+ step: (howto.steps || []).map(s => ({
+ "@type": "HowToStep",
+ name: s?.name,
+ text: stripHtml(s?.text),
+ })),
+ }
+
return (
{
{JSON.stringify(structuredData)}
+ {structuredHowTo && (
+
+
+
+ )}
+
@@ -62,15 +104,14 @@ const BlogDetail = ({ data }) => {
/>
{author?.map(author => (
-
- {author.image && (
-
-
- )}
+
+
-
+
+ {faqLd && (
+
+ )}
+
+
{body?.length > 0 && navigation ? (
<>
+