feat: Services-Cards als Flow-Blocks realisiert. Inhalt damit über GUI editierbar.

content/about/contents.lr

@@ -1,61 +1,26 @@
 _model: about_page
 ---
 title: Services
----
-body:
-
-Die Mitglieder der WTF Kooperative eG kennen sich mit vielen Technologien aus:
-
-- Python — 34 Mitglieder:innen <img height="25px" src="/images/logos/Python_logo_and_wordmark.svg">
-- C++ — 17 Mitglieder:innen <img height="25px" src="/images/logos/ISO_C++_Logo.svg">
-- Linux — 17 Mitglieder:innen <img height="25px" src="/images/logos/Tux.svg">
-- JavaScript — 16 Mitglieder:innen <img height="25px" src="/images/logos/Unofficial_JavaScript_logo_2.svg">
-- PHP — 14 Mitglieder:innen <img height="25px" src="/images/logos/PHP-logo.svg">
-- C — 12 Mitglieder:innen <img height="25px" src="/images/logos/C_Programming_Language.svg">
-- Ansible — 10 Mitglieder:innen <img height="25px" src="/images/logos/Ansible_logo.svg">
-- PostgresSQL — 10 Mitglieder:innen <img height="25px" src="/images/logos/Postgresql_elephant.svg">
-- Java — 7 Mitglieder:innen <img height="25px" src="/images/logos/Java-Logo.svg">
-- Rust — 6 Mitglieder:innen <img height="25px" src="/images/logos/Rust_programming_language_black_logo.svg">
-- CSS — 5 Mitglieder:innen <img height="25px" src="/images/logos/CSS3_logo_and_wordmark.svg">
-- Debian — 5 Mitglieder:innen <img height="25px" src="/images/logos/Debian-OpenLogo.svg">
-- MySQL — 5 Mitglieder:innen <img height="25px" src="/images/logos/MySQL_textlogo.svg">
-- Vue.js — 5 Mitglieder:innen <img height="25px" src="/images/logos/Vue.js_Logo_2.svg">
-- Projektmanagement — 5 Mitglieder:innen
-- LaTeX — 4 Mitglieder:innen <img height="25px" src="/images/logos/LaTeX_logo.svg">
-
-Diese Auflistung erhebt keinen Anspruch auf Vollständigkeit.
-
-
-## Agiles Projektmanagement
-
-In den Reihen der WTF eG finden sich sowohl erfahrene Scrum Master als auch Product Owner für Ihr Projektteam.
-Auch Coaching für diese essenziellen Rollen des agilen Projektmanagement-Alltags, bieten wir Ihnen gerne an, damit Sie Kompetenzen aufbauen und Teams qualifizieren können.
-Dabei sind unsere Expert*innen nicht dogmatisch auf einzelne Frameworks wie SCRUM oder Kanban beschränkt, sondern orientieren sich an Ihren Anforderungen und finden effektive Ansätze für größtmögliche Akzeptanz aller Beteiligten.
-
-## Barrierefreiheit
-
-Wir helfen Ihnen Software barrierefrei gemäß etablierter Richtlinien (z.B. BITV 2.0, ISO 9241, WCAG 2.0) zu konzipieren, umzusetzen oder bestehende Systeme anzupassen.
-
-## Operations
-
-Auch beim Betrieb von Infrastruktur und Softwareanwendungen bietet die WTF eG kompetente Unterstützung.
-Von der Kommissionierung von on-premise Servern bis zur Betreuung hochverfügbarer, horizontal skalierter Cloud-Anwendungen finden sich die passenden Kompetenzen unter den Mitgliedern der Kooperative.
-Für mehr Details, fragen Sie direkt mit dem Schlagwort "Admin as a Service" an.
-
-## Software-Audits
-
-## Softwareentwicklung
-
-Von Hardware nahen Projekten mit C, C++ oder Rust, über die Ebene gängiger Unix Betriebssysteme, Enterprise Software in Java, (no)SQL Datenbank basierten Systemen und Webtechnologien wie JavaScript, Python, Go und PHP, bis hin zu Data Science sowie Künstlicher Intelligenz, reicht die Expertise der WTF Kooperative eG.
-Wir ergänzen Ihre bestehenden Kompetenzen nach Bedarf, oder stellen Ihnen abgestimmte Entwicklungsteams zur Verfügung.
-
-## Übersetzung & Internationalisierung (i18n/l10n)
-
-## User Experience
-
-Mit Ihrer Zielgruppe im Fokus, unterstützen Sie Menschen aus der WTF Kooperative eG mit Kompetenz aus den Bereichen User Experience (UX) und User Centred Design.
-Damit Sie mir Ihren Produkten nicht nur User befähigen, sondern auch begeistern.
-Sind Ihre Zielgruppe Software Teams? Auch im Bereich Developer Experience (DX) unterstützen wir Sie gerne kompetent.
-
 ---
 meta_description: Die WTF Kooperative bietet viel Erfahrung und Know-how in der Informationstechnologie. Sprechen Sie uns an!
+---
+section:
+
+#### flow_services_cards ####
+card_title: Beratung
+----
+card_image: images/icon_gears_bubble.svg
+----
+card_text: Profitieren Sie vom breit aufgestellten IT-Know-how, vom Erfahrungsaustausch und der Vernetzung unserer Mitglieder, Expertinnen und Experten in der Genossenschaft. Die WTF Kooperative ist Ihr kompetenter Ansprechpartner.
+#### flow_services_cards ####
+card_title: Entwicklung
+----
+card_image: images/icon_processor.svg
+----
+card_text: Wir realisieren Ihre Projekte – egal ob Web-Applikation, mobile App oder hardwarenahe Programmierung. Auch können wir Sie bei Bedarf hinsichtlich passender Wirtschaftsförderprogramme beraten.
+#### flow_services_cards ####
+card_title: Betrieb
+----
+card_image: images/icon_connected_servers.svg
+----
+card_text: Nach dem Projekt lassen wir Sie nicht mit dem Ergebnis im Regen stehen, sondern bieten Ihnen auch über das Projekt hinaus Services für den Betrieb des abgeschlossenen Projekts und die Administration der Infrastruktur.

flowblocks/flow_services_cards.ini

@@ -0,0 +1,17 @@
+[block]
+name = Services Card
+button_label = Services Card
+label = {{ this.card_title }}
+
+[fields.card_title]
+label = Card Titel
+type = string
+
+[fields.card_image]
+label = Card Icon
+description = Icon Pfad zB. images/circle_icon_fist.svg
+type = string
+
+[fields.card_text]
+label = Card Text
+type = markdown

models/about_page.ini

@@ -1,4 +1,19 @@
 [model]
 name = About Page
 label = {{ this.title }}
-inherits = page
+inherits = header_slim
+
+[fields.title]
+label = Title
+description = Der Seitentitel und die Überschrift dieser Seite
+type = string
+
+[fields.meta_description]
+label = Meta Beschreibung
+description = Hier kommt die Beschreibung rein, die von Suchmachinen, Seitencrawlern und Previews auf diese Seite generiert werden
+type = string
+
+[fields.section]
+label = Sections
+type = flow
+flow_blocks = flow_services_cards

templates/about_page.html

@@ -1,4 +1,5 @@
 {% extends "header_slim.html" %}
+{% from "macros/services_cards.html" import render_services_card %}
 {%- block title -%}{{ this.title }}{%- endblock -%}
 {%- block meta_description -%}
   {%- if this.meta_description is defined and this.meta_description != "" -%}
@@ -13,51 +14,15 @@
 
         <div class="services_box">
           <h1>{{ this.title }}</h1>
-          {#
-            TODO: Services-Karten in Flow-Blocks umbauen, damit der Inhalt getrennt von der
-            Optik gepflegt werden kann.
-          #}
           <div class="services_card_box">
-            <div class="services_card -odd">
+            {% for card in this.section.blocks %}
-              <div class="services_card__image_box">
+              {{ render_services_card(card, loop.index) }}
-                <img src="{{'/images/icon_gears_bubble.svg'|asseturl }}" alt="" aria-hidden="true">
+            {% endfor %}
-              </div>
-              <div class="services_card__text_box">
-                <h2>Beratung</h2>
-                <p>
-                  Profitieren Sie vom breit aufgestellten IT-Know-how, vom Erfahrungsaustausch und der Vernetzung unserer Mitglieder, Expertinnen und Experten in der Genossenschaft. Die WTF Kooperative ist Ihr kompetenter Ansprechpartner.
-                </p>
-              </div>
-            </div>
-
-            <div class="services_card -even">
-              <div class="services_card__image_box">
-                <img src="{{'/images/icon_processor.svg'|asseturl }}" alt="" aria-hidden="true">
-              </div>
-              <div class="services_card__text_box">
-                <h2>Entwicklung</h2>
-                <p>
-                  Wir realisieren Ihre Projekte – egal ob Web-Applikation, mobile App oder hardwarenahe Programmierung. Auch können wir Sie bei Bedarf hinsichtlich passender Wirtschaftsförderprogramme beraten.
-                </p>
-              </div>
-            </div>
-
-            <div class="services_card -odd">
-              <div class="services_card__image_box">
-                <img src="{{'/images/icon_connected_servers.svg'|asseturl }}" alt="" aria-hidden="true">
-              </div>
-              <div class="services_card__text_box">
-                <h2>Betrieb</h2>
-                <p>
-                  Nach dem Projekt lassen wir Sie nicht mit dem Ergebnis im Regen stehen, sondern bieten Ihnen auch über das Projekt hinaus Services für den Betrieb des abgeschlossenen Projekts und die Administration der Infrastruktur.
-                </p>
           </div>
         </div>
 
       </div>
 
-        </div>
-      </div>
       <div class="content__box">
           <div class="content__inner_box">
               <h1 class="big_heading">Kompetenzen</h1>

templates/macros/services_cards.html

@@ -0,0 +1,11 @@
+{% macro render_services_card(card, index) %}
+            <div class="services_card {% if index%2 %}-odd{% else %}-even{% endif %}">
+              <div class="services_card__image_box">
+                <img src="/{{ card.card_image }}" alt="" aria-hidden="true">
+              </div>
+              <div class="services_card__text_box">
+                <h2>{{ card.card_title }}</h2>
+                {{ card.card_text }}
+              </div>
+            </div>
+{% endmacro %}