Kontaktseite umstrukturiert in Unterseiten.

FAQ der Mailliste als Akkordeon umgestellt.

OpenStreetMap eingebunden. (/kontakt/adresse/)

nav.js bereinigt.

Signed-off-by: xoy <felix@erstfeld.net>

src/components/nav.js

@@ -14,17 +14,21 @@ let pages = [
 ]
 
 function PathCheck(path, link) {
-  if(path === link) {
+  const isSSR = typeof window === 'undefined'
-    return ' ' + navStyles.navItemActive
-  }
 
-  if(link !== '/' && path !== '/') {
+  if(!isSSR) {
-    if(path.includes(link)){
+    if(path === link) {
       return ' ' + navStyles.navItemActive
     }
   
-    if(link.includes(path)){
+    if(link !== '/' && path !== '/') {
-      return ' ' + navStyles.navItemActive
+      if(path.includes(link)){
+        return ' ' + navStyles.navItemActive
+      }
+    
+      if(link.includes(path)){
+        return ' ' + navStyles.navItemActive
+      }
     }
   }
 
@@ -33,9 +37,6 @@ function PathCheck(path, link) {
 
 export default function Nav({ path }) {
   // nav items should always be active in the staticly generated html
-  const isSSR = typeof window === 'undefined'
-  const activeClasses = link =>
-    isSSR && path === link ? ' ' + navStyles.navItemActive : ''
 
   return (
     <>

src/styles/global.css

@@ -42,3 +42,11 @@ h6 {
   font-family: 'Space Mono', monospace;
   font-weight: bold;
 }
+
+a[title="IRC"], a[title="eMail"], a[title="Telefon"], a[title="Adresse"] {
+  display: inline-block !important;
+  width: 100px;
+  height: 100px;
+  display: inline-block !important;
+  margin: 0 1vw 0 1vw;;
+}

src/webpages/adresse.md

@@ -0,0 +1,15 @@
+---
+path: '/kontakt/adresse/'
+title: 'adresse'
+edit: 'adresse.md'
+---
+
+import { Address } from "../components/data.js"
+
+[Zurück](/kontakt)
+
+# Adresse
+
+<Address/>
+
+<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=7.463200986385346%2C51.52693021432671%2C7.4667415022850046%2C51.52841869497588&amp;layer=mapnik&amp;marker=51.52767446073405%2C7.464971244335175" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=51.52767&amp;mlon=7.46497#map=19/51.52767/7.46497" target="_blank">Größere Karte anzeigen</a></small>

src/webpages/irc.md

@@ -0,0 +1,61 @@
+---
+path: '/kontakt/irc/'
+title: 'irc'
+edit: 'irc.md'
+---
+
+[Zurück](/kontakt)
+
+# IRC
+
+Wir sind im Hackint IRC-Netzwerk erreichbar, der Server ist
+**irc.hackint.org** (SSL Port **6697**), Channel **#ccc.do**.
+
+Um Missverständnisse und böses Blut zu vermeiden, hier mal reinschauen:
+
+[RFC-1855](https://tools.ietf.org/html/rfc1855),
+[RFC-2811](https://tools.ietf.org/html/rfc2811)
+
+## Warum Hackint
+
+Das Hackint-Netzwerk wurde unter anderem vom Chaostreff Dortmund ins Leben
+gerufen, um eine einfache und trotzdem sichere Kommunikation zu ermöglichen.
+Um das zu gewährleisten sind alle Server-Verbindungen verschlüsselt
+und alle Server ermöglichen den Benutzern eine verschlüsselte Verbindung
+via SSL aufzubauen.
+Eines der Ziele des Hackints ist es, eine Heimat für Hacker, Haecksen und
+ähnliche Leute auf der ganzen Welt zu schaffen und einfache Verbindungen
+zwischen einzelnen Gruppen zu ermöglichen.
+Damit das klappt, müssen sich möglichst viele chaosnahe Gruppen in diesem Netz
+anfinden.
+
+## Anleitung für des IRCens Unkundige
+
+### Einen IRC-Client suchen
+
+Unix/Linux-nutzende können [HexChat](https://hexchat.github.io/) benutzen,
+oder, für das CLI-Feeling `weechat` oder `irssi`.
+
+Windows-nutzenden ist ebenfalls [HexChat](https://hexchat.github.io/)
+zu empfehlen.
+
+todo: Macs
+
+### Konfiguration von HexChat
+
+Als erstes muss du dir einen Nick-(Spitz-)namen ausdenken.
+Jede Person hat einen einzigartigen Nick, daher nicht wundern wenn gängige
+Namen schon vergeben sind.
+Ein Nick darf maximal 15 Buchstaben/Zahlen lang sein.
+Sonderzeichen funktionieren zwar, sehen aber komisch aus.
+
+Wenn du einen Nick gefunden hast, klick bei den Netzwerken aufs Plus.
+Dort vergibst du den Namen "hackint" und klickst direkt weiter auf bearbeiten.
+Statt dem voreingetragenen Server schreib dort `irc.hackint.org/6697` hin.
+Dann wähle den Haken um `SSL` für alle Server des Netzwerks zu verwenden an.
+Nur noch die Netzwerkkonfiguration schließen und auf verbinden klicken.
+
+Nach dem Verbinden sollte HexChat fragen welchem Channel du joinen möchtest.
+Gib dort `#ccc.do` ein und drücke ok.
+
+\o/ du kannst uns jetzt Nachrichten schreiben.

src/webpages/kontakt.md

@@ -3,148 +3,7 @@ path: '/kontakt/'
 title: 'kontakt'
 edit: 'kontakt.md'
 ---
-
+[![IRC](../images/chat_knopf.webp)](/kontakt/irc/ "IRC")
-import Accordion from "../components/accordion.js"
+[![eMail](../images/mail_knopf.webp)](/kontakt/mail/ "eMail")
-import { PublicMail, MailinglistMail, DonationMail, Address, Phone } from "../components/data.js"
+[![Telefon](../images/tel_knopf.webp)](/kontakt/tel/ "Telefon")
-
+[![Adresse](../images/adresse_knopf.webp)](/kontakt/adresse/ "Adresse")
-# Ich möchte
-
-<Accordion title="dem IRC joinen">
-
-Wir sind im Hackint IRC-Netzwerk erreichbar, der Server ist
-**irc.hackint.org** (SSL Port **6697**), Channel **#ccc.do**.
-
-Um Missverständnisse und böses Blut zu vermeiden, hier mal reinschauen:
-
-[RFC-1855](https://tools.ietf.org/html/rfc1855),
-[RFC-2811](https://tools.ietf.org/html/rfc2811)
-
-## Warum Hackint
-
-Das Hackint-Netzwerk wurde unter anderem vom Chaostreff Dortmund ins Leben
-gerufen, um eine einfache und trotzdem sichere Kommunikation zu ermöglichen.
-Um das zu gewährleisten sind alle Server-Verbindungen verschlüsselt
-und alle Server ermöglichen den Benutzern eine verschlüsselte Verbindung
-via SSL aufzubauen.
-Eines der Ziele des Hackints ist es, eine Heimat für Hacker, Haecksen und
-ähnliche Leute auf der ganzen Welt zu schaffen und einfache Verbindungen
-zwischen einzelnen Gruppen zu ermöglichen.
-Damit das klappt, müssen sich möglichst viele chaosnahe Gruppen in diesem Netz
-anfinden.
-
-## Anleitung für des IRCens Unkundige
-
-### Einen IRC-Client suchen
-
-Unix/Linux-nutzende können [HexChat](https://hexchat.github.io/) benutzen,
-oder, für das CLI-Feeling `weechat` oder `irssi`.
-
-Windows-nutzenden ist ebenfalls [HexChat](https://hexchat.github.io/)
-zu empfehlen.
-
-todo: Macs
-
-### Konfiguration von HexChat
-
-Als erstes muss du dir einen Nick-(Spitz-)namen ausdenken.
-Jede Person hat einen einzigartigen Nick, daher nicht wundern wenn gängige
-Namen schon vergeben sind.
-Ein Nick darf maximal 15 Buchstaben/Zahlen lang sein.
-Sonderzeichen funktionieren zwar, sehen aber komisch aus.
-
-Wenn du einen Nick gefunden hast, klick bei den Netzwerken aufs Plus.
-Dort vergibst du den Namen "hackint" und klickst direkt weiter auf bearbeiten.
-Statt dem voreingetragenen Server schreib dort `irc.hackint.org/6697` hin.
-Dann wähle den Haken um `SSL` für alle Server des Netzwerks zu verwenden an.
-Nur noch die Netzwerkkonfiguration schließen und auf verbinden klicken.
-
-Nach dem Verbinden sollte HexChat fragen welchem Channel du joinen möchtest.
-Gib dort `#ccc.do` ein und drücke ok.
-
-\o/ du kannst uns jetzt Nachrichten schreiben.
-</Accordion>
-
-<Accordion title="euch eine Mail schreiben">
-
-Wenn du eine einfache Anfrage hast, schreib einfach an unsere Mailingliste
-(aber schreib bitte dabei, dass du nicht auf der Liste eingetragen bist.
-Sonst erreichen dich die Antworten möglicherweise nicht).
-Wenn du dich zum Chaostreff gesellen möchtest,
-trägst du dich am besten auf der Liste ein.
-
-Unsere Mailinglist ist unter <MailinglistMail/>,
-diese ist auch unsere öffentliche Mailingliste.
-
-Presse: <PublicMail/>  
-Spenden: <DonationMail/>
-
-## Subscriben/Unsubscriben auf die Mailingliste
-
-Die Mailingliste wird von Mailman gemanaged und ist offen für alle.
-Subscriben kann man sich auf der Mailingliste,
-indem man auf die
-[Mailman](https://lists.chaostreff-dortmund.de/cgi-bin/mailman/listinfo/discuss)
-Seite geht und sich dort einträgt.
-
-## Was ist so auf der Mailingliste
-
-Alle Chaostreff-Aktivitäten werden (sollten zumindest) über die Mailingliste
-geplant oder zumindest angekündigt.
-Wenn man nur wissen möchte, was der Chaostreff gerade so macht,
-kann man natürlich auch regelmässig auf unsere Webseite gucken.
-Wenn man wirklich wissen möchte was gerade geht, sollte man sich auf die
-Mailingliste eintragen.
-Hier können und werden aktuelle Weltherrschaftspläne geschmiedet¹,
-Kontakte geschlossen, und auch sonstige, den Chaostreff betreffende,
-Themen besprochen.
-
-¹ liebes Finanzamt, das ist nur Spaß :)
-
-Außerdem findet man alles was für den Chaostreff von Interesse sein könnte und
-mit dem ein entfernter Bezug zum Chaostreff hergestellt werden kann.
-Also von Diskussionen zu aktueller Hardware und dem kreativen Umgang damit,
-über die neuesten Fort- und Rückschritte in aktuellen Gesetzgebungsverfahren
-und anderen Zeitgeschehen.
-
-Grundsätzlich gilt: Die Mailingliste ist nicht readonly und
-lebt durch eure Postings. Also postet!
-
-## FAQ
-
-### Wer kann die Subscriptions lesen?
-
-Jeder der auf der Liste subscribed ist kann sich die Subscriber-Liste ansehen.
-
-### Warum kommt meine Mail nicht auf der Mailingliste an?
-
-Damit die Mailingliste nicht als Spam-Multiplexer fungiert,
-ist sie so konfiguriert, dass alle Mails,
-die nicht eine auf der Liste eingetragene Mailaddresse
-im From: Header stehen haben,
-erstmal zur Moderator Mailingliste weitergeleitet werden.
-Da auch Moderatoren noch ein anderes Leben haben, kann das dann etwas dauern.
-
-### Wer sind diese Moderatoren?
-
-Zur Zeit: tarja, fisch und claas
-
-### Ich habe technische Probleme
-
-Bei technischen Problemen (subscription passt nicht)
-kann dem Listen-Owner geschrieben werden.
-Diese/r wird versuchen, dich innerhalb ihrer/seiner Möglichkeiten,
-nach bestem Wissen und Gewissen, zu unterstützen.
-
-</Accordion>
-
-<Accordion title="mit euch telefonieren">
-
-Wenn du eher auf Voice-Communication stehst
-(oder einfach wissen willst, ob jemand im Raum ist),
-kannst du uns auch anrufen:
-Es klingelt im Raum, wenn man **<Phone/>** wählt.
-</Accordion>
-
-<Accordion title="euch Totholz zuschicken (einen Brief)">
-<Address/>
-</Accordion>

src/webpages/mail.md

@@ -0,0 +1,81 @@
+---
+path: '/kontakt/mail/'
+title: 'email'
+edit: 'mail.md'
+---
+
+import Accordion from "../components/accordion.js"
+import { PublicMail, MailinglistMail, DonationMail, } from "../components/data.js"
+
+[Zurück](/kontakt)
+
+# eMail
+
+Wenn du eine einfache Anfrage hast, schreib einfach an unsere Mailingliste
+(aber schreib bitte dabei, dass du nicht auf der Liste eingetragen bist.
+Sonst erreichen dich die Antworten möglicherweise nicht).
+Wenn du dich zum Chaostreff gesellen möchtest,
+trägst du dich am besten auf der Liste ein.
+
+Unsere Mailinglist ist unter <MailinglistMail/>,
+diese ist auch unsere öffentliche Mailingliste.
+
+Presse: <PublicMail/>  
+Spenden: <DonationMail/>
+
+## Subscriben/Unsubscriben auf die Mailingliste
+
+Die Mailingliste wird von Mailman gemanaged und ist offen für alle.
+Subscriben kann man sich auf der Mailingliste,
+indem man auf die
+[Mailman](https://lists.chaostreff-dortmund.de/cgi-bin/mailman/listinfo/discuss)
+Seite geht und sich dort einträgt.
+
+## Was ist so auf der Mailingliste
+
+Alle Chaostreff-Aktivitäten werden (sollten zumindest) über die Mailingliste
+geplant oder zumindest angekündigt.
+Wenn man nur wissen möchte, was der Chaostreff gerade so macht,
+kann man natürlich auch regelmässig auf unsere Webseite gucken.
+Wenn man wirklich wissen möchte was gerade geht, sollte man sich auf die
+Mailingliste eintragen.
+Hier können und werden aktuelle Weltherrschaftspläne geschmiedet¹,
+Kontakte geschlossen, und auch sonstige, den Chaostreff betreffende,
+Themen besprochen.
+
+¹ liebes Finanzamt, das ist nur Spaß :)
+
+Außerdem findet man alles was für den Chaostreff von Interesse sein könnte und
+mit dem ein entfernter Bezug zum Chaostreff hergestellt werden kann.
+Also von Diskussionen zu aktueller Hardware und dem kreativen Umgang damit,
+über die neuesten Fort- und Rückschritte in aktuellen Gesetzgebungsverfahren
+und anderen Zeitgeschehen.
+
+Grundsätzlich gilt: Die Mailingliste ist nicht readonly und
+lebt durch eure Postings. Also postet!
+
+## FAQ
+
+<Accordion title="Wer kann die Subscriptions lesen?">
+    Jeder der auf der Liste subscribed ist kann sich die Subscriber-Liste ansehen.
+</Accordion>
+
+<Accordion title="Warum kommt meine Mail nicht auf der Mailingliste an?">
+    Damit die Mailingliste nicht als Spam-Multiplexer fungiert,
+    ist sie so konfiguriert, dass alle Mails,
+    die nicht eine auf der Liste eingetragene Mailaddresse
+    im From: Header stehen haben,
+    erstmal zur Moderator Mailingliste weitergeleitet werden.
+    Da auch Moderatoren noch ein anderes Leben haben, kann das dann etwas dauern.
+</Accordion>
+
+<Accordion title="Wer sind diese Moderatoren?">
+    Zur Zeit: tarja, fisch und claas
+</Accordion>
+
+<Accordion title="Ich habe technische Probleme">
+    Bei technischen Problemen (subscription passt nicht)
+    kann dem Listen-Owner geschrieben werden.
+    Diese/r wird versuchen, dich innerhalb ihrer/seiner Möglichkeiten,
+    nach bestem Wissen und Gewissen, zu unterstützen.
+</Accordion>

src/webpages/tel.md

@@ -0,0 +1,16 @@
+---
+path: '/kontakt/tel/'
+title: 'telefon'
+edit: 'tel.md'
+---
+
+import { Phone } from "../components/data.js"
+
+[Zurück](/kontakt)
+
+# Telefon
+
+Wenn du eher auf Voice-Communication stehst
+(oder einfach wissen willst, ob jemand im Raum ist),
+kannst du uns auch anrufen:
+Es klingelt im Raum, wenn man **<Phone/>** wählt.