Merge branch 'master' into tienda

_layouts/default.html

@@ -24,7 +24,7 @@
     si no existe.
     {% endcomment %}
     <link rel="preload" as="script" type="text/javascript" href="env.js" />
-    <script type="text/javascript" src="env.js"></script>
+    <script type="text/javascript" src="env.js?{{ site.time | date: '%s' }}"></script>
     {% include_cached pack.html %}
 
     {% comment %}

_packs/controllers/notification_controller.js

@@ -15,13 +15,9 @@ export default class extends Controller {
    * nothing if the template isn't found.
    */
   async render (name, data = {}) {
-    const response = await fetch(this.template(name))
+    data.site = window.site
 
-    if (!response.ok) return
-
-    data.site = await this.site()
-
-    const template = await response.text()
+    const template = window.templates.alert
     const html = await this.engine.parseAndRender(template, data)
 
     this.element.innerHTML = html
@@ -63,18 +59,4 @@ export default class extends Controller {
 
     return window.liquid
   }
-
-  /*
-   * Site config (actually just translation strings)
-   *
-   * @return [Object]
-   */
-  async site () {
-    if (!window.site) {
-      const data = await fetch('assets/data/site.json')
-      window.site = await data.json()
-    }
-
-    return window.site
-  }
 }

_packs/controllers/search_controller.js

@@ -47,9 +47,8 @@ export default class extends Controller {
 
     const main = document.querySelector('main')
     const results = window.index.search(q).map(r => window.data.find(a => a.id == r.ref))
-    const site = await this.site()
-    const request = await fetch('assets/templates/results.html')
-    const template = await request.text()
+    const site = window.site
+    const template = window.templates.results
     const html = await this.engine.parseAndRender(template, { q, site, results })
     const title = `${site.i18n.search.title} - ${q}`
     const query = new URLSearchParams({ q })
@@ -98,13 +97,4 @@ export default class extends Controller {
 
     return window.liquid
   }
-
-  async site () {
-    if (!window.site) {
-      const data = await fetch('assets/data/site.json')
-      window.site = await data.json()
-    }
-
-    return window.site
-  }
 }

_sass/content.scss

@@ -0,0 +1,11 @@
+/// Todos los elementos dentro de .content tienen margen inferior, salvo
+/// el último, para no modificar el padding y margin del contenedor.
+.content {
+  & > * {
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

assets/css/styles.scss

@@ -132,6 +132,7 @@ $label-margin-bottom: 0;
 @import "snap";
 @import "editor";
 @import "menu";
+@import "content";
 
 /// La barra de progreso de Turbo tiene el color primario
 /// de la paleta, definido por Bootstrap o por nosotres.

assets/templates/alert.html

@@ -1,7 +1,9 @@
-<div class="alert alert-{{ type }} alert-dismissible" role="alert">
-  {{ content }}
+{%- raw -%}
+  <div class="alert alert-{{ type }} alert-dismissible" role="alert">
+    {{ content }}
 
-  <button data-action="notification#hide" type="button" class="close" aria-label="{{ site.i18n.close }}">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
+    <button data-action="notification#hide" type="button" class="close" aria-label="{{ site.i18n.close }}">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+{%- endraw -%}

assets/templates/results.html

@@ -1,17 +1,19 @@
-<section class="row no-gutters justify-content-center">
-  <div class="col-10">
-    {% for item in results %}
-      <article id="{{ item.slug }}">
-        <header>
-          <h2>
-            <a href="{{ item.url }}">
-              {{ item.title }}
-            </a>
-          </h2>
-        </header>
+{%- raw -%}
+  <section class="row no-gutters justify-content-center">
+    <div class="col-10">
+      {% for item in results %}
+        <article id="{{ item.slug }}">
+          <header>
+            <h2>
+              <a href="{{ item.url }}">
+                {{ item.title }}
+              </a>
+            </h2>
+          </header>
 
-        <p class="lead">{{ item.description }}</p>
-      </article>
-    {% endfor %}
-  </div>
-</section>
+          <p class="lead">{{ item.description }}</p>
+        </article>
+      {% endfor %}
+    </div>
+  </section>
+{%- endraw -%}

env.js

@@ -7,3 +7,24 @@ window.env = {
   JEKYLL_ENV: '{{ site.env.JEKYLL_ENV }}',
   SPREE_URL: '{{ site.env.SPREE_URL }}'
 }
+
+window.site = {
+  "i18n": {{ site.i18n | jsonify }}
+}
+
+{%- comment -%}
+  Para agregar plantillas que se procesan con JS, las agregamos en
+  Liquid dentro de assets/templates/ y luego las importamos acá, de forma
+  que estén disponibles para JS sin tener que descargarlas.
+
+  Es importante que la plantilla esté envuelta por el tag `{% raw %}`,
+  para que no sea procesado en el momento de generar env.js, sino en el
+  navegador.
+{%- endcomment -%}
+{%- capture alert %}{% include_relative assets/templates/alert.html %}{% endcapture -%}
+{%- capture results %}{% include_relative assets/templates/results.html %}{% endcapture -%}
+
+window.templates = {
+  "alert": {{ alert | jsonify }},
+  "results": {{ results | jsonify }},
+}