-- Leo's gemini proxy

-- Connecting to hyperborea.org:1965...

-- Connected

-- Sending request

-- Meta line: 20 text/gemini;lang=en-US

Eleventy (11ty): Generate Gemini Capsule Alongside Website


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")

Dates and Gemini Feeds


You'll probably want to format the post dates in lists using the YYYY-MM-DD format so people can subscribe to them.

Gemini Subscriptions


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();
  });

Luxon: DateTime.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.


TODO


Parse markdown to gemtext instead of html. (Probably going to have to call out to an external program, unless I can find a Node.js Markdown-to-Gemtext library or find time to write my own.)

Test link consistency - modified permalinks and gemini URLs might confuse it.

Trim whitespace (almost certainly an Eleventy plugin)


Layouts and Templates


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)


Running it


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



More Tips

Fediverse: KelsonV@Wandering.shop

-- Response ended

-- Page fetched on Fri May 17 08:23:52 2024