feat(landingpage): create multilang landingpage with custom sections

assets/js/bootstrap.js

@@ -0,0 +1,9 @@
+// Import the Bootstrap components we want to use.
+// See https://github.com/twbs/bootstrap/blob/main/js/index.umd.js
+import Tab from "/js/bootstrap/src/tab";
+import Dropdown from "/js/bootstrap/src/dropdown";
+
+export default {
+    Tab,
+    Dropdown
+}

data/de/landing.yaml

@@ -0,0 +1,66 @@
+hero:
+  enable: true
+  weight: 10
+  template: hero
+
+  backgroundImage:
+    path: "images"
+    filename:
+      desktop: "header.jpg"
+      mobile: "header.jpg"
+
+  titleLogo:
+    path: "images"
+    filename: "logo.png"
+    alt: "Freifunk Logo"
+    height: 80px
+
+  title: "Freifunk Berlin"
+  subtitle: Freifunk Berlin ist eine lokale Initiative mit dem Ziel, ein freies WLAN-Netzwerk über Berlin aufzuspannen und freien Netzzugang anzubieten.
+
+text1:
+  enable: true
+  weight: 20
+  template: text section
+
+  title: "Was ist Freifunk?"
+  text: "Die Vision von Freifunk ist die Verbreitung freier Netzwerke, die Demokratisierung der Kommunikationsmedien und die Förderung lokaler Sozialstrukturen. Durch die Vernetzung ganzer Stadtteile wollen wir der digitalen Spaltung entgegenwirken und freie unabhängige Netzwerkstrukturen aufbauen. Konkret hat sich Freifunk zum Ziel gesetzt, offene WLAN-Netze einzurichten und diese miteinander zu verbinden. Dies ermöglicht einen freien Datenverkehr “durch die Luft” in der ganzen Stadt innerhalb des Freifunk-Netzes. Freifunk ist somit eine offene nicht-kommerzielle hierarchielose Initiative für freie Funknetzwerke."
+
+imageText:
+  enable: true
+  weight: 30
+  template: image text
+
+  title: Wie funktioniert Freifunk?
+  subtitle: Die Grundlage von Freifunk bildet ein sogenanntes Mesh-Netzwerk. Alle WLAN-Router im Freifunk-Netz kommunizieren untereinander und bilden ein eigenes Funknetzwerk in der Stadt. Ein Routing-Protokoll ermöglicht, dass jeder Mensch im Freifunk-Netz andere Teilnehmer_innen erreichen und Daten austauschen kann. Manche Knoten sind desweiteren auch direkt mit dem Internet verbunden. So haben alle Menschen im Freifunk-Netz auch direkten Zugriff auf das globale Netz.
+  image:
+    path: "images"
+    filename: "adhoc_netz_wikipedia.png"
+
+text2:
+  enable: true
+  weight: 40
+  template: text section
+
+  title: "Wie kann ich mitmachen?"
+  text: "Mach mit und werde FreifunkerIn! Komm zu den Treffen oder geh direkt zum HowTo und mach deinen Router fit für Freifunk! Gibt es noch keine weiteren Freifunker_innen in deiner Gegend? Dann bist du die oder der Erste und andere werden dir bald folgen!"
+
+
+video:
+  enable: true
+  weight: 25
+  template: video
+
+  src: freifunk-verbindet
+  defaultformat: webm
+  preload: metadata
+
+activities:
+  enable: true
+  weight: 60
+  template: activities
+
+featureGrid:
+  enable: false
+imageCompare:
+  enable: false

data/en/landing.yaml

@@ -0,0 +1,64 @@
+hero:
+  enable: true
+  weight: 10
+  template: hero
+
+  backgroundImage:
+    path: "images"
+    filename:
+      desktop: "header.jpg"
+      mobile: "header.jpg"
+
+  titleLogo:
+    path: "images"
+    filename: "logo.png"
+    alt: "Freifunk Logo"
+    height: 80px
+
+  title: "Freifunk Berlin"
+  subtitle: "Freifunk Berlin is a local initiative with the aim of setting up a free WiFi network across Berlin and offering free network access."
+
+text1:
+  enable: true
+  weight: 20
+  template: text section
+  title: "What is Freifunk?"
+  text: Freifunk stands for distributing free networks, democratizing media of communication and promoting local social structures. By interconnecting whole neighborhoods, we want to bridge the digital gap and establish a free and independent network infrastructure. More precisely, the aim of Freifunk is installing open wifi networks and interconnecting them. This facilitates free data "air traffic" in the whole city within the Freifunk network. In short, Freifunk is an open, non-commercial, non-hierarchical initiative for free networks.
+
+imageText:
+  enable: true
+  weight: 30
+  template: image text
+
+  title: How does it work?
+  subtitle: Freifunk's foundation is a so called mesh network. All routers within the Freifunk network can communicate with one another and form their own wifi network. A routing protocol allows for everybody within the Freifunk network to communicate and exchange data with other participants. Some of the nodes within the network are further connected with the Internet. That way, everyone within Freifunk has also a direct access to the global network.
+  image:
+    path: "images"
+    filename: "adhoc_netz_wikipedia.png"
+
+text2:
+  enable: true
+  weight: 40
+  template: text section
+
+  title: "How can I contribute?"
+  text: "Join us and become a Freifunk activist! Come to one of the meetings or go directly to the HowTo and get your router ready for Freifunk! There are still no other network activists in your area? Well, then you're the 1st one and further will soon follow!"
+
+video:
+  enable: true
+  weight: 25
+  template: video
+
+  src: freifunk-verbindet
+  defaultformat: webm
+  preload: metadata
+
+activities:
+  enable: true
+  weight: 60
+  template: activities
+
+featureGrid:
+  enable: false
+imageCompare:
+  enable: false

layouts/index.de.html

@@ -0,0 +1,3 @@
+{{ define "main" }}
+    {{ partial "landing.html" (dict "landingData" .Site.Data.de.landing) }}
+{{ end }}

layouts/index.en.html

@@ -0,0 +1,3 @@
+{{ define "main" }}
+    {{ partial "landing.html" (dict "landingData" .Site.Data.en.landing) }}
+{{ end }}

layouts/partials/header.html

@@ -0,0 +1,72 @@
+<!-- Navbar Start -->
+<header id="topnav">
+    <div class="container d-flex justify-content-between align-items-center">
+        <!-- Logo container-->
+        <a class="logo" aria-label="Home" href='{{ relLangURL "" }}'>
+            {{ with resources.Get "images/logos/mark.svg" }}
+                {{ .Content | safeHTML }}
+            {{ end }}
+        </a>
+        <!-- End Logo container-->
+
+        <div class="d-flex align-items-center">
+
+            <div id="navigation">
+                <!-- Navigation Menu -->
+                <ul class="navigation-menu nav-right">
+                    {{- range .Site.Menus.primary }}
+                    <li><a href="{{ relLangURL .URL }}">{{ .Name }}</a></li>
+                    {{ end }}
+                </ul><!--end navigation menu-->
+            </div><!--end navigation-->
+
+            <!-- Social Links Start -->
+            {{ with $.Scratch.Get "social_list" }}
+            <ul class="social-link d-flex list-inline mb-0">
+                {{ range . }}
+                    {{ $path := printf "images/social/%s.%s" . "svg" }}
+                    <li class="list-inline-item mb-0">
+                        <a href="{{ if eq . `rss` }} {{ `index.xml` | absURL }} {{ else }} https://{{ . }}.com/{{ index site.Params.social . }} {{ end }}" alt="{{ . }}" rel="noopener noreferrer" target="_blank">
+                            <div class="btn btn-icon btn-landing border-0">
+                                {{ with resources.Get $path }}
+                                    {{ .Content | safeHTML }}
+                                {{ end }}
+                            </div>
+                        </a>
+                    </li>
+                {{ end }}
+            </ul>
+            {{ end }}
+            <!-- Social Links End -->
+
+            <!-- Language Selector Start -->
+            {{ if .Site.IsMultiLingual }}
+            <div class="dropdown">
+                <button class="btn btn-link btn-default dropdown-toggle ps-2" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    {{ site.Language.Lang | upper }}
+                </button>
+                <ul class="dropdown-menu text-end">
+                    {{ partial "docs/i18nlist" . }}
+                </ul>
+            </div>
+            {{ end }}
+            <!-- Language Selector End -->
+
+            <div class="menu-extras ms-3 me-2">
+                <div class="menu-item">
+                    <!-- Mobile menu toggle-->
+                    <button class="navbar-toggle btn btn-icon btn-soft-light" id="isToggle" aria-label="toggleMenu" onclick="toggleMenu()">
+                        <div class="lines">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                    </button>
+                    <!-- End mobile menu toggle-->
+                </div>
+            </div>
+
+        </div>
+    </div><!--end container-->
+</header><!--end header-->
+<!-- Navbar End -->

layouts/partials/landing.html

@@ -0,0 +1,25 @@
+{{ $map := newScratch }}
+{{ $landingData := .landingData }}
+
+{{ range $key, $value := .landingData }}
+    {{ $sectionTitle := (index $key) }}
+    {{ $weight := string ($value.weight) }}
+    {{ $template := string (replaceRE `( |-{1,})` "_" $value.template) }}
+    {{ with and $template $weight }}
+        {{ $map.SetInMap "wgtTpl" $sectionTitle (dict
+        "weight" $weight
+        "template" $template
+        "sectionTitle" $sectionTitle
+        )}}
+    {{ end }}
+{{ end }}
+
+{{ range sort ($map.Get "wgtTpl") ".weight" }}
+    {{ $path := printf "landing/%s.html" .template }}
+    {{ partial $path (dict "landingData" $landingData "sectionTitle" .sectionTitle) }}
+
+{{ end }}
+{{/* printf "%s" (sort ($map.Get "wgtTpl") ".weight" ) */}}
+
+
+

layouts/partials/landing/activities.html

@@ -1,5 +1,5 @@
-{{ $sectionTitle := .Scratch.Get "sectionTitle" }}
-{{ with (index .Site.Data.landing $sectionTitle) }}
+{{ $sectionTitle := .sectionTitle }}
+{{ with (index .landingData .sectionTitle) }}
 {{ if eq .enable true }}
 
 <section id="{{ $sectionTitle }}">

layouts/partials/landing/hero.html

@@ -0,0 +1,123 @@
+{{ $sectionTitle := .sectionTitle }}
+{{ with (index .landingData .sectionTitle) }}
+{{ if eq .enable true }}
+<!-- Hero Start -->
+{{ with .backgroundImage }}
+    {{ $path := .path | default "images" }}
+    {{ $filename := .filename }}
+    {{ $pathDesktop := printf "%s/%s" $path $filename.desktop }}
+    {{ $pathMobile := printf "%s/%s" $path $filename.mobile }}
+        <style>
+            .hero {
+                {{ with $filename.desktop }}
+                    {{ with resources.Get $pathDesktop }}
+                        @media (min-width: 768px) {
+                            background-image: url("{{ .RelPermalink }}");
+                        }
+                    {{ end }}
+                {{ end }}
+                {{ with $filename.mobile }}
+                    {{ with resources.Get $pathMobile }}
+                        background-image: url("{{ .RelPermalink }}");
+                    {{ end }}
+                {{ end }}
+            }
+        </style>
+{{ end }}
+<section id="{{ $sectionTitle }}" class="d-table w-100 overflow-hidden hero">
+    <div class="container">
+        <div class="row mt-5 align-items-center">
+
+            <div class="col-lg-8 col-md-8 mb-3">
+                <div class="title-heading">
+                    {{ with .badge }}
+                    <span class="badge {{ if eq .pill true }}rounded-pill{{ end }} bg-{{ if eq .soft true }}soft-{{ else }}hard-{{ end }}{{ .color }} mb-1">{{ .text }}</span>
+                    {{ end }}
+                    <h4 class="heading mt-0 mb-3">
+                        {{ with .titleLogo }}
+                            {{ $path := .path | default "images" }}
+                            {{ $filename := .filename }}
+                            {{ $height := .height | default "70px" }}
+                            {{ $alt := .alt | default "logo image" }}
+                            {{ $path := printf "%s/%s" $path $filename }}
+                            {{ with $filename }}
+                                <span>
+                                    {{ with $image := resources.Get $path }}
+                                        {{ if eq .MediaType.SubType "svg" }}
+                                            {{ .Content | safeHTML }}
+                                        {{ else }}
+                                            {{ with .Resize (printf "%dx%d webp q85 drawing Lanczos" .Width .Height) }}
+                                                <img src="{{ .RelPermalink }}" alt="{{ $alt }}" height="{{ $height }}">
+                                            {{ end }}
+                                        {{ end }}
+                                    {{ end }}
+                                </span>
+                            {{ end }}
+                        {{ end }}
+                        {{ with .title }}{{ . }}{{ end }}
+                    </h4>
+                    {{ with .subtitle }}
+                    <p class="para-desc text-muted mb-0">{{ . | markdownify }}</p>
+                    {{ end }}
+
+                    <div class="mt-3">
+                        {{ with .ctaButton }}
+                            <a href="{{ relLangURL .Site.Data.landing.hero.ctaButton.url }}" class="btn btn-lg btn-primary me-2 mt-2">
+                                {{ with .icon }}
+                                    <span class="material-icons align-middle">{{ . }}</span>
+                                {{ end }}
+                                {{ with .btnText }}
+                                    {{ . }}
+                                {{ end }}
+                            </a>
+                        {{ end }}
+                        {{ with .cta2Button }}
+                        <a href="{{ relLangURL .url }}" class="btn btn-lg btn-outline-primary mt-2">
+                            {{ with .icon }}
+                                <span class="material-icons align-middle">{{ . }}</span>
+                            {{ end }}
+                            {{ with .btnText }}
+                                {{ . }}
+                            {{ end }}
+                        </a>
+                        {{ end }}
+                    </div>
+
+                    {{ with .info }}
+                    <p class="text-muted mb-0 mt-3">{{ . | markdownify }}</p>
+                    {{ end }}
+                </div>
+            </div>
+
+            <div class="col-lg-6 col-md-6 mt-4 pt-4 mt-sm-0 pt-sm-0">
+                {{ with .image }}
+                    {{ $path := .path | default "images" }}
+                    {{ $filename := .filename }}
+                    {{ $alt := .alt | default "hero image" }}
+                    {{ $boxShadow := .boxShadow | default false }}
+                    {{ $rounded := .rounded | default false }}
+                    {{ $path := printf "%s/%s" $path $filename }}
+                    {{ with $filename }}
+                        <div class="ms-lg-4">
+                            <div class="classic-hero-image">
+                                {{ with $image := resources.Get $path }}
+                                    {{ if eq .MediaType.SubType "svg" }}
+                                        {{ .Content | safeHTML }}
+                                    {{ else }}
+                                        {{ with .Resize (printf "%dx%d webp q85 drawing Lanczos" .Width .Height) }}
+                                            <img src="{{ .RelPermalink }}" class="{{ if $boxShadow }}shadow-lg{{ else }}{{ end }} mx-auto d-block {{ if $rounded }}rounded-top-4{{ else }}{{ end }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $alt }}">
+                                        {{ end }}
+                                    {{ end }}
+                                {{ end }}
+                            </div>
+                        </div>
+                    {{ end }}
+                {{ end }}
+            </div><!--end col-->
+
+        </div><!--end row-->
+    </div> <!--end container-->
+</section><!--end section-->
+<!-- Hero End -->
+{{ end }}
+{{ end }}