Build a general header banner file

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 vendor/
 .idea/
 .env
+docker-compose.override.yml

content/data/banners.json

@@ -0,0 +1,78 @@
+[
+  {
+    "id": "member-meeting",
+    "active": true,
+    "banner_id": "banner-mm",
+    "image": "headers/mosnl-meeting-2024-02.jpg",
+    "image_alt": "Mage-OS Nederland ledenvergadering",
+    "hide_on_pages": ["/lid-worden"],
+    "show_on_pages": ["/"],
+    "title": "Mage-OS Nederland<br/>Ledenvergadering + borrel",
+    "tagline": "Beslis mee over de toekomst van Magento",
+    "details": "29 januari 2026 in Utrecht",
+    "button_url": "https://www.eventbrite.com/e/tickets-mage-os-nederland-nieuwjaarsborrel-1975123005077?utm_source=mage-os-nl&utm_medium=agenda&utm_campaign=mage-os-nl",
+    "button_text": "Meld je aan"
+  },
+  {
+    "id": "wwvd",
+    "active": false,
+    "banner_id": "banner-wwvd",
+    "image": "headers/mosnl-wwvd-nologo.png",
+    "image_alt": "Webwinkel Vakdagen 2024 Magento Community Drinks",
+    "show_on_pages": ["/"],
+    "title": "Webwinkel Vakdagen<br/>Magento Community Drinks",
+    "tagline": "April 2nd, 2025 starting at 16:00<br/>Beers & Barrels, Utrecht",
+    "button_url": "https://www.eventbrite.com/e/tickets-mage-os-wwvd-2025-borrel-1106568990639",
+    "button_text": "Reserve your seat"
+  },
+  {
+    "id": "bbq",
+    "active": false,
+    "banner_id": "banner-bbq",
+    "image": "headers/mosnl-meeting-2024-02.jpg",
+    "image_alt": "",
+    "show_on_pages": ["/"],
+    "title": "Algemene ledenvergadering<br/>+ zomer BBQ 2025!",
+    "tagline": "5 June 2025, starting at 15:30<br/>De Hofvlietvilla, Zwolle",
+    "button_url": "https://www.eventbrite.com/e/tickets-algemene-ledenvergadering-mage-os-nederland-zomer-bbq-2025-1318544154059",
+    "button_text": "Get your tickets"
+  },
+  {
+    "id": "mageunconference",
+    "active": false,
+    "banner_id": "banner-mageunconference",
+    "image": "headers/mosnl-meeting-2024-02.jpg",
+    "image_alt": "",
+    "show_on_pages": ["/"],
+    "title": "Mage Unconference 2025<br/>The Dutch Edition",
+    "tagline": "26 & 27 June 2025<br/>Fort aan de Klop, Utrecht",
+    "button_url": "https://mageunconference.nl/",
+    "button_text": "Get your tickets"
+  },
+  {
+    "id": "mmnl",
+    "active": false,
+    "banner_id": "banner-mmnl",
+    "image": "headers/mosnl-meeting-2024-02.jpg",
+    "image_alt": "Meet Magento Netherlands",
+    "hide_on_pages": ["/lid-worden"],
+    "show_on_pages": ["/"],
+    "title": "Meet Magento Netherlands 2025",
+    "tagline": "6th of November 2025<br/>LIEF, Amsterdam",
+    "button_url": "https://meetmagentonetherlands2025.eventbrite.com/",
+    "button_text": "Get your tickets"
+  },
+  {
+    "id": "become-member",
+    "active": false,
+    "banner_id": "banner-become-member",
+    "image": "headers/mosnl-meeting-2024-02.jpg",
+    "image_alt": "Become a member",
+    "show_on_pages": ["/"],
+    "title": "Mage-OS Nederland",
+    "tagline": "Een Nederlandse Magento community<br/> van en voor iedereen",
+    "button_url": "/lid-worden",
+    "button_text": "Word nu lid",
+    "button_target": ""
+  }
+]

content/data/events.json

@@ -305,7 +305,7 @@
     "description": "Nieuwjaarsborrel",
     "location": "Bar Beton",
     "address": "Bar Beton, Stationshal 2-9, 3511CE Utrecht",
-    "url": "https://www.eventbrite.com/e/tickets-mage-os-nederland-nieuwjaarsborrel-1975123005077"
+    "url": "https://www.eventbrite.com/e/tickets-mage-os-nederland-nieuwjaarsborrel-1975123005077?utm_source=mage-os-nl&utm_medium=agenda&utm_campaign=mage-os-nl"
   },
   {
     "timestamp": "2026-03-25",

content/data/social-media.json

@@ -0,0 +1,17 @@
+[
+  {
+    "name": "LinkedIn",
+    "url": "https://www.linkedin.com/company/mageos-nederland/",
+    "icon": "linkedin.svg"
+  },
+  {
+    "name": "GitHub",
+    "url": "https://github.com/mage-os-nl",
+    "icon": "github.svg"
+  },
+  {
+    "name": "Discord",
+    "url": "http://chat.mage-os.org",
+    "icon": "discord.svg"
+  }
+]

content/data/topmenu.json

@@ -0,0 +1,30 @@
+[
+  {
+    "label": "Association",
+    "url": "/vereniging"
+  },
+  {
+    "label": "Newsletter",
+    "url": "http://eepurl.com/iusMg2"
+  },
+  {
+    "label": "Agenda",
+    "url": "/agenda"
+  },
+  {
+    "label": "Directory",
+    "url": "/directory"
+  },
+  {
+    "label": "Blog",
+    "url": "/blog"
+  },
+  {
+    "label": "FAQ",
+    "url": "/faq"
+  },
+  {
+    "label": "Become member",
+    "url": "/lid-worden"
+  }
+]

docker-compose.override.yml.example

@@ -0,0 +1,36 @@
+# Local override file for custom Docker Compose configuration
+# This file is automatically loaded by Docker Compose
+# and overrides/extends the base docker-compose.yml
+#
+# Copy this file to docker-compose.override.yml and adjust to your needs
+
+# Example 1: Warden setup with HTTPS and custom domain
+# Uncomment and adjust the configuration below for Warden environments
+#
+# services:
+#   www:
+#     labels:
+#       - "traefik.enable=true"
+#       - "traefik.http.routers.mosnl.rule=Host(`nl.mage-os.test`)"
+#       - "traefik.http.routers.mosnl.entrypoints=http,https"
+#       - "traefik.http.routers.mosnl.tls=true"
+#     networks:
+#       - warden
+#       - default
+#
+# networks:
+#   warden:
+#     external: true
+
+# Example 2: Custom port mapping (for local development without Traefik)
+# services:
+#   www:
+#     ports:
+#       - "8080:80"
+
+# Example 3: Custom UID for file permissions
+# services:
+#   www:
+#     build:
+#       args:
+#         uid: 501

lib/Website/MenuItem.php

@@ -6,7 +6,7 @@ class MenuItem {
     public function __construct(
         private string $label,
         private string $url,
-        private string $class = 'block py-1 hover:text-primary transition-colors text-center'
+        private string $class = 'block py-1 hover:text-orange transition-colors text-center'
     ) {
     }
 

pub/index.php

@@ -23,6 +23,10 @@ function isLocalhost(): bool
         return true;
     }
 
+    if ($_SERVER['HTTP_HOST'] === 'nl.mage-os.test') {
+        return true;
+    }
+
     return str_starts_with($_SERVER['HTTP_HOST'], 'localhost');
 }
 
@@ -39,7 +43,10 @@ function isRealhost(): bool
 }
 
 // Redirect HTTP to HTTPS
-if ((!isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] !== "on") && isRealhost()) {
+$isHttps = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') ||
+           (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https');
+
+if (!$isHttps && isRealhost()) {
     http_response_code(301);
     header('Location: https://' . getRealhost() . '/');
     exit;

templates/header.php

@@ -4,8 +4,14 @@
 use MageOsNl\Website\MenuItem;
 use MageOsNl\Website\Url;
 
+// Load menu items from JSON
+$menuItemsData = json_decode(
+    file_get_contents(Registry::getInstance()->getContentDirectory().'/data/topmenu.json'),
+    true
+);
+
 /** @var MenuItem[] $menuItems */
-$menuItems = include Registry::getInstance()->getContentDirectory().'/data/topmenu.php';
+$menuItems = array_map(fn($item) => new MenuItem($item['label'], $item['url']), $menuItemsData);
 $becomeMemberUrl = new Url('lid-worden');
 ?>
 <div class="bg-green text-sm">
@@ -48,14 +54,14 @@ class="w-6 h-6 text-gray-500"
             <nav class="md:hidden w-full items-center" x-show="open">
                 <ul class="py-4">
                     <?php foreach ($menuItems as $menuItem): ?>
-                        <li class="pt-2 pb-1 border-t border-gray-300">
+                        <li class="pt-2 pb-1 border-t border-gray-300 hover:text-orange">
                             <a href="<?= $menuItem->getUrl() ?>"><?= $menuItem->getLabel() ?></a>
                         </li>
                     <?php endforeach; ?>
                 </ul>
             </nav>
 
-            <div class="absolute right-0 bottom-0 text-blue text-lg">
+            <div class="absolute right-0 bottom-0 text-blue text-lg hover:text-orange">
                 <?php if (isset($_GET['language']) && $_GET['language'] === 'en'): ?>
                     <a href="/nl<?= $_SERVER['REQUEST_URI'] ?>" title="Dutch language">NL</a>
                     <span class="hidden md:inline">| EN</span>
@@ -90,4 +96,4 @@ class="w-6 h-6 text-gray-500"
             </ul>
         </nav>
     </div>
-</div>
+</div>

templates/header/banner.php

@@ -0,0 +1,80 @@
+<?php
+declare(strict_types=1);
+
+use MageOsNl\Website\ImageFactory;
+
+/**
+ * Generic banner template
+ *
+ * Expected $config array structure:
+ * [
+ *     'id' => 'banner-id',                              // Banner HTML ID
+ *     'image' => 'headers/image.jpg',                   // Image path
+ *     'image_alt' => 'Alt text',                        // Image alt text
+ *     'show_condition' => fn() => true,                 // Optional: Function to determine if banner should show
+ *     'title' => 'Banner Title',                        // H2 title (can contain <br/> tags)
+ *     'tagline' => 'Tagline text',                      // Optional: Tagline/description (can contain <br/> tags)
+ *     'details' => 'Date/location details',             // Optional: Details like date/location (can contain <br/> tags)
+ *     'button_url' => 'https://...',                    // Button URL
+ *     'button_text' => 'Button text',                   // Button text
+ *     'button_target' => '_blank',                      // Optional: Button target (default: _blank)
+ * ]
+ *
+ * Styling is hardcoded:
+ * - Container: bg-green px-8 py-16 rounded-xl
+ * - Title: text-orange
+ * - Tagline: text-blue
+ * - Details: text-orange-400
+ * - Button: button button-big button-orange
+ */
+
+if (!isset($config) || !is_array($config)) {
+    return;
+}
+
+// Check show condition
+if (isset($config['show_condition']) && is_callable($config['show_condition'])) {
+    if (!$config['show_condition']()) {
+        return;
+    }
+}
+
+// Create image
+$image = ImageFactory::create($config['image'], $config['image_alt'] ?? '');
+$image->setCssClass('w-full h-full object-cover');
+
+// Simple values
+$bannerId = $config['id'] ?? 'banner';
+$buttonTarget = $config['button_target'] ?? '_blank';
+?>
+<div class="py-8 md:py-32 relative" id="<?= htmlspecialchars($bannerId) ?>">
+    <div class="absolute top-0 left-0 right-0 bottom-0">
+        <?= $image ?>
+    </div>
+    <div class="relative flex items-center justify-center">
+        <div class="text-center bg-green px-8 py-16 rounded-xl">
+            <h2 class="text-1xl md:text-3xl sm:text-5xl text-orange font-extrabold uppercase text-center">
+                <?= $config['title'] ?>
+            </h2>
+            <?php if (isset($config['tagline'])): ?>
+                <h3 class="text-1xl md:text-2xl lg:text-4xl text-blue text-center pt-8">
+                    <?= $config['tagline'] ?>
+                </h3>
+            <?php endif; ?>
+            <?php if (isset($config['details'])): ?>
+                <h3 class="text-1xl md:text-2xl lg:text-4xl text-orange-400 text-center pt-8">
+                    <?= $config['details'] ?>
+                </h3>
+            <?php endif; ?>
+            <?php if (isset($config['button_url']) && isset($config['button_text'])): ?>
+                <div class="mt-12">
+                    <a href="<?= htmlspecialchars($config['button_url']) ?>"
+                       <?php if ($buttonTarget): ?>target="<?= htmlspecialchars($buttonTarget) ?>"<?php endif; ?>
+                       class="button button-big button-orange">
+                        <?= htmlspecialchars($config['button_text']) ?>
+                    </a>
+                </div>
+            <?php endif; ?>
+        </div>
+    </div>
+</div>