Para tener un standar al momento de rectar un issue solicitando nuevas caracteristicas seria bueno crear un issue-template para tener una pauta de que informacion detallar.

Dejo una guia para hacerlo -> Configurar template Features Request

Si tienes alguna pregunta, comentala aqui o escribelo en el canal de Telegram de la Comunidad

Crear blog para el sitio, este tendrá las siguientes funciones las cuales después se pueden dividir en varias tareas incluyendo el diseño de ciertos componentes:

• Mostrar y listar artículos.

En el siguiente link puedes el prototipo en Figma para ver los colores y tamaños de cada item

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram

Tarea a realizar
Agregar la redireccion del siguiente url documento cuentas Javascript Ecuador
https://docs.google.com/spreadsheets/d/1nKXGaYJVTd8JTNIkTnz5wwg-z5QmxT95RAN_b69yog4/edit?usp=sharing
al menu CUENTAS .

¿Por qué se realizará?
Mostrar de forma transparente y actualizada el uso de las donaciones recibidas.

Recomendaciones
Aunque existe una pagina para el menu CUENTAS, no es muy necesaria una pagina para solo redirigir a este documento, en este caso ya no se deberia mostrar la pagina 'https://javascript.ec/cuentas' y solo mostrar en una nueva pestania el documento a redirigir.

Diseño en figma
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=1226%3A17289

Es necesarios seguir una pauta al redactar un pullrequest y asi mantener una guia de estilos.

Si tienes alguna pregunta, comentala aqui o escribenos al canal de Telegram de la comunidad

Al principio del desarrollo del sitio se planteó usar TailwindCSS por la "velocidad de prototipado", pero la mayoría de los estilos del sitio se están construyendo con CSS puro, por esta razón y otras mencionadas en #41 se ha decidido usar CSS puro en vez de TailwindCSS.

Para lo cual se va a ir migrando los componentes que están con TailwindCSS. Además se plantea usar módulos de CSS y un linter para usar la convención BEM

Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram

Tarea a realizar
Agregar props al componente Card para que permita modificar el tamaño de la tarjeta y la imagen

¿Por qué se realizará?
Para ajustar la sección al diseño

Recomendaciones
Cambiar el componente Card y agregar una prop mediante la cual se controle la altura pero que por default use la altura que tiene ahorita para no dañar la otra sección.

Hola a todos la página de a poco se va convirtiendo en realidad gracias a todos los contribuidores, nos gustaría saber si se prefiere trabajar con CSS Vanilla o TailwindCSS, ya que actualmente Gatsby está configurado con TailwindCSS pero la mayoría de componentes usan CSS normal.

La pregunta es, si les gustaría usar:

• Vanilla CSS
• TailwindCSS
• Usar tanto CSS puro como TailwindCSS en el proyecto

Al escribir un blog y añadir la numeración no se muestra los números como debería mostrarse solo el texto

Este es el código en Markdown:

---
title: Deploy de un sitio de Gatsby en Netlify
date: "2020-10-05"
updated: "2020-10-05"
description: Como realizar el deploy de un sitio construido con Gatsby a Netlify
---

Esta es la guía base para realizar el deploy de una página construida con el framework Gatsby,
en este caso se realizará el deploy de la página de la comunidad de JavaScript Ecuador.

Una vez tenemos el sitio alojado en un repositorio de GitHub tenemos que conectarlo con la plataforma
[Netlify](https://www.netlify.com/).

1. Añadir el repostiorio desde GitHub

![](https://cdn.netlify.com/3803d207cbf97389f0d37ab7ee65580ee52c217f/a6a2f/img/blog/new_site_button.png)

2. Conectar el repositorio

Hacer clic en el botón que lleva a la pantalla donde Netlify se conecta al repositorio de GitHub. 

![](https://cdn.netlify.com/6cc161f3ced8f060296bc8aeacd7fb39e5159274/743e1/img/blog/create_link_repo.png)

Añadir un archivo escrito en Markdown que muestra las instrucciones detallas de como contribuir en la página de JavaScript Ecuador

Gracias al pull #27 de @cesardlinx ya existe el slider, faltan algunos componentes para terminar la sección de comunidad de la página principal.

Agregar una tabla de contenidos con Markdown que redireccione a cada uno de los temas en CONTRIBUTING.md.
Esto facilitara el seguimiento de la guia para contribuir.

Deseamos seguir una convencion estandar como ConventionalCommits al momento de escribir mensajes de commit en este repositorio; sobre todo para cuando se este trabajando localmennte en el codigo.

Para eso tenemos pensado usar un linter llamado commitlint, el cual nos ayudara en nuestro objetivo.

Como parte de este issue se podria automatizar las validaciones de este linter usando hooks de git mediante husky.

En esta tarea se debe configurar commit lint y automatizar con un git hook en pre-commit. Si es posible, crear una guia rapida de como instalarlo y configurarlo, sino se podria abrir un nuevo issue para la tarea de esta guia.

Cualquier inquietud comentala aqui o pregunta en el canal deTelegram

Aquí se puede ver prototipo completo con más detalle.

Si tienes dudas puedes consultarlo en el canal de Telegram de JavaScript Ecuador

Describe el bug/error
Las redirecciones de algunos enlaces en la nueva tabla de contenidos de CONTRIBUTING.md no esta funcionando. Yo mismo tome ese issue el cual era el issue 62 y me doy cuenta del error ahora. Funciona en el preview de Visual Studio Code pero no funciona en GitHub.

Para reproducirlo
Pasos para reproducir el comportamiento:

1. Ir al archivo CONTRIBUTING.md en GitHub y ver la tabla de contenidos

Comportamiento esperado
La tabla de contenidos debe redireccionar a cada uno de los temas en CONTRIBUTING.md.

Capturas de Pantalla

Desktop (por favor completa la siguiente información):

• OS: [Windows]
• Navegador [chrome, firefox]

Información adicional
El problema esta en que se a escapado un guion medio luego del numeral: * Segundo Pull Request
Debería estar así: * Segundo Pull Request

Para mostrar los contribuidores en el README se está utilizando la convención all-contrubitors es posible que se pueda reutilizar algo de la especificación en esta sección.

En el siguiente link puedes el prototipo en Figma para ver los colores y tamaños de cada item

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram

Tarea a realizar
Es necesario darle un margin fijo a todo el content del sitio para que este un poco mas parecido al protitipo en figma, tomando en cuenta lso tamanios del vieport responsive.

¿Por qué se realizará?
Tener un mejor estilo o disenio.

Recomendaciones
Este estilo se lo podria dar al layout component.
Ver el disenio en figma https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=1226%3A17289

Es importante siempre hacer un git pull para verificar si hay nuevos cambios en el repo.

En el archivo CONTRIBUTING.md en la guia de como contribuir, falta una guia que explique como actualizar los forks realizados al repo original.

En esta tarea es necesario escribir una pequeña guia que explique como hacerlo.

Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram

Crear componente y funcionalidad carrusel de tarjetas(se piden en #5 ) esto esta en la seccion Ciudades de la pagina Home.

En el siguiente link puedes el prototipo en figma para ver los colores y tamanios de cada item.

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram

Se puede agregar una guía parecida a esta pero resumida

En esta tarea es necesario crear la seccion Head justo debajo del componente navbar en el Home que se solicita en #2

En el siguiente link esta el prototipo en figma para ver los colores y tamanios de cada item.

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram

Seria necerario que despues de hacer el fork y clonar el repositorio, agregar una guia que explique como configurar y desplegar el proyecto gatsby localmente.

Si tienes alguna duda o necesitas guia, comentalo por aqui en los comentarios o escribenos al canal de telegram de la comunidad.

Crear un componente slider de fotos el cual estara ubicado en la seccion Comunidad en la pagina Home.

En el siguiente link esta el prototipo en figma para ver los colores y tamanios de cada item.

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram

Tarea a realizar
Se necesita que el link Ciudades en el header apunte hacia la sección 'Ciudades' de home.

¿Por qué se realizará?
El motivo de realizar este cambio se debe a una reestructuración del sitio a SPA (Single Page Application).
Por esta razón la página 'Ciudades' se mantiene inactiva hasta una próxima implementación.

Recomendaciones
Para desarrollar esta tarea:

• En src\components\cities-section\cities-section.js añadir al tag <section> un id.
• Ir a src\components\header\header.js y cambiar:

<Link ... to="/ciudades" ... >
// --------------------------
<Link ... to="#ciudades" ... >

La carpeta static serviria para poner todos los assets del sitio los cuales seran reconocidos por gatsby por defecto lo que mejora el rendimiento.

Como referencia se puede tener #40

Se puede ver más sobre el prototipo en Figma en esta direccción https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier duda se la puede consultar por el chat de Telegram

En esta tarea debemos crear el componente Navbar y agregarlo en el Homepage del sitio

En el siguiente link esta el prototipo en figma para ver los colores y tamanios de cada item.

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram

Tarea a realizar
Se necesita que el link Comunidad en el header apunte hacia la sección 'Como ayudar' de home.
Además debe cambiar de nombre a '¿Cómo Ayudar?'.

¿Por qué se realizará?
El motivo de realizar este cambio se debe a una reestructuración del sitio a SPA (Single Page Application).

Recomendaciones
Para desarrollar esta tarea:

• Es necesario que #85 este completo
• En src\components\community-hero-section\community-hero-section.js
  • Convertir <div className="community-hero-section"> a un tag <section>
  • Añadir al tag <section> un id.
• Ir a src\components\header\header.js y cambiar:

<Link ... to="/comunidad" ... >COMUNIDAD
// --------------------------
<Link ... to="#como-ayudar" ... >¿COMO AYUDAR?

Describe el bug/error
Se debe mejorar la presentación del slider de Comunidad. Actualmente por diferencia de tamaños en las imágenes del slider, no se está visualizando correctamente el componente. Pero se debe añadir una pequeña separación entre el contenedor de imágenes y la barra de slides.

Para reproducirlo
Pasos para reproducir el comportamiento:

1. Ir a 'localhost:8000 || javascript.ec'
2. Scroll down a 'Comunidad'
3. Ver el error

Comportamiento esperado
De acuerdo con el prototipo en Figma, existe un pequeño espacio entre el contenedor de slides y la barra de slides.

Capturas de Pantalla
Este es el comportamiento actual del slider.

Desktop:

• OS: Windows 10 x64 v.20H2
• Navegador [ Brave Browser v.1.21.76, MS Edge v.89.0.774.54 ]

Información adicional
Para resolver este bug, debes arreglar este estilo en src\components\community-section\photo-slider\photo-slider.css

.slick-dots li {
  border-radius: 10em;
  width: 11.36%;
  height: 15.65px; /* esta regla presenta conflictos. */
  margin: 0 0.4em;
}

Tarea a realizar
Se necesitan mover las secciones 'Como Ayudar' y 'Contribuidores' de la página Comunidad a la página Home.

¿Por qué se realizará?
El motivo de realizar este cambio se debe a un reestructuración del sitio a SPA (Single Page Application).
Por esta razón la página 'Comunidad' desaparece y su contenido se fusiona en Home (a excepción de la sección 'Mantenedores').

Recomendaciones
Para desarrollar esta tarea:

• Ir a src\pages\comunidad.js
• Mover los componentes <CommunityHeroSection/> y <Contributors /> a Index.js en src\pages\index.js (Colocar los componentes despues de <EventsSection />)

Para tener un standar al momento de rectar un issue reportando un bug/error, seria bueno crear un issue-template para tener una pauta de que informacion detallar.

Dejo una guia para hacerlo -> Configurar template Features Request

Si tienes alguna pregunta, comentala aqui o escribelo en el canal de Telegram de la Comunidad

En el siguiente link puedes el prototipo en Figma para ver los colores y tamaños de cada item

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram

Tarea a realizar
En página Home, en la sección Comunidad actualmente hay tres botones:

• Conocer a la comunidad
• Como ayudar?
• Código de Conducta

La mejora a realizar consiste en cambiar la presentación colorista de los mismos. Tanto los estilos base como los estilos en hover de cada botón.

¿Por qué se realizará?
El color amarillo no permite visualizar con claridad el titulo de cada botón. En pantallas con brillo alto o intensidad muy fuerte no se visualizará con claridad.

Recomendaciones
Actualmente los botones se ven así.

La sugerencia consiste en aplicar colores más oscuros en los estilos base del botón y mantener el color sólido del titulo en hover.

Para aplicar esta mejora del código css en src\components\UI\button\button.module.css. Se deben reescribir los estilos predeterminados del core css.

.button--secondary {
    color: #f7e018;
    background-color: transparent;
    border-color: #f7e018;
}

.button--secondary:hover {
    color: #737373;
    background-color: #f7e018;
    border-color: #f7e018;
}

Crear componente tarjeta, para la seccion ciudades en la pagina Home.

En el siguiente link puedes el prototipo en figma para ver los colores y tamanios de cada item.

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram

Describe el bug/error
Al reducir el zoom del navegar a menos del 80% la última tarjeta de ciudades no se presenta del mismo tamaño que el resto

Para reproducirlo
Pasos para reproducir el comportamiento:

1. Ir a 'Home'
2. Scroll down a la sección ciudades
3. Reducir el zoom a menos del 80%
4. Ver el error

Comportamiento esperado
Que la última tarjeta se mantenga del mismo tamaño que el resto

Capturas de Pantalla

Desktop:

• OS: Kubuntu 20.04
• Navegador Firefox Developer Edition
• Versión 83

Tarea a realizar
Se necesita que el link Eventos en el header apunte hacia la sección 'Eventos' de home.

¿Por qué se realizará?
El motivo de realizar este cambio se debe a una reestructuración del sitio a SPA (Single Page Application).
Por esta razón la página 'Eventos' se mantiene inactiva hasta una próxima implementación.

Recomendaciones
Para desarrollar esta tarea:

• En src\components\events-section\Events.js añadir al tag <section> un id.
• Ir a src\components\header\header.js y cambiar:

<Link ... to="/eventos" ... >
// --------------------------
<Link ... to="#eventos" ... >

Crear seccion y componente Blog en la pagina Home.

Este issue tiene varias tareas implicitas por lo que varias personas pueden trabajar en el, solo menciona en los comentarios en que parte deseas trabajar y se te asignara.

• Crear estructura y disenio del coponente. #91
• El funcionamiento para la gestion del contenido de este componente sera atravez de archivos Markdown, en este caso usando la funcionalidad del plugin mdx de gatsby.
• El componente debera mostrar los ultimos articulos creados en el blog segun fecha y hora. Ademas del mas leido.
• Cada componente articulo o post dentro de este componente redireccionara a la pagina detalle de cada post.
• El link leer mas redireccionara a la pagina principal del blog, que se construye en #10

En el siguiente link puedes el prototipo en figma para ver los colores y tamanios de cada item.

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=1226%3A17289

Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comunidad en telegram

Cada proyecto open source tiene un archivo README.md en el que se especifica informacion sobre el repositorio, comunidad, etc. El README es lo primero que veran quienes visiten el repositorio.

Para esta tarea es necesario conocer Markdown y debes crear un archivo README.md escrito en formato Markdown que muestre lo siguiente:

• Presentación del sitio
• Una pequeña descripción de la comunidad Javascript Ecuador
• Pasos de como utilizar el proyecto hacerlo funcionar en tu computadora, ya sea windows, linux o mac.

Se intenta tener algo simple, elegante y facil de leer un ejemplo lo podrias ver aqui o muchas mas en este repositorio awesome-readme

El sitio se desarrolla en Gatsby y usando Tailwindcss para los estilos.

Cualquier inquietud puedes preguntar aqui en un comentario o en nuestro canal de Telegram.

Esto no forma parte del desarrollo del sitio web, pero formara parte del proyecto ya que es algo importante para la comunidad.

Tareas a realizar
Crear y probar cuenta gratuita en bitwarden para el manejo y cifrado de archivos al momento de compartir credenciales.

Objetivo
Probar sus ventajas y en un futuro decidir si debemos pasar a un plan de pago.

Aquí se puede ver prototipo completo con más detalle.

Si tienes dudas puedes consultarlo en el canal de Telegram de JavaScript Ecuador

En el siguiente link puedes el prototipo en Figma para ver los colores y tamaños de cada item

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram

• Tarea a realizar: Agregar responsive a sección ¿Cómo ayudar?

• Descripción: Se agregó responsive en la sección ¿Cómo ayudar?

• ¿Por qué se realizara?
  Para pantallas pequeñas las descripciones de las cajas se deformaban

• Recomendaciones:

Crear la seccion y componente subscribe en la pagina Home.

En el siguiente link puedes el prototipo en figma para ver los colores y tamanios de cada item.

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram

Describe el bug/error
No se esta resaltando del menu que esta activo o de la pagina actual.

Para reproducirlo
Pasos para reproducir el comportamiento:

1. Ir al sitio de la comunidad https://javascript.ec/
2. Click en cualquier menu del navbar.
3. Aqui a parte de redireccionarme y rederizarme la pagina del menu que clickeamos, debe resaltar con una linea amarilla el menu de la pagina actual.

Comportamiento esperado
El menu seleccionado deberia resaltarse en amarillo.

Tenemos que publicar la página con Netlify y si es posible también eliminar el anterior repo para que no haya confusión

Tarea a realizar
Redireccionar a los enllaces respectivos cada icono que se encuentra en la seccion 'Descripcion de la comunidad' en el home.

• Icono github: https://github.com/javascriptecuador
• Icono telegram: https://t.me/javascriptecuador
• Icono twitter: https://twitter.com/jsecuador_
• Icono eventbrite: https://www.eventbrite.com/o/javascript-ecuador-29109297643?aff=eand

¿Por qué se realizará?
Redireccionar a los enlaces correctos.

Crear el footer de la pagina Home.

En el siguiente link puedes el prototipo en figma para ver los colores y tamanios de cada item.

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram

En el siguiente link puedes el prototipo en Figma para ver los colores y tamaños de cada item

https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1

Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram