Skip to content

Commit 7c8e50d

Browse files
cesardlinxcesardlinx
committed
feat(blog): crear template para entrada del blog
creacion de template para entrada del blog
1 parent 02cae0f commit 7c8e50d

9 files changed

Lines changed: 194 additions & 32 deletions

File tree

‎gatsby-config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ module.exports = {
4747
options: {
4848
extensions: [`.mdx`, `.md`],
4949
defaultLayouts: {
50-
// articles: require.resolve('./src/templates/articles-layout.js'),
5150
default: require.resolve("./src/templates/blog-entry.js"),
5251
},
5352
},

‎gatsby-node.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
1-
exports.onCreateNode = ({ node }) => {
2-
// // if (node.internal.type === `MarkdownRemark`) {
3-
// console.log(node.internal.type)
4-
// // }
5-
}
1+
exports.onCreateNode = ({ node }) => {};
2+
3+
exports.createSchemaCustomization = ({ actions }) => {
4+
const { createTypes } = actions;
5+
const typeDefs = `
6+
type Mdx implements Node {
7+
frontmatter: Frontmatter
8+
}
9+
10+
type Frontmatter {
11+
author: AuthorsJson @link(by: "github")
12+
}
13+
`;
14+
createTypes(typeDefs);
15+
};

‎src/components/author/author.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from "react";
2+
import styles from "./author.module.css";
3+
import githubImg from "../../images/icons/github-small.svg";
4+
import emailImg from "../../images/icons/email.svg";
5+
import PropTypes from "prop-types";
6+
7+
const Author = ({ name, photo, date, github, email }) => {
8+
let githubIcon = null;
9+
if (github) {
10+
githubIcon = (
11+
<a className={styles.author__icon} href={github}>
12+
<img src={githubImg} />
13+
</a>
14+
);
15+
}
16+
17+
let emailIcon = null;
18+
if (email) {
19+
emailIcon = (
20+
<a className={styles.author__icon} href={email}>
21+
<img src={emailImg} />
22+
</a>
23+
);
24+
}
25+
return (
26+
<div className={styles.author}>
27+
<div className={styles.author__image}>
28+
<img src={photo} alt={name} />
29+
</div>
30+
<div className={styles.author__info}>
31+
<p className={styles.author__name}>{name}</p>
32+
<p className={styles.author__date}>{date}</p>
33+
<div>
34+
{githubIcon}
35+
{emailIcon}
36+
</div>
37+
</div>
38+
</div>
39+
);
40+
};
41+
42+
Author.propTypes = {
43+
name: PropTypes.string,
44+
photo: PropTypes.string,
45+
date: PropTypes.string,
46+
github: PropTypes.string,
47+
email: PropTypes.string,
48+
};
49+
50+
export default Author;

‎src/components/author/author.module.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.author {
2+
display: flex;
3+
margin: 3em 0;
4+
}
5+
6+
.author__image {
7+
width: 4.5em;
8+
height: 4.5em;
9+
border-radius: 50%;
10+
overflow: hidden;
11+
margin: 0 1em;
12+
}
13+
14+
.author__image img {
15+
display: block;
16+
width: 100%;
17+
}
18+
19+
.author__info {
20+
width: 50%;
21+
}
22+
23+
.author__name {
24+
font-size: 1rem;
25+
font-weight: bold;
26+
}
27+
28+
.author__date {
29+
font-size: .8rem;
30+
color: #737373;
31+
}
32+
33+
.author__icon {
34+
width: 24px;
35+
height: 24px;
36+
display: inline-block;
37+
}
38+
39+
.author__icon:first-child {
40+
margin-right: 5px;
41+
}

‎src/data/authors.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
[
2+
{
3+
"rol": "Co-Organizador",
4+
"name": "Richard Palacios G",
5+
"photo": "https://avatars0.githubusercontent.com/u/11642622?v=4",
6+
"github": "https://richardpalaciosg.dev/",
7+
"website": "https://richardpalaciosg.dev/",
8+
"email": "https://richardpalaciosg.dev/",
9+
"twitter": "https://richardpalaciosg.dev/",
10+
"description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. "
11+
},
12+
{
13+
"rol": "Co-Organizador",
14+
"name": "Israel Teneda",
15+
"photo": "https://avatars2.githubusercontent.com/u/20668624?v=4",
16+
"github": "https://github.com/israteneda",
17+
"website": "https://github.com/israteneda",
18+
"email": "https://github.com/israteneda",
19+
"twitter": "https://github.com/israteneda",
20+
"description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. "
21+
},
22+
{
23+
"rol": "Co-Organizador",
24+
"name": "Edisson Reinozo",
25+
"photo": "https://avatars3.githubusercontent.com/u/14936466?v=4",
26+
"github": "https://github.com/edzzn",
27+
"website": "http://edzzn.com/",
28+
"email": "http://edzzn.com/",
29+
"twitter": "http://edzzn.com/",
30+
"description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. "
31+
},
32+
{
33+
"rol": "Co-Organizador",
34+
"name": "Jordan Jaramillo",
35+
"photo": "https://avatars2.githubusercontent.com/u/62086742?v=4",
36+
"github": "https://github.com/jordanrjcode",
37+
"website": "https://github.com/jordanrjcode",
38+
"email": "https://github.com/jordanrjcode",
39+
"twitter": "https://github.com/jordanrjcode",
40+
"description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. "
41+
}
42+
]

‎src/pages/blog.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Layout from "../components/layout/layout";
44
import SEO from "../components/seo";
55

66
import { StaticQuery, graphql, Link } from "gatsby";
7-
import { render } from "react-dom";
87

98
function BlogPage(articulos) {
109
return (
@@ -15,7 +14,7 @@ function BlogPage(articulos) {
1514

1615
<ul>
1716
{articulos.map((articulo) => (
18-
<li>
17+
<li key={articulo.id}>
1918
<Link to={`/blog/${articulo.slug}`}>{articulo.title}</Link>
2019
</li>
2120
))}
@@ -33,6 +32,7 @@ function renderBlogPage() {
3332
articulos: allMdx {
3433
edges {
3534
node {
35+
id
3636
slug
3737
frontmatter {
3838
title
@@ -48,6 +48,7 @@ function renderBlogPage() {
4848
return {
4949
...articulo.node.frontmatter,
5050
slug: articulo.node.slug,
51+
id: articulo.node.id,
5152
};
5253
});
5354
return BlogPage(articulosFormateados);

‎src/pages/blog/gatsby-deploy.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: Deploy de un sitio de Gatsby en Netlify
33
date: "2020-10-05"
44
updated: "2020-10-05"
55
description: Como realizar el deploy de un sitio construido con Gatsby a Netlify
6+
author: "https://github.com/edzzn"
67
---
78

89
Esta es la guía base para realizar el deploy de una página construida con el framework Gatsby,

‎src/templates/blog-entry.js‎

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,45 @@
11
import React from "react";
22
import Layout from "../components/layout/layout";
33
import SEO from "../components/seo";
4+
import { useStaticQuery, graphql } from "gatsby";
5+
import styles from "./blog-entry.module.css";
6+
import Author from "../components/author/author";
47

5-
// import PropTypes from 'prop-types';
6-
7-
export default function BlogEntry({ pageContext, children }) {
8+
const BlogEntry = ({ children }) => {
9+
const data = useStaticQuery(graphql`
10+
query BlogEntry {
11+
mdx {
12+
frontmatter {
13+
title
14+
date(formatString: "MMMM DD, YYYY")
15+
author {
16+
photo
17+
name
18+
github
19+
email
20+
}
21+
}
22+
}
23+
}
24+
`);
25+
const { title, date } = data.mdx.frontmatter;
26+
const { name, photo, github, email } = data.mdx.frontmatter.author;
827
return (
928
<Layout>
10-
<SEO
11-
keywords={[`gatsby`, `tailwind`, `react`, `tailwindcss`]}
12-
title="About"
13-
/>
14-
15-
<section className="flex-1 w-full max-w-4xl px-4 py-8 mx-auto md:px-8 md:py-16">
16-
<h1>{pageContext.frontmatter.title}</h1>
17-
<br/>
18-
<h4>{pageContext.frontmatter.description}</h4>
19-
<br/>
29+
<SEO keywords={[`gatsby`, `react`]} title={title} />
30+
<section className={styles.blog}>
31+
<h1 className={styles.blog__title}>{title}</h1>
32+
<Author
33+
name={name}
34+
photo={photo}
35+
date={date}
36+
github={github}
37+
email={email}
38+
/>
2039
<section>{children}</section>
21-
{/* <div className="md:w-2/3 md:mr-8"></div> */}
2240
</section>
2341
</Layout>
2442
);
25-
}
43+
};
2644

27-
// BlogEntry.prototype = {
28-
// children: PropTypes.object,
29-
// // pageContext: PropTypes.shape({
30-
// // title: PropTypes.string.isRequired,
31-
// // date: PropTypes.string.isRequired,
32-
// // description: PropTypes.string,
33-
// // })
34-
// pageContext: PropTypes.any
35-
// }
45+
export default BlogEntry;

‎src/templates/blog-entry.module.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.blog {
2+
margin: 2em 6em 4em;
3+
}
4+
5+
.blog__title {
6+
text-align: center;
7+
font-weight: 700;
8+
}

0 commit comments

Comments
 (0)