Use case: Production Monitoring (#5083)

Co-authored-by: Yndira-E <yndira@flowfuse.com>

Author: dimitrieh

.eleventy.js

@@ -221,6 +221,7 @@ module.exports = function(eleventyConfig) {
     eleventyConfig.addLayoutAlias('page', 'layouts/page.njk');
     eleventyConfig.addLayoutAlias('nohero', 'layouts/nohero.njk');
     eleventyConfig.addLayoutAlias('solution', 'layouts/solution.njk');
+    eleventyConfig.addLayoutAlias('use-case', 'layouts/use-case.njk');
     eleventyConfig.addLayoutAlias('catalog', 'layouts/catalog.njk');
     eleventyConfig.addLayoutAlias('redirect', 'layouts/redirect.njk');
 

nuxt/components/AppHeader.vue

@@ -30,7 +30,7 @@
     "imageFolder": "./images/pictograms/",
     "imageFile": "edge_blue.png",
     "imageAlt": " edge management.",
-    "content": "FlowFuse allows you to deploy and manage Node-RED instances out to <a href='/solutions/edge-connectivity/'>edge devices</a>. This allows you to deploy the exact same instance out to hundreds or thousands of edge devices and monitor their status."
+    "content": "FlowFuse allows you to deploy and manage Node-RED instances out to <a href='/use-cases/edge-connectivity/'>edge devices</a>. This allows you to deploy the exact same instance out to hundreds or thousands of edge devices and monitor their status."
   },{
     "title": "Software Delivery Pipelines",
     "imageFolder": "./images/pictograms/",

src/_data/features.json

@@ -0,0 +1,55 @@
+{# ============================================================
+   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 caseStudies = [] %}
+{% set whitepapers = [] %}
+{% set 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: "eBooks and Whitepapers", items: whitepapers},
+    {heading: "Blog", items: blogPosts}
+] %}
+
+<div class="w-full py-16 sm:py-24 px-6 bg-gray-50 border-y border-gray-100">
+    <div class="max-w-screen-lg mx-auto">
+        <h2 class="max-md:text-center">Related resources</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-10">
+            {% for column in columns %}
+            <div>
+                <h4 class="text-gray-800 border-b border-gray-200 pb-3 mb-4">{{ column.heading }}</h4>
+                {% if column.items.length %}
+                <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 or item.data.meta.title or item.data.contentTitle | safe }}</a>
+                    </li>
+                    {% endfor %}
+                </ul>
+                {% else %}
+                <div class="rounded-lg border border-dashed border-gray-300 bg-white p-6 text-center">
+                    <p class="m-0 text-gray-400 text-sm">More coming soon</p>
+                </div>
+                {% endif %}
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>

src/_includes/components/icons/wind-turbine.svg

@@ -218,13 +218,13 @@ eleventyComputed:
                             </li>
                             {% navoption "By Use Case", null, 1, null, true, "pl-3 title border-l-2 sm:col-start-2 sm:row-start-1" %}{% endnavoption %}
                             <li class="contents">
-                                <ul class="sub-menu grid grid-rows-subgrid row-span-6 ml-7 auto-rows-auto border-l-2 sm:col-start-2 sm:row-start-2">
-                                    {% navoption "IT/OT middleware", "/solutions/it-ot-middleware/", 1, "cog" %}{% endnavoption %}
-                                    {% navoption "Unified Namespace", "/solutions/uns/", 1, "uns" %}{% endnavoption %}
-                                    {% navoption "SCADA", "/solutions/scada/", 1, "adjustments-horizontal" %}{% endnavoption %}
-                                    {% navoption "MES", "/solutions/mes/", 1, "chart" %}{% endnavoption %}
-                                    {% navoption "Edge Connectivity", "/solutions/edge-connectivity/", 1, "chip" %}{% endnavoption %}
-                                    {% navoption "Data integration", "/solutions/data-integration/", 1, "db" %}{% endnavoption %}
+                                <ul class="sub-menu grid grid-rows-subgrid row-span-7 ml-7 auto-rows-auto border-l-2 sm:col-start-2 sm:row-start-2">
+                                    {% navoption "Production Monitoring", "/use-cases/production-monitoring/", 1, "pulse" %}{% endnavoption %}
+                                    {% navoption "IT/OT middleware", "/use-cases/it-ot-middleware/", 1, "cog" %}{% endnavoption %}
+                                    {% navoption "Unified Namespace", "/use-cases/uns/", 1, "uns" %}{% endnavoption %}
+                                    {% navoption "MES", "/use-cases/mes/", 1, "chart" %}{% endnavoption %}
+                                    {% navoption "Edge Connectivity", "/use-cases/edge-connectivity/", 1, "chip" %}{% endnavoption %}
+                                    {% navoption "See all use cases", "/use-cases/", 1, "arrow-right" %}{% endnavoption %}
                                 </ul>
                             </li>
                         </ul>