Mit Eleventy und ein paar Zeilen JavaScript ist es möglich, meinen RSS Feed in die Seite zu integrieren.
Mit Eleventy und ein paar Zeilen JavaScript ist es möglich, meinen RSS Feed in die Seite zu integrieren.

Aus einem RSS Feed Seiten in Eleventy erzeugen

Eine der Gründe für mich, Eleventy für meine Seite einzusetzen war, dass ich den Inhalt meines Podcast Feeds (der von Podigee erzeugt wird) integrieren kann. Ich muss hierfür zunächst den RSS Feed parsen und in JSON umwandeln und kann dann ausnutzen, dass Eleventy zusätzliche Datenquellen unterstützt und diese in meinen Seiten einbinden.

Überblick

Einen RSS Feed in JSON umwandeln

Fangen wir mit dem Abruf der Daten an.

Glücklicherweise gibt es im JavaScript Ökosystem für nahezu jeden Anwendungsfall eine library. In diesem Fall erledigt rss-parser 99% der Arbeit. Um einen Feed zu laden und in JSON umzuwandeln reicht der folgende Code.

let Parser = require("rss-parser");
(async () => {
let parser = new Parser();
let feed = await parser.parseURL("https://herrmies.podigee.io/feed/mp3");
// do something with the feed data
})();

Seiten aus Daten generieren

Diese Elemente müssen in Eleventy noch in Seiten umgewandelt werden. Wir kennen aus dem vorherigen Beitrag ja bereits Collections und hier nutzen wir einen recht ähnlichen Ansatz: wir können neben Collections auch sogenannte "global data files" anlegen und deren Inhalt nutzen.

hierzu legt man im Verzeichnis _data eine Datei an über deren Dateinamen man dann überall auf den Inhalt zugreifen kann. Hier bieten sich entweder direkt JSON oder JavaScript Dateien, die über module.exports eine Funktion zurückgeben, an. Eleventy kann auch mit weiteren Datentypen umgehen.

Wenn Euch interessiert, wie Daten in Eleventy genutzt werden können möchte ich Euch noch einen Blogpost von Sia Karamalegos ans Herz legen.

In meinem Fall habe ich im Verzeichnis _data eine Datei episodes.js, welche im Kern den folgenden Inhalt hat:

const Parser = require("rss-parser");

module.exports = function() {
let parser = new Parser();
return await parser.parseURL(
"https://herrmies.podigee.io/feed/mp3"
);
}

Mehr ist nicht notwendig um aus dem Inhalt des Feeds Seiten zu generieren. Dafür kann ich beispielsweise eine Datei episodenliste.md anlegen und greife in der Front Matter dann direkt auf die Daten zu:

---
pagination:
data: episodes.items
size: 1
alias: item
permalink: "{{item.title | slug }}/"
---

Innerhalb der pagination greife ich direkt auf episodes zu, wähle jweils ein Element und gebe ihm einen Alias item. Mittels permalink erzeuge ich dynamische URLs basierend auf dem Titel des Podcasts. Wenn ich meine Seite baue wird für jeden Eintrag im Feed eine Seite generiert. Diese kann ich auch an anderer Stelle referenzieren. Der folgende Code würde zum Beispiel eine Liste meiner Episoden erzeugen:

<ul>
{% for episode in episodes.items %}
<li><a href="{{ episode.title | slug }}">{{ episode.title }}</a></li>
{% endfor %}
</ul>

Noch ein Tipp, wenn ihr mit Daten in Eleventy arbeitet: es ist möglich innerhalb von Seiten den log Filter zu nutzen um den Inhalt einer Variable angezeigt zu bekommen. Diese Einträge werden dann nicht gerendert, erscheinen aber im Terminal, wenn ihr die Seite baut.

{{episodes | log }}

Mich hat an dieser Lösung überzeugt, dass ich wirklich wenig tun muss um die Seiten aus einem RSS Feed zu erzeugen.

Webmentions

Dies sind Webmentions über das IndieWeb und webmention.io.

Send a webmention