Merge branch 'main' into certified-nodes-redesign

Author: dimitrieh

.eleventy.js

@@ -634,6 +634,222 @@ module.exports = function(eleventyConfig) {
 
     eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
 
+    // Feature catalog helpers for tier badges
+    const featureCatalog = yaml.load(fs.readFileSync("./src/_data/featureCatalog.yaml", "utf8"));
+
+    function changelogTitle(url) {
+        const slug = url.replace(/\/$/, '').split('/').pop();
+        const parts = url.replace(/\/$/, '').split('/').filter(Boolean);
+        // url: /changelog/2026/02/slug/ -> src/changelog/2026/02/slug.md
+        const filePath = path.join("./src", parts.join('/') + '.md');
+        try {
+            const content = fs.readFileSync(filePath, 'utf8');
+            const match = content.match(/^---[\s\S]*?title:\s*["']?(.+?)["']?\s*$/m);
+            if (match) return match[1];
+        } catch (e) { /* file not found, fall back */ }
+        return slug.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    }
+
+    function findFeatureById(id) {
+        for (const section of featureCatalog.sections) {
+            for (const feature of section.features) {
+                if (feature.id === id) return feature;
+            }
+        }
+        return null;
+    }
+
+    function getChangelogUrls(feature) {
+        if (!feature.changelog) return [];
+        const entries = Array.isArray(feature.changelog) ? feature.changelog : [feature.changelog];
+        return entries.map(entry => typeof entry === 'string' ? entry : entry.url);
+    }
+
+    function getChangelogUrlsForRelease(feature, release) {
+        if (!feature.changelog) return [];
+        const entries = Array.isArray(feature.changelog) ? feature.changelog : [feature.changelog];
+        return entries
+            .filter(entry => typeof entry === 'object' && entry.release === release)
+            .map(entry => entry.url);
+    }
+
+    function findFeatureByChangelog(changelogUrl) {
+        const normalized = changelogUrl.replace(/\/$/, '') + '/';
+        for (const section of featureCatalog.sections) {
+            for (const feature of section.features) {
+                const urls = getChangelogUrls(feature);
+                for (const url of urls) {
+                    if ((url.replace(/\/$/, '') + '/') === normalized) return feature;
+                }
+            }
+        }
+        return null;
+    }
+
+    function deriveTierLabel(tierData) {
+        if (!tierData) return null;
+        const starter = tierData.starter && tierData.starter.value;
+        const pro = tierData.pro && tierData.pro.value;
+        const enterprise = tierData.enterprise && tierData.enterprise.value;
+        if (starter && pro && enterprise) return "All tiers";
+        if (pro && enterprise) return "Pro+";
+        if (enterprise === 'contact') return "Enterprise (on request)";
+        if (enterprise) return "Enterprise";
+        return "Not available";
+    }
+
+    function renderTierBadges(feature) {
+        if (!feature) return '';
+        const cloudLabel = deriveTierLabel(feature.cloud);
+        const selfHostedLabel = deriveTierLabel(feature.selfHosted);
+        if (!cloudLabel && !selfHostedLabel) return '';
+        let html = `<div class="ff-tier-badges">`;
+        if (cloudLabel) {
+            const unavailable = cloudLabel === 'Not available';
+            html += `<span class="ff-tier-badge ${unavailable ? 'ff-tier--unavailable' : 'ff-tier--available'}">`;
+            html += `<span class="ff-tier-badge__label">Cloud</span>`;
+            html += `<span class="ff-tier-badge__value">${cloudLabel}</span>`;
+            html += `</span>`;
+        }
+        if (selfHostedLabel) {
+            const unavailable = selfHostedLabel === 'Not available';
+            html += `<span class="ff-tier-badge ${unavailable ? 'ff-tier--unavailable' : 'ff-tier--available'}">`;
+            html += `<span class="ff-tier-badge__label">Self-Hosted</span>`;
+            html += `<span class="ff-tier-badge__value">${selfHostedLabel}</span>`;
+            html += `</span>`;
+        }
+        html += '</div>';
+        return html;
+    }
+
+    function renderChangelogLinks(urls) {
+        if (!urls || urls.length === 0) return '';
+        let html = '<div class="ff-related-changelogs">Changelog: ';
+        const links = urls.map(url => {
+            const label = changelogTitle(url);
+            return `<a href="${url}">${label}</a>`;
+        });
+        html += links.join(' | ');
+        html += '</div>';
+        return html;
+    }
+
+    // Inject tier badges and changelog links into release blog posts based on frontmatter
+    eleventyConfig.addTransform("releaseFeatures", function(content) {
+        if (!this.page.outputPath || !this.page.outputPath.endsWith(".html")) return content;
+
+        // Transforms don't have access to template data, so parse frontmatter from source
+        const inputPath = this.page.inputPath;
+        if (!inputPath || !inputPath.endsWith('.md')) return content;
+
+        let frontmatter;
+        try {
+            const source = fs.readFileSync(inputPath, 'utf8');
+            const fmMatch = source.match(/^---\n([\s\S]*?)\n---/);
+            if (!fmMatch) return content;
+            frontmatter = yaml.load(fmMatch[1]);
+        } catch (e) { return content; }
+
+        const features = frontmatter.features;
+        const release = frontmatter.release;
+        if (!features || !Array.isArray(features) || features.length === 0) return content;
+
+        // Build injection map: heading text -> { badges HTML, changelogs HTML }
+        const injections = [];
+        for (const entry of features) {
+            let badges = '';
+            let changelogs = '';
+
+            if (entry.id) {
+                // Feature from featureCatalog
+                const feature = findFeatureById(entry.id);
+                if (!feature) continue;
+                badges = renderTierBadges(feature);
+                const changelogUrls = release ? getChangelogUrlsForRelease(feature, release) : getChangelogUrls(feature);
+                changelogs = renderChangelogLinks(changelogUrls);
+            } else if (entry.tiers) {
+                // Inline tier specification (no feature ID)
+                const inlineFeature = {};
+                if (entry.tiers.cloud) {
+                    // Convert shorthand ("all", "pro+", "enterprise") to tier structure
+                    const t = entry.tiers.cloud;
+                    inlineFeature.cloud = {
+                        starter: { value: t === 'all' ? true : null },
+                        pro: { value: (t === 'all' || t === 'pro+') ? true : null },
+                        enterprise: { value: true }
+                    };
+                }
+                if (entry.tiers.selfHosted) {
+                    const t = entry.tiers.selfHosted;
+                    inlineFeature.selfHosted = {
+                        starter: { value: t === 'all' ? true : null },
+                        pro: { value: (t === 'all' || t === 'pro+') ? true : null },
+                        enterprise: { value: true }
+                    };
+                }
+                badges = renderTierBadges(inlineFeature);
+            }
+
+            if (badges || changelogs) {
+                injections.push({ heading: entry.heading, badges, changelogs });
+            }
+        }
+
+        if (injections.length === 0) return content;
+
+        // Find all headings (h2-h6) in the HTML with their positions
+        const headingRegex = /<h([2-6])\s[^>]*>.*?<\/h\1>/gs;
+        const headingMatches = [];
+        let match;
+        while ((match = headingRegex.exec(content)) !== null) {
+            // Extract text content from heading (strip HTML tags)
+            const textContent = match[0].replace(/<[^>]+>/g, '').trim();
+            headingMatches.push({ index: match.index, length: match[0].length, text: textContent, level: parseInt(match[1]) });
+        }
+
+        // Process injections in reverse order so indices stay valid
+        const ops = []; // { index, html } — insert html at index
+
+        for (const injection of injections) {
+            // Find matching heading
+            const headingIdx = headingMatches.findIndex(h => h.text === injection.heading);
+            if (headingIdx === -1) continue;
+
+            const heading = headingMatches[headingIdx];
+
+            // Insert badges right after the heading tag, adding heading-level class for spacing
+            if (injection.badges) {
+                const badgesWithLevel = injection.badges.replace('class="ff-tier-badges"', `class="ff-tier-badges ff-tier-badges--h${heading.level}"`);
+                ops.push({ index: heading.index + heading.length, html: badgesWithLevel });
+            }
+
+            // Insert changelogs before the next heading at the same or higher level
+            // H2 changelogs go before the next H2; H3 changelogs go before the next H2 or H3
+            if (injection.changelogs) {
+                const nextPeer = headingMatches.find((h, i) => i > headingIdx && h.level <= heading.level);
+                const insertBefore = nextPeer ? nextPeer.index : content.length;
+                ops.push({ index: insertBefore, html: injection.changelogs });
+            }
+        }
+
+        // Sort by index descending so we can splice without shifting
+        ops.sort((a, b) => b.index - a.index);
+        for (const op of ops) {
+            content = content.slice(0, op.index) + op.html + content.slice(op.index);
+        }
+
+        return content;
+    });
+
+    // Make helpers available to changelog layout via filters
+    eleventyConfig.addFilter("featureForChangelog", function(url) {
+        return findFeatureByChangelog(url);
+    });
+
+    eleventyConfig.addFilter("tierLabel", function(tierData) {
+        return deriveTierLabel(tierData);
+    });
+
     function loadSVG (file) {
         let relativeFilePath = `./src/_includes/components/icons/${file}.svg`;
         let data = fs.readFileSync(relativeFilePath, function(err, contents) {
@@ -697,7 +913,7 @@ module.exports = function(eleventyConfig) {
         return await imageHandler(src, alt, title, widths, sizes, currentWorkingFilePath, eleventyConfig, async=true, DEV_MODE)
     });
 
-    eleventyConfig.addAsyncShortcode("tileImage", async function(item, image, defaultImage, defaultDescription, imageSize, title = null) {
+    eleventyConfig.addAsyncShortcode("tileImage", async function(item, image, defaultImage, defaultDescription, imageSize, title = null, priority = false) {
         let imageSrc, imageDescription;
 
         if (item && item.data && item.data.image) {
@@ -716,7 +932,7 @@ module.exports = function(eleventyConfig) {
 
         const currentWorkingFilePath = this.page.inputPath;
 
-        return await imageHandler(imageSrc, imageDescription, title, [imageSize], null, currentWorkingFilePath, eleventyConfig, async=true, DEV_MODE);
+        return await imageHandler(imageSrc, imageDescription, title, [imageSize], null, currentWorkingFilePath, eleventyConfig, async=true, DEV_MODE, priority);
     });
 
     // Create a collection for sidebar navigation

.github/workflows/build.yml

@@ -24,10 +24,11 @@ jobs:
           path: 'flowfuse'
       - name: Generate a token
         id: generate_token
-        uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a # v2.1.0
+        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
         with:
-          app_id: ${{ secrets.GH_BOT_APP_ID }}
-          private_key: ${{ secrets.GH_BOT_APP_KEY }}
+          app-id: ${{ secrets.GH_BOT_APP_ID }}
+          private-key: ${{ secrets.GH_BOT_APP_KEY }}
+          owner: ${{ github.repository_owner }}
       - name: Check out FlowFuse/blueprint-library repository (to access the blueprints)
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
@@ -37,7 +38,7 @@ jobs:
           token: ${{ steps.generate_token.outputs.token }}
       - name: Install jq
         run: sudo apt-get -qy install jq
-      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+      - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           cache: 'npm'
           cache-dependency-path: './website/package-lock.json'

.github/workflows/sast-scan.yml

@@ -16,4 +16,4 @@ concurrency:
 jobs:
   scan:
     name: SAST Scan
-    uses : flowfuse/github-actions-workflows/.github/workflows/sast_scan.yaml@v0.51.0
+    uses : flowfuse/github-actions-workflows/.github/workflows/sast_scan.yaml@v0.52.0

.github/workflows/test.yml

@@ -6,30 +6,33 @@ jobs:
   test_website:
     runs-on: ubuntu-latest
     steps:
+      - name: Generate a token
+        id: generate_token
+        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
+        with:
+          app-id: ${{ secrets.GH_BOT_APP_ID }}
+          private-key: ${{ secrets.GH_BOT_APP_KEY }}
+          owner: ${{ github.repository_owner }}
       - name: Check out website repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           path: 'website'
+          token: ${{ steps.generate_token.outputs.token }}
       - name: Check out FlowFuse/flowfuse repository (to access the docs)
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           repository: 'FlowFuse/flowfuse'
           ref: main
           path: 'flowfuse'
-      - name: Generate a token
-        id: generate_token
-        uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a # v2.1.0
-        with:
-          app_id: ${{ secrets.GH_BOT_APP_ID }}
-          private_key: ${{ secrets.GH_BOT_APP_KEY }}
+          token: ${{ steps.generate_token.outputs.token }}
       - name: Check out FlowFuse/blueprint-library repository (to access the blueprints)
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           repository: 'FlowFuse/blueprint-library'
           ref: main
           path: 'blueprint-library'
           token: ${{ steps.generate_token.outputs.token }}       
-      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+      - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           cache: 'npm'
           cache-dependency-path: './website/package-lock.json'

lib/image-handler.js

@@ -131,7 +131,8 @@ module.exports = function imageHandler(
     currentFilePath = null,
     eleventyConfig = null,
     async = true,
-    DEV_MODE = false
+    DEV_MODE = false,
+    priority = false
 ) {
     const eleventyInputFolderPath = eleventyConfig.dir.input
     const eleventyOutputFolderPath = eleventyConfig.dir.output
@@ -179,8 +180,9 @@ module.exports = function imageHandler(
         ...(parsedTitle.title && { title: parsedTitle.title }), // skip if null
         alt: imgAlt,
         sizes: htmlSizes.join(", "),
-        loading: "lazy",
+        loading: priority ? "eager" : "lazy",
         decoding: "async",
+        ...(priority && { fetchpriority: "high" }),
     }
 
     if (parsedTitle.skip || imgSrc.startsWith('http')) {