Merge pull request #2061 from FlowFuse/1968-rotating-event-banner

Rotating event banner

.eleventy.js

@@ -20,11 +20,13 @@ const schema = require("@quasibit/eleventy-plugin-schema");
 const imageHandler = require('./lib/image-handler.js')
 const site = require("./src/_data/site");
 const coreNodeDoc = require("./lib/core-node-docs.js");
+const yaml = require("js-yaml");
 
 // Skip slow optimizations when developing i.e. serve/watch or Netlify deploy preview
 const DEV_MODE = process.env.ELEVENTY_RUN_MODE !== "build" || process.env.CONTEXT === "deploy-preview" 
 
 module.exports = function(eleventyConfig) {
+    eleventyConfig.addDataExtension("yaml", contents => yaml.load(contents)); // Add support for YAML data files
     eleventyConfig.setUseGitIgnore(false); // Otherwise docs are ignored
 
     // Set DEV_MODE_POSTS to true if the context is not 'production'
@@ -44,7 +46,8 @@ module.exports = function(eleventyConfig) {
     });
 
     // Define a filter named 'isFutureDate'
-    eleventyConfig.addFilter('isFutureDate', (date) => {
+    eleventyConfig.addFilter('isFutureDate', (dateString) => {
+        const date = new Date(dateString);
         return date && date > new Date();
     });
 

.github/workflows/build.yml

@@ -6,6 +6,7 @@ on:
       - main
   schedule:
     - cron: "30 9 * * *"
+    - cron: "5 16 * * 3,4"
 jobs:
   build_deploy:
     if: ${{ github.repository == 'FlowFuse/website' }}

package.json

@@ -61,6 +61,7 @@
         "@quasibit/eleventy-plugin-schema": "^1.11.0",
         "@xmldom/xmldom": "^0.8.10",
         "codeowners": "^5.1.1",
+        "js-yaml": "^4.1.0",
         "markdown-it-attrs": "^4.1.6",
         "xml-js": "^1.6.11"
     }

src/_data/events.yaml

@@ -0,0 +1,5 @@
+- type: "Webinar"
+  title: "Deploy FlowFuse on Industrial IoT with NCD.io"
+  buttonText: "Learn more"
+  link: "/webinars/2024/deploy-flowfuse-on-industrial-iot-with-ncd-io/"
+  expire: "2024-05-29T16:00:00Z"

src/_includes/components/events-banner.njk

@@ -1,15 +1,76 @@
+{% set colors = ["bg-indigo-700 hover:bg-indigo-600", "bg-indigo-800 hover:bg-indigo-700", "bg-indigo-900 hover:bg-indigo-800"] %}
+{% set hasFutureEvents = false %}
+
+{% for event in events %}
+    {% if event.expire | isFutureDate %}
+        {% set hasFutureEvents = true %}
+    {% endif %}
+{% endfor %}
+
+{% if hasFutureEvents %}
+<div class="event-banner-container bg-indigo-700 hidden sm:block">
+    {% for event in events %}
+        {% if event.expire | isFutureDate %}
+            {% set color = colors[loop.index0 % colors.length] %}
+            <a href="{{ event.link }}" class="event-banner hidden sm:flex text-center w-full py-1 pb-3 sm:py-3 {{ color }} text-indigo-100 text-sm px-2 gap-1 sm:gap-2 flex-col sm:flex-row items-center justify-center">
+                <span class="hidden sm:block font-semibold">{{ event.type }}</span>
+                <span class="hidden sm:block">-</span>
+                <span class="">{{ event.title }}</span>
+                <span class="hidden sm:block">-</span>
+                <span class="flex items-center gap-1 font-medium underline" >
+                    {{ event.buttonText }} {% include "components/icons/chevron-right-sm.svg" %}
+                </span>
+            </a>
+        {% endif %}
+    {% endfor %}
+</div>
+{% endif %}
+
 <script>
-</script>
+    window.onload = function() {
+        const banners = document.querySelectorAll('.event-banner');
+        const container = document.querySelector('.event-banner-container');
+        
+        // If there are no banners, exit the function
+        if (banners.length === 0) return;
+        
+        let currentBanner = 0;
+
+        // Change the container color to match the current banner
+        function changeContainerColor(banner) {
+            const colorClass = banner.className.match(/bg-\w+-\d+/)[0];
+            const hoverColorClass = banner.className.match(/hover:bg-\w+-\d+/)[0];
+            container.className = 'event-banner-container ' + colorClass + ' ' + hoverColorClass + ' hidden sm:block';
+        }
+
+        // All banners are hidden by default
+        banners.forEach(banner => banner.style.visibility = 'hidden');
 
-<a data-action="event-banner" href="/webinars/2024/deploy-flowfuse-on-industrial-iot-with-ncd-io/"
-    class="hidden md:flex text-center w-full py-1 pb-3 sm:py-3 bg-indigo-700 text-indigo-100 text-sm px-2 gap-1 sm:gap-2 flex-col sm:flex-row items-center justify-center hover:bg-indigo-600">
-    <span class="hidden sm:block font-semibold">Webinar</span>
-    <span class="hidden sm:block">-</span>
-    <span class="">     
-        Deploy FlowFuse on Industrial IoT with NCD.io
-    </span>
-    <span class="hidden sm:block">-</span>
-    <span class="flex items-center gap-1 font-medium underline" >
-        Learn more {% include "components/icons/chevron-right-sm.svg" %}
-    </span>
-</a>
+        // Show the first banner
+        banners[0].style.visibility = 'visible';
+        changeContainerColor(banners[0]);
+
+        // If there is more than one banner, change the visible banner every 10 seconds
+        if (banners.length > 1) {
+            setInterval(function() {
+                // Hide the current banner
+                banners[currentBanner].style.visibility = 'hidden';
+
+                // Increment the current banner index
+                currentBanner = (currentBanner + 1) % banners.length;
+
+                // Show the new banner
+                banners[currentBanner].style.visibility = 'visible';
+                banners[currentBanner].style.animation = 'none'; // reset animation
+                // force reflow, triggering a new animation
+                void banners[currentBanner].offsetWidth;
+                banners[currentBanner].style.animation = 'slideDown 0.5s ease';
+
+                // Change the container color to match the new banner
+                setTimeout(function() {
+                    changeContainerColor(banners[currentBanner]);
+                }, 500); // wait for the slideDown animation to finish
+            }, 10000);
+        }
+    };
+</script>

src/_includes/layouts/base.njk

@@ -161,7 +161,7 @@ eleventyComputed:
     <!-- End Google Tag Manager (noscript) -->
     <div class="flex-grow base">
         <div class="w-full">
-            <!-- Events Banner Comment out line below to remove banner-->
+            <!-- Events Banner -->
             {% include "../components/events-banner.njk" %}
             <!-- Navigation Header -->
             <header id="ff-header" class="ff-header">

src/css/style.css

@@ -203,6 +203,33 @@ dl.message-properties {
     @apply m-auto text-center sm:text-left p-8 max-w-md sm:max-w-screen-lg bg-indigo-50 border border-white rounded-lg mt-6;
   }
 
+/*
+    Event banner
+*/
+.event-banner-container {
+    position: relative;
+    height: 44px;
+    width: 100%;
+}
+
+.event-banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    visibility: hidden;
+    animation: slideDown 0.5s ease-in-out;
+}
+
+.event-banner:first-child {
+    visibility: visible;
+}
+
+@keyframes slideDown {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(0); }
+}
+
 /*
     Blog
 */

src/handbook/customer/marketing/website.md

@@ -12,19 +12,39 @@ navTitle: Marketing - Website
 
 ## Events Banner
 
-To update the event banner that appears at the top of the Website, you will need two pieces of information:
+The event banner at the top of the website can display more than one event or announcement.
 
-- The title of the Webinar
-- URL that the Webinar Registration is hosted at
+To add or update an event, you'll need to modify the [following file](https://github.com/FlowFuse/website/blob/main/src/_data/events.yaml). The information should be formatted as follows for each banner:
 
-Once you have those, you can update the [following file](https://github.com/FlowFuse/website/blob/main/src/_includes/components/events-banner.njk):
+```
+- type: "Webinar"
+  title: "Deploy FlowFuse on Industrial IoT with NCD.io"
+  buttonText: "Learn more"
+  link: "/webinars/2024/deploy-flowfuse-on-industrial-iot-with-ncd-io/"
+  expire: "2024-05-29T16:00:00Z"
+```
+The `expire` field is used to set the date and time when the event should stop being displayed on the banner. The date and time are set in the ISO 8601 format: `YYYY-MM-DDTHH:MM:SSZ`, and the time is in Coordinated Universal Time (UTC).
+
+For example, `expire: "2024-05-29T15:00:00Z"` means that the event will stop being displayed on the banner at 16:00 UTC on May 29, 2024.
+
+Please note that the website is built once a day at 9:30 AM UTC, and also on Wednesdays and Thursdays at 16:05 UTC. This means that if an event expires at some point during the day, it will still be displayed until the next time the website is built.
 
-Update the `href=""` value of the `<a>` tag to update the Event URL, and change the title inside the middle `<span>`
+If there were more than one event, then duplicating that and updating the info will create the second banner for rotation. It would look like this:
+
+```
+- type: "Webinar"
+  title: "Deploy FlowFuse on Industrial IoT with NCD.io"
+  buttonText: "Learn more"
+  link: "/webinars/2024/deploy-flowfuse-on-industrial-iot-with-ncd-io/"
+  expire: "2024-05-29T15:00:00Z"
+- type: "New Release"
+  title: "FlowFuse 2.4: making it easier to work with Snapshots, Blueprints & Devices "
+  buttonText: "See blog post"
+  link: "/blog/2024/05/flowfuse-2-4-release/"
+  expire: "2024-05-20T15:00:00Z"
+```
 
-You should also ensure that the banner is not disabled in [this file](https://github.com/FlowFuse/website/blob/main/src/_includes/layouts/base.njk). If it is, it would look like this: 
-`{% raw %}
-{# {% include "../components/events-banner.njk" %} #}
-{% endraw %}`. Please remove the comment symbols `{#` and `#}` to enable the banner.
+If there is only one event, the banner will continuously display that event. If there are multiple events, the banner will rotate through them, displaying each one for a few seconds at a time.
 
 ## Images