Nunjucks for js files

[probins]

In #11, I mentioned being able to use templates with js files, so I can for example populate an array from shared data. You can do this In Jekyll (and can define layout: null for non-html files). I hoped that if I specified a _data.json with templateEngine: njk it would work, but it ignores the directory. If I rename the js file to *.njk, then it creates an output html, but doesn't parse the templates.

In the particular case I'm working on, I can get around this by including the js in the html file, but that's not very efficient if I have several html pages that use the same js.

[oscarotero]

I'm not sure to understand your case. Can I see an example?
Note that .js files are not interpreted as pages (they could be javascript that you want to execute in frontend). You need to use the extension .tmpl.js.

[probins]

these are front-end js files in script tags. So, within one of these I fetch, for example, some api keys from my site data:

      let apis = {};
      {% for type, key in apikeys %}
       apis["{{ type }}"] = "{{ key }}";
      {% endfor %}

If I have that inline in <script>...</script>, then it will be parsed as part of the page creation. But I would prefer not to have it inline, but as <script src="./my.js"></script>. But, to do that, my.js has to be run through Nunjucks.

Is that clear?

[oscarotero]

Understood.

lume ignores all files with extensions not recognized by any template engine. So, for example page.foo, or document.doc are ignored (you can copy them but not render as a page).

In theory, if you save the file as my.js.njk, it should be loaded and rendered by njk, remove the njk extension and save it as my.js. This is not what happens now (it's saved as my.js.html because the html extension is added always), but I'm going to release a new version with this fixed.

Other option is include a frontmatter with the permalink value, so you can decide the exact output name of this file. Create a my.njk file with this content:

---
permalink: my.js
---
let apis = {};
{% for type, key in apikeys %}
apis["{{ type }}"] = "{{ key }}";
{% endfor %}

Or even shorted

---
permalink: my.js
---
let apis = {{ apiKeys | dump }};

[probins]

ok, thanks - I'll try this out this afternoon. (Thanks for reminding me of dump, too; Jekyll's default templating has jsonify which is much the same.)

To give you some context, I used to use PHP servers, and used this sort of templating a lot. However, for sites where the data doesn't change very often, static site generators will do just as well. I started off using Github Pages, which was limited to Jekyll, but I switched to GitLab a few years ago, where I can run anything. Deno/Lume is way faster than Jekyll: the site I'm working on took several minutes with Jekyll, but <1 minute with Lume, and most of that is loading the Docker image.

[oscarotero]

Oh, interesting! Thanks for let me know :)

I did some performance tests some time ago (using this repo: https://github.com/seancdavis/ssg-build-performance-tests) but I think there's plenty room for improvements yet.

FYI, Yesterday I've released a new version that allows to have support for my.js.njk file, so you don't need to create a frontmatter with the permalink value (https://github.com/lumeland/lume/blob/master/CHANGELOG.md#0102---2020-12-17).

[probins]

this doesn't seem to work. I renamed the file to xxx.js.njk, and changed the code to let apis = {{ apiKeys | dump | safe }}; (it's json, so has to be 'safe', otherwise I get a lot of "). It correctly renames the file to xxx.js, but outputs let apis = ;. This time it isn't a problem with the cache, as I deleted the cache and re-ran - but same problem.

[probins]

oh, and another problem is that it wraps it in the default layout file. I could get around this by creating an empty layout. Jekyll has the option layout: null.

[oscarotero]

I'll take a look.

[oscarotero]

I just tested your use case and it works fine to me.

In this directory: https://github.com/lumeland/test/tree/master/pages

There's a _data.yaml file with a default layout and some variables. And the styles.css.njk file outputs a css file with these variables and override the layout value with null. Here you can see the result: https://github.com/lumeland/test/tree/master/_expected/pages

So I suspect something is wrong in your side.

[probins]

yes, sorry, my bad. I had the js in a new dir, and forgot to copy _data over. Duh! Works fine, including layout: null. 👍

[probins]

Deno/Lume is way faster than Jekyll: the site I'm working on took several minutes with Jekyll, but <1 minute with Lume, and most of that is loading the Docker image.

just for interest, here's a screenshot of recent commits to my site (>1300 pages). Spot the difference!

[oscarotero]

Wow, impresive! Thanks