Große Überarbeitung: Neue Inhalte, neues Layout und mehr

.github/workflows/build-and-deploy.yml

@@ -9,7 +9,7 @@ on:
 
 jobs:
   deploy:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v4
         with:
@@ -19,8 +19,8 @@ jobs:
       - name: Setup Hugo
         uses: peaceiris/actions-hugo@v3
         with:
-          hugo-version: '0.68.3'
-          # extended: true
+          hugo-version: '0.111.3'
+          extended: true
 
       - name: Build
         run: hugo

AUFGABE.md

@@ -0,0 +1,61 @@
+
+# Die Aufgabe dieser Webseite
+
+Die Website openstreetmap.de ist das Portal der deutschen OSM-Community in die
+Welt von OpenStreetMap. Es richtet sich an die allgemeine Öffentlichkeit,
+insbesondere in Deutschland bzw. an deutschsprachige Leser. Die Webseite soll
+OSM in seiner ganzen Breite darstellen.
+
+Die Website stellt darüber hinaus auch die Aktivitäten der deutschen
+OSM-Community innerhalb und außerhalb des FOSSGIS e.V. dar. Sie ist
+außerdem Anlaufpunkt für die deutschsprachige OSM-Community.
+
+## Zielgruppen
+
+Die Webseiten richten sich an
+
+1. Interessenten, die OSM noch überhaupt nicht kennen oder nur eine grobe Idee
+   haben. Wenn sie (z.B. über eine Suche) auf diese Webseiten kommen, sollen
+   sie Einführungstexte zu den wichtigsten Themen direkt auf der Seite finden
+   und häufige Fragen direkt beantwortet bekommen. Sie sollen auch angeregt
+   werden, bei OSM mitzumachen und dazu entsprechende Informationen finden.
+2. Einsteiger, die OSM schon kennen, aber nach weiteren Informationen suchen.
+   Sie sollen Informationen direkt auf der Seite finden, oder Links ins Wiki
+   oder zu anderen Seiten, die ein Thema vertieft darstellen.
+3. Mapper, also die OSM-Community für ihre täglichen Bedürfnisse. Hier gibt es
+   Antworten auf FAQs, Hinweise auf Tools und Möglichkeiten mit anderen Mappern
+   in Kontakt zu kommen oder sich über Aktivitäten in Deutschland zu
+   informieren.
+4. Nutzer, also alle, die OSM niedrigschwellig nutzen wollen, zum Beispiel
+   einfach mal auf der OSM-Karte etwas anschauen oder eine Route von A nach B
+   finden wollen.
+
+## Sprache
+
+Die Webseiten werden in deutscher Sprache verfasst. Wo sinnvoll wird bei
+Verweisen auf externe Webseiten (z.B. zum Wiki) auf die deutsche Version einer
+Seite verwiesen.
+
+Der Stil ist in der Regel informell, wir duzen unsere Leser.
+
+Wir versuchen soweit wie möglich, komplizierte Fachbegriffe zu vermeiden.
+Aber ohne sie geht es auch nicht immer, gerade auch in OSM werden viele
+englische Wörter verwendet, das ist okay.
+
+## Verhältnis zu anderen Webseiten
+
+openstreetmap.de ist das Portal der deutschen Community. Wo es ohne relevanten
+Mehraufwand möglich ist, wird die Anschlussfähigkeit an den deutschsprachigen
+Raum in Österreich, der Schweiz, Luxemburg und Belgien mitgedacht, ggf. unter
+Einbeziehung dortiger Informationsangebote. Schwerpunkt dieser Communities
+sollen aber jeweilige nationalen Webseiten sein.
+
+Das OSM-Wiki enthält eine Fülle von Informationen, wir können und wollen das
+Wiki nicht ersetzen. Weil Inhalte im Wiki aber häufig unvollständig, veraltet,
+schlecht sortiert oder schlicht falsch sind, soll openstreetmap.de einen
+leichteren, redaktionell betreuten Einstieg bieten.
+
+Die Webseite des Projektes unter openstreetmap.org enthält relativ wenig
+Informationen über das Projekt und lässt daher eine Lücke, die wir (zumindest
+für Deutschland) füllen können.
+

README.md

@@ -3,33 +3,52 @@
 Aus diesem Repository wird die Webseite
 [openstreetmap.de](https://openstreetmap.de) generiert.
 
-## Inhalt anlegen
+## Hugo
 
-Die openstreetmap.de-Website wird aus den Inhalten, die in den untergeordneten Verzeichnissen existieren, erzeugt.
+Diese Webseite benutzt [Hugo](https://gohugo.io/), um aus den Dateien in diesem
+Repository eine Webseite zu bauen.
 
-Um einen neuen Artikel anzulegen, muss eine neue Datei in `content` mit der Endung `.md` (Markdown) angelegt werden. Ein Artikel beginnt mit den Metadaten ganz oben:
+Derzeit verwendet wir Hugo Version 0.111.3, wie es bei Debian installiert wird.
 
-	---
-	title: "Dies ist ein Titel"
-	date: "2019-02-29T15:00:00+02:00"
-	author: "Marta Musterfrau"
-	---
+Du kannst Hugo selbst installieren und lokal laufen lassen, um die Webseite zu
+generieren: [Hugo
+Installationsanweisungen](https://gohugo.io/getting-started/installing/).
+Anschließend kann im Verzeichnis `hugo serve` ausgeführt werden. Dies startet
+einen lokalen Webserver, der üblicherweise unter
+[http://localhost:1313/](http://localhost:1313/) zu erreichen ist.
 
-Anschließend kann der Inhalt geschrieben werden, z.B.
+## Automatische Generierung der Webseite
 
-```markdown
-## Unterüberschrift
+Jedes mal, wenn dieses Repository auf Github geändert wird (entweder weil man
+auf Github eine Datei ändert oder wenn man in den `main` Branch pushed), dann
+wird die Webseite neu generiert und auf den Webserver übertragen. Das passiert
+über die "Github actions"-Funktion, die unter
+`.github/workflows/build-and-deploy.yml` konfiguriert wird. Der neue Inhalt ist
+dann nach wenigen Sekunden auf dem Webserver verfügbar.
 
-Hier ist etwas Text.
+Zum Testen wird zusätzlich der Inhalt des `staging` Branches nach
+staging.openstreetmap.de installiert, auf das man nur mit einem Passwort
+zugreifen kann.
 
-Und hier ist ein neuer Absatz.
-```
+## Inhalt anlegen
 
-Statische Inhalte wie Bilder und dergleichen, die nicht von Hugo interpretiert werden sollen, gehören unter `static`, nicht nach `content`.
+Die openstreetmap.de-Website wird aus den Inhalten, die in den untergeordneten
+Verzeichnissen existieren, erzeugt. Webseiten gehören in das Verzeichnis
+`content`, sie werden dort im
+[Markdown-Format](https://www.markdownguide.org/tools/hugo/) angelegt und
+automatisch nach HTML konvertiert.
 
-Lokal kann die Webseite mithilfe von hugo generiert werden: [Hugo Installationsanweisungen](https://gohugo.io/getting-started/installing/). Anschließend kann im Verzeichnis `hugo serve` ausgeführt werden. Dies startet einen lokalen Webserver, der üblicherweise unter [http://localhost:1313](http://localhost:1313) zu erreichen ist.
+Statische Inhalte wie Bilder gehören nach `static`. Für Inhalte, die nur von
+einer Webseite gebraucht werden wird dabei eine zum `content`-Verzeichnis
+parallele Dateihierarchie benutzt. Mehrfach genutzte Bilder gehören nach
+`static/img/'.
 
-Im Zweifelsfall Inhalte anlegen und Pull Request öffnen, wir finden eine Lösung :)
+Achtung: Die Quelle für die Index-Seite hat bei Hugo einen führenden
+Unterstrich:
+
+```
+_index.md
+```
 
 ## Kalender
 
@@ -49,12 +68,18 @@ neu generiert wird. Trotzdem sollte man alte Events gelegentlich entfernen.
 Für Events kann ein Bild hinterlegt werden, das muss im Verzeichnis
 `static/img/cal/` abgelegt werden.
 
-## Generierung der Webseite
+## Suchfunktion
 
-Jedes mal, wenn dieses Repository auf Github geändert wird (entweder weil man
-auf Github eine Datei ändert oder wenn man in den `main` Branch pushed), dann
-wird die Webseite neu generiert und auf den Webserver übertragen. Das passiert
-über die "Github actions"-Funktion, die unter
-`.github/workflows/build-and-deploy.yml` konfiguriert wird. Der neue Inhalt ist
-dann nach wenigen Sekunden auf dem Webserver verfügbar.
+Da wir mit statischen Seiten arbeiten, gibt es keine Suchunterstützung vom
+Server. Stattdessen wird beim Erzeugen der Seiten auch eine Datei `index.json`
+erzeugt, die alle Inhalte aller Seiten enthält. Die wird dann bei der Suche
+im Browser von etwas Javascript geladen und darin gesucht.
+
+Dazu werden diese Javascript-Libraries benutzt:
+
+* [Fuse.js](https://www.fusejs.io/) für die Suche.
+* [Mark.js](https://markjs.io/) für das Markieren der Suchergebnisse.
+
+Die Implementierung in `static/js/search.js` basiert auf [dieser
+Beschreibung](https://makewithhugo.com/add-search-to-a-hugo-site/).