iJUG Pages

Diese Landingpage macht die iJUG Pages Webseiten unserer Mitglieder sichtbar. Der iJUG e. V. betreibt für seine Java User Groups eine Forgejo-Instanz unter git.ijug.eu und die dazugehörige git-pages-Installation iJUG Pages.

Das Verzeichnis zeigt jede eingetragene Webseite als verlinkte Karte mit Titel, kurzem Untertitel und Screenshot. Die Karten passen sich an die Browserbreite an und werden bei jedem Aufruf zufällig gemischt. Die Seite unterstützt Light- und Darkmode: Zunächst gilt die Systemeinstellung, eine manuelle Auswahl wird im Browser gespeichert.

Die Umsetzung verwendet ausschließlich HTML, CSS und JavaScript ohne zusätzliche Libraries oder Build-Schritt. JavaScript lädt die Einträge aus public/pages.json und erzeugt daraus die Karten.

Eure Webseite ergänzen

Voraussetzung ist eine bereits veröffentlichte, öffentlich erreichbare iJUG Pages Webseite eurer Mitgliedsgruppe. Mit dem Eintrag ergänzt ihr das Verzeichnis; die Webseite selbst wird weiterhin in ihrem eigenen Repository gepflegt.

1. Repository forken und klonen

Erstellt in Forgejo einen Fork dieses Repositorys in eurem Benutzerkonto oder eurer Organisation. Klont anschließend euren Fork. Die passende Klon-URL findet ihr auf dessen Repository-Seite:

git clone <Klon-URL-eures-Forks>
cd <Repository-Verzeichnis>
git switch -c add-meine-jug

Ersetzt die Platzhalter durch eure Werte und wählt einen passenden Branch-Namen.

2. Screenshot erstellen und hinzufügen

Öffnet eure veröffentlichte Webseite im Browser und erstellt einen Screenshot ihrer Startseite. Wählt einen aussagekräftigen Ausschnitt ohne Browserleisten oder geöffnete Dialoge.

• Verwendet vorzugsweise das WebP Format.
• Empfohlen sind 960 × 600 Pixel im Seitenverhältnis 16:10. Andere Formate werden beim Anzeigen auf dieses Verhältnis zugeschnitten.
• Speichert das Bild unter public/screenshots/, beispielsweise als meine-jug.webp.
• Verwendet einen eindeutigen Dateinamen, möglichst mit Kleinbuchstaben und Bindestrichen ohne Leerzeichen.

3. Eintrag in pages.json ergänzen

Öffnet public/pages.json und fügt der bestehenden Liste ein Objekt für eure Webseite hinzu:

{
  "title": "Meine Java User Group",
  "subtitle": "Treffen, Vorträge und Austausch für unsere Java-Community.",
  "url": "https://eure-veroeffentlichte-pages-webseite.example/",
  "screenshot": "screenshots/meine-jug.webp"
}

Ersetzt die Beispielwerte durch eure Angaben:

Feld	Inhalt
title	Name eurer JUG oder eurer Webseite
subtitle	Kurze Beschreibung des Angebots
url	Vollständige öffentliche URL eurer Webseite, vorzugsweise mit https://
screenshot	Pfad zum Screenshot relativ zu public/, also ohne vorangestelltes public/

Die Datei enthält ein JSON-Array, das mit [ beginnt und mit ] endet. Trennt die Objekte durch Kommas; nach dem letzten Objekt steht kein Komma. Verwendet doppelte Anführungszeichen und keine Kommentare.

Die Position eures Eintrags in der Datei bestimmt nicht die spätere Position auf der Seite, da die Anzeige zufällig gemischt wird.

4. Lokal testen

Startet im Projekt-Root einen lokalen Webserver, beispielsweise mit einem installierten JDK 25 oder neuer:

jwebserver -p 8000 -d public

Öffnet anschließend http://localhost:8000 im Browser. Zum Beenden des Servers drückt ihr Strg+C.

Öffnet die Seite über den Webserver statt direkt als lokale HTML-Datei, damit der JavaScript-Abruf von pages.json funktioniert.

Prüft vor dem Einreichen:

• Eure Karte zeigt den richtigen Titel, Untertitel und Screenshot.
• Ein Klick auf die Karte öffnet eure veröffentlichte Webseite.
• Die Darstellung funktioniert bei schmaler Browserbreite sowie im Light- und Darkmode.
• Auch die anderen Karten werden weiterhin geladen. Bei einem JSON-Fehler zeigt die Seite eine Fehlermeldung an.

5. Änderungen committen und pushen

Fügt den JSON-Eintrag und euren Screenshot zu einem Commit hinzu und pusht den Branch in euren Fork:

git add public/pages.json public/screenshots/meine-jug.png
git commit -m "Add Meine JUG to iJUG Pages"
git push -u origin add-meine-jug

Passt Dateinamen, Commit-Nachricht und Branch-Namen an eure Gruppe an.

6. Pull Request erstellen

Öffnet euren Fork in Forgejo und erstellt einen Pull Request von eurem Branch gegen den Standardbranch des ursprünglichen Repositorys. Nennt darin eure JUG, die URL eurer Webseite und dass ihr die Darstellung lokal geprüft habt.

Nach Prüfung und Übernahme des Pull Requests ist euer Eintrag Teil des Verzeichnisses und wird mit der nächsten Veröffentlichung der Landingpage sichtbar.

Projektstruktur

public/
├── index.html       # Aufbau und statische Inhalte
├── styles.css       # Layout, responsive Darstellung und Farbmodi
├── script.js        # JSON-Abruf, zufällige Reihenfolge und Karten
├── pages.json       # Verzeichnis der Webseiten
├── logo.svg         # iJUG-Logo
└── screenshots/     # Vorschaubilder der Webseiten

Weitere Informationen zum Verband findet ihr auf www.ijug.eu.