feat: Present booking methods as custom expanders

.github/workflows/deploy.yaml

@@ -32,7 +32,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.141.0
+      HUGO_VERSION: 0.147.7
     steps:
       - name: Install Hugo CLI
         run: |

CONTRIBUTING.md

@@ -78,3 +78,9 @@ To add a new operator:
 ```zsh
 hugo new operator/${OPERATOR} # Replace ${OPERATOR} with the English operator name in lowercase
 ```
+
+To add a new booking platform:
+
+```zsh
+hugo new booking/${PLATFORM} # Replace ${PLATFORM} with the name of the booking platform
+```

archetypes/booking/index.de.md

@@ -0,0 +1,40 @@
+---
+draft: false
+title: '{{ .File.ContentBaseName | title }}' # Ändere den Titel auf den Name der Buchungsplattform
+params:
+    classes:
+        # Definiere Klassen und entsprechende Preise für die zugehörigen Reservierungen.
+        # Stelle sicher, dass die Klassen auch in den i18n-Dateien unter `booking.classes` definiert sind.
+        first: "X.XX€"
+        second: "X.XX€"
+    fip_50: true # Definiere, ob FIP 50 Tickets bei dem Buchungsanbieter gebucht werden können.
+    fip_global_fare: true # Definiere, ob FIP Globalpreise bei dem Buchungsanbieter gebucht werden können.
+    reservations: true # Definiere, ob Reservierungen bei dem Buchungsanbieter gebucht werden können.
+    booking_link: "https://example.com" # Füge ein Link zur Buchungsplattform hinzu
+    additional_info_link: "https://example.com/additional-info" # Füge einen Link zu zusätzlichen Informationen hinzu
+    type: "onsite" # Akzeptierte Typen sind: website, onsite, phone and email
+---
+
+{{% booking-section "fip_50" %}}
+**FIP 50 Fahrkarten**
+
+<!--
+    Erkläre hier die Buchungswege, um FIP 50 Tickets zu erwerben.
+-->
+{{% /booking-section %}}
+
+{{% booking-section "fip_global_fare" %}}
+**FIP Globalpreis**
+
+<!--
+    Erkläre hier die Buchungswege, um FIP Globalpreise zu erwerben.
+-->
+{{% /booking-section %}}
+
+{{% booking-section "reservations" %}}
+**Reservierungen**
+
+<!--
+    Erkläre hier die Buchungswege, um Reservierungen zu erwerben.
+-->
+{{% /booking-section %}}

archetypes/booking/index.en.md

@@ -0,0 +1,41 @@
+---
+draft: false
+title: '{{ .File.ContentBaseName | title }}' # Change the title to the name of the booking platform
+params:
+    classes:
+        # Define classes and prices for the corresponding reservations.
+        # Make sure that each class exists under `booking.classes` in i18n.
+        first: "X.XX€"
+        second: "X.XX€"
+    fip_50: true # Define if FIP 50 tickets can be booked with this booking platform
+    fip_global_fare: true # Define if FIP global fare tickets can be booked with this booking platform
+    reservations: true # Define if reservations can be booked with this booking platform
+    booking_link: "https://example.com" # Add a link to the booking platform
+    additional_info_link: "https://example.com/additional-info" # Add a link with additional information
+    type: "onsite" # Accepted types are: website, onsite, phone and email
+---
+
+{{% booking-section "fip_50" %}}
+**FIP 50 Fahrkarten**
+
+<!--
+    Explain the steps for booking FIP 50 tickets with this booking platform.
+-->
+{{% /booking-section %}}
+
+{{% booking-section "fip_global_fare" %}}
+**FIP Global Fare**
+
+<!--
+    Explain the steps for booking FIP global fares with this booking platform.
+-->
+{{% /booking-section %}}
+
+
+{{% booking-section "reservations" %}}
+**Reservierungen**
+
+<!--
+    Explain the steps for booking reservations with this booking platform.
+-->
+{{% /booking-section %}}

archetypes/operator/index.de.md

@@ -84,38 +84,36 @@ FIP Globalpreis: <✅/⛔>
 
 ### Online
 
-- [Website des Buchungsanbieters](https://example.com): \
-  **Reservierung:** <✅/⛔> \
-  **FIP 50 Fahrkarten:** <✅/⛔>
-  <!-- Optionale Buchungshinweise, wie kann man FIP Tickets oder Reservierungen kaufen? -->
-- [Website eines weiteren Buchungsanbieters](https://example.com): \
-  **Reservierung:** <✅/⛔> \
-  **FIP 50 Fahrkarten:** <✅/⛔>
-  <!-- Optionale Buchungshinweise, wie kann man FIP Tickets oder Reservierungen kaufen? -->
-- Weitere Möglichkeiten:
-  <!-- Sonstige Hinweise und weitere Seiten für die Onlinebuchung/-reservierung. -->
+<!--
+  Bette hier Buchungsplattformen mit Onlinebuchung ein.
+
+  Individuelle Buchungsparameter können überschrieben werden, aber müssen nicht überschrieben werden.
+  Wenn sie nicht übergeben werden, dann werden die definieren defaults der Seite der Buchungsplattform verwendet.
+
+  Mehr Informationen sind im booking archetype zu finden.
+-->
+{{% booking id="booking_id"
+    subtitle="Hier kann ein Untertitel ergänzt werden, der in der Zusammenfassung des expanders angezeigt wird und nicht zu viel Platz einnehmen sollte."
+    reservations=nil
+    fip_50=false
+    fip_global_fare=true
+    classes.first="€20"
+    classes.second="€10"
+%}}
+<!-- Hier können zusätzliche landesspezifische Details zur Buchungsplattform ergänzt werden. -->
+{{% /booking %}}
 
 ### Telefon
 
-- Name des Buchungsanbieters: \
-  Telefonnummer: <Telefonnummer einfügen> \
-  **Reservierung:** <✅/⛔> \
-  **FIP 50 Fahrkarten:** <✅/⛔>
-  <!-- Weitere Hinweise zur Buchung am Telefon> -->
-- Name eines weiteren Betreibers: \
-  Telefonnummer: <Telefonnummer einfügen> \
-  **Reservierung:** <✅/⛔> \
-  **FIP 50 Fahrkarten:** <✅/⛔>
-  <!-- Weitere Hinweise zur Buchung am Telefon> -->
+<!--
+  Füge hier weitere Buchungsplattformen mit Buchung per Telefon hinzu.
+-->
 
 ### Vor Ort
 
-- Schalter der <Bahngesellschaft>: \
-  **Reservierung:** ✅ \
-  **FIP 50 Fahrkarten:** ✅
-  <!-- Wo gibt es Ticketschalter allgemein? Wenn möglich, ergänze ein Link zu einer Übersicht. Ergänze zusätzliche Informationen zum Kauf am Schalter. -->
-- Weitere Möglichkeiten:
-  <!-- Können die Tickets auch z.B. an anderen Schaltern im Ausland gekauft werden, wenn ja wo? -->
+<!--
+  Füge hier weitere Buchungsplattformen mit Buchung vor Ort hinzu.
+-->
 
 ### Im Zug
 

archetypes/operator/index.en.md

@@ -84,38 +84,36 @@ FIP Global Fare: <✅/⛔>
 
 ### Online
 
-- [Booking page](<Link to the website>): \
-  **Reservation:** <✅/⛔> \
-  **FIP 50 Tickets:** <✅/⛔>
-  <!-- Optional booking notes, how can FIP tickets or reservations be purchased? -->
-- [Another booking page](<Link to the website>): \
-  **Reservation:** <✅/⛔> \
-  **FIP 50 Tickets:** <✅/⛔>
-  <!-- Optional booking notes, how can FIP tickets or reservations be purchased? -->
-- Other options:
-  <!-- Other notes and additional websites for online booking/reservation. -->
+<!--
+  Embed the information of a defined booking platform here.
+
+  You can overwrite individual booking parameters as listed below, but you don't have to.
+  If you leave some parameters out, the defined defaults of the booking platform will be used.
+
+  For more information how to define a booking platform, check the booking archetype.
+-->
+{{% booking id="booking_id"
+    subtitle="This subtitle is displayed in the summary of the expander and should not take too much space."
+    reservations=nil
+    fip_50=false
+    fip_global_fare=true
+    classes.first="€20"
+    classes.second="€10"
+%}}
+<!-- This is an information text that can contain country specific information and is displayed in the expanded part. -->
+{{% /booking %}}
 
 ### Telephone
 
-- Name of the booking provider: \
-  Phone number: <Phone number> \
-  **Reservation:** <✅/⛔> \
-  **FIP 50 Tickets:** <✅/⛔>
-  <!-- Additional notes for booking by phone -->
-- Name of another booking provider: \
-  Phone number: <Phone number> \
-  **Reservation:** <✅/⛔> \
-  **FIP 50 Tickets:** <✅/⛔>
-  <!-- Additional notes for booking by phone -->
+<!--
+  Embed additional booking platforms with booking via telephone here.
+-->
 
 ### On Site
 
-- Ticket counter of <Railway Company>: \
-  **Reservation:** ✅ \
-  **FIP 50 Tickets:** ✅
-  <!-- Where are ticket counters generally located? If possible,add a to an overview. Add additional  information about purchasing at the counter. -->
-- Other options:
-  <!-- Can tickets also be purchased at other counters abroad, if so where? -->
+<!--
+  Embed additional booking platforms with booking on site here.
+-->
 
 ### On the Train
 

assets/sass/booking.scss

@@ -0,0 +1,115 @@
+.o-booking__summary {
+    &:hover,
+    &:focus {
+        .o-booking__title-text {
+            text-decoration: underline;
+        }
+    }
+}
+
+.o-booking__header-content {
+    display: grid;
+    grid-template-columns: 1.5fr 1fr 1fr;
+    gap: 2rem;
+    width: 100%;
+    align-content: center;
+
+    @media (max-width: #{$breakpoint-md}) {
+        display: flex;
+        flex-direction: column;;
+        gap: 1rem;
+        align-content: start;
+    }
+}
+
+.o-booking__header {
+    display: flex;
+    justify-content: space-between;
+    gap: 2rem;
+    width: 100%;
+    align-content: center;
+}
+
+.o-booking__header-actions {
+    @media screen {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    @media print {
+        display: none;
+    }
+}
+
+.o-booking__classes {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    > p {
+        margin-bottom: 0rem;
+    }
+
+    @media (max-width: #{$breakpoint-md}) {
+        align-items: start;
+    }
+}
+
+.o-booking__title-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.o-booking__title {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    font-weight: 600;
+}
+
+.o-booking__subtitle {
+    font-weight: 400;
+    font-style: italic;
+    font-size: 1.4rem;
+}
+
+.o-booking__meta{
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    @media (max-width: #{$breakpoint-md}) {
+        align-items: start;
+    }
+}
+
+.o-booking__open-in-new {
+    margin-top: 1rem;
+}
+
+.o-booking__links {
+    margin-top: 1.5rem;
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+@mixin booking_section($name) {
+  &-#{$name}--hidden &-#{$name} {
+    display: none;
+  }
+}
+
+.o-booking__section {
+    @include booking_section("fip_50");
+    @include booking_section("fip_global_fare");
+    @include booking_section("reservations");
+}
+
+.o-booking__info {
+    margin-bottom: 1.5rem;
+}

assets/sass/button.scss

@@ -0,0 +1,19 @@
+a.c-button {
+    padding: 1rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    border: 2px solid var(--link-default);
+    border-radius: 4px;
+    font-size: 1.5rem;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background 0.2s, color 0.2s;
+
+    &:hover,
+    &:focus {
+        background: var(--link-hovered);
+        border-color: var(--link-hovered);
+        color: #fff;
+    }
+}

assets/sass/content.scss

@@ -42,11 +42,6 @@ th, td {
     }
 }
 
-p:has( + ul),
-p:has( + ol) {
-    margin-bottom: 1rem;
-}
-
 p:has( + span) {
     margin-bottom: 0;
 }