Merge branch 'templates-en-env' into 'master'

Templates en env

See merge request sutty/jekyll/sutty-base-jekyll-theme!20

_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))
-
-    if (!response.ok) return
-
     data.site = window.site
 
-    const template = await response.text()
+    const template = window.templates.alert
     const html = await this.engine.parseAndRender(template, data)
 
     this.element.innerHTML = html

_packs/controllers/search_controller.js

@@ -48,8 +48,7 @@ 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 = window.site
-    const request = await fetch('assets/templates/results.html')
-    const template = await request.text()
+    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 })

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

@@ -10,3 +10,20 @@ window.env = {
 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 }},
+}