Add resources

Yndira-E · Yndira-E · commit b906f49121f6 · 2026-06-05T17:11:06.000+02:00
diff --git a/src/_includes/components/related-resources.njk b/src/_includes/components/related-resources.njk
@@ -1,31 +1,30 @@
 {# ============================================================
-   RELATED RESOURCES (skeleton)
-   Three columns: Case studies / White papers / Blog.
-   Driven by a tag passed in as `relatedTag` (e.g. "industry:food-beverage"
-   or "usecase:track-and-trace"). Resources opt in later by adding that tag;
-   the matching tag collection is then split by section.
-   No existing customer stories are tagged, so every column renders the
-   empty "More coming soon" state.
+   RELATED RESOURCES
+   Three columns: Case studies / eBooks and Whitepapers / Blog.
+   Content opts in via a dedicated front matter field:
+     usecase:
+       - production-monitoring
+   The layout passes `useCaseSlug` (e.g. "production-monitoring").
    ============================================================ #}
-{% set relatedTag = relatedTag or "" %}
-{% set tagged = collections[relatedTag] or [] %}
 
 {% set caseStudies = [] %}
 {% set whitepapers = [] %}
 {% set blogPosts = [] %}
-{% for item in tagged %}
-    {% if "/customer-stories/" in item.url %}
-        {% set caseStudies = (caseStudies.push(item), caseStudies) %}
-    {% elif "/whitepaper/" in item.url %}
-        {% set whitepapers = (whitepapers.push(item), whitepapers) %}
-    {% elif "/blog/" in item.url %}
-        {% set blogPosts = (blogPosts.push(item), blogPosts) %}
+{% for item in collections.all %}
+    {% if item.data.usecase and useCaseSlug in item.data.usecase %}
+        {% if "/customer-stories/" in item.url %}
+            {% set caseStudies = (caseStudies.push(item), caseStudies) %}
+        {% elif "/ebooks/" in item.url or "/whitepaper/" in item.url %}
+            {% set whitepapers = (whitepapers.push(item), whitepapers) %}
+        {% elif "/blog/" in item.url %}
+            {% set blogPosts = (blogPosts.push(item), blogPosts) %}
+        {% endif %}
     {% endif %}
 {% endfor %}
 
 {% set columns = [
     {heading: "Case studies", items: caseStudies},
-    {heading: "White papers", items: whitepapers},
+    {heading: "eBooks and Whitepapers", items: whitepapers},
     {heading: "Blog", items: blogPosts}
 ] %}
 
@@ -40,7 +39,7 @@
                 <ul class="flex flex-col gap-3 list-none p-0 m-0">
                     {% for item in column.items %}
                     <li>
-                        <a href="{{ item.url }}" class="text-indigo-600 hover:text-indigo-800">{{ item.data.title }}</a>
+                        <a href="{{ item.url }}" class="text-indigo-600 hover:text-indigo-800">{{ item.data.title or item.data.meta.title or item.data.contentTitle | safe }}</a>
                     </li>
                     {% endfor %}
                 </ul>
diff --git a/src/_includes/layouts/use-case.njk b/src/_includes/layouts/use-case.njk
@@ -38,7 +38,7 @@ sitemapPriority: 0.7
             <h1 class="m-auto max-w-3xl font-medium"><span class="text-indigo-600">{{ title }}</span></h1>
             <p class="mt-6 max-w-2xl mx-auto text-lg text-gray-600">{{ problem }}</p>
             <div class="mt-10 flex flex-wrap gap-4 justify-center">
-                <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase" href="/contact-us/" onclick="capture('cta-talk-to-expert', {'position': 'hero', 'usecase': '{{ page.fileSlug }}'})">Talk to an expert</a>
+                <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase" href="/book-demo/" onclick="capture('cta-talk-to-expert', {'position': 'hero', 'usecase': '{{ page.fileSlug }}'})">Talk to an expert</a>
             </div>
         </div>
     </div>
@@ -256,18 +256,18 @@ sitemapPriority: 0.7
     <!-- ============================================================
          RELATED RESOURCES (empty "More coming soon" state)
     ============================================================ -->
-    {% set relatedTag = "usecase:" + page.fileSlug %}
+    {% set useCaseSlug = page.fileSlug %}
     {% include "components/related-resources.njk" %}
 
     <!-- ============================================================
          CLOSING CTA
     ============================================================ -->
     <div class="w-full px-6 py-20">
         <div class="ff-blue-card max-md:max-w-xl md:max-w-screen-lg mx-auto pt-12 pb-10 text-center">
-            <h3 class="mb-4 w-full text-center">See it on your operation</h3>
-            <p class="text-gray-600 mb-8 max-w-xl mx-auto">Talk to an expert, or get started with FlowFuse today.</p>
+            <h3 class="mb-4 w-full text-center">{{ closingCta.heading or "See it on your operations" }}</h3>
+            <p class="text-gray-600 mb-8 max-w-xl mx-auto text-center">{{ closingCta.description or "Talk to an expert, or get started with FlowFuse today." }}</p>
             <div class="flex flex-wrap gap-4 justify-center">
-                <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase" href="/contact-us/" onclick="capture('cta-talk-to-expert', {'position': 'footer', 'usecase': '{{ page.fileSlug }}'})">Talk to an expert</a>
+                <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase" href="/book-demo/" onclick="capture('cta-talk-to-expert', {'position': 'footer', 'usecase': '{{ page.fileSlug }}'})">Talk to an expert</a>
                 <a class="ff-btn ff-btn--primary-outlined min-h-[40px] uppercase" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'footer', 'usecase': '{{ page.fileSlug }}'})">Get started</a>
             </div>
         </div>
diff --git a/src/blog/2025/04/building-oee-dashboard-with-flowfuse-2.md b/src/blog/2025/04/building-oee-dashboard-with-flowfuse-2.md
@@ -3,6 +3,8 @@ title: "Part 2: Building an OEE Dashboard with FlowFuse"
 subtitle: Step-by-step guide to building your own OEE Dashboard.
 description: Learn how to build an OEE Dashboard using FlowFuse Dashboard (Node-RED Dashboard 2.0). This step-by-step guide covers data collection, OEE calculations, and dashboard creation with simulated production and downtime data.
 date: 2025-04-09
+usecase:
+  - production-monitoring
 authors: ["sumit-shinde"]
 image: /blog/2025/04/images/oee-dashboard-buildig-ff-2.png
 keywords: free oee dashboard, oee dashboard free, building oee dashboard, node-red oee dashboard, flowfuse oee dashboard
diff --git a/src/blog/2025/04/building-oee-dashboard-with-flowfuse-part-1.md b/src/blog/2025/04/building-oee-dashboard-with-flowfuse-part-1.md
@@ -3,6 +3,8 @@ title: "Part 1: Building an OEE Dashboard with FlowFuse"
 subtitle: Defining OEE and Planning an Effective Dashboard
 description: Create an OEE dashboard with FlowFuse to track equipment performance, optimize efficiency, and gain real-time production insights
 date: 2025-04-01
+usecase:
+  - production-monitoring
 authors: ["sumit-shinde"]
 image: /blog/2025/04/images/building-oee-dashboard-part1.png
 keywords: free oee dashboard, oee dashboard free, building oee dashboard, node-red oee dashboard, flowfuse oee dashboard
diff --git a/src/blog/2025/05/building-andon-task-manager-with-ff.md b/src/blog/2025/05/building-andon-task-manager-with-ff.md
@@ -3,6 +3,8 @@ title: "Part 1: Building an Andon Task Manager with FlowFuse"
 subtitle: Build a real-time Andon Task Manager with FlowFuse and Node-RED, covering key features, dashboard design, and data storage.
 description: Learn how to build a real-time Andon Task Manager using FlowFuse and Node-RED. This step-by-step guide covers request tracking, dashboard design, and data storage with SQLite and context storage.
 date: 2025-05-08
+usecase:
+  - production-monitoring
 authors: ["sumit-shinde"]
 image: /blog/2025/05/images/Building-an-Andon-Task-Manager-with-FlowFuse-1.png
 keywords: free andon task manager dashboard, andon task manager free, building andon task manager, node-red andon task manager, flowfuse andon task manager
diff --git a/src/blog/2025/09/preventive-maintenance-equipment-failure.md b/src/blog/2025/09/preventive-maintenance-equipment-failure.md
@@ -3,6 +3,8 @@ title: "Preventive Maintenance in Manufacturing: Avoid Multi-Million Dollar Equi
 subtitle: "How industrial data platforms are turning equipment failures from crisis events into predictable, manageable costs"
 description: "Unplanned downtime costs manufacturers millions. Learn how preventive maintenance software and data platforms like FlowFuse cut failures, boost OEE, and deliver lasting ROI."
 date: 2025-09-04
+usecase:
+  - production-monitoring
 authors: ["sumit-shinde"]
 image: /blog/2025/09/images/preventive-maintenance-blog.png
 keywords: preventive maintenance, predictive maintenance, maintenance software, equipment monitoring, industrial data platforms, manufacturing downtime, OEE improvement
diff --git a/src/blog/2025/11/building-hmi-for-equipment-control.md b/src/blog/2025/11/building-hmi-for-equipment-control.md
@@ -3,6 +3,8 @@ title: "Building a Web HMI for Factory Equipment Control"
 subtitle: "Create web-based operator interfaces for industrial equipment"
 description: "Build a modern HMI using FlowFuse to monitor and control factory equipment from any browser"
 date: 2025-11-19
+usecase:
+  - production-monitoring
 keywords: FlowFuse, web HMI, PLC control, Node-RED dashboard, industrial automation, edge device, MQTT, factory monitoring, SCADA alternative, remote equipment control
 authors: ["sumit-shinde"]
 image: /blog/2025/11/images/building-a-web-hmi-for-factory.png
diff --git a/src/blog/2026/05/fixing-oee-measurement-in-manufacturing.md b/src/blog/2026/05/fixing-oee-measurement-in-manufacturing.md
@@ -3,6 +3,8 @@ title: "OEE Is Misleading Your Factory — Here's How to Fix It"
 subtitle: "Why the OEE score on your dashboard does not match what is happening on the floor."
 description: "Most factories measure OEE wrong. Manual logs miss small stops, definitions drift, and operators game the score. A practical look at what to do about it."
 date: 2026-05-07
+usecase:
+  - production-monitoring
 keywords: 
 authors: ["sumit-shinde"]
 image: /blog/2026/05/images/oee-is-misleading.png
diff --git a/src/customer-stories/manufacturing-digital-transformation.md b/src/customer-stories/manufacturing-digital-transformation.md
@@ -3,6 +3,8 @@ title: Node-RED Enables Digital Transformation of a Large US Manufacturing Compa
 description: Read how a US manufacturing giant uses Node-RED and FlowFuse for digital transformation, deploying thousands of instances to boost operational efficiency and innovation.
 image: /images/stories/large-us-manufacturing.jpg
 date: 2023-05-04
+usecase:
+  - production-monitoring
 logo:
 hubspot:
     formId: 826044fa-9760-4f47-84d0-bfe0234f1fa7
diff --git a/src/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge.md b/src/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge.md
@@ -3,6 +3,8 @@ title: Scaling Industrial IoT Operations While Maintaining Competitive Edge
 description: Discover how Walter built a future-proof industrial application platform with FlowFuse—connecting machines, unifying data, and scaling operations without increasing IT overhead.
 image: /images/stories/walter.png
 date: 2025-12-16
+usecase:
+  - production-monitoring
 logo:
 hubspot:
     formId: 1cab86cb-5c81-40ab-be4b-a6ae94f38ac8
diff --git a/src/customer-stories/scaling-manufacturing-automation-with-flowfuse.md b/src/customer-stories/scaling-manufacturing-automation-with-flowfuse.md
@@ -3,6 +3,8 @@ title: Scaling Manufacturing Automation with FlowFuse
 description: Arch Systems leverages FlowFuse and Node-RED to integrate MES systems, automate 100+ databases, and deliver scalable, real-time manufacturing data processing.
 image: /images/stories/arch_systems.jpeg
 date: 2025-09-29
+usecase:
+  - production-monitoring
 logo:
 hubspot:
     formId: ef56a0ea-7b50-4eed-b6aa-cf5421233e03
diff --git a/src/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red.md b/src/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red.md
@@ -9,6 +9,8 @@ meta:
   title: The Ultimate Guide to Building Applications with FlowFuse Dashboard for Node-RED
   description: Discover the power of the FlowFuse Dashboard for Node-RED with our comprehensive eBook. Learn how to effortlessly create stunning UIs, from data charts to custom components, and enable collaborative full-stack application development. Ideal for developers of all levels, this guide unlocks the potential of your data in industrial IoT environments.
   Keywords: FlowFuse Dashboard, Node-RED Dashboard, Dashboard 2.0, IoT dashboard creation, Low-code platform, Data visualization, UI development, Industrial IoT, Dashboard design
+usecase:
+  - production-monitoring
 hubspot:
   formId: 372e557c-9f90-48e8-81da-d7e462f8ef55
   cta: "download-ebook"
diff --git a/src/use-cases/_template.njk b/src/use-cases/_template.njk
diff --git a/src/use-cases/production-monitoring.njk b/src/use-cases/production-monitoring.njk
@@ -1,7 +1,4 @@
 ---
-layout: use-case
-tags:
-  - use-case
 title: "Production Monitoring"
 meta:
   title: "Production Monitoring | Use Cases | FlowFuse"
diff --git a/src/use-cases/use-cases.json b/src/use-cases/use-cases.json
@@ -0,0 +1,6 @@
+{
+    "layout": "use-case",
+    "tags": [
+        "use-case"
+    ]
+}
