Merge branch '4971-remove-cert-nodes-link' into 4972-rework-install

Author: n-lark

.eleventy.js

@@ -17,6 +17,7 @@ const spacetime = require("spacetime");
 const { minify } = require("terser");
 const codeowners = require('codeowners');
 const pluginTOC = require('eleventy-plugin-toc');
+const { decodeHTML } = require('entities');
 const imageHandler = require('./lib/image-handler.js')
 const site = require("./src/_data/site");
 const coreNodeDoc = require("./lib/core-node-docs.js");
@@ -517,6 +518,10 @@ module.exports = function(eleventyConfig) {
     });
 
 
+    eleventyConfig.addFilter("striptags", function(text) {
+        return decodeHTML(String(text).replace(/<[^>]+>/g, ""));
+    });
+
     eleventyConfig.addFilter("restoreParagraphs", function(str) {
         const content = new String(str);
         return "<p>"+content.split(/\.\n/).join(".</p><p>")+"</p>"
@@ -1232,6 +1237,12 @@ module.exports = function(eleventyConfig) {
         return nav;
     });
 
+    eleventyConfig.addCollection("aiBlog", function(collectionApi) {
+        return collectionApi.getFilteredByTag("ai").filter(item => {
+            return !item.data.tags || !item.data.tags.includes("blueprints");
+        });
+    });
+
     eleventyConfig.addCollection("homeLogos", function () {
         const logosDir = path.join(__dirname, "src/images/home-logos");
         const logos = fs.readdirSync(logosDir)

.github/workflows/calibreapp-image-actions.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Compress Images
         id: calibre
-        uses: calibreapp/image-actions@f32575787d333b0579f0b7d506ff03be63a669d1 # 1.4.1
+        uses: calibreapp/image-actions@9d037c06280028c110ff61c433ad4dc7d33c3c43 # 1.5.0
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           # For non-Pull Requests, run in compressOnly mode and we'll PR after.

src/_data/blogTags.json

@@ -1,28 +1,28 @@
 [{
     "label": "All",
     "value": "posts"
+}, {
+    "label": "How-To",
+    "value": "how-to"
 }, {
     "label": "Node-RED",
     "value": "node-red"
-},  {
-    "label": "FlowFuse",
-    "value": "flowfuse"
+}, {
+    "label": "AI",
+    "value": "ai"
 }, {
     "label": "UNS",
     "value": "uns"
 }, {
-    "label": "How-To",
-    "value": "how-to"
+    "label": "Dashboard",
+    "value": "dashboard"
 }, {
-    "label": "Community",
-    "value": "community"
+    "label": "FlowFuse",
+    "value": "flowfuse"
 }, {
     "label": "Releases",
     "value": "releases"
 }, {
     "label": "News",
     "value": "news"
-}, {
-    "label": "Dashboard",
-    "value": "dashboard"
 }]

src/_data/site.json

@@ -9,6 +9,7 @@
         "tagLine": "Build and Deploy Industrial Applications at Scale with FlowFuse",
         "subtitle": "FlowFuse is the universal platform that powers your factory, creating a secure and governed solution for your industrial operations.",
         "title": "Build workflows and integrations that optimize your industrial operations",
-        "keywords": "Node-RED, Application Development, IoT, IIoT, Low-Code, open source, Integration, Workflow, Automation, Data Processing, Data Integration, Data Transformation, Data Visualization, Industrial Automation, Industrial IoT, Industry 4.0"
+        "keywords": "Node-RED, Application Development, IoT, IIoT, Low-Code, open source, Integration, Workflow, Automation, Data Processing, Data Integration, Data Transformation, Data Visualization, Industrial Automation, Industrial IoT, Industry 4.0",
+        "shortDescription": "FlowFuse is the enterprise platform that bridges the gap between physical assets and enterprise IT, delivering consistency at scale instead of one-off project \"snowflakes.\" Powered by Node-RED, teams unify real-time data through workflows, AI agents, and industrial applications, extending rigid vendor systems with a low-code agility layer that adapts without rip-and-replace. FlowFuse orchestrates lightweight, event-based data flows between the shop floor and the top floor only when real-world events occur, giving organizations the confidence to innovate and unlock new value in industrial automation."
     }
 }

src/_includes/blog/blog-posts.njk

@@ -50,7 +50,8 @@
             <h2 class="mt-1 mb-0 text-xl font-medium group-hover:underline">{{ item.data.title }}</h2>
         </div>
         <div class="text-sm prose prose-blue md:prose-md py-1">
-            {% include "summary.njk" %}
+            {% set summary = item.data.excerpt or item.data.description or item.data.meta.description %}
+            {% if summary %}{{ summary | md | striptags | truncate(20) }}{% endif %}
         </div>
         <div class="italic text-xs mb-3">
             <div class="author">

src/_includes/components/tier-badges.njk

@@ -3,13 +3,23 @@
 {% if showTierCloud or showTierSelfHosted %}
 <div class="ff-tier-badges">
   {% if showTierCloud %}
-    <div class="ff-tier-badge ff-tier--available" onclick="capture('tier-badge-click',{hosting:'cloud',tier:'{{ tierCloud }}',page:location.pathname})">
+    <div class="ff-tier-badge ff-tier--available"
+         role="button"
+         tabindex="0"
+         aria-label="Cloud tier: {{ tierCloud }}"
+         onclick="capture('tier-badge-click',{hosting:'cloud',tier:'{{ tierCloud }}',page:location.pathname})"
+         onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click()}">
       <span class="ff-tier-badge__label">Cloud</span>
       <span class="ff-tier-badge__value">{{ tierCloud }}</span>
     </div>
   {% endif %}
   {% if showTierSelfHosted %}
-    <div class="ff-tier-badge ff-tier--available" onclick="capture('tier-badge-click',{hosting:'self-hosted',tier:'{{ tierSelfHosted }}',page:location.pathname})">
+    <div class="ff-tier-badge ff-tier--available"
+         role="button"
+         tabindex="0"
+         aria-label="Self-Hosted tier: {{ tierSelfHosted }}"
+         onclick="capture('tier-badge-click',{hosting:'self-hosted',tier:'{{ tierSelfHosted }}',page:location.pathname})"
+         onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click()}">
       <span class="ff-tier-badge__label">Self-Hosted</span>
       <span class="ff-tier-badge__value">{{ tierSelfHosted }}</span>
     </div>

src/_includes/contact-us-cta-line.njk

@@ -1,3 +1,3 @@
 <div class="bg-indigo-50 py-1 px-4 rounded-md w-full mx-auto text-center mt-12">
-    <p>Looking for help with your project? <a href="/contact-us/">Contact us</a>; our experts will be happy to provide a solution for your needs.  </p>
+    <p>Looking for help with your project? <a href="/contact-us/" class="underline">Contact us</a>; our experts will be happy to provide a solution for your needs.  </p>
 </div>

src/_includes/explore-more-content.njk

@@ -10,15 +10,15 @@
                     {% image "./images/home/blog.png", "Image of hands typing on laptop working on Node-RED flows", [448] %}
                 </div>
             </a>
-            <h4 class="text-xl font-bold pb-3">Latest on the blog</h4>
+            <h3 class="text-xl font-bold pb-3">Latest on the blog</h3>
             {%- for item in collections[collectionName or 'posts'] | sort(attribute='item.date') | reverse | limit(3) -%}
             <a href="{{ item.url }}"
                 class="w-full flex flex-col group {% if not loop.last %}border-b{% endif %}">
-                <h5 class="my-2 font-light">
+                <h4 class="my-2 font-light text-lg">
                     <span class="text-gray-500 group-hover:text-blue-700">
                         {{ item.data.title }}
                     </span>
-                </h5>
+                </h4>
             </a>
             {%- endfor -%}
         </div>
@@ -35,9 +35,9 @@
                     {% image "./images/home/webinar.png", "Image of hands typing on laptop working on Node-RED flows", [448] %}
                 </div>
             </a>
-            <h4 class="text-xl font-bold pb-3">{% if item.date | isFutureDate %}Upcoming{% else %}Latest{% endif %} Webinar</h4>
+            <h3 class="text-xl font-bold pb-3">{% if item.date | isFutureDate %}Upcoming{% else %}Latest{% endif %} Webinar</h3>
             <div class="w-full flex flex-col">
-                <h5 class="my-2 font-light"><span class="text-gray-500">{{ item.data.title }}</span></h5>
+                <h4 class="my-2 font-light text-lg"><span class="text-gray-500">{{ item.data.title }}</span></h4>
             </div>
             <div class="webinar-title w-full border-t pt-3 font-light text-gray-500">
                 <time value="{{ item.date }}">{{ item.date | shortDate }}</time>
@@ -56,8 +56,8 @@
                 <div class="sm:max-h-none md:min-w-[40%] max-w-[448px] ff-image-cover ff-image-rounded mx-auto mb-4 aspect-video">
                     {% image "./images/home/newsletter.png", "Image of hands typing on laptop working on Node-RED flows", [448] %}
                 </div>
-            <h4 class="text-xl font-bold pb-3">Newsletter</h4>
-            <h5 class="font-bold pb-3 pt-2">Sign up for our monthly email updates</h5>
+            <h3 class="text-xl font-bold pb-3">Newsletter</h3>
+            <h4 class="font-bold pb-3 pt-2 text-lg">Sign up for our monthly email updates</h4>
         </div>
         <div class="-mb-1 self-end w-full">
             {% include hubspot.script %}

src/_includes/faq.njk

@@ -10,14 +10,19 @@
             <div class="prose max-w-none">
                 {% for faq in meta.faq %}
                 <div class="w-full {% if not loop.last %}border-b{% endif %} py-4">
-                    <h5 class="question flex flex-row justify-between items-center w-full m-0 gap-6 cursor-pointer"
-                        id="question-{{ loop.index }}">
-                        <span>{{ faq.question }}</span>
-                        <div class="chevron transition-transform ease-in-out duration-300"
-                            id="chevron-{{ loop.index }}">
-                            {% include "components/icons/chevron-down.svg" %}
-                        </div>
-                    </h5>
+                    <h3 class="m-0">
+                        <button class="question flex flex-row justify-between items-center w-full m-0 p-0 gap-6 cursor-pointer text-left bg-transparent border-0 text-lg font-semibold"
+                                id="question-{{ loop.index }}"
+                                type="button"
+                                aria-expanded="false"
+                                aria-controls="answer-{{ loop.index }}">
+                            <span>{{ faq.question }}</span>
+                            <div class="chevron transition-transform ease-in-out duration-300"
+                                id="chevron-{{ loop.index }}">
+                                {% include "components/icons/chevron-down.svg" %}
+                            </div>
+                        </button>
+                    </h3>
                     <div class="answer px-6 mt-6 hidden" id="answer-{{ loop.index }}">
                         <p>{{ faq.answer | safe }}</p>
                     </div>
@@ -33,14 +38,15 @@
         question.addEventListener('click', () => {
             const answer = document.querySelector(`#answer-${index + 1}`);
             const chevron = document.querySelector(`#chevron-${index + 1}`);
-            if (answer.classList.contains('hidden')) {
-                // Show the clicked answer and rotate its chevron
+            const isHidden = answer.classList.contains('hidden');
+            if (isHidden) {
                 answer.classList.remove('hidden');
                 chevron.style.transform = 'rotate(180deg)';
+                question.setAttribute('aria-expanded', 'true');
             } else {
-                // Hide the clicked answer and rotate its chevron to original state
                 answer.classList.add('hidden');
                 chevron.style.transform = 'rotate(0deg)';
+                question.setAttribute('aria-expanded', 'false');
             }
         });
     });

src/_includes/get-started.njk

@@ -1,14 +1,14 @@
 <div class="m-auto w-full text-center sm:text-left mb-2">
     <h2 class="font-bold"><span class="text-red-600">Get Started</span> with FlowFuse</h2>
-    <p class="-mt-1">Explore our <a href="/pricing/">pricing</a></p>
+    <p class="-mt-1">Explore our <a href="/pricing/" class="underline">pricing</a></p>
 </div>
 <div class="w-full sm:grid sm:grid-cols-2 gap-6 sm:gap-8">
         <div class="w-full mt-4 md:mt-0 flex flex-col justify-between">
         <div>
             <div class="flex justify-center sm:justify-start mt-3 mb-2 max-sm:mx-auto md:mx-0 w-6 h-6">
                 {% include "components/icons/cloud.svg" %}
             </div>
-            <h4 class="flex justify-center sm:justify-start font-semibold">FlowFuse Cloud</h4>
+            <h3 class="flex justify-center sm:justify-start font-semibold text-xl">FlowFuse Cloud</h3>
             <p class="font-light mt-6">Our managed hosted solution, maintained and supported by the FlowFuse team. Experience flexibility, scalability, and expert assistance to drive your business forward.</p>
         </div>
         <a class="mt-4 ff-btn ff-btn--highlight uppercase inline-block self-center sm:self-start"
@@ -20,7 +20,7 @@
             <div class="flex justify-center sm:justify-start mt-3 mb-2 max-sm:mx-auto md:mx-0 w-6 h-6">
                 {% include "components/icons/building-office-2.svg" %}
             </div>
-            <h4 class="flex justify-center sm:justify-start font-semibold">On Premise</h4>
+            <h3 class="flex justify-center sm:justify-start font-semibold text-xl">On Premise</h3>
             <p class="font-light mt-6">Deploy FlowFuse on your hardware for enhanced flexibility. Opt for self-hosted deployment with FlowFuse, enabling on-premises installation and full control over your deployment process.</p>
         </div>
         <a class="mt-4 mb-6 sm:mb-0 ff-btn ff-btn--primary uppercase inline-block self-center sm:self-start"