diff --git a/_layouts/default.html b/_layouts/default.html index 3aec209..e7ccf9f 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -24,7 +24,7 @@ si no existe. {% endcomment %} - + {% include_cached pack.html %} {% comment %} diff --git a/_packs/controllers/notification_controller.js b/_packs/controllers/notification_controller.js index d00bfd4..edb3299 100644 --- a/_packs/controllers/notification_controller.js +++ b/_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 diff --git a/_packs/controllers/search_controller.js b/_packs/controllers/search_controller.js index 0303601..5608ab2 100644 --- a/_packs/controllers/search_controller.js +++ b/_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 }) diff --git a/assets/templates/alert.html b/assets/templates/alert.html index b520708..1ef923d 100644 --- a/assets/templates/alert.html +++ b/assets/templates/alert.html @@ -1,7 +1,9 @@ - +{%- endraw -%} diff --git a/assets/templates/results.html b/assets/templates/results.html index 2473966..65c0e11 100644 --- a/assets/templates/results.html +++ b/assets/templates/results.html @@ -1,17 +1,19 @@ -
-
- {% for item in results %} - + {% endfor %} +
+
+{%- endraw -%} diff --git a/env.js b/env.js index b38f2f9..fa90467 100644 --- a/env.js +++ b/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 }}, +}