feat: List countries without FIP acceptance

assets/js/interactiveMap.js

@@ -59,6 +59,10 @@ window.initializeInteractiveMap = function() {
                         window.location.href = `/${window.currentLanguage}/country/${country.id}/`;
                     });
                 }
+
+                if (window.unavailableCountries && window.unavailableCountries.includes(country.id)) {
+                    country.classList.add('o-interactive-map__country--unavailable');
+                }
             });
     }
 };

assets/sass/interactiveMap.scss

@@ -39,6 +39,15 @@
     }
   }
 
+  .o-interactive-map__country--unavailable {
+    path,
+    circle {
+      fill: var(--bg-neutral) !important;
+      transition: all 0.2s ease;
+      cursor: not-allowed;
+    }
+  }
+
   .o-interactive-map--loading {
     padding: 1rem;
   }
@@ -60,4 +69,37 @@
       background-color: var(--link-hovered);
     }
   }
+
+  &__legend {
+    display: flex;
+    column-gap: 2rem;
+    row-gap: 1rem;
+    flex-wrap: wrap;
+    margin-top: 1.5rem;
+  }
+
+  &__legend-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  &__legend-color {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: var(--border-radius-s);
+    border: var(--border);
+
+    &--available {
+      background-color: var(--link-default);
+    }
+
+    &--unavailable {
+      background-color: var(--bg-neutral);
+    }
+
+    &--pending {
+      background-color: #c0c1c5;
+    }
+  }
 }

assets/sass/styles.scss

@@ -125,11 +125,24 @@ img {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 1rem;
+  list-style-position: inside;
+  padding-left: 0;
+
+  > li {
+    margin-left: 0.5rem;
+  }
+}
+
+.o-list__list-item {
+  &--country {
+    list-style-type: none;
+  }
 }
 
 .o-list__link {
   display: flex;
   align-items: center;
+  width: fit-content;
 }
 
 .o-list__countries{
@@ -143,6 +156,12 @@ img {
   }
 }
 
+.o-list__countries-overview {
+  display: flex;
+  gap: 2rem;
+  flex-direction: column;
+}
+
 @mixin add-columns($columns) {
   &--columns-#{$columns} {
     columns: $columns;

content/country/_index.de.md

@@ -1,6 +1,20 @@
 ---
 title: "Übersicht der Länder"
 description: "Übersicht über die Länder, in denen FIP-Vergünstigungen genutzt werden können."
+params:
+  countriesWithoutFip:
+    - Andorra
+    - Belarus
+    - Estland
+    - Island
+    - Malta
+    - Moldau
+    - Russland
+    - San Marino
+    - Schweden
+    - Türkei
+    - Vatikanstadt
+    - Zypern
 ---
 
 Finde auf den nachfolgenden Seiten die FIP-Regelungen für Dein Reiseziel.

content/country/_index.en.md

@@ -1,6 +1,20 @@
 ---
 title: "Overview of countries"
 description: "Overview of the countries where FIP benefits are available."
+params:
+  countriesWithoutFip:
+    - Andorra
+    - Belarus
+    - Cyprus
+    - Estonia
+    - Iceland
+    - Malta
+    - Moldova
+    - Russia
+    - San Marino
+    - Sweden
+    - Turkey
+    - Vatican City
 ---
 
 Find the FIP regulations for your destination on the following pages.

content/country/_index.fr.md

@@ -1,6 +1,20 @@
 ---
 title: "Liste des pays"
 description: "Liste des pays où les facilités FIP sont acceptées."
+params:
+  countriesWithoutFip:
+    - Andorre
+    - Belarus
+    - Chypre
+    - Estonie
+    - Islande
+    - Malte
+    - Moldavie
+    - Russie
+    - Saint-Marin
+    - Suède
+    - Turquie
+    - Vatican
 ---
 
 Retrouvez les règles FIP pour votre destination sur les pages suivantes.

i18n/de.yaml

@@ -15,8 +15,9 @@ booking:
   visit-additional-information-website: Weitere Informationen
   visit-booking-website: Zur Buchungsseite
 countries:
-  overview: Alle Länder
+  overview: Länder mit FIP Akzeptanz
   selection: Länderauswahl
+  without-fip: Länder ohne FIP Akzeptanz
 country:
   many: Länder
   one: Land
@@ -35,6 +36,10 @@ information-disclaimer-short: >-
   Diese Informationen sind inoffiziell und ohne Gewähr. Es besteht keine
   rechtliche Verbindung zu FIP oder Bahngesellschaften.
 interactiveMap:
+  legend:
+    available: FIP Guide verfügbar
+    pending: Inhalt noch nicht verfügbar
+    unavailable: Keine FIP-Akzeptanz
   loading: Lade interaktive Karte...
   resetZoom: Zoom zurücksetzen
   title: Interaktive Länderkarte

i18n/en.yaml

@@ -14,8 +14,9 @@ booking:
   visit-additional-information-website: Additional Information
   visit-booking-website: To Booking Website
 countries:
-  overview: All Countries
+  overview: Countries with FIP acceptance
   selection: choose country
+  without-fip: Countries without FIP acceptance
 country:
   many: countries
   one: country
@@ -34,6 +35,10 @@ information-disclaimer-short: >-
   The information provided is unofficial and without guarantee. There is no
   legal connection to FIP or railway companies.
 interactiveMap:
+  legend:
+    available: FIP Guide available
+    pending: Content not available yet
+    unavailable: No FIP acceptance
   loading: Loading interactive map...
   resetZoom: Reset Zoom
   title: Interactive Country Map

i18n/fr.yaml

@@ -12,6 +12,10 @@ booking:
   reservation-costs: Frais de réservation
   visit-additional-information-website: Informations complémentaires
   visit-booking-website: Aller sur le site de réservation
+countries:
+  overview: Pays acceptation FIP
+  selection: choisir un pays
+  without-fip: Pays sans acceptation FIP
 country:
   many: pays
   one: pays
@@ -30,6 +34,10 @@ information-disclaimer-short: >-
   Les informations fournies sont non officielles et sans garantie. Il n'existe
   aucun lien juridique avec le FIP ou les compagnies ferroviaires.
 interactiveMap:
+  legend:
+    available: FIP Guide disponible
+    pending: Contenu non disponible
+    unavailable: Pas d'acceptation FIP
   loading: Chargement de la carte interactive...
   resetZoom: Réinitialiser le zoom
   title: Carte interactive des pays

layouts/country/list.html

@@ -3,24 +3,36 @@
     <h1 data-pagefind-meta="title">{{ .Title }}</h1>
     {{ .Content }}
     <div class="o-list__countries">
-      <div>
-        <h2>{{ T "countries.overview" }}</h2>
-        <div class="o-list__list">
-          {{ range .Pages }}
-          <a href="{{ .RelPermalink }}" class="o-list__link">
-            <div class="o-list__picture">
-              {{ partial "flag" (dict "country" .File.ContentBaseName) }}
-            </div>
-            <div>
-              {{ .Title }}
-            </div>
-          </a>
-          {{ end }}
+      <div class="o-list__countries-overview">
+        <div>
+          <h2 id="countries-with-fip">{{ T "countries.overview" }}</h2>
+          <ul class="o-list__list" aria-labelledby="countries-with-fip">
+            {{ range .Pages }}
+            <li class="o-list__list-item o-list__list-item--country">
+              <a href="{{ .RelPermalink }}" class="o-list__link">
+                <div class="o-list__picture">
+                  {{ partial "flag" (dict "country" .File.ContentBaseName) }}
+                </div>
+                <div>
+                  {{ .Title }}
+                </div>
+              </a>
+            </li>
+            {{ end }}
+          </ul>
+        </div>
+        <div>
+          <h2 id="countries-without-fip">{{ T "countries.without-fip" }}</h2>
+          <ul class="o-list__list" aria-labelledby="countries-without-fip">
+            {{ range .Params.countriesWithoutFip }}
+              <li>{{ . }}</li>
+            {{ end }}
+          </ul>
         </div>
       </div>
       <div class="o-interactive-map">
-        <h2>{{ T "interactiveMap.title" }}</h2>
-        <div class="o-interactive-map__wrapper">
+        <h2 id="interactive-map">{{ T "interactiveMap.title" }}</h2>
+        <div class="o-interactive-map__wrapper" aria-labelledby="interactive-map">
           <div id="interactive-map__container" class="o-interactive-map__container">
             <p class="o-interactive-map--loading"><em>{{ T "interactiveMap.loading" }}</em></p>
           </div>
@@ -36,18 +48,48 @@ <h2>{{ T "interactiveMap.title" }}</h2>
             </button>
           </div>
         </div>
+        <div class="o-interactive-map__legend">
+          {{ range (slice "available" "unavailable" "pending") }}
+          <div class="o-interactive-map__legend-item">
+            <div class="o-interactive-map__legend-color o-interactive-map__legend-color--{{ . }}"></div>
+            <span>{{ T (printf "interactiveMap.legend.%s" .) }}</span>
+          </div>
+          {{ end }}
+        </div>
       </div>
     </div>
   </article>
 
-
   <script>
     window.availableCountries = [
       {{- range .Pages -}}
       "{{ .File.ContentBaseName }}"{{ if not (eq . (index (last 1 $.Pages) 0)) }},{{ end }}
       {{- end -}}
     ];
 
+    window.unavailableCountries = [
+      "algeria",
+      "andorra",
+      "belarus",
+      "cyprus",
+      "estonia",
+      "greenland",
+      "iceland",
+      "israel",
+      "lebanon",
+      "malta",
+      "moldova",
+      "morocco",
+      "russia",
+      "san_marino",
+      "sweden",
+      "syria",
+      "tunisia",
+      "turkey",
+      "ukraine",
+      "vatican",
+    ];
+
     window.currentLanguage = "{{ .Language.Lang }}";
 
     fetch('/map_europe.svg')