Skip to content

Tweaking custom Nunjucks env #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Tweaking custom Nunjucks env #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 26 additions & 29 deletions .eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,12 @@ module.exports = function (eleventyConfig) {
},
});

sassBuild(domain_name);
eleventyConfig.on("beforeWatch", (changedFiles) => {
// changedFiles is an array of files that changed
// to trigger the watch/serve build
sassBuild(domain_name);
});
// sassBuild(domain_name);
// eleventyConfig.on("beforeWatch", (changedFiles) => {
// // changedFiles is an array of files that changed
// // to trigger the watch/serve build
// sassBuild(domain_name);
// });

// https://www.npmjs.com/package/@quasibit/eleventy-plugin-sitemap

Expand All @@ -115,35 +115,32 @@ module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("src/img");
eleventyConfig.addPassthroughCopy("./CNAME");
// eleventyConfig.addPassthroughCopy("src/.gitignore");
eleventyConfig.addPassthroughCopy({ "dinky/assets/js": "assets/js" });
eleventyConfig.addPassthroughCopy({
"dinky/assets/images": "assets/images",
});
eleventyConfig.addPassthroughCopy({
"dinky/_sass": "sass/dinky/_sass",
});
// eleventyConfig.addPassthroughCopy({ "dinky/assets/js": "assets/js" });
// eleventyConfig.addPassthroughCopy({
// "dinky/assets/images": "assets/images",
// });
// eleventyConfig.addPassthroughCopy({
// "dinky/_sass": "sass/dinky/_sass",
// });
eleventyConfig.addPassthroughCopy({
"src/_sass": "sass/src/_sass",
});

const pathNormalizer = function(pathString){
return normalize(path.normalize(path.resolve(".")))
const njkEngine = require("nunjucks").configure(
[
path.join(siteConfiguration.dir.input, siteConfiguration.dir.includes),
path.join(siteConfiguration.dir.input, siteConfiguration.dir.layouts),
siteConfiguration.dir.input,
],
{
autoescape: false,
throwOnUndefined: true
}
);

// Nunjucks Filters
let nunjucksEnvironment = new Nunjucks.Environment(
new Nunjucks.FileSystemLoader([
pathNormalizer(siteConfiguration.dir.includes),
pathNormalizer(siteConfiguration.dir.input),
pathNormalizer(".")
]),
{
throwOnUndefined: throwOnUndefinedSetting,
autoescape: true
}
);
eleventyConfig.setLibrary("njk", nunjucksEnvironment);
eleventyConfig.addNunjucksFilter("interpolate", function(value) {
eleventyConfig.setLibrary('njk', njkEngine ); //: autoescape for CSS rules
Comment on lines +129 to +141
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Inspired by another 11ty issue that you commented on, but I'm sure the Nunjucks.FileSystemLoader approach works just as well.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pdehaan I was able to get everything to work with your changes and this configuration but.... the thing I don't understand is why the other way with new Nunjucks.FileSystemLoader( doesn't seem to work.

let nunjucksEnvironment = Nunjucks.configure(
		new Nunjucks.FileSystemLoader([
                    '/Users/username/Dev/devblog/src/_includes',
                    '/Users/username/Dev/devblog/src/_layouts',
                    '/Users/username/Dev/devblog/src',
                    '.'
                  ]),
		  {
			  throwOnUndefined: throwOnUndefinedSetting,
			  autoescape: true,
		  }
	  );
eleventyConfig.setLibrary("njk", nunjucksEnvironment);

This matches what I've seen elsewhere and the given documentation, but I tried it with absolute and relative paths, and it didn't load the folders properly.

This should work right? But it doesn't seem to read the paths. The site builds fine this way, but I am somewhat disappointed I couldn't get it working the original way, or figure out why it isn't working.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I might not be following. I recloned your repo and built it locally and it seems to work for me (well, except for the Sass stuff, I had to comment out Sass in .eleventy.js):

diff --git a/.eleventy.js b/.eleventy.js
index 6dfc67b..07f4d19 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -99,11 +99,11 @@ module.exports = function (eleventyConfig) {
 	});
 	eleventyConfig.addWatchTarget("./_custom-plugins/");
 	eleventyConfig.addWatchTarget("./src/_sass");
-	sassBuild(domain_name);
+	// sassBuild(domain_name);
 	eleventyConfig.on("beforeWatch", (changedFiles) => {
 		// changedFiles is an array of files that changed
 		// to trigger the watch/serve build
-		sassBuild(domain_name);
+		// sassBuild(domain_name);
 	});
 
 	// https://www.npmjs.com/package/@quasibit/eleventy-plugin-sitemap
@@ -178,19 +178,24 @@ module.exports = function (eleventyConfig) {
 	);
 	eleventyConfig.setLibrary("njk", nunjucksEnvironment);
     */
-	const njkEngine = require("nunjucks").configure(
-		[
-			path.join(
-				siteConfiguration.dir.input,
-				siteConfiguration.dir.includes
-			),
-			path.join(
-				siteConfiguration.dir.input,
-				siteConfiguration.dir.layouts
-			),
+
+	const njkConfig = [
+		path.join(
+			siteConfiguration.dir.input,
+			siteConfiguration.dir.includes
+		),
+		path.join(
 			siteConfiguration.dir.input,
-			normalize(path.normalize(".")),
-		],
+			siteConfiguration.dir.layouts
+		),
+		siteConfiguration.dir.input,
+		normalize(path.normalize(".")),
+	];
+
+	console.log("other nunjucksFileSystem", njkConfig);
+
+	const njkEngine = require("nunjucks").configure(
+		njkConfig,
 		{
 			autoescape: false,
 			throwOnUndefined: true,
@@ -198,12 +203,7 @@ module.exports = function (eleventyConfig) {
 	);
 	// /Users/zuckerscharffa/Dev/fightwithtooldev/.eleventy.js
 	// /Users/zuckerscharffa/Dev/fightwithtooldev/src
-	console.log("other nunjucksFileSystem", [
-		path.join(siteConfiguration.dir.input, siteConfiguration.dir.includes),
-		path.join(siteConfiguration.dir.input, siteConfiguration.dir.layouts),
-		siteConfiguration.dir.input,
-		normalize(path.normalize(".")),
-	]);
+
 	eleventyConfig.setLibrary("njk", njkEngine); //: autoescape for CSS rules
 	//eleventyConfig.addNunjucksFilter("interpolate", function(value) {
 	//	return Nunjucks.renderString(text, this.ctx);

OUTPUT

npm run build -- --quiet

> fightwithtooldev@1.0.0 build
> eleventy "--quiet"

other nunjucksFileSystem [ 'src/_includes', 'src/_layouts', 'src', '.' ]
(node:81014) [DEP0128] DeprecationWarning: Invalid 'main' field in '/private/tmp/devblog/node_modules/emitter-mixin/package.json' of 'y'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created)
[ 'backreads', 'devblog' ]
pagedPosts Starters
Copied 6 files / Wrote 47 files in 0.67 seconds (14.3ms each, v0.12.1)

And I think the {% include %} was working as expected. It built fine, and the tag pages seem to render like I thought (since that might have been the only include statement I found:

<h2>Posts tagged: GPC</h2>
<div id="post-summary-list">
    <ul>
		<li><div>
    <h3> <a href="/posts/projects/devblog/hello-day-20/">Hello World Devblog - Pt. 20</a></h3>
    	<p>More devblog</p>
		<p><a href="/posts/projects/devblog/hello-day-20/">Read more...</a></p>
</div>
</li>
		<li><div>
    <h3> <a href="/posts/projects/devblog/hello-day-19/">Hello World Devblog - Pt. 19</a></h3>
    	<p>More devblog</p>
		<p><a href="/posts/projects/devblog/hello-day-19/">Read more...</a></p>
</div>
</li>
    </ul>
</div>

via

{% block content %}
<h2>Posts tagged: {{paged.tagName}}</h2>
<div id="post-summary-list">
    <ul>
	{%- for post in paged.posts %}
		<li>{% include "partials/post-summary.njk" %}</li>
	{%- endfor %}
    </ul>
</div>
{% endblock %}


eleventyConfig.addNunjucksFilter("interpolate", function(value) {
return Nunjucks.renderString(text, this.ctx);
});

Expand Down
4 changes: 2 additions & 2 deletions src/_includes/base.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{% block head %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ title }}</title>
<title>{{ title or "NO TITLE" }}</title>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was seemingly causing errors due to throwOnUndefined: true. So one of your templates might be missing a title. 🤷

<link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">
<link rel="stylesheet" href="/assets/css/style.css?v={{ site.github.build_revision}}">
<!-- Build Revision: {{ site.github.build_revision }} & Sha: {{ site.github.build_sha }} -->
Expand Down Expand Up @@ -32,7 +32,7 @@
{% else %}
<!-- else mode -->
{% endif %}
<h1 class="header">{{ title }}</h1>
<h1 class="header">{{ title or "NO TITLE" }}</h1>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above. One template has undefined title which threw an error so I added a silly default to get it building.

<p class="header">{{ description }}</p>

{% endblock %}
Expand Down
1 change: 1 addition & 0 deletions src/_layouts/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{% extends "base.njk" %}

{%- from "postList/macros.njk" import postList -%}

{% block postcontent %}
Expand Down
14 changes: 7 additions & 7 deletions src/_layouts/rss2-feed.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
"subtitle": "Notes on various projects",
"url": (function(){ return process.env.DOMAIN + "/" })(),
"feedUrl": (function(){ return process.env.DOMAIN + "/rss/" })(),
"lastBuildDate": (function(){
var date = new Date();
return date.toUTCString()
})(),
"lastBuildDate": (function(){
var date = new Date();
return date.toUTCString()
})(),
"author": {
"name": "Aram Zucker-Scharff",
"email": "aramdevblog@aramzs.me"
Expand All @@ -31,7 +31,7 @@
<title>{{ metadata.title }}</title>
<atom:link href="{{ metadata.feedUrl }}" rel="self" type="application/rss+xml" />
<link>{{ metadata.url }}</link>
<description>{{ subtitle }}</description>
<description>{{ metadata.subtitle }}</description>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was throwing errors due to throwOnUndefined: true.

-{{ subtitle }}
+{{ metadata.subtitle }}

<lastBuildDate>{{ metadata.lastBuildDate }}</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>hourly</sy:updatePeriod>
Expand All @@ -48,10 +48,10 @@
<pubDate>{{ post.date.toUTCString() }}</pubDate>
<dc:creator>{{ metadata.author.name }}</dc:creator>
<guid isPermaLink="true">{{ absolutePostUrl }}</guid>
<description>{{ post.data.excerpt }}</description>
<description>{{ post.data.excerpt or "???" }}</description>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here… I guess some post didn't have an excerpt defined in the frontmatter, which caused this to be undefined which caused an error; so I added a weak default value.

<content:encoded><![CDATA[{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | safe }}]]></content:encoded>
{%- for tag in post.tags %}
<category><![CDATA[tag]]></category>
<category><![CDATA[{{tag}}]]></category>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't remember why I changed this. I don't think it broke anything. Just looked funny without the {{...}}, like it might output the word "tag". I checked the /feed.xml file and didn't see any <category> elements anyways. 🤷

{%- endfor %}
</item>
{%- endfor %}
Expand Down
8 changes: 6 additions & 2 deletions src/posts/hello-day-8.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,10 @@ And I can also change my passthroughs in `.eleventy.js`.

```javascript
eleventyConfig.addPassthroughCopy({
"dinky/_sass": "sass/dinky/_sass",
"dinky/_sass": "sass/dinky/_sass"
});
eleventyConfig.addPassthroughCopy({
"src/_sass": "sass/src/_sass",
"src/_sass": "sass/src/_sass"
});
```

Expand All @@ -124,9 +124,11 @@ If this works correctly on publish, it will resolve the last of my base requirem

Ok, I was thinking about how to handle build-time cache-breaking and realized that there's likely a way to handle getting a cache-break variable at the build stage. There's [a plugin for Jekyll to do it](https://github.com/jekyll/github-metadata), it looks like [it does so at least partially via the Github API](https://github.com/jekyll/github-metadata/blob/master/docs/authentication.md). It gets [a pretty good list of data too](https://github.com/jekyll/github-metadata/blob/master/docs/site.github.md). There's also [the "Github Context" which is available to GitHub actions](https://docs.github.com/en/actions/reference/context-and-expression-syntax-for-github-actions#github-context). I could call the API during build time, which is what it appears that Jekyll is doing (I didn't really look too deeply into the plugin). But if this data is available in the Actions context... couldn't I export it as a environment variable? Why not try adding that to the Github Actions script?

{% raw %}
```yaml
- run: export GITHUB_HEAD_SHA=${{ github.run_id }}
```
{% endraw %}
Comment on lines +127 to +131
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I think the {{ github.run_id }} was trying to be evaluated by Nunjucks and returning undefined which was breaking the build, so I had to wrap it in a {% raw %}

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, thanks for the catch here!


Now I should be able to call this in my site data, right? So I'll update the file at `src/_data/site.js`.

Expand All @@ -150,13 +152,15 @@ Well... the Sass sitemaps built properly, but none of the Github Actions env stu

What if I set the `env` at the level of job? I think this means I could prob use `GITHUB_SHA`, but I want to see what works.

{% raw %}
```yaml
jobs:
deploy:
runs-on: ubuntu-latest
env:
MY_GITHUB_RUN_ID: ${{ github.run_id }}
```
{% endraw %}
Comment on lines +155 to +163
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as above, where Nunjucks tries to evaluate {{ github.run_id }} and throws an error due to throwOnUndefined: true.


Ah, that did it, so now I know how to use both!

Expand Down