Merge pull request #376 from bitlogic/dev

Fix set charset to UTF-8

Author: brunoportesio

src/components/Banners/BannerTop.scss

@@ -40,6 +40,9 @@
   .BannerTop {
     &__bgImage {
       min-height: 55vh;
+      &::after {
+        background-position: top!important; 
+      }
     }
 
     &__titleContainer {

src/components/Footer/SocialLinks/socialLinks.js

@@ -17,7 +17,10 @@ export default function SocialLinks({ image, socialMedia }) {
       rel="noreferrer"
       aria-label={`Link externo a ${item?.name}`}
     >
-      <FaIcon type={item.icon?.type} code={item.icon?.code} />
+      <>
+        <FaIcon type={item.icon?.type} code={item.icon?.code} />
+        <span className="visually-hidden">Link a {item.name}</span>
+      </>
     </a>
   ))
 

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;
     }
   }
 
@@ -31,3 +34,15 @@
     }
   }
 }
+
+.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;
+}

src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdownItems.scss

@@ -108,10 +108,6 @@
   list-style: none;
 }
 
-.two-column-list li:nth-child(1n+11) {
-  display: none; /* Oculta los elementos que superen el límite de 10 */
-}
-
 .dropdownItem_icon {
   display: none;
 }

src/components/videoBackground/VideoBackground.js

@@ -4,7 +4,6 @@ import CustomLink from "../CustomLink/CustomLink"
 import PropTypes from "prop-types"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
-// ✅ CAMBIO: detectar versión de iOS
 function getIOSVersion() {
   if (typeof window === "undefined" || typeof navigator === "undefined") return null
   const userAgent = navigator.userAgent
@@ -25,6 +24,39 @@ function isIOSPriorTo(version) {
   if (currentVersion.major > 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 (
-      <GatsbyImage
-        className="video-poster"
-        image={posterSharp}
-        alt={posterData.alternativeText || "Video poster"}
-        loading="eager"
-        style={{ width: "100%", maxWidth: "100vw", height: "auto" }}
-      />
-    )
-  }
-
   if (video?.url) {
     return (
       <video
@@ -100,8 +117,8 @@ function getVideoContent(
         allowFullScreen
         title="benefits_video"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        webkitallowfullscreen
-        mozallowfullscreen
+        webkitallowfullscreen="true"
+        mozallowfullscreen="true"
         style={{
           width: "100%",
           maxWidth: "100vw",
@@ -115,12 +132,12 @@ function getVideoContent(
     )
   }
 
-  if (posterSharp) {
+  if (pSharp) {
     return (
       <GatsbyImage
         className="video-poster"
-        image={posterSharp}
-        alt={posterData.alternativeText || "Video poster"}
+        image={pSharp}
+        alt={posterData?.alternativeText || "Video poster"}
         loading="eager"
         style={{ width: "100%", maxWidth: "100vw", height: "auto" }}
       />
@@ -141,6 +158,12 @@ const VideoBackground = ({ data }) => {
     poster,
   } = data
 
+  const forced = getQS("forceOldIOS") === "1"
+  const initialIsOldIOS =
+    forced ||
+    (typeof navigator !== "undefined" && /iPhone/.test(navigator.userAgent) && isIOSPriorTo("17.4"))
+  const [isOldIOS] = useState(initialIsOldIOS)
+
   const [isVideoPause, setIsVideoPause] = useState(false)
   const [isIntersecting, setIsIntersecting] = useState(false)
   const videoRef = useRef(null)
@@ -157,10 +180,12 @@ const VideoBackground = ({ data }) => {
       pausePlay()
     }
   }
-
   useEffect(() => {
+    if (isOldIOS) return
+
     const elem = videoRef.current
     if (!elem) return
+
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -172,11 +197,83 @@ const VideoBackground = ({ data }) => {
     )
     observer.observe(elem)
     return () => observer.disconnect()
-  }, [])
+  }, [isOldIOS])
 
   useEffect(() => {
     localStorage.setItem("videoPaused", isVideoPause)
   }, [isVideoPause])
+  if (isOldIOS) {
+    const { sharp: posterSharp, url: posterFromUrl } = resolvePoster(poster, image)
+
+    return (
+      <div
+        style={{
+          backgroundImage: backgroundImage ? `url(${backgroundImage.url})` : "",
+          backgroundRepeatY: "no-repeat",
+          backgroundPosition: "center",
+        }}
+      >
+        <div className="container videoBackground-container">
+          <section className="videoBackground" key="poster">
+            {posterSharp ? (
+              <GatsbyImage
+                className="video-poster"
+                image={posterSharp}
+                alt={poster?.alternativeText || "Video poster"}
+                loading="eager"
+                style={{ width: "100%", maxWidth: "100vw", height: "auto" }}
+              />
+            ) : posterFromUrl ? (
+              <img
+                className="video-poster"
+                src={posterFromUrl}
+                alt={poster?.alternativeText || "Video poster"}
+                loading="eager"
+                style={{
+                  width: "100%",
+                  maxWidth: "100vw",
+                  height: "auto",
+                  display: "block",
+                  borderRadius: "5px",
+                  objectFit: "cover",
+                  aspectRatio: "16/9",
+                }}
+              />
+            ) : (
+              <div
+                style={{
+                  width: "100%",
+                  maxWidth: "100vw",
+                  aspectRatio: "16/9",
+                  borderRadius: "5px",
+                  background: "#2e2e2e",
+                  display: "grid",
+                  placeItems: "center",
+                  color: "#ccc",
+                  fontSize: 14,
+                }}
+              >
+                (sin poster disponible)
+              </div>
+            )}
+
+            {description && (
+              <div className="videoBackground-card">
+                <h2>{description}</h2>
+                {button && (
+                  <CustomLink
+                    content={button.content}
+                    url={button.url}
+                    landing={button.landing_page}
+                  />
+                )}
+              </div>
+            )}
+          </section>
+        </div>
+      </div>
+    )
+  }
 
   const videoContent = getVideoContent(
     video,
@@ -200,7 +297,7 @@ const VideoBackground = ({ data }) => {
       }}
     >
       <div className="container videoBackground-container">
-        <section className="videoBackground">
+        <section className="videoBackground" key="video">
           {videoContent}
           {description && (
             <div className="videoBackground-card">
@@ -223,28 +320,35 @@ 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,
       }),
     }),
   }),

src/html.js

@@ -11,6 +11,7 @@ export default function HTML({
   return (
     <html {...htmlAttributes}>
       <head>
+        <meta charset="utf-8" />
         {headComponents}
       </head>
       <body {...bodyAttributes}>

src/schema/blogSchema.js

@@ -1,4 +1,6 @@
 const blogSchema = `
+  union ArticleBodyDynamicZone = ComponentHowtoHowTo
+
   type StrapiBlogCategory implements Node {
     parent: Node
     children: [Node!]!
@@ -37,11 +39,13 @@ const blogSchema = `
     description: String!
     summary: String!
     slug: String!
+    destacado: Boolean
     image: LocalFile
     imagePage: LocalFile
     seo: ComponentSeo
     blog_category: StrapiBlogCategory
     author: [StrapiArticleAuthor]
+    body: [ArticleBodyDynamicZone]
     published_at(
       formatString: String
       fromNow: Boolean