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 = window.templates.results
-    const template = await request.text()
     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">
+{%- 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>
+  </div>
+{%- endraw -%}

assets/templates/results.html

@@ -1,4 +1,5 @@
-<section class="row no-gutters justify-content-center">
+{%- raw -%}
+  <section class="row no-gutters justify-content-center">
     <div class="col-10">
       {% for item in results %}
         <article id="{{ item.slug }}">
@@ -14,4 +15,5 @@
         </article>
       {% endfor %}
     </div>
-</section>
+  </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 }},
+}