Skip to content

Commit 4942ded

Browse files
brunoportesiobrunoportesio
authored
Merge pull request #108 from bitlogic/SBIT-563-Implementar-cambios-de-categorías-de-blogs-en-sitio-en-ingles
Se agregan los cambios para paginas de blogs
2 parents 3cda084 + e7c3bf4 commit 4942ded

File tree

9 files changed

+351
-102
lines changed

9 files changed

+351
-102
lines changed

‎gatsby-node.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,4 +126,33 @@ exports.createPages = async ({ graphql, actions }) => {
126126
},
127127
})
128128
})
129+
130+
// 3) Category pages
131+
const categoryResult = await graphql(`
132+
{
133+
allStrapiEnglishBlogCategory {
134+
nodes {
135+
name
136+
slug
137+
}
138+
}
139+
}
140+
`)
141+
if (categoryResult.errors) {
142+
reporter.panicOnBuild(
143+
"Error creating category pages",
144+
categoryResult.errors
145+
)
146+
}
147+
const categoryTemplate = path.resolve("./src/templates/CategoryPage.js")
148+
categoryResult.data.allStrapiEnglishBlogCategory.nodes.forEach(category => {
149+
const slugLower = category.slug.toLowerCase()
150+
createPage({
151+
path: `/blog/${slugLower}`,
152+
component: categoryTemplate,
153+
context: {
154+
name: category.name,
155+
},
156+
})
157+
})
129158
}

‎src/components/BlogPage/BlogArticle/BlogArticle.js‎

Lines changed: 50 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,66 @@
11
import React from "react"
22
import { Link } from "gatsby"
3-
// import ReactMarkdown from "react-markdown"
43
import MarkdownView from "react-showdown"
5-
import "./BlogArticle.scss"
6-
import CustomImage from "../../CustomImage/CustomImage"
74
import PropTypes from "prop-types"
5+
import CustomImage from "../../CustomImage/CustomImage"
6+
import "./BlogArticle.scss"
87

9-
const BlogArticle = ({ title, summary, image, slug, text }) => {
10-
11-
12-
return (
13-
<div className="article__container" data-nosnippet>
14-
<CustomImage
15-
image={image}
16-
alt={image?.alternativeText || title}
17-
className="article__image"
18-
width={140}
19-
height={170}
20-
/>
21-
<div className="article__description">
22-
<h3>{`${title}`}</h3>
23-
<div>
24-
<MarkdownView
25-
markdown={`${summary}`}
26-
dangerouslySetInnerHTML={{ __html: summary }} />
27-
{/* <ReactMarkdown source={`${summary} ...`} /> */}
28-
</div>
29-
<div className="article__link">
30-
<Link to={slug}>
31-
<small>{text}</small>
32-
</Link>
33-
</div>
8+
const BlogArticle = ({
9+
title,
10+
summary,
11+
image,
12+
slug,
13+
text,
14+
destacado = false,
15+
}) => (
16+
<div
17+
className={`article__container${destacado ? ' article--destacado' : ''}`}
18+
data-nosnippet
19+
>
20+
{destacado && (
21+
<span className="article__badge">Destacado</span>
22+
)}
23+
24+
<CustomImage
25+
image={image}
26+
alt={image?.alternativeText || title}
27+
className="article__image"
28+
width={140}
29+
height={170}
30+
/>
31+
32+
<div className="article__description">
33+
<h4 className="article__title">{title}</h4>
34+
<MarkdownView markdown={`${summary}`}
35+
dangerouslySetInnerHTML={{ __html: summary }}
36+
/>
37+
<div className="article__link">
38+
<Link to={slug}>
39+
<small>{text || 'Read this blog'}</small>
40+
</Link>
3441
</div>
3542
</div>
36-
)
37-
}
43+
</div>
44+
)
3845

3946
BlogArticle.propTypes = {
4047
title: PropTypes.string.isRequired,
41-
slug: PropTypes.string.isRequired,
4248
summary: PropTypes.string.isRequired,
43-
text: PropTypes.string,
4449
image: PropTypes.shape({
4550
alternativeText: PropTypes.string,
4651
url: PropTypes.string,
47-
})
52+
localFile: PropTypes.shape({
53+
childImageSharp: PropTypes.shape({
54+
gatsbyImageData: PropTypes.object.isRequired,
55+
}),
56+
}),
57+
}).isRequired,
58+
slug: PropTypes.string.isRequired,
59+
text: PropTypes.string,
60+
destacado: PropTypes.bool,
4861
}
4962

50-
export default BlogArticle
63+
export default BlogArticle;
64+
65+
66+

‎src/components/BlogPage/BlogContainer.js‎

Lines changed: 46 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,62 @@ import React from "react"
22
import { useBlog } from "../../hooks"
33
import BlogGrid from "./BlogGrid/BlogGrid"
44
import BlogArticle from "./BlogArticle/BlogArticle"
5-
import { Layaout } from ".."
6-
import Banner from "../Banner/Banner"
75
import Seo from "../Seo/Seo"
8-
9-
6+
import Layout from "../layout"
7+
import Banner from "../Banner/Banner"
108
import "./BlogContainer.scss"
119

1210
const Blog = () => {
11+
const { allStrapiBlogCategory, allStrapiArticle, allStrapiBlogPage } = useBlog()
12+
const categorias = allStrapiBlogCategory.nodes
13+
const articulos = allStrapiArticle.nodes
14+
const { seo, banner } = allStrapiBlogPage.nodes[0] || {}
15+
const callToAction = allStrapiBlogPage.nodes[0]?.callToActionArticle
1316

14-
const blogData = useBlog()
15-
const data = blogData?.allStrapiBlogCategory?.nodes
16-
const dataArticles = blogData?.allStrapiArticle?.nodes
17-
const defaultCategory = data[0]?.name
18-
const filterArticle = data.map(category => dataArticles.filter(article => category.name === article?.blog_category?.name || defaultCategory))
19-
const { seo, banner, callToAction } = blogData.allStrapiBlogPage.nodes[0]
20-
17+
// Para cada categoría, tomo los primeros 3 artículos
18+
const articulosPorCategoria = categorias
19+
.map(categoria => {
20+
const articulosCat = articulos.filter(
21+
art => art.blog_category?.slug === categoria.slug
22+
)
23+
return {
24+
name: categoria.name,
25+
slug: categoria.slug,
26+
items: articulosCat.slice(0, 3),
27+
}
28+
})
29+
.filter(grupo => grupo.items.length > 0)
2130

2231
return (
23-
<Layaout>
32+
<Layout>
2433
<Seo
25-
title={seo.pageTitle}
26-
description={seo.pageDescription}
27-
keywords={seo.pageKeywords}
34+
title={seo?.pageTitle}
35+
description={seo?.pageDescription}
36+
keywords={seo?.pageKeywords}
2837
/>
2938
<Banner data={banner} />
30-
{data.length > 0 && (
31-
<div className="blog__container container">
32-
{filterArticle?.map((category, idx) => (
33-
<BlogGrid key={data[idx].name} title={category[0]?.blog_category?.name}>
34-
{category.map(item => (
35-
<BlogArticle
36-
key={item.id}
37-
image={item.image}
38-
title={item.title}
39-
summary={item.summary}
40-
slug={"/blog/" + item.slug}
41-
text={callToAction}
42-
/>
43-
))}
44-
</BlogGrid>
45-
))}
46-
</div>
47-
)}
48-
</Layaout>
39+
40+
<div className="blog__container container">
41+
{articulosPorCategoria.map(({ name, slug, items }) => (
42+
<BlogGrid
43+
key={slug}
44+
title={name}
45+
viewAllHref={`/blog/${slug.toLowerCase()}`}
46+
>
47+
{items.map(item => (
48+
<BlogArticle
49+
key={item.id}
50+
image={item.image || item.imagePage}
51+
title={item.title}
52+
summary={item.summary}
53+
slug={`/blog/${item.slug}`}
54+
text={callToAction}
55+
/>
56+
))}
57+
</BlogGrid>
58+
))}
59+
</div>
60+
</Layout>
4961
)
5062
}
5163

‎src/components/BlogPage/BlogContainer.scss‎

Lines changed: 51 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,55 @@
44
width: 100%;
55
padding: 5px 15px 60px;
66
margin-bottom: 0px;
7+
8+
@media (min-width: $breakpoint-md) {
9+
padding: 0 45px;
10+
}
11+
12+
.blog__section {
13+
margin-bottom: 2rem;
14+
15+
&-header {
16+
display: flex;
17+
justify-content: space-between;
18+
align-items: center;
19+
padding: 0.5rem 0;
20+
border-bottom: 4px solid $alt;
21+
22+
.blog__section-title {
23+
font-size: 28px;
24+
color: $primary;
25+
margin: 0;
26+
padding-left: 0.5rem;
27+
}
28+
29+
.blog__view-all {
30+
font-size: 0.9rem;
31+
text-decoration: none;
32+
color: $primary;
33+
transition: filter 0.2s;
34+
35+
&:hover {
36+
filter: brightness(0.9);
37+
}
38+
}
39+
}
40+
41+
&-articles-grid {
42+
padding: 1rem;
43+
display: grid;
44+
grid-template-columns: 1fr;
45+
gap: 1.5rem;
46+
47+
@media (min-width: $breakpoint-md) {
48+
grid-template-columns: repeat(2, 1fr);
49+
}
50+
51+
@media (min-width: $breakpoint-lg) {
52+
grid-template-columns: repeat(3, 1fr);
53+
}
54+
}
55+
}
756
}
857

958
.banner__container {
@@ -40,10 +89,6 @@
4089
}
4190

4291
@media (min-width: $breakpoint-md) {
43-
.blog__container {
44-
padding: 0 45px;
45-
}
46-
4792
.banner__container {
4893
h3 {
4994
line-height: 50px;
@@ -56,15 +101,12 @@
56101
}
57102

58103
@media (min-width: $breakpoint-lg) {
59-
60104
.banner__container {
61105
h3 {
62106
display: flex;
63107
align-items: center;
64-
span {
65-
h3 {
66-
padding: 15px;
67-
}
108+
span h3 {
109+
padding: 15px;
68110
}
69111
}
70112
}

‎src/components/BlogPage/BlogGrid/BlogGrid.js‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
1-
import React from 'react'
2-
import './BlogGrid.scss'
3-
import Pagination from '../../Pagination/Pagination'
4-
import PropTypes from 'prop-types'
1+
import React from "react"
2+
import PropTypes from "prop-types"
3+
import { Link } from "gatsby"
4+
import "./BlogGrid.scss"
55

6-
const BlogGrid = ({ title, children }) => {
7-
return (
8-
<div className="grid__container" data-nosnippet>
9-
<h2>{title}</h2>
10-
{/* <div className="grid__content">{children}</div> */}
11-
<Pagination initialState={true} postPerPage="9" posts={children} />
6+
const BlogGrid = ({ title, viewAllHref, children }) => (
7+
<section className="blog__section" data-nosnippet>
8+
<header className="blog__section-header">
9+
<h2 className="blog__section-title">{title}</h2>
10+
{viewAllHref && (
11+
<Link to={viewAllHref} className="blog__view-all">
12+
See all
13+
</Link>
14+
)}
15+
</header>
16+
<div className="blog__section-articles-grid">
17+
{children}
1218
</div>
13-
)
14-
}
15-
19+
</section>
20+
)
1621
BlogGrid.propTypes = {
1722
title: PropTypes.string.isRequired,
18-
children: PropTypes.array.isRequired
23+
viewAllHref: PropTypes.string,
24+
children: PropTypes.node.isRequired,
25+
}
26+
BlogGrid.defaultProps = {
27+
viewAllHref: null,
1928
}
20-
2129
export default BlogGrid

0 commit comments

Comments
 (0)