Der Umstieg meiner Website von WordPress nach 11ty hatte viele Vorteile. U.a. laden Seiten viel schneller, es ist unwahrscheinlicher, dass die Website gehackt wird und ich habe auch deutlich mehr Kontrolle über das Design und den Aufbau. Was bisher aber fehlte, war eine runde Lösung für eine Suche.
Vorher
Das bisherige Suchformular führte nach DuckDuckGo weiter. Damit sich die Ergebnisse nur auf Seiten von mir begrenzen, wird zur Suchanfrage noch " site:.lgk.io" angehängt. Sehr praktisch, ich brauche keine eigene Suchmaschine bauen. Etwas unglücklich ist aber, dass man meine Seite verlassen muss und sich dann das Design ändert. Viel besser wäre es, wenn die Ergebnisse direkt auf meiner Seite angezeigt werden.
Nachher
Nach dem Klicken des Suchen-Symbols öffnet sich jetzt ein Modal, also ein Fenster im Fenster mit einer Suchleiste. Die Ergebnisse werden direkt darunter angezeigt. Entweder nachdem man als User Enter drückt, oder nachdem man aufgehört hat zu tippen.
Die serverseitige Lösung habe ich mit Serverless Functions von Vercel umgesetzt. Am Frontend habe ich für das Modal Bootstrap und für die "Reactivity" HTMX eingesetzt.
Server-Funktionen für eine statische Website
Mein Ziel war, Backend-Code zu entwickeln, das sich die Ergebnisseite von DuckDuckGo holt und das HTML leicht angepasst für meine Seite zurückgibt. Das Problem: meine statische Website hat kein Backend, also hatte ich keine Möglichkeit serverseitigen Code auszuführen.
Mit meinem Webspace bei meinem Hosting-Anbieter habe ich zwar noch eine klassische Apache-Umgebung, wo ich mit PHP diesen Code hosten lassen könnte.
Ich wollte aber lieber nach anderen Möglichkeiten schauen. Ich hoste diese 11ty-Website bei Vercel. Und Vercel bietet Serverless Functions an. Genau das was ich brauche! In einem api-Ordner kann ich JavaScript-Dateien verwalten, diese werden als Routen verfügbar sobald sie hochgeladen wurden.
Hier ein Beispiel einer solchen Datei, hier mit TypeScript geschrieben:
import type { VercelRequest, VercelResponse } from "@vercel/node"
export default async function handler(req: VercelRequest, res: VercelResponse) {
res.json({
helloFrom: "my Vercel serverless function!"
})
}
Funktioniert sehr gut. Ein Vorteil ist auch, dass ich diesen Code in der selben Repository verwalten kann. Das erleichtert auch das Debuggen auf meinem Rechner. Hätte ich diesen Code in einer separaten PHP-Anwendung, wäre das etwas komplizierter. Auch über CORS-Probleme muss ich mir so keine Gedanken machen, weil das Frontend immer über die gleiche Domain läuft wie die "serverless" API. Damit ich die API lokal starten und debuggen kann, starte ich meine Website nicht mehr mit npx @11ty/eleventy, sondern mit der Vercel CLI mit dem Befehl vercel dev.
Effiziente Reactivity mit HTMX
Ich bin vor kurzem auf HTMX gestoßen. Die Library ist ideal ohne viel Aufwand, um Teile einer eigentlich statischen Seite dynamisch zu machen. Um die Suchergebnisse zu sehen, soll nicht die aktuelle Seite verlassen werden, sie sollen einfach angezeigt werden. Mit den Beispielen von HTMX konnte ich folgendes umsetzen:
- Beim Klick auf Such-Button ein Modal anzeigen.
- Nach Eingabe des Suchbegriffs Ergebnisse im Bereich darunter einbinden.
Und das im Kern ohne selbst JavaScript zu schreiben.