basic Blog setup

Author: edzzn

.eslintrc

@@ -12,15 +12,16 @@
   },
   "settings": {
     "react": {
-       "version": "detect"
-     }
-  },
-  "extends": [
-    // https://eslint.org/docs/rules/
-    "eslint:recommended",
-    // https://github.com/yannickcr/eslint-plugin-react#recommended
-    "plugin:react/recommended",
-    // https://github.com/benmosher/eslint-plugin-import
-    "plugin:import/recommended"
-  ]
-}
+      "version": "detect"
+    }
+  }
+  // },
+  // "extends": [
+  //   // https://eslint.org/docs/rules/
+  //   "eslint:recommended",
+  //   // https://github.com/yannickcr/eslint-plugin-react#recommended
+  //   "plugin:react/recommended",
+  //   // https://github.com/benmosher/eslint-plugin-import
+  //   "plugin:import/recommended"
+  // ]
+}

hola.mdx

@@ -1,16 +1,12 @@
 ---
 title: Hola
-date: '2020-05-25'
-updated: '2020-05-25'
-slug: hola
+date: "2020-05-25"
+updated: "2020-05-25"
 description: Como añadir estilo a los bloques de código en nuestras páginas con Gatsby.
 ---
 
 # QUE TAL
 
 Hloasdasd
 
-
 asdasd
-
-

src/css/style.css

@@ -1,5 +1,23 @@
 /*! purgecss start ignore */
 @tailwind base;
 @tailwind components;
+
+h1 {
+    @apply text-5xl;
+}
+
+h2 {
+    @apply text-4xl;
+}
+
+h3 {
+    @apply text-3xl;
+}
+
+h4 {
+    @apply text-2xl;
+}
+
+
 /*! purgecss end ignore */
-@tailwind utilities;
+@tailwind utilities;

src/pages/blog.js

@@ -0,0 +1,59 @@
+import React from "react";
+
+import Layout from "../components/layout";
+import SEO from "../components/seo";
+
+import { StaticQuery, graphql, Link } from "gatsby";
+import { render } from "react-dom";
+
+function BlogPage(articulos) {
+  return (
+    <Layout>
+      <SEO title="Blog de Javascript Ecuador" />
+      <div>
+        <h2>Lista de blogs:</h2>
+
+        <ul>
+          {articulos.map((articulo) => (
+            <li>
+              <Link to={`/blog/${articulo.slug}`}>{articulo.title}</Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Layout>
+  );
+}
+
+function renderBlogPage() {
+  return (
+    <StaticQuery
+      query={graphql`
+        query BlogList {
+          articulos: allMdx {
+            edges {
+              node {
+                slug
+                frontmatter {
+                  title
+                  description
+                }
+              }
+            }
+          }
+        }
+      `}
+      render={(data) => {
+        const articulosFormateados = data.articulos.edges.map((articulo) => {
+          return {
+            ...articulo.node.frontmatter,
+            slug: articulo.node.slug,
+          };
+        });
+        return BlogPage(articulosFormateados);
+      }}
+    />
+  );
+}
+
+export default renderBlogPage;

src/pages/blog/hola.mdx

@@ -1,16 +1,14 @@
 ---
 title: Hola
-date: '2020-05-25'
-updated: '2020-05-25'
-slug: hola
+date: "2020-05-25"
+updated: "2020-05-25"
 description: Como añadir estilo a los bloques de código en nuestras páginas con Gatsby.
 ---
 
-# QUE TAL
+## Header
 
-Hloasdasd
-
-
-asdasd
+### Subheader
 
+#### SubSubHeader
 
+Esta es una **entrada** del blog

src/templates/blog-entry.js

@@ -1,15 +1,24 @@
-import React from 'react';
+import React from "react";
+import Layout from "../components/layout";
+import SEO from "../components/seo";
 
 // import PropTypes from 'prop-types';
 
-// export default function BlogEntry({pageContext, children}){
-    export default function BlogEntry(){
-    return  <div>
-                <h1>Blog entry</h1>
-                <hr />
-                {/* <p>{pageContext.title}</p>
-                {children} */}
-            </div>
+export default function BlogEntry({ pageContext, children }) {
+  return (
+    <Layout>
+      <SEO
+        keywords={[`gatsby`, `tailwind`, `react`, `tailwindcss`]}
+        title="About"
+      />
+
+      <section className="flex flex-col md:flex-row">
+        <h1>{pageContext.frontmatter.title}</h1>
+        <section>{children}</section>
+        {/* <div className="md:w-2/3 md:mr-8"></div> */}
+      </section>
+    </Layout>
+  );
 }
 
 // BlogEntry.prototype = {
@@ -20,4 +29,4 @@ import React from 'react';
 //     //     description: PropTypes.string,
 //     // })
 //     pageContext: PropTypes.any
-// }
+// }