Legibilidad de texto

src/components/Navbar.js

@@ -12,17 +12,27 @@ class Navbar extends Component {
     isOpen: false,
   };
 
+  componentDidMount() {
+    window.forceNavToClose = this.forceMeToClose.bind(this);
+    this.navEnd.onclick = ()=>{
+      this.forceMeToClose();
+    }
+  }
+
   handleMenuToggle = () => {
     const { isOpen } = this.state;
     this.setState({ isOpen: !isOpen });
   };
 
+  forceMeToClose = () => {
+    this.setState({ isOpen: false });
+  };
+
   render() {
     const { isOpen } = this.state;
     return (
       <nav
         className="navbar is-vertical-spaced is-transparent"
-        role="navigation"
         aria-label="main navigation"
       >
         <div className="navbar-brand">
@@ -48,49 +58,49 @@ class Navbar extends Component {
               Blog
             </Link>
           </div>
-          <div className="navbar-end is-flex-touch is-justify-center">
+          <div className="navbar-end is-flex-touch is-justify-center" ref={el=>this.navEnd = el}>
             <ExternalLink
               eventLabel="Icono Facebook"
               to="https://www.facebook.com/horchatajs/"
               className="navbar-item"
               target="_blank"
-              rel="noopener"
+              rel="noopener noreferrer"
             >
               <figure className="image is-16x16">
-                <img src={facebook} />
+                <img src={facebook} alt='Facebook'/>
               </figure>
             </ExternalLink>
             <ExternalLink
               eventLabel="Icono Twitter"
               to="https://twitter.com/HorchataJS"
               className="navbar-item"
               target="_blank"
-              rel="noopener"
+              rel="noopener noreferrer"
             >
               <figure className="image is-16x16">
-                <img src={twitter} />
+                <img src={twitter} alt='Twitter'/>
               </figure>
             </ExternalLink>
             <ExternalLink
               eventLabel="Icono Instagram"
               to="https://www.instagram.com/horchatajs/"
               className="navbar-item"
               target="_blank"
-              rel="noopener"
+              rel="noopener noreferrer"
             >
               <figure className="image is-16x16">
-                <img src={instagram} />
+                <img src={instagram} alt='Instagram'/>
               </figure>
             </ExternalLink>
             <ExternalLink
               eventLabel="Icono Github"
               to="https://github.com/horchatajs"
               className="navbar-item"
               target="_blank"
-              rel="noopener"
+              rel="noopener noreferrer"
             >
               <figure className="image is-16x16">
-                <img src={github} />
+                <img src={github} alt='Github'/>
               </figure>
             </ExternalLink>
           </div>

src/layouts/all.scss

@@ -59,3 +59,11 @@ body {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
 }
+
+//////  BULMA MOBILE BREAKPOINT ///////
+@media all and (max-width:768px){
+  .content.has-custom-font-size-on-mobile{
+    font-size: 0.875rem
+  }
+}
+//////  BULMA MOBILE BREAKPOINT ///////

src/layouts/index.js

@@ -5,44 +5,60 @@ import Helmet from 'react-helmet';
 import Navbar from '../components/Navbar';
 import './all.scss';
 
-const TemplateWrapper = ({
-  children,
-  data: {
-    site: { siteMetadata: meta },
-  },
-}) => (
-  <div className="container">
-    <Helmet>
-      <meta charSet="utf-8" />
-      {/* Facebook Open Graph */}
-      <meta property="og:url" content={meta.siteUrl} />
-      <meta property="og:type" content="website" />
-      <meta property="og:title" content={meta.title} />
-      <meta
-        property="og:image"
-        content={`${meta.siteUrl}/img/share-logo.png"`}
-      />
-      <meta property="og:image:width" content="200" />
-      <meta property="og:image:height" content="200" />
-      <meta property="og:description" content={meta.description} />
-      <meta property="og:site_name" content={meta.title} />
+class TemplateWrapper extends React.Component {
+  componentDidMount() {
+    this.mainWrapper.onclick = () => {
+      window.forceNavToClose();
+    };
+  }
+
+  componentDidUpdate() {
+    window.forceNavToClose();
+  }
 
-      {/* Twitter Card */}
-      <meta name="twitter:card" content="summary" />
-      <meta name="twitter:site" content={meta.siteUrl} />
-      <meta name="twitter:url" content={meta.siteUrl} />
-      <meta name="twitter:title" content={meta.title} />
-      <meta name="twitter:description" content={meta.description} />
-      <meta
-        name="twitter:image"
-        content={`${meta.siteUrl}/img/share-logo.png"`}
-      />
-      <body className="has-background-white-ter" />
-    </Helmet>
-    <Navbar />
-    {children()}
-  </div>
-);
+  render() {
+    const { children, data } = this.props;
+    const { site: { siteMetadata: meta }} = data;
+
+      return (
+        <div className="container">
+          {
+            meta && 
+              <Helmet>
+                <meta charSet="utf-8" />
+                {/* Facebook Open Graph */}
+                <meta property="og:url" content={meta.siteUrl} />
+                <meta property="og:type" content="website" />
+                <meta property="og:title" content={meta.title} />
+                <meta
+                  property="og:image"
+                  content={`${meta.siteUrl}/img/share-logo.png"`}
+                />
+                <meta property="og:image:width" content="200" />
+                <meta property="og:image:height" content="200" />
+                <meta property="og:description" content={meta.description} />
+                <meta property="og:site_name" content={meta.title} />
+
+                {/* Twitter Card */}
+                <meta name="twitter:card" content="summary" />
+                <meta name="twitter:site" content={meta.siteUrl} />
+                <meta name="twitter:url" content={meta.siteUrl} />
+                <meta name="twitter:title" content={meta.title} />
+                <meta name="twitter:description" content={meta.description} />
+                <meta
+                  name="twitter:image"
+                  content={`${meta.siteUrl}/img/share-logo.png"`}
+                />
+                <body className="has-background-white-ter" />
+              </Helmet>
+            }
+          <Navbar />
+          <div ref={el=>this.mainWrapper = el}>{children()}</div>
+        </div>
+      );
+
+  }
+}
 
 TemplateWrapper.propTypes = {
   children: PropTypes.func,

src/pages/blog.js

@@ -17,8 +17,8 @@ export default class BlogPage extends React.Component {
         {posts.map(({ node: post }) => (
           <Link className="post is-block" to={post.fields.slug} key={post.id}>
             <section className="section is-rounded has-background-white has-shadow has-shadow-hovered">
-              <div className="content">
-                <h2 className="is-size-4 has-text-black has-text-weight-bold">
+              <div className="content  has-custom-font-size-on-mobile">
+                <h2 className="has-text-black has-text-weight-bold">
                   {post.frontmatter.title}
                 </h2>
                 <p>{post.excerpt}</p>

src/pages/blog/2018-08-11-bienvenidos-al-blog-de-horchatajs.md

@@ -8,6 +8,5 @@ tags:
   - comunidad
   - meta
 ---
-
-Bienvenido/a al blog de la comunidad HorchataJS. En este espacio queremos compartir artículos relacionados a JavaScript y a la comunidad de HorchataJS.
+Bienvenido/a al blog de la comunidad HorchataJS. En este espacio queremos compartir artículos relacionados a JavaScript y a la comunidad.
 Si tenés ganas de compartir algo no dudes en escribir a [nuestro correo electrónico](mailto:[email protected]) o sugerir tu idea en [nuestro repositorio en GitHub](https://github.com/horchatajs/website/issues).

src/pages/blog/2018-09-08-resena-horchatajs-agosto-2018.md

@@ -0,0 +1,82 @@
+---
+templateKey: blog-post
+title: Reseña HorchataJS Agosto 2018
+date: '2018-09-08T12:13:36-06:00'
+description: Resumen del evento HorchataJS del pasado 25 de agosto del 2018.
+tags:
+  - horchatajs
+  - meetup
+  - algoritmos
+  - nodejs
+  - web audio api
+  - strapi
+  - '2018'
+---
+
+El pasado sábado tuvimos el evento correspondiente a agosto de nuestra comunidad, ocasión donde nuevamente nos reunimos para tomar horchata y compartir sobre JavaScript.
+
+La tarde la comenzamos con la respectiva bienvenida y agradecimiento a los asistentes, compartimos un poco sobre la comunidad para quienes nos acompañaban por primera vez y recalcamos la importancia de nuestro código de conducta para todos nuestros eventos.
+
+En este evento tuvimos el apoyo de [The Nest](https://thenestsv.com/), quienes nos brindaron el espacio para realizar el evento. [Applaudo Studios](https://applaudostudios.com/) quienes nos ayudaron con los postres y stickers. Y por supuesto, [Abuela Chepa](https://www.facebook.com/abuelachepa/) que nos apoyó nuevamente con la bebida oficial de la comunidad.
+
+![Asistentes prestando atención durante una charla](/img/dsc_0030.jpg)
+
+Charlas impartidas en el evento:
+
+## Fundamentos de algoritmos con JS
+
+La primera charla "Fundamentos de algoritmos con JS" estuvo a cargo de René quien nos compartió sobre conceptos básicos de algoritmos y su impacto en el rendimiento del código.
+
+> Podés encontrar la presentación de René [aquí ](https://docs.google.com/presentation/d/1-zUcByx2OxgOMB1gjMF5p5OH3kv55RcDSKxbm6zSudE/)y seguir los ejercicios en su respectivo [respositorio en github](https://github.com/ragar90/horchatajs_algoritmos).
+
+![René García compartiendo sobre Fundamentos de algoritmos con JS.](/img/dsc_0022.jpg)
+
+## Resolucion Club: la mejor forma de aprender es haciendo
+
+Después, Alexander nos compartió su experiencia con Node.js y sobre como aplicó todo lo aprendido en su proyecto "Resolucion Club".
+
+> Podés visitar el proyecto [aquí](http://resolucion.club/).
+
+![Alexander Escobar explicando su proyecto "Resolucion Club".](/img/dsc_0043.jpg)
+
+## Networking
+
+Luego de las primeras 2 charlas tuvimos un momento de descanso para poder disfrutar de un postre acompañado de un excelente vaso de horchata. Realizamos algunas rifas de promocionales entre los asistentes y aprovechamos para tomar la foto grupal de la comunidad.
+
+Quienes asistieron también aprovecharon este espacio para conocer más personas y compartir contactos.
+
+![Asistentes disfrutando de un vaso de horchata.](/img/dsc_0071.jpg)
+
+## Web Audio API
+
+En la tercera charla, Megan nos compartió una muy interesante presentación sobre Web Audio API. Aprendimos sobre la interfaz de audio que nos ofrecen los navegadores y los diferentes usos que le podemos dar. La charla de Megan fue en inglés y pudimos contar con traducción a español en vivo.
+
+> Podés leer la transcripción y los ejemplos de esta charla [aquí](https://github.com/meslater1030/web-audio-api-sample).
+
+![Megan Slater con su charla Web Audio API Functionality.](/img/dsc_0073.jpg)
+
+## Introducción a Strapi
+
+La última charla estuvo a cargo de David, quien nos explicó su experiencia con Strapi, ventajas y desventajas de la herramienta y una introducción para utilizarlo en nuestros proyectos.
+
+![David Maravilla con su charla Introducción a Strapi.](/img/dsc_0092.jpg)
+
+En este evento tuvimos una asistencia nuevamente de más de 90 personas, lo cuál nos alegra mucho ya que muestra que continuamos creciendo como comunidad.
+
+Como en cada evento, agradecemos inmenzamente a todas las personas que asistieron e invitamos a que nos sigan acompañando en futuros eventos.
+
+Un agradecimiento especial a [Jorge Fagoaga](https://www.upwork.com/o/profiles/users/_~01916953daa91e5655/) por su apoyo en la traducción de una de las charlas del evento.
+
+![Foto grupal de la comunidad HorchataJS durante el evento de agosto.](/img/dsc_0060.jpg)
+
+> El álbum completo de fotos se encuentra [en nuestra página de Facebook](https://www.facebook.com/pg/horchatajs/photos/?tab=album&album_id=533890593737855).
+
+Para mantenerte pendiente de los evento de la comunidad te invitamos a registrarte en nuestro [grupo en Meetup](https://www.meetup.com/es-ES/horchatajs/) y seguirnos en nuestras redes sociales:
+
+Facebook: <https://www.facebook.com/horchatajs/>
+
+Twitter: <https://twitter.com/horchatajs>
+
+Linkedin: <https://www.linkedin.com/company/horchatajs/>
+
+Instagram: <https://www.instagram.com/horchatajs/>