Release to PROD

gatsby-config.js

@@ -81,6 +81,20 @@ module.exports = {
         icon: `src/images/isotipo.png`,
       },
     },
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: "gatsby-remark-external-links",
+            options: {
+              target: "_blank",
+              rel: "nofollow",
+            },
+          },
+        ],
+      },
+    },
     "gatsby-plugin-offline",
     `gatsby-plugin-sass`,
     /* {

package.json

@@ -21,8 +21,10 @@
     "gatsby-plugin-react-helmet": "^4.12.0",
     "gatsby-plugin-sass": "^4.12.0",
     "gatsby-plugin-sharp": "^3.12.0",
+    "gatsby-remark-external-links": "^0.0.4",
     "gatsby-source-filesystem": "^3.12.0",
     "gatsby-source-strapi": "^1.0.2",
+    "gatsby-transformer-remark": "^4.11.0",
     "gatsby-transformer-sharp": "^3.12.0",
     "gbimage-bridge": "^0.1.4",
     "nodemon": "^2.0.7",
@@ -34,7 +36,7 @@
     "react-hook-form": "^7.11.0",
     "react-hubspot-form": "^1.3.7",
     "react-icons": "^4.2.0",
-    "react-markdown": "^6.0.2",
+    "react-markdown": "5.0.3",
     "react-script-tag": "^1.1.2",
     "react-showdown": "^2.3.1",
     "sass": "^1.35.1"

public/page-data/index/page-data.json

@@ -2,4 +2,4 @@
     "componentChunkName": "component---src-pages-index-js",
     "path": "/",
     "result": {"pageContext":{}},
-    "staticQueryHashes": ["1128713364","1687125271","176670904","2751633039","2900147843","3549188850","4109181808","4179863467","882490824"]}
+    "staticQueryHashes": ["1128713364","1687125271","176670904","3498872882","3858639830","4070604734","4109181808","854109855","882490824"]}

src/components/BlogPage/BlogArticle/BlogArticle.js

@@ -1,18 +1,11 @@
 import React from "react"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import { Link } from "gatsby"
-import showdown from "showdown"
+// import ReactMarkdown from "react-markdown"
+import MarkdownView from "react-showdown"
 import "./BlogArticle.scss"
 
-
 const BlogArticle = ({ title, summary, image, slug, text }) => {
-  let converter = new showdown.Converter()
-  let html = converter.makeHtml(summary)
-
-  const ReplaceHtml = () => {
-    return { __html: html }
-  }
-
   return (
     <div className="article__container">
       <GatsbyImage
@@ -21,9 +14,10 @@ const BlogArticle = ({ title, summary, image, slug, text }) => {
         className="article__image"
       />
       <div className="article__description">
-        <h3>{title}</h3>
+        <h3>{`${title} ...`}</h3>
         <div>
-          <p dangerouslySetInnerHTML={ReplaceHtml()} />
+          <MarkdownView markdown={`${summary} ...`} />
+          {/* <ReactMarkdown source={`${summary} ...`} /> */}
         </div>
         <div className="article__link">
           <Link to={slug}>{text}</Link>

src/components/BlogPage/BlogArticle/BlogArticle.scss

@@ -5,7 +5,7 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    padding: 15px 0;
+    padding: 1.5rem 0;
   }
 
   &__image {
@@ -17,28 +17,40 @@
   &__description {
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
     width: 100%;
     height: 150px;
     padding: 0 15px;
 
-    h3 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       padding-left: 0;
       margin-bottom: 15px;
       font-size: $small;
+      line-height: 1rem;
       font-weight: $max-bold;
+      color: $blue;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
     }
 
     p {
       margin-bottom: 15px;
-      font-size: 14px;
+      font-size: 12px;
       line-height: 24px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
 
       em {
-        font-size: 14px;
+        font-size: 12px;
       }
     }
   }
@@ -63,24 +75,29 @@
   .article {
     &__container {
       flex-direction: column;
-      padding: 2.6rem;
+      padding: 2rem;
     }
 
     &__image {
       width: 100%;
       height: 300px;
+      margin-bottom: 1rem;
     }
 
     &__description {
       width: 100%;
+      height: 200px;
       padding: 0;
 
       h3 {
-        margin-top: 25px;
+        margin-bottom: 1.5rem;
         font-size: $large;
+        line-height: 1.6rem;
+        color: $blue;
+        -webkit-line-clamp: 2;
       }
 
-      p, 
+      p,
       a {
         font-size: 18px;
         line-height: 30px;

src/components/BlogPage/BlogContainer.js

@@ -1,31 +1,32 @@
 import React from "react"
-
 import { useBanner, useBlog } from "../../hooks"
 
 import Layout from "../../components/layout"
-import BlogGrid from './BlogGrid/BlogGrid'
-import BlogArticle from './BlogArticle/BlogArticle'
+import BlogGrid from "./BlogGrid/BlogGrid"
+import BlogArticle from "./BlogArticle/BlogArticle"
 
 import { Seo, BannerActionCall } from "../index"
 
 import "./BlogContainer.scss"
 
 const Blog = () => {
-
   const bannerData = useBanner()
   const blogData = useBlog()
   const data = blogData?.allStrapiBlogCategory?.nodes
-  
+
   const bannerBlog = bannerData?.allStrapiBanners?.nodes.find(
     banner => banner.page === "blog" && banner.type === "bgColor"
   )
-    
+
   const bannerActionCall = bannerData?.allStrapiBanners?.nodes.find(
     banner => banner.page === "blog" && banner.type === "actionCall"
   )
-
-  const { pageTitle, pageDescription, pageKeywords } = blogData?.allStrapiBlogPage?.nodes[0]?.seo
 
+  const {
+    pageTitle,
+    pageDescription,
+    pageKeywords,
+  } = blogData?.allStrapiBlogPage?.nodes[0]?.seo
 
   return (
     <Layout>
@@ -50,7 +51,7 @@ const Blog = () => {
                   key={idx}
                   image={item.image}
                   title={item.title}
-                  summary={item.summary.substring(0, 85)}
+                  summary={item.summary}
                   slug={"/blog/" + item.slug}
                   text="Ver más"
                 />

src/components/BlogPage/BlogGrid/BlogGrid.js

@@ -1,5 +1,4 @@
 import React from 'react'
-
 import './BlogGrid.scss'
 import Pagination from '../../Pagination/Pagination'
 

src/templates/BlogItemDetail.js

@@ -1,6 +1,8 @@
 import React from "react"
 import { graphql } from "gatsby"
 import showdown from "showdown"
+// import ReactMarkdown from "react-markdown"
+import MarkdownView from "react-showdown"
 import Layout from "../components/layout"
 import { Seo } from "../components/index.js"
 import { BannerTop } from "../components/index.js"
@@ -12,21 +14,18 @@ const BlogDetail = ({ data }) => {
   const bannerTop = { title, image }
 
   let { summary } = author
-  let converter = new showdown.Converter()
-  let html = converter.makeHtml(description)
-
-  const ReplaceHtml = () => {
-    return { __html: html }
-  }
-
+
   return (
     <Layout>
       <Seo title={title} />
       <BannerTop banner={bannerTop} />
       <div className="detail__container row">
         <div className="col-lg-12">
           <div className="detail__description">
-            <p dangerouslySetInnerHTML={ReplaceHtml()} />
+            <MarkdownView
+              markdown={description}
+            />
+            {/* <ReactMarkdown source={description} /> */}
             <div className="detail__description-author">
               {author?.map(author => (
                 <div className="detail__box-author">
@@ -88,7 +87,7 @@ export const query = graphql`
           image {
             localFile {
               childImageSharp {
-                gatsbyImageData
+                gatsbyImageData(width: 200)
               }
             }
           }

src/templates/BlogItemDetail.scss

@@ -22,6 +22,7 @@
     h5,
     h6 {
       font-size: $large;
+      color: $blue;
       em {
         font-size: $large;
       }
@@ -64,7 +65,6 @@
       max-width: 95%;
       margin: 1.8rem auto 3rem;
       border-radius: 3px;
-      box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
     }
 
     blockquote {
@@ -208,7 +208,7 @@
     &__description {
       ul {
         li {
-          font-size: 16px;
+          font-size: 18px;
         }
       }
 
@@ -243,8 +243,7 @@
     }
 
     &__box-author {
-      flex-direction: row;
-      margin: 25px auto;
+      margin: 1.5rem 1rem;
     }
 
     &__box-author-image {
@@ -272,7 +271,7 @@
     }
 
     &__description {
-      padding: 4rem 5rem 3rem;
+      padding: 4rem 2rem 3rem;
 
       h1,
       h2,
@@ -305,11 +304,11 @@
     &__description-author {
       display: flex;
       justify-content: center;
-      margin: 3rem 1rem 1rem;
+      margin: 3rem 0 1rem;
     }
 
     &__box-author {
-      margin: 1.5rem;
+      margin: .7rem;
     }
 
     &__box-autor-description {