Merge pull request 'stage' (#2) from angestoepselt/homepage:stage into main

Reviewed-on: https://codeberg.org/sebwue/homepage/pulls/2

.drone.yml

@@ -28,7 +28,7 @@ steps:
     - SITE=coderdojo
     tags: coderdojo-${DRONE_BRANCH}
 
-- name: deploy angestoepselt staging
+- name: deploy angestoepselt stage
   image: plugins/webhook
   settings:
     urls:
@@ -37,7 +37,7 @@ steps:
     - build angestoepselt site
   when:
     branch:
-    - staging
+    - stage
 
 - name: deploy live build
   image: plugins/webhook
@@ -75,4 +75,6 @@ steps:
 trigger:
   branch:
   - main
-  - staging
+  - stage
+  event:
+  - push

README.md

@@ -37,7 +37,7 @@ npm run build:styles
 SITE=angestoepselt npm run dev:site
 ```
 
-Go to <https://localhost:8080/>, which will update live when content changes
+Go to <http://localhost:8080/>, which will update live when content changes
 (the initial build may take some time to render out the different image sizes).
 If you make style changes, make sure to recompile the CSS files with the second
 of the above commands. Alternatively, run `npm run dev:styles` in an additional

cgi-bin/form.py

@@ -207,6 +207,7 @@ match request_uri:
 		fail("503 Service Unavailable", "Form disabled")
 		form_name = "Computerantrag (privat)"
 		form_group = "csw-Anfragen"
+		ticket_details["Gewünschte Hardware"] = get_form_value("hardware", default="Unbekannt")
 		ticket_details["Adresse"] = get_form_value("addressline")
 		ticket_details["PLZ"] = get_form_value("postalcode")
 		ticket_details["Stadt"] = get_form_value("city")

sites/angestoepselt/computer-beantragen/privat.md

@@ -12,6 +12,7 @@ callout: "Hinweis: Wir sind zurzeit ausgelastet und können leider temporär kei
 > Danke für dein Verständnis!
 
 <form class="blanked-out-form" method="post" action="/computer-beantragen/privat" enctype="multipart/form-data">
+<fieldset disabled="disabled">
 
 Auf dieser Seite kannst du einen Antrag einreichen, um einen Computer von uns zu
 erhalten. Bitte teile uns zunächst deine Kontaktdaten mit.
@@ -26,6 +27,24 @@ erhalten. Bitte teile uns zunächst deine Kontaktdaten mit.
   <input type="email" name="contactemail" required placeholder="mail@beispiel.de" />
 </label>
 
+Welches Gerät würdest du gerne von uns erhalten?
+
+<input type="radio" id="hardware-desktop" class="radio-input" name="hardware" required value="Desktop-Computer" />
+<div class="form-input">
+	<label for="hardware-desktop">Desktop-Computer</label>
+</div>
+<input type="radio" id="hardware-bare-laptop" class="radio-input" name="hardware" required value="Laptop ohne Akku" />
+<div class="form-input">
+	<label for="hardware-bare-laptop">Laptop ohne Akku</label>
+</div>
+<input type="radio" id="hardware-laptop" class="radio-input" name="hardware" required disabled value="Laptop" />
+<div class="form-input">
+	<label for="hardware-laptop">
+    Laptop<br />
+    <em>Aktuell nicht verfügbar | Voraussichtlich sind erst wieder ab März</em>
+  </label>
+</div>
+
 Damit du einen Computer von uns erhalten kannst, benötigen wir von dir einen
 Nachweis der Bedürftigkeit. Das ist eines dieser Papiere, die von offiziellen
 Stellen ausgestellt werden:
@@ -83,7 +102,6 @@ aufmerksam durch:
 installiert. Es gibt ein Programm zum Schreiben
 ([LibreOffice](https://de.libreoffice.org/)) und für das Internet
 ([Firefox](https://www.mozilla.org/de/firefox/new/)).
-- Aufgrund der aktuellen Situation können wir _KEINE_ Laptops ausgeben. Desktop-PCs sind verfügbar.
 
 <label class="form-checkbox">
   <input type="checkbox" name="hints" required>
@@ -97,4 +115,5 @@ installiert. Es gibt ein Programm zum Schreiben
   <input type="submit" value="Abschicken" />
 </div>
 
+</fieldset>
 </form>

sites/angestoepselt/kontakt/index.md

@@ -62,7 +62,7 @@ Fragen haben, freuen wir uns natürlich trotzdem hier auf deine Nachricht.
 
 ## So kommst du zu uns
 
-Du findest uns in der _Zeller Straße 29/31 in 97082 Würzburg_. Wenn du einen Computer willst, stelle bitte zuerst einen [Antrag](/computer-beantragen/privat). Sobald wir einen Computer für dich haben, schreiben wir dir eine E-Mail. Dann kannst du zur Abholung vorbeikommen.
+Du findest uns in der _Zeller Straße 29/31 in 97082 Würzburg_ ([Kartenansicht](https://www.openstreetmap.org/node/6620016025){target="_blank" rel="noopener noreferrer"}). Wenn du einen Computer willst, stelle bitte zuerst einen [Antrag](/computer-beantragen/privat). Sobald wir einen Computer für dich haben, schreiben wir dir eine E-Mail. Dann kannst du zur Abholung vorbeikommen.
 
 ### Zu Fuß oder mit den öffentlichen Verkehrsmitteln
 

sites/angestoepselt/neuigkeiten/2021-10-20-neue-homepage.md

@@ -8,18 +8,17 @@ layout: post
 ---
 
 Lange hat's gedauert – jetzt endlich freuen wir uns, unser neues
-Vereins-"Branding" präsentieren zu können. Das zu gehört:
+Vereins-"Branding" präsentieren zu können. Dazu zu gehört:
 
 - Ein eigens entworfenes Logo samt Schriftzug
 - Diese neue Homepage
 - Diverse Flyer
 - Marketing-Kram wie Tassen
 
-Zum einen möchten mir damit unserem Verein ein neues, modernes Auftreten
+Zum einen möchten wir damit unserem Verein ein neues, modernes Auftreten 
-verpassen. Im Hintergrund sind auch ein paar technische Veränderungen passiert,
+verpassen. Des Weiteren sind im Hintergrund auch ein paar technische 
-die letztendlich darauf hinauslaufen, dass wir in Zukunft Anfragen besser
+Veränderungen erfolgt. Dadurch können wir in Zukunft Anfragen besser sammeln, 
-sammeln, strukturieren und abarbeiten können. Gleichzeitig wollen wir es allen
+strukturieren und abarbeiten. Gleichzeitig versuchen wir es allen BesucherInnen 
-BesucherInnen möglichst einfach machen, mit uns in Kontakt zu treten. Das baut
+der Homepage möglichst einfach zu machen, mit uns in Kontakt zu treten. Weniger 
-Hürden ab und dient letztendlich auch dazu, mehr Menschen mit unseren Projekten
+Hürden tragen letztendlich auch dazu bei, unsere Projekte an mehr Menschen zu 
-zu versorgen. Wir sind überzeugt davon, dass das eine gute Sache ist und freuen
+bringen. Dass das eine gute Sache ist, davon sind wir überzeugt!
-uns auf Rückmeldungen!

sites/angestoepselt/ueber-uns/index.md

@@ -26,14 +26,14 @@ Damit alle Menschen die gleichen Chancen haben, verschenken wir Computer.
 ### Was wir tun
 
 - Wir sammeln und reparieren Computer. Diese verschenken wir dann.
-- Wir helfen Menschen besser mit Computern und dem Internet umzugehen.
+- Wir helfen Menschen, besser mit Computern und dem Internet umzugehen.
 - Wir verwenden kostenlose und freie Computerprogramme.
 - Wir organisieren Kurse und Techniktreffen.
 - Wir erklären Menschen Technik.
 
 ## Andere Projekte
 
-Wir sind nicht der einzige Verein, der solche Projekte verfolgt. In ganz Deutschland sind Projekte mit verwanden Zielen vertreten:
+Wir sind nicht der einzige Verein, der solche Projekte verfolgt. In ganz Deutschland sind Projekte mit verwandten Zielen vertreten:
 
 [Unsere Partner](partner){.cta-link}
 
@@ -83,9 +83,9 @@ Angestöpselt e.V. gewinnt den Deutschen Engagementpreis. Arbeitssuchende, Flüc
 
 ### CoderDojo
 
-Mit dem [CoderDojo](/coderdojo) haben wir unser zweites großes Projekt im Verein
+Mit dem [CoderDojo](/#coderdojo) haben wir unser zweites großes Projekt im Verein
 aufgenommen. Seitdem haben wir etliche kostenlose Veranstaltungen zusammen mit
-Ehrenamtlichen angeboten. Dabei können Kinder und Jugendliche sich vielen
+Ehrenamtlichen angeboten. Dabei können sich Kinder und Jugendliche vielen
 Themen bequem und spielerisch nähern, zum Beispiel Programmieren,
 Kryptografie oder Videoproduktion.
 

sites/coderdojo/anmelden.md

@@ -4,6 +4,7 @@ useForms: true
 eleventyNavigation:
   key: Anmelden
   order: 20
+callout: "Diese Veranstaltung ist ausgebucht."
 ---
 
 <style>
@@ -31,7 +32,11 @@ Hier findest du schon mal die Details zur kommenden Veranstaltung:
 > **Ende**:&emsp;gegen 16:00 Uhr  
 > **Maximalkapazität**:&emsp;40 Teilnehmende
 
-<form method="post" action="/anmelden">
+Diese Veranstaltung ist leider schon ausgebucht.
+Abonniere unseren [Newsletter](https://mailing.angestoepselt.de/subscription/form), um über neue CoderDojos zu erfahren.
+
+<form class="blanked-out-form" method="post" action="/anmelden">
+<fieldset disabled="disabled">
 
 <input type="hidden" name="veranstaltung" value="11. März 2023" />
 
@@ -105,4 +110,5 @@ Solltest du noch Fragen haben oder uns anderweitig etwas mitteilen wollen, kanns
   <input type="submit" value="Anmeldung abschicken" />
 </div>
 
+</fieldset>
 </form>

sites/coderdojo/httpd.conf

@@ -18,11 +18,11 @@ setenv.set-response-header += (
 # CGI / form handling
 #
 
-$HTTP["request-method"] =~ "GET|POST" {
+#$HTTP["request-method"] =~ "GET|POST" {
-	url.rewrite = (
+#	url.rewrite = (
-		"^/anmelden" => "/cgi-bin/form.py",
+#		"^/anmelden" => "/cgi-bin/form.py",
-	)
+#	)
-}
+#}
 
 $HTTP["url"] =~ "^/cgi-bin/" {
 	alias.url += ( "/cgi-bin" => "@cgibin@" )

sites/coderdojo/index.md

@@ -23,7 +23,7 @@ Kostenlose Programmier- und Techniktreffen für Kinder und Jugendliche im Raum W
 
   <a href="/anmelden">
     <h3>Jetzt anmelden</h3>
-    <em class="inline-callout">Sa. 11.03.23 @ iWelt, Eibelstadt</em>
+    <em class="inline-callout">Ausgebucht</em>
   </a>
 
   <a href="https://mailing.angestoepselt.de/subscription/form" target="_blank">

sites/coderdojo/rueckblick.md

@@ -24,8 +24,6 @@ Inzwischen sind wir in fast jeder Ecke in und um Würzburg vertreten und können
 Wir sind zurück aus der Corona-Pause!
 Die [iWelt](https://www.iwelt.de/){target="_blank" rel="noopener noreferrer"} heißt uns wieder in Eibelstadt willkommen.
 
-> [Jetzt anmelden!](/anmelden)
-
 {% endtimeline %}
 {% timeline "13" %}
 

styles/components/_form-elements.scss

@@ -97,24 +97,30 @@
 		position: relative;
 		color: colors.$gray-800;
 
-		&:before {
+		&::before {
 			content: '\2771';
 			display: inline-block;
 			position: absolute;
 			left: #{layout.$large-gap * -1};
 			top: 50%;
 			transform: translateY(-50%);
+			opacity: 0.3;
 		}
 	}
 
 	&:checked {
 		+ .form-input > label {
+			font-weight: typography.$emphasized-weight;
 			color: colors.$teal-800;
 			border-color: colors.$teal-800;
 
 			@include colors.coderdojo-theme {
 				color: colors.$orange-500;
 			}
+
+			&::before {
+				opacity: 1;
+			}
 		}
 	}