Auf der Startseite soll künftig täglich eine andere Inhaltsseite der Website als Featured Page hervorgehoben werden. Ziel ist es, nicht nur aktuelle News sichtbar zu machen, sondern auch ältere oder tiefer liegende Inhalte regelmäßig wieder an die Oberfläche zu holen.
Die Auswahl erfolgt vollständig clientseitig mit Vanilla JavaScript. Es sind weder Serverlogik noch Frameworks oder externe Abhängigkeiten nötig. Das Konzept eignet sich daher gut für eine statische GitHub-Pages-Website.
Alle Seiten, die als Featured Page erscheinen dürfen, werden in einer eigenen JSON-Datei gelistet. JavaScript ermittelt anhand des aktuellen Datums einen Index und wählt damit einen Eintrag aus dieser Liste aus.
Die Auswahl soll sich einmal täglich ändern. Anstatt eine einfache Quersumme des Datums zu verwenden, ist eine fortlaufende Tagesnummer sinnvoller.
const dayNumber = Math.floor(Date.now() / 86_400_000);
const index = dayNumber % pages.length;Dadurch wandert die Auswahl mit jedem Tag um genau eine Position weiter. Bei beispielsweise 40 eingetragenen Seiten wird innerhalb von 40 Tagen jede Seite genau einmal angezeigt, bevor der Zyklus erneut beginnt.
Eine einfache Datums-Quersumme wäre zwar möglich, erzeugt aber nur einen relativ kleinen Wertebereich. Dadurch würden sich manche Ergebnisse häufig wiederholen, während andere Seiten eventuell nie ausgewählt würden.
Eine wirklich zufällige Auswahl klingt zunächst reizvoll, hat aber einen Nachteil: Dieselbe Seite könnte innerhalb weniger Tage mehrfach erscheinen, während andere Inhalte monatelang nicht gezogen werden.
Eine deterministische Rotation ist deshalb für diesen Zweck besser:
Die Reihenfolge der Seiten innerhalb der JSON-Datei kann bewusst gemischt werden, damit beispielsweise nicht mehrere Elektronik- oder Botanikseiten unmittelbar hintereinander erscheinen.
Die Featured Pages sollten nicht in posts.json gespeichert
werden. Diese Datei besitzt bereits eine klar definierte Aufgabe: Sie enthält
die dynamischen Newsbeiträge der Website.
Für statische Seiten ist deshalb eine eigene Datei sinnvoll:
assets/
├── js/
│ ├── news.js
│ └── featured-page.js
│
└── json/
├── posts.json
└── featured-pages.jsonDamit bleiben News-System und Featured-Page-System voneinander unabhängig. Beide können verändert werden, ohne die jeweils andere Struktur zu beeinflussen.
Jeder Eintrag sollte alle Informationen enthalten, die für die Vorschau benötigt werden. So muss JavaScript nicht versuchen, andere HTML-Seiten auszulesen oder Metadaten daraus zu extrahieren.
{
"pages": [
{
"id": "astronomy-significant-stars",
"title": "Significant Stars",
"category": "Astronomy",
"href": "astronomy/significant_stars.html",
"image": "assets/img/news/moon_plabutsch03.jpeg",
"alt": "The Moon above Graz",
"teaser": "A structured journey through prominent stars, their physical properties, names and cultural histories.",
"active": true
},
{
"id": "electronics-meshtastic",
"title": "Meshtastic Experiments",
"category": "Electronics",
"href": "electronics/meshtastic.html",
"image": "assets/img/electronics.jpg",
"alt": "Meshtastic electronics and antenna hardware",
"teaser": "Field tests, antenna geometry and practical experiments with decentralized LoRa communication.",
"active": true
}
]
}idtitlecategoryhrefimagealtteaseractiveDie Featured Page sollte vor allem Inhalte zeigen, die einen eigenen Entdeckungswert besitzen. Nicht jede technisch vorhandene HTML-Datei muss deshalb automatisch Teil der Rotation sein.
Geeignet sind beispielsweise:
Eher nicht aufnehmen:
Das Featured-System sollte Besucher auf Entdeckungsreise schicken – nicht versehentlich in den technischen Heizungskeller der Website.
Die Featured Page sollte stärker hervorgehoben werden als eine gewöhnliche Themenkachel. Sinnvoll ist eine breite Vorschaukarte mit einem großen Bild und dauerhaft sichtbaren Textinformationen.
Empfohlene Inhalte:
┌──────────────────────────────────────────────┐
│ │
│ großes Vorschaubild │
│ │
│ FEATURED PAGE · ASTRONOMY │
│ Significant Stars │
│ A structured journey through the night sky │
└──────────────────────────────────────────────┘Der Seitentitel sollte nicht ausschließlich über einen Hover-Effekt erscheinen. Auf Touch-Geräten existiert Hover praktisch nicht. Die wichtigsten Informationen müssen daher permanent sichtbar sein.
Eine sinnvolle Reihenfolge wäre:
Dadurch erhält die Featured Page genügend visuelles Gewicht, ohne die eigentliche Hauptnavigation zu verdrängen.
Bei einer täglichen Auswahl muss definiert werden, wann ein neuer Tag beginnt.
Die einfachste technische Variante wäre UTC. Dann sehen alle Besucher weltweit zur selben Zeit dieselbe Featured Page.
Für diese Website ist jedoch eine Rotation nach Europe/Vienna sinnvoller. Die Featured Page würde damit jeweils um Mitternacht österreichischer Zeit wechseln.
Andernfalls könnte beispielsweise ein Besucher in Österreich bereits die neue Seite sehen, während ein Besucher in Nordamerika noch die Auswahl des Vortages erhält.
Die Reihenfolge der JSON-Einträge bestimmt gemeinsam mit dem Tagesindex, welche Seite an welchem Tag erscheint.
Wird ein neuer Eintrag mitten in die Liste eingefügt, verändert sich die künftige Rotation. Technisch ist das unproblematisch.
Wenn eine möglichst stabile Reihenfolge gewünscht ist, sollten neue Seiten immer am Ende der Liste ergänzt werden.
Eine Seite kann außerdem mit
"active": false deaktiviert werden. Das ist beispielsweise für
unfertige oder vorübergehend nicht gewünschte Inhalte nützlich.
Der Bereich sollte nicht vollständig von JavaScript abhängig sein.
Sinnvoll ist ein einfacher statischer Fallback direkt in der
index.html.
Sobald featured-page.js erfolgreich geladen wurde, ersetzt das
Script diesen Fallback durch die tatsächlich für den aktuellen Tag
ausgewählte Seite.
Dadurch bleibt zumindest ein sinnvoller Link sichtbar, falls:
Das JavaScript sollte defensiv aufgebaut werden und insbesondere folgende Fälle berücksichtigen:
featured-pages.json ist nicht erreichbar"active": falseEin defektes Bild sollte möglichst nicht verhindern, dass der Link selbst weiterhin funktioniert.
Bei einem vollständigen Ladefehler kann entweder der statische Fallback stehen bleiben oder eine dezente Meldung ausgegeben werden.
Da die gesamte Featured-Karte klickbar sein soll, sollte sie als
<a>-Element aufgebaut werden.
Wichtig sind außerdem:
:focus-visibleBestehende Eigenschaften der normalen Website-Kacheln wie leichter Bild-Zoom, Border-Radius und Fokusdarstellung können als gestalterische Grundlage verwendet werden. Für Featured Pages ist dennoch eine eigene CSS-Klasse sinnvoll.
Das Feature bleibt sehr leichtgewichtig. Pro Seitenaufruf werden lediglich eine kleine JSON-Datei und das Featured-JavaScript geladen.
Es werden keine Bibliotheken, Frameworks, Datenbanken oder externen Dienste benötigt.
Das System bleibt damit vollständig kompatibel mit:
assets/json/featured-pages.json anlegen.
index.html einfügen.
assets/js/featured-page.js erstellen.
"active": true berücksichtigen.
Da die Featured Pages über fetch() aus einer JSON-Datei
geladen werden, sollte die Website nicht einfach per
file:// geöffnet werden.
Stattdessen kann lokal ein einfacher HTTP-Server gestartet werden:
python -m http.server 8000Danach kann die Website beispielsweise hier aufgerufen werden:
http://localhost:8000/index.htmlVor der endgültigen Implementierung müssen noch einige redaktionelle Entscheidungen getroffen werden:
featured-pages.json aufgenommen?
Die bevorzugte Lösung besteht damit aus drei klar getrennten Komponenten:
Damit bleibt das System klein, transparent und unabhängig vom bestehenden News-Renderer.
Das eigentliche JavaScript ist dabei der einfache Teil. Der entscheidende Qualitätsfaktor ist die kuratierte Seitenliste: Welche Inhalte verdienen es, regelmäßig wieder aus den Tiefen der Website hervorgeholt zu werden?