#2 Agregar información verificada

.dockerignore

@@ -0,0 +1 @@
+node_modules/

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:12
+
+WORKDIR /app
+
+COPY package-lock.json package-lock.json
+COPY package.json package.json
+
+RUN npm ci
+
+COPY ./ /app
+
+EXPOSE 3000
+
+CMD npx gulp dev

README.md

@@ -33,6 +33,22 @@ Para utilizar esta plantilla, tu computadora necesita:
 - **Nota:** Modifica sólo los archivos en la carpeta `src/`
 
 
+### Desarrollo con Docker
+
+Para hacer y probar cambios locales en el contenido, estilos, imagenes, etc. puedes usar un contenedor docker.
+
+- `docker build . -t frenalacurva:dev`
+- `docker run --rm -it --init -p 3000:3000 -v $PWD/src/:/app/src frenalacurva:dev`
+- Tu sitio está visible en el URL: http://localhost:3000
+
+
+#### Usar docker-compose (1.20+)
+
+- `docker-compose up`
+- Tu sitio está visible en el URL: http://localhost:3000
+
+> Si necesitas cambiar algun archivo fuera de `./src` solo vuelve a ejectuar ambos comandos.
+
 ### Deployment en gh-pages:
 
 - Una vez hayas concluido el desarrollo, deberás cambiar la carpeta `dist/` que se generó por `docs/`: <br>

docker-compose.yml

@@ -0,0 +1,12 @@
+version: "3.7"
+
+services:
+  webapp:
+    image: frenalacurva:dev
+    build:
+      context: ./
+      dockerfile: Dockerfile
+    ports:
+      - 3000:3000
+    volumes:
+      - "$PWD/src/:/app/src:rw"

src/pages/index.html

@@ -36,22 +36,16 @@ <h2 class="subtitle is-5 is-muted">Guía de iniciativas ciudadanas frente al cor
         </div>
     </div>
 
-    <!-- {{> brands}} -->
+    {{!> brands}}
 </section>
 
-<!-- {{> start}} -->
+{{> start}}
 {{> iniciativas}}
-<!-- {{> getstarted}} -->
-<!-- {{> features}} -->
+{{!> getstarted}}
+{{!> features}}
 {{> twitter}}
 {{> animal}}
-<!-- {{> more}} -->
-<!-- {{> clients}} -->
-<!-- {{> email}} -->
-<!-- {{> loginmodal}} -->
-
-
-
-
-
-
+{{!> more}}
+{{!> clients}}
+{{!> email}}
+{{!> loginmodal}}

src/partials/start.html

@@ -1,20 +1,23 @@
-<div class=" section hero-foot mb-20 section-feature-grey">
-	<div class="container">
-		<div class="column is-12">
-			<div class="tabs is-centered">
-				<ul>
-					<li><a><img class="partner-logo" src="assets/img/logos/cuidarse-1.png"></a><br><h3 class="red title has-text-centered is-3 is-muted">Cuidarse</h3></li>
-					<li><a><img class="partner-logo" src="assets/img/logos/aprender-1.png"></a><br><h3 class="red title has-text-centered is-3 is-muted">Aprender</h3></li>
-					<li><a><img class="partner-logo" src="assets/img/logos/compartir-1.png"></a><br><h3 class="red title has-text-centered is-3 is-muted">Compartir</h3></li>
-					<li class="ext-margin has-text-centered">
-						<p class="is-3"><strong>Entra en nuestra plataforma y actúa ahora:</strong><br> Aprende, comparte consejos e iniciativas y cuídate.</p>
-						<br>
-						<a href="http://mx.frenalacurva.net" class="button cta is-rounded primary-btn raised">
-                            ACTÚA
-                        </a>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</div>
+<section class="section has-background-grey">
+    <div class="container">
+        <h1 class="title is-bold has-text-light	has-text-centered">Informaci&oacute;n Verificada</h1>
+        <div class="columns is-variable is-8">
+            <div class="column mb-20">
+                <a target="_blank" title="Animal Político, noticias verificadas" href="https://www.animalpolitico.com/noticias-coronavirus-covid-2019-verificacion/">
+                    <img alt="Logotipo de Animal Político" style="max-height:128px" src="assets/img/logos/animal_politico.svg">
+                </a>
+            </div>
+            <div class="column mb-20">
+                <a target="_blank" title="Mapa en tiempo real del coronavirus en México" href="https://www.eleconomista.com.mx/politica/Rastreador-de-Coronavirus-Mexico-actualizacion-en-tiempo-real-20200309-0089.html">
+                    <img alt="Mapa del coronavirus en México" style="max-height:128px" src="assets/img/illustrations/COVID-19_Outbreak_Cases_in_Mexico.wikipedia.svg">
+                    <p class="has-text-light has-text-centered is-size-5">Mapa en tiempo real</p>
+                </a>
+            </div>
+            <div class="column mb-20">
+                <a target="_blank" title="Información oficial del Gobierno de México" href="https://coronavirus.gob.mx/">
+                    <img alt="Logotipo del Gobierno de México" style="max-height:128px" src="assets/img/logos/gob_mx.svg">
+                </a>
+            </div>
+        </div>
+    </div>
+</section>