From 536ca346ea0ac18e2b764fefa20a26db5d94edb2 Mon Sep 17 00:00:00 2001
From: nukeador <nukeador@protonmail.com>
Date: Wed, 27 Jan 2021 20:55:24 +0100
Subject: [PATCH] Estructura multiprovincia

---
 _includes/base.njk   | 30 ++++++------------------------
 _includes/header.njk | 12 ++++++++++++
 index.njk            | 23 ++++++++---------------
 p/madrid.njk         | 42 +++++++++++++++++++++++++++---------------
 p/valladolid.njk     | 42 +++++++++++++++++++++++++++---------------
 5 files changed, 80 insertions(+), 69 deletions(-)
 create mode 100644 _includes/header.njk
diff --git a/_includes/base.njk b/_includes/base.njk
index 24f64dc0c16..f2955b42c69 100644
--- a/_includes/base.njk
+++ b/_includes/base.njk
@@ -1,8 +1,11 @@
+---
+location: España
+---
 <!DOCTYPE html>
 <!-- Phantom by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -->
 <html>
   <head>
-    <title>Web Segura - Observatorio de seguridad web.</title>
+    <title>{{ location }} - Web Segura - Observatorio de seguridad web</title>
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://stats.pucelabits.org; font-src 'self'; img-src 'self' https://stats.pucelabits.org; object-src 'none'; script-src 'self' https://stats.pucelabits.org; style-src 'self'; frame-ancestors 'none'">
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
@@ -11,7 +14,7 @@
     <meta property="og:locale" content="es_ES">
     <meta property="og:url" content="https://websegura.pucelabits.org/">
     <meta property="og:image" content="https://websegura.pucelabits.org/images/pucelabits.png">
-    <meta property="og:title" content="Web segura - Observatorio de seguridad web">
+    <meta property="og:title" content="{{ location }} - Web segura - Observatorio de seguridad web">
     <meta property="og:description" content="¿Cómo de seguras son las webs de nuestros organismos públicos?">
     <meta name="twitter:image" content="https://websegura.pucelabits.org/images/pucelabits.png">
     <meta name="twitter:card" content="summary">
@@ -30,7 +33,7 @@
       <header id="header">
         <div class="inner">
           <!-- Logo -->
-          <a href="index.html" class="logo">
+          <a href="/" class="logo">
             <span class="symbol"><img src="/images/logo.svg" alt="logo web segura"/></span>
             <span class="title">Web Segura</span>
           </a>
@@ -44,27 +47,6 @@
       <!-- Main -->
       <div id="main">
         <div class="inner">
-          <header>
-            <h1>🔭 Observatorio de seguridad web de Valladolid</h1>
-            <p class="subtitle">Analizamos sitios públicos de Valladolid para saber si protegen la privacidad y seguridad de sus usuarios.</p>
-
-            <p class="button"><a id="cta" href="#resultados">Ver quién no es seguro</a></p>
-
-            <p><small>(<a href="https://twitter.com/PucelaBits/status/1353716541536268289">Ayúdanos a añadir otras provincias</a>)</small></p>
-
-            <p><strong>¿Qué son y por qué son importantes las conexiones seguras (HTTPS)?</strong></p>
-
-            <ul class="iconify">
-              <li><span class="emoticon">🔒</span> <strong>HTTPS</strong> permite <strong>cifrar</strong> el contenido mientras viaja de la web a tu dispositivo y vuelta.</li>
-              <li><span class="emoticon">🕵️</span> Impide que nadie pueda <strong>interceptar</strong> los datos que introduces (contraseñas, datos bancarios, personales o médicos).
-              <li><span class="emoticon">💉</span> Impide que terceros <strong>"inyecten"</strong> contenido dañino o modifiquen la información de forma no detectable.</li>
-              <li><span class="emoticon">⚠️</span> <strong>Si no tienen una nota A o B</strong>, usan una implementación deficiente, ¡tu privacidad está en riesgo!</li>
-            </ul>
-
-            <p><span class="emoticon">🗣</span> Ayúdanos a exigir a los responsables mejorar su seguridad y privacidad.</p>
-
-          </header>
-
           {{ content | safe }}
         </div>
       </div>
diff --git a/_includes/header.njk b/_includes/header.njk
new file mode 100644
index 00000000000..eaf713a473a
--- /dev/null
+++ b/_includes/header.njk
@@ -0,0 +1,12 @@
+  <p><strong>¿Qué son y por qué son importantes las conexiones seguras (HTTPS)?</strong></p>
+
+  <ul class="iconify">
+    <li><span class="emoticon">🔒</span> <strong>HTTPS</strong> permite <strong>cifrar</strong> el contenido mientras viaja de la web a tu dispositivo y vuelta.</li>
+    <li><span class="emoticon">🕵️</span> Impide que nadie pueda <strong>interceptar</strong> los datos que introduces (contraseñas, datos bancarios, personales o médicos).
+    <li><span class="emoticon">💉</span> Impide que terceros <strong>"inyecten"</strong> contenido dañino o modifiquen la información de forma no detectable.</li>
+    <li><span class="emoticon">⚠️</span> <strong>Si no tienen una nota A o B</strong>, usan una implementación deficiente, ¡tu privacidad está en riesgo!</li>
+  </ul>
+
+  <p><span class="emoticon">🗣</span> Ayúdanos a exigir a los responsables mejorar su seguridad y privacidad.</p>
+
+</header>
diff --git a/index.njk b/index.njk
index 79303ca2a4c..15bcfc7135d 100644
--- a/index.njk
+++ b/index.njk
@@ -1,20 +1,13 @@
 ---
 layout: base
+location: España
 ---
-{% from "tabla.njk" import tabla %}
+<header>
+  <h1>🔭 Observatorio de seguridad web de {{ location }}</h1>
+  <p class="subtitle">Analizamos sitios públicos de {{ location }} para saber si protegen la privacidad y seguridad de sus usuarios.</p>
 
-<section>
-  <div class="table-wrapper" id="resultados">
-    <h2>Valladolid</h2>
-    {{ tabla(provincias.valladolid.webs, results)}}
-    <p>
-      <a href="https://github.com/PucelaBits/websegura#a%C3%B1adir-una-web">+ Añadir una web nueva</a>
-    </p>
+  <p><button><a href="/p/madrid">Madrid</a></button> <button><a href="/p/valladolid">Valladolid</button></p>
 
-    <h2>Castilla y León</h2>
-    {{ tabla(comunidades["castilla-y-leon"].webs, results)}}
-    <p>
-      <a href="https://github.com/PucelaBits/websegura#a%C3%B1adir-una-web">+ Añadir una web nueva</a>
-    </p>
-  </div>
-</section>
\ No newline at end of file
+  <p><small>(<a href="https://github.com/PucelaBits/websegura#a%C3%B1adir-una-web">Ayúdanos a añadir otras provincias</a>)</small></p>
+
+  {% include "header.njk" %}
diff --git a/p/madrid.njk b/p/madrid.njk
index 433e126316e..de772c85e06 100644
--- a/p/madrid.njk
+++ b/p/madrid.njk
@@ -1,20 +1,32 @@
 ---
 layout: base
+location: Madrid
 ---
-{% from "tabla.njk" import tabla %}
+<header>
+  <h1>🔭 Observatorio de seguridad web de {{ location }}</h1>
 
-<section>
-  <div class="table-wrapper" id="resultados">
-    <h2>Madrid</h2>
-    {{ tabla(provincias.madrid.webs, results)}}
-    <p>
-      <a href="https://github.com/PucelaBits/websegura#a%C3%B1adir-una-web">+ Añadir una web nueva</a>
-    </p>
+  <p id="breadcumbs"><a href="/">España</a> - {{ location }}</p>
 
-    <h2>Comunidad de Madrid</h2>
-    {{ tabla(comunidades["madrid"].webs, results)}}
-    <p>
-      <a href="https://github.com/PucelaBits/websegura#a%C3%B1adir-una-web">+ Añadir una web nueva</a>
-    </p>
-  </div>
-</section>
+  <p class="subtitle">Analizamos sitios públicos de {{ location }} para saber si protegen la privacidad y seguridad de sus usuarios.</p>
+
+  <p class="button"><a id="cta" href="#resultados">Ver quién no es seguro</a></p>
+
+  {% include "header.njk" %}
+
+  {% from "tabla.njk" import tabla %}
+
+  <section>
+    <div class="table-wrapper" id="resultados">
+      <h2>Madrid</h2>
+      {{ tabla(provincias.madrid.webs, results)}}
+      <p>
+        <a href="https://github.com/PucelaBits/websegura#a%C3%B1adir-una-web">+ Añadir una web nueva</a>
+      </p>
+
+      <h2>Comunidad de Madrid</h2>
+      {{ tabla(comunidades["madrid"].webs, results)}}
+      <p>
+        <a href="https://github.com/PucelaBits/websegura#a%C3%B1adir-una-web">+ Añadir una web nueva</a>
+      </p>
+    </div>
+  </section>
diff --git a/p/valladolid.njk b/p/valladolid.njk
index 7ccc8788bdc..b9903ccafb5 100644
--- a/p/valladolid.njk
+++ b/p/valladolid.njk
@@ -1,20 +1,32 @@
 ---
 layout: base
+location: Valladolid
 ---
-{% from "tabla.njk" import tabla %}
+<header>
+  <h1>🔭 Observatorio de seguridad web de {{ location }}</h1>
 
-<section>
-  <div class="table-wrapper" id="resultados">
-    <h2>Valladolid</h2>
-    {{ tabla(provincias.valladolid.webs, results)}}
-    <p>
-      <a href="https://github.com/PucelaBits/websegura#a%C3%B1adir-una-web">+ Añadir una web nueva</a>
-    </p>
+  <p id="breadcumbs"><a href="/">España</a> - {{ location }}</p>
+  
+  <p class="subtitle">Analizamos sitios públicos de {{ location }} para saber si protegen la privacidad y seguridad de sus usuarios.</p>
 
-    <h2>Castilla y León</h2>
-    {{ tabla(comunidades["castilla-y-leon"].webs, results)}}
-    <p>
-      <a href="https://github.com/PucelaBits/websegura#a%C3%B1adir-una-web">+ Añadir una web nueva</a>
-    </p>
-  </div>
-</section>
+  <p class="button"><a id="cta" href="#resultados">Ver quién no es seguro</a></p>
+
+  {% include "header.njk" %}
+
+  {% from "tabla.njk" import tabla %}
+
+  <section>
+    <div class="table-wrapper" id="resultados">
+      <h2>Valladolid</h2>
+      {{ tabla(provincias.valladolid.webs, results)}}
+      <p>
+        <a href="https://github.com/PucelaBits/websegura#a%C3%B1adir-una-web">+ Añadir una web nueva</a>
+      </p>
+
+      <h2>Castilla y León</h2>
+      {{ tabla(comunidades["castilla-y-leon"].webs, results)}}
+      <p>
+        <a href="https://github.com/PucelaBits/websegura#a%C3%B1adir-una-web">+ Añadir una web nueva</a>
+      </p>
+    </div>
+  </section>
