Cambios en vista de articulos

src/components/BlogPage/BlogArticle/BlogArticle.scss

@@ -11,6 +11,7 @@
   &__image {
     width: 100%;
     height: 150px;
+    transition: opacity 3s ease-in;
   }
 
   &__description {

src/components/BlogPage/BlogContainer.js

@@ -45,7 +45,7 @@ const Blog = () => {
           )}
           {data?.map((article, idx) => (
             <BlogGrid key={idx} title={article.name}>
-              {article?.article?.map((item, idx) => (
+              {article?.articles?.map((item, idx) => (
                 <BlogArticle
                   key={idx}
                   image={item.image}

src/hooks/useBanner.js

@@ -22,7 +22,7 @@ const useBanner = () => {
                 gatsbyImageData(
                   quality: 100
                   formats: [AUTO, WEBP]
-
+                  placeholder: BLURRED
                 )
               }
             }

src/hooks/useBlog.js

@@ -6,7 +6,7 @@ const useBlog = () => {
       allStrapiBlogCategory {
         nodes {
           name
-          article {
+          articles {
             title
             summary
             slug

src/templates/BlogItemDetail.js

@@ -1,20 +1,21 @@
 import React from "react"
 import { graphql } from "gatsby"
+import showdown from "showdown"
 import Layout from "../components/layout"
 import { Seo } from "../components/index.js"
 import { BannerTop } from "../components/index.js"
-import { getImage, GatsbyImage } from "gatsby-plugin-image"
+// import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import "./BlogItemDetail.scss"
 
 const BlogDetail = ({ data }) => {
-  const {title, description, image, author } = data?.allStrapiArticle?.nodes[0]
+  const { title, description, image } = data?.allStrapiArticle?.nodes[0]
   const bannerTop = { title, image }
 
-  let converter = author.summary
-  console.log(converter)
+  let converter = new showdown.Converter()
+  let html = converter.makeHtml(description)
 
   const ReplaceHtml = () => {
-    return { __html: description }
+    return { __html: html }
   }
 
   return (
@@ -25,7 +26,7 @@ const BlogDetail = ({ data }) => {
         <div className="col-lg-12">
           <div className="detail__description">
             <p dangerouslySetInnerHTML={ReplaceHtml()} />
-            <div className="detail__description-author">
+            {/* <div className="detail__description-author">
               {author?.map(author => (
                 <div className="detail__box-author">
                   <div className="detail__box-author-image">
@@ -41,7 +42,7 @@ const BlogDetail = ({ data }) => {
                   </div>
                 </div>
               ))}
-            </div>
+            </div> */}
           </div>
         </div>
         {/* <div className="col-lg-4">
@@ -79,18 +80,6 @@ export const query = graphql`
             }
           }
         }
-        author {
-          name
-          subTitle
-          summary
-          image {
-            localFile {
-              childImageSharp {
-                gatsbyImageData
-              }
-            }
-          }
-        }
       }
     }
   }

src/templates/BlogItemDetail.scss

@@ -13,9 +13,81 @@
 
   &__description {
     margin-bottom: 2rem;
-    padding: 2rem 1.5rem;
-    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
-    // border-radius: 18px;
+    padding: 2rem 1rem;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: $large;
+      em {
+        font-size: $large;
+      }
+    }
+
+    p,
+    strong,
+    em {
+      font-size: $small;
+      line-height: 24px;
+    }
+
+    ul {
+      padding: 1rem;
+      margin-top: -1rem;
+
+      li {
+        margin-left: 1rem;
+        font-size: $small;
+
+        &::marker {
+          color: $blue;
+          font-size: 1rem;
+        }
+      }
+    }
+
+    a {
+      font-size: $small;
+      font-weight: $standard;
+      color: $blue;
+
+      &:hover {
+        font-weight: $bold;
+      }
+    }
+
+    img {
+      display: block;
+      max-width: 95%;
+      margin: 1.8rem auto 3rem;
+      border-radius: 3px;
+      box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
+    }
+
+    blockquote {
+      p {
+        position: relative;
+        padding: 1rem;
+        border-left: 5px solid $blue;
+        background: $grey-light;
+
+        strong {
+          display: flex;
+          justify-content: end;
+          align-items: center;
+          margin-top: 1.5rem;
+          margin-right: 1rem;
+          font-style: italic;
+        }
+      }
+
+      :nth-child(even) {
+        border-left: 5px solid $yellow;
+      }
+    }
   }
   &__box-author {
     display: flex;
@@ -132,13 +204,52 @@
 
 @media (min-width: $breakpoint-tablet) {
   .detail {
+    &__description {
+      ul {
+        li {
+          font-size: 16px;
+        }
+      }
+
+      a {
+        font-size: 18px;
+      }
+
+      blockquote {
+        p {
+          padding-top: 2rem;
+          padding-left: 3rem;
+          padding-right: 1rem;
+          padding-bottom: 1rem;
+
+          &:before {
+          content: "\201C";
+          position: absolute;
+          top: 45px;
+          left: 10px;
+          font-size: 5em;
+          font-style: italic;
+          color: #e7e6e4;
+          z-index: 1;
+          font-family: "Sanchez";
+        }
+
+        strong {
+          font-size: 18px;
+        }
+        }
+      }
+    }
+
     &__box-author {
       flex-direction: row;
       margin: 25px auto;
     }
+
     &__box-author-image {
       flex-basis: 65%;
       text-align: center;
+
       img {
         width: 145px;
         height: 145px;
@@ -157,15 +268,37 @@
     &__container {
       padding-left: 5rem;
       padding-right: 5rem;
-
-      p {
-        font-size: 16px;
-        line-height: 28px;
-      }
     }
 
     &__description {
       padding: 4rem 5rem 3rem;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: 30px;
+      }
+
+      p,
+      strong,
+      em {
+        font-size: 18px;
+        line-height: 34px;
+      }
+
+      img {
+        max-width: 85%;
+      }
+
+      blockquote {
+        p {
+          font-size: 17px;
+          line-height: 28px;
+        }
+      }
     }
 
     &__description-author {
@@ -178,10 +311,6 @@
       margin: 1.5rem;
     }
 
-    // &__box-author-image {
-    //   flex-basis: 65%;
-    // }
-
     &__box-autor-description {
       width: 100%;
 
@@ -209,7 +338,6 @@
       }
 
       &__blog-card-description {
-
         p {
           line-height: 24px;
         }