feat: add side menu and text styling

README.md

@@ -14,6 +14,8 @@ This project includes information and usage instructions for FIP as well as spec
 Contributing and providing information is always welcome.  
 Instructions for editing information can be found [here in the Wiki](https://github.com/fipguide/fipguide.github.io/wiki/English).
 
+You can see the current information status for operators here: [Content Status](https://github.com/orgs/fipguide/projects/3) 
+
 ❤️ A project by railway workers for railway workers.
 
 ℹ️  
@@ -30,6 +32,8 @@ In diesem Projekt sind Informationen und Nutzungshinweise zu FIP sowie Besonderh
 Die Mitarbeit und das Beitragen von Informationen sind immer willkommen.  
 Eine Anleitung zum Bearbeiten von Informationen befindet sich [hier im Wiki](https://github.com/fipguide/fipguide.github.io/wiki/Deutsch).
 
+Der aktuellen Bearbeitungsstand der Informationen für Betreiber ist hier zu finden: [Content Status](https://github.com/orgs/fipguide/projects/3)
+
 ❤️ Ein Projekt von Bahnern für Bahner.
 
 ℹ️  

assets/js/highlightHeadline.js

@@ -0,0 +1,92 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+    alert('Die Highlight Funktion ist noch im Debug Modus. Folgendes ist noch zu tun: -Hight-Aktivierunglevel anpassen, Regelung für Seitentitel Finden (z.B. SNCB), Debug Logs entfernen');
+
+	// In this site's layout, the table of contents (.content) is an element that appears before any other content at the same hierarchy level
+    const headings = Array.from(document.querySelectorAll('.content :is(h2, h3, h4)'));
+    const windowPath = window.location.pathname;
+	if (headings.length === 0) {
+		return; // No headings? No business here
+	}
+
+	// A few helper functions (.toc is the top-level ordered list)
+	const markTocItemActive = (a) => {return a.setAttribute('data-current', '');}
+	const markTocItemInactive = (a) => {return a.removeAttribute('data-current');};   
+	const getTocLinkFromHeading = (h) => {return document.querySelector(`.toc a[href="${windowPath}#${encodeURIComponent(h.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`);}
+
+	const getDocHeight = () => Math.floor(document.body.clientHeight);
+
+	const visibleHeadings = new Set();
+	let resizeDebounce;
+	let currentObserver;
+	let height = getDocHeight();
+
+	function beginObservation(docHeight) {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					// Keep track of visible headings
+					if (entry.isIntersecting) {
+						visibleHeadings.add(entry.target);
+					} else {
+						visibleHeadings.delete(entry.target);
+					}
+				});
+
+				// Sort visible (intersecting) headings by inverted order of appearance, then grab the first item (i.e. last visible heading)
+				const lastVisible = Array.from(visibleHeadings.values()).sort((a, b) => headings.indexOf(b) - headings.indexOf(a))[0];
+				if (!lastVisible) {
+					return; // If nothing is visible, weird — TOC are opt-in — but let's skip this logic
+				}
+
+				headings.forEach((heading) => {
+					// Find the link in the TOC list matching the heading in this list of hheding elements
+					const tocLink = getTocLinkFromHeading(heading);
+
+					// If it's the last visible item, mark it to make it stand out, else, revert to the default style
+					if (heading === lastVisible) {
+                        console.log(`ACTIVE`);
+                        console.log(heading);
+                        console.log(`.toc a[href="${windowPath}#${encodeURIComponent(heading.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`)
+                        console.log(tocLink);
+						markTocItemActive(tocLink);
+					} else {
+                        console.log(`INACTIVE`);
+                        console.log(heading);
+                        console.log(`.toc a[href="${windowPath}#${encodeURIComponent(heading.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`)
+                        console.log(tocLink);
+						markTocItemInactive(tocLink);
+					}
+				});
+			},
+			{
+				//? docHeight: Extend the detection above the heading so it's always considered as intersecting if above the scrollport
+				//? -33%: The element won't be considered as intersecting until it has gone _above_ the bottom third of the scrollport
+				rootMargin: `${docHeight}px 0px -33% 0px`,
+				threshold: 1, // Only considered intersecting if all the pixels are inside the intersection area
+			}
+		);
+
+		headings.forEach((heading) => observer.observe(heading));
+
+		return observer;
+	}
+
+	// On page load...
+	markTocItemActive(getTocLinkFromHeading(headings[0])); // Mark the first item as active (even if the heading appears a bit further down)
+	currentObserver = beginObservation(height); // Start the intersection observer
+
+	// On resize, replace the observer with a new one matching the updated body height, if different
+	window.addEventListener('resize', () => {
+		clearTimeout(resizeDebounce);
+		resizeDebounce = setTimeout(() => {
+			const heightAfterResize = getDocHeight();
+			if (height !== heightAfterResize) {
+				if (currentObserver) {
+					currentObserver.disconnect();
+				}
+				currentObserver = beginObservation(heightAfterResize);
+			}
+		}, 200);
+	});
+});

assets/js/main.js

@@ -2,3 +2,4 @@ import './mobileMenu.js';
 import './countrySelector.js';
 import './resizeObserver.js';
 import './mediaqueries.js';
+import './highlightHeadline.js';

assets/sass/fonts.scss

@@ -16,4 +16,7 @@
 
 body {
   font-family: "Roboto",Arial,Helvetica,sans-serif;
+  word-wrap: break-word;
+  hyphens: auto;
+  text-align: justify;
 }

assets/sass/main.scss

@@ -4,11 +4,13 @@
 @import "styles.scss";
 @import "fonts.scss";
 @import "navigation.scss";
+@import "sidemenu.scss";
 @import "stage.scss";
 @import "teaser.scss";
 @import "footer.scss";
 @import "content.scss";
 @import "textHighlight.scss";
+@import "toc.scss";
 @import "headings.scss";
 @import "form.scss";
 @import "expander.scss";

assets/sass/sidemenu.scss

@@ -0,0 +1,20 @@
+.sidemenu{
+    flex-basis: 30%;
+    position: sticky;
+    top: 92px;
+}
+
+.tableOfContents {
+    font-size: 1.4rem;
+    line-height: 1.5;
+}
+
+.tableOfContents ul {
+    list-style-type: none;
+    list-style-position: outside;
+    padding-left: 0;
+}
+
+.tableOfContents a {
+    text-decoration-line: none;
+}

assets/sass/styles.scss

@@ -59,6 +59,19 @@ main > .container {
   }
 }
 
+main > .single-container {
+  margin-top: 7.3rem;
+  display: flex;
+  padding: 2rem;
+  align-items: flex-start;
+  gap: 2rem;
+
+  @include media-breakpoint-down(sm) {
+    margin-top: 1.6rem;
+  }
+}
+
+
 img {
   width: 100%;
   height: 100%;
@@ -81,4 +94,14 @@ article p:last-child {
   @include media-breakpoint-down(sm) {
     max-width: calc(100% - 3.6rem);
   }
+}
+
+.o-single {
+  padding: 2rem;
+  background-color: var(--bg-default);
+  border-radius: var(--border-radius-l);
+}
+
+.main {
+  flex-basis: 70%;
 }

assets/sass/toc.scss

@@ -0,0 +1,20 @@
+.toc li {
+    list-style-type: none;
+  }
+
+.toc ol {
+    padding: 0 0 0 1em;
+}
+
+.toc > ol {
+    padding-left: 0;
+}
+
+.toc-title {
+    font-weight: bold;
+}
+
+.toc a[data-current] {
+    font-weight: bold;
+    color: #007bff;
+}

content/_index.de.md

@@ -6,6 +6,8 @@ In diesem Projekt sind Informationen und Nutzungshinweise zu FIP sowie Besonderh
 
 Momentan gibt es die Infos für die Länder **Belgien** und **Slowakei**.
 
+Der aktuellen Bearbeitungsstand der Informationen für Betreiber ist hier zu finden: [Content Status](https://github.com/orgs/fipguide/projects/3)
+
 ### Unterstütze uns
 Du möchtest dein Wissen rund um FIP-Regelungen teilen? Schau auf unserem [GitHub Repository](https://github.com/fipguide/fipguide.github.io) vorbei, um Inhalte beizutragen.
 Alternativ kannst du uns auch über das [Kontaktformular]({{< ref "contact" >}}) schreiben.

content/_index.en.md

@@ -6,6 +6,8 @@ This project includes information and usage instructions for FIP as well as spec
 
 Currently, information for the countries **Belgium** and **Slovakia** are available.
 
+You can see the current information status for operators here: [Content Status](https://github.com/orgs/fipguide/projects/3) 
+
 ### Support Us
 Would you like to share your knowledge about FIP regulations? Visit our [GitHub Repository](https://github.com/fipguide/fipguide.github.io) to contribute content.
 Alternatively, you can also write to us via the [contact form]({{< ref "contact" >}}).

content/country/netherlands/index.de.md

@@ -0,0 +1,12 @@
+---
+date: "2024-10-17"
+draft: false
+title: "Niederlande"
+country: "netherlands"
+---
+
+## FIP Hinweise
+
+## Allgemeine Bahnreise Hinweise
+
+## FIP Bewertung

content/country/netherlands/index.en.md

@@ -0,0 +1,12 @@
+---
+date: "2024-10-17"
+draft: false
+title: "Netherlands"
+country: "netherlands"
+---
+
+## FIP Information
+
+## General Train Travel Information
+
+## FIP Rating

content/operator/eurostar/index.de.md

@@ -2,4 +2,7 @@
 date: "2024-10-17"
 draft: false
 title: "Eurostar"
+country:
+  - "belgium"
+  - "netherlands"
 ---

content/operator/eurostar/index.en.md

@@ -2,4 +2,7 @@
 date: "2024-10-17"
 draft: false
 title: "Eurostar"
+country:
+  - "belgium"
+  - "netherlands"
 ---

content/operator/ns/index.de.md

@@ -0,0 +1,7 @@
+---
+date: "2024-10-17"
+draft: false
+title: "NS"
+country:
+  - "netherlands"
+---

content/operator/ns/index.en.md

@@ -0,0 +1,7 @@
+---
+date: "2024-10-17"
+draft: false
+title: "NS"
+country:
+  - "netherlands"
+---

hugo.yaml

@@ -27,12 +27,17 @@ module:
       target: "static"
 
 related:
+ includeNewer: true
  indices:
    - name: country
-     weight: 1
-     includeNewer: true
+     weight: 100
 
 markup:
   tableOfContents:
     startLevel: 2
     endLevel: 2
+
+cascade:
+  toc: true # enable toc for all pages
+  target:
+    kind: 'page'

i18n/de.yaml

@@ -15,9 +15,11 @@ information-disclaimer-short: Diese Informationen sind inoffiziell und ohne Gew
 highlight-important: Wichtige Information
 highlight-inofficial: Inoffizielle Information
 highlight-tip: Persönlicher Tipp
-news-headline: Was gibt's neues?
+news-headline: Was gibt's Neues?
 _operator__list_title: Betreiber
 _country__list_title: Länder
 _news__list_title: Neuigkeiten
 updateDate: Zuletzt aktualisiert
-related: Verwandte Seiten
+related: Verwandte Seiten
+toc_name: Inhalt
+_operator__nearby: Angrenzende Betreiber

i18n/en.yaml

@@ -20,4 +20,6 @@ _operator__list_title: Operator
 _country__list_title: Countries
 _news__list_title: News
 updateDate: Last updated
-related: Related Pages
+related: Related Pages
+toc_name: Contents
+_operator__nearby: Neighboring Operators

layouts/country/single.html

@@ -1,20 +1,15 @@
 {{ define "main" }}
-<article class="container o-single">
-    <h2 data-pagefind-meta="title">{{ .Title }}</h2>
-
-    {{ partial "updateDate.html" . }}
-
-    <hr>
-    <div class="tableOfContents">
-        {{ .TableOfContents }}
+<article class="single-container">
+    <div class="o-single sidemenu">
+        {{ partial "sidemenu.html" . }}
     </div>
-    <hr>
-
-    <div class="content" data-pagefind-weight="2">
-        {{ .Content }}
+    <div class="o-single main">
+        <h2 data-pagefind-meta="title">{{ .Title }}</h2>
+        {{ partial "updateDate.html" . }}
+
+        <div class="content" data-pagefind-weight="2">
+            {{ .Content }}
+        </div>
     </div>
-    <hr>
-    {{ partial "related.html" . }}
-    {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
 </article>
 {{ end }}