Zufälliger Post unter Hugo

Ich hoste eine kleine Rezeptsammlung. Immer wieder stand ich vor der Frage, was ich kochen soll - und wollte dazu gern die Möglichkeit haben, mir ein zufälliges Rezept anzeigen zu lassen. Die Seite ist allerdings statisch. Mit etwas Javascript habe ich trotzdem eine Möglichkeit gefunden, die gewünschte Funktionalität zu implementieren.

Voraussetzungen

Die Rezeptsammlung erstelle ich mit Hugo. Auf dem Webserver liegen also lediglich statische Dateien. Ich habe nicht vor, diese Tatsache für ein einziges Feature zu ändern.

Die Auswahl einer zufälligen Seite muss also auf dem Client passieren. Das schreit nach Javascript. Nicht meine Lieblingsmethode, um Dinge zu lösen, aber in diesem Fall die naheliegendste.

Die Zielgruppe der Seite bin hauptsächlich ich selbst. Ich kann also gut damit leben, wenn die Lösung eine ist, die in erster Linie für mich funktioniert.

Aufbau

Grundsätzlich brauche ich zur Umsetzung zwei Komponenten. Einmal muss ich eine Liste aller Rezepte erzeugen, aus denen eines zufällig gewählt wird. Und ich muss diese zufällige Wahl aus der Liste umsetzen.

Rezeptliste

Standardmäßig gibt Hugo eine Seite als HTML aus. Daneben sind allerdings auch eine Vielzahl anderer Ausgabeformate möglich. Diese Funktion nutze ich, um eine JSON Liste aller Rezepte zu erzeugen.

Dazu habe ich im Ordner layouts (entweder direkt in der Seite oder im verwendeten Theme) eine Datei index.json.json mit dem folgenden Inhalt angelegt.

{{- $allrecipes := slice -}}

{{- range site.RegularPages -}}
  {{- $recipe := .RelPermalink -}}
  {{- $allrecipes = $allrecipes | append $recipe -}}
{{- end -}}

{{- $object := dict "allrecipes" $allrecipes -}}

{{- $object | jsonify -}}

Dieser Code ermittelt für alle .RegularPages die jeweilige URL und schreibt diese in eine Liste $allrecipes. Diese Liste wird anschließend in ein JSON Dict umgewandelt und ausgegeben.

Nach Deployment dieser Anpassung ist unter /index.json daraufhin eine Liste der relativen URLs aller Rezepte zu finden.

Zufallswahl

Nachdem diese Liste nun steht, muss daraus ein zufälliger Eintrag gewählt und geöffnet werden. Dazu habe ich folgendes Javascript geschrieben:

var recipeList = [];
let json_path = window.location.origin + '/index.json'

fetch(json_path)
    .then((response) => response.json())
    .then((data) => {
        recipeList = data["allrecipes"]
    })
    .catch((err) => {
        console.log(err)
    })

function sendToRandomRecipe() {
    let randIndex = Math.floor(Math.random() * recipeList.length);
    let randRecipe = recipeList[randIndex]
    window.location.href = randRecipe;
}

Der Code lädt zunächst die Liste der URLs aus der JSON Datei in die Variable recipeList. Anschließend wählt die Funktion sendToRandomRecipe einen Eintrag aus dieser Liste aus und schickt den Browser dorthin.

Nutzbarkeit

Ich möchte gern auf der Startseite einen Button haben, der mich zu einem zufälligen Rezept schickt. Den Javscript Code habe ich daher in der Datei layouts/_default/home.html in einem <script>-Block eingefügt.

Außerdem habe ich dort den folgenden Button erstellt:

<button class="button" onclick='sendToRandomRecipe()'>Zufälliges Rezept</button>

Mit ein wenig CSS sieht der noch ganz nett aus und erlaubt mir jetzt, bei Unschlüssigkeit und einem Knopfdruck eine zufällige Inspiration für das nächste Essen zu bekommen.