💾 Archived View for hyperborea.org › tech-tips › 11ty-gemini.gmi captured on 2022-04-28 at 17:19:56. Gemini links have been rewritten to link to archived content
-=-=-=-=-=-=-
WORK IN PROGRESS!!!
I've got several websites building with Eleventy, and I'm working on setting it up to automatically build the same sites as Gemini capsules. One set of source documents in Markdown, two formats!
There may be an easier way to do this, but here's what I've got so far:
Copy .eleventy.js to gemini.js
Create a _gemini_includes folder for the Gemini layouts (which are going to be a whole lot simpler!)
Tell gemini.js to use the alternate templates and write to an alternate output. Merge this into the return statement at the end:
return {
dir: {
includes: "_includes_gemini",
output: "_gemini",
}
}
Tell .eleventy.js to ignore your gemini-specific files, including the output folder, and vice-versa. Put statements like this in the module.exports section:
eleventyConfig.ignores.add("_includes")
or
eleventyConfig.ignores.add("_gemini_includes")
You'll probably want to format the post dates in lists using the YYYY-MM-DD format so people can subscribe to them.
If you're using Luxon, you can add this to the config:
eleventyConfig.addFilter("geminiDate", dateObj => {
return DateTime.fromJSDate(dateObj, {zone: 'America/Los_Angeles'}).toISODate();
});
Note the time zone - if you're using local time on your posts, use your own time zone here. If you're using UTC, use UTC to display it.
11ty Common Pitfalls: Dates off by one day
Then you can put {{ post.date | geminiDate }} in the template where you build the list, like this in a Nunjucks template:
{% for post in collections.posts %}
=> {{ post.url | url }} {{ post.date | geminiDate }} {{ post.data.title }}{% endfor %}
so it will output this:
=> post2.gmi 2022-04-04 Whatever => post1.gmi 2022-03-12 I'm an example post!
Oh yeah, notice how I put the end of the for loop on the same line as the link? That's because Eleventy doesn't trim whitespace. HTML ignores it, but Gemtext doesn't.
Use front matter in your layouts to change the permalink scheme for your files.
---
permalink: "{{ page.filePathStem }}.gmi"
---
or
---
permalink: "{{ page.filePathStem }}/index.gmi"
---
If you need to do a completely different template for something (for example, your web-targeted index page might need to be rearranged or trimmed down for Gemini), you can create an alternate template for it with another name.
Use eleventyConfig.ignores.add("index_gem.md") so each config only builds the right version of the template
Use permalink in the alternate template and set it to index.gmi (or whatever else it needs to be)
npx @11ty/eleventy --config=gemini.js
Make sure you test it both with and without the alternate config to ensure that the web version isn't trying to build any gemini-specific files and vice versa, and that you don't have any conflicts in the permalink scheme.
-- Kelson Vibber, 2022-04-03