Merge pull request #2683 from FlowFuse/blueprint-profile

Add iteration on the Blueprint profile page

.eleventy.js

@@ -86,6 +86,7 @@ module.exports = function(eleventyConfig) {
 
     // Naive copy of images for backwards compatibility of non short-code image handling (use of <img or in CSS)
     eleventyConfig.addPassthroughCopy("src/**/images/**/*");
+    eleventyConfig.addPassthroughCopy("src/blueprints/**/flow.json");
 
     // Watch content images for the image pipeline
     eleventyConfig.addWatchTarget("src/**/*.{svg,webp,png,jpeg,gif}");
@@ -368,6 +369,20 @@ module.exports = function(eleventyConfig) {
                 </div>`
     });
 
+    eleventyConfig.addShortcode("renderCompanyTile", function (company) {
+        return `<div class="company-tile">
+            <img class="company-tile-logo" src="${company.img}" />
+            <label>${company.name}</label>
+        </div>`
+    });
+
+    eleventyConfig.addShortcode("renderIntegration", function (integration) {
+        return `<div class="integration-tile">
+            <img class="integration-tile-icon" src="${integration.img}" />
+            <label>${integration.name}</label>
+        </div>`
+    });
+
     eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
 
     function loadSVG (file) {

src/_data/companies/flowfuse.json

@@ -0,0 +1,6 @@
+{
+    "id": "flowfuse",
+    "name": "FlowFuse",
+    "img": "/images/flowfuse-icon.png",
+    "url": "https://flowfuse.com"
+}

src/_data/integrations/flowfuse_node-red-dashboard.json

@@ -0,0 +1,5 @@
+{
+    "name": "FlowFuse Dashboard",
+    "url": "https://dashboard.flowfuse.com",
+    "img": "https://dashboard.flowfuse.com/logo.png"
+}

src/_includes/blueprints/template.njk

@@ -1,4 +1,4 @@
-<div class="ff-blog container m-auto text-left max-w-lg md:max-w-5xl pt-8 pb-12 w-full ff-full-bg px-4">
+<div class="ff-blog container m-auto text-left max-w-lg md:max-w-7xl pt-8 pb-12 w-full ff-full-bg px-4">
     <div class="px-2 flex items-center gap-12">
         <h1 class="mb-0">Blueprint Library</h1>
     </div>

src/_includes/layouts/blueprint.njk

@@ -2,34 +2,43 @@
 layout: layouts/base.njk
 ---
 <div class="w-full page post">
-    {% if title %}
-        <!-- <div class="post-title container m-auto text-center max-lg:px-6 flex mt-6 mb-6 md:max-w-screen-lg md:mt-12">
-            <div class="text-left md:pr-32">
-                <label>
-                    <label>
-                        {% for tag in tags %}
-                            {% if tag != 'blueprints' %}
-                            {{ tag | replace('-', ' ') | replace('20', '2.0') }} - BLUEPRINT
-                            {% endif %}
-                        {% endfor %}
-                    </label>
-                </label>
-                <h1>{{ title }}</h1>
-                {% if subtitle %}
-                <h4>{{ subtitle | safe }}</h4>
-                {% endif %}
-            </div>
-        </div> -->
-    {% endif %}
-    <div class="blog nohero w-full pb-12 pt-20">
+    <div class="post-title container m-auto text-center max-lg:px-6 flex mt-6 mb-6 md:max-w-screen-lg md:mt-12">
+        <div class="text-left md:pr-32">
+            <label>Blueprint</label>
+            <h1>{{ title }}</h1>
+            {% if description %}
+                <h4>{{ description | safe }}</h4>
+            {% endif %}
+        </div>
+    </div>
+    <div class="blog nohero w-full pb-12">
         <div class="container flex flex-col md:flex-row m-auto text-left max-lg:px-6 md:max-w-screen-lg gap-8 items-stretch">
-            <div class="ff-prose prose max-w-none">
+            <div class="ff-prose">
                 <a class="inline-flex align-center gap-1 mb-4" href="/blueprints">
                     {% include "components/icons/chevron-left.svg" %}
                     Back to Blueprints Library
                 </a>
-                {{ content | safe }}
-                {% include "contact-us-cta-line.njk" %}
+                <div class="prose w-full flex-grow">
+                    {{ content | safe }}
+                </div>
+            </div>
+            <div class="w-72 max-w-full flex-shrink-0">
+                <div class="sticky top-20 mt-6 flex flex-col">
+                    <a href="https://app.flowfuse.com/deploy/blueprint?blueprintId={{ item.data.blueprintId }}" class="ff-btn ff-btn--primary flex flex-col mb-6 mt-4 uppercase" target="_blank">Deploy to FlowFuse</a>
+                    <h3 class="mb-3">Author:</h3>
+                    {% if author %}
+                    {% renderCompanyTile companies[author] %}
+                    {% else %}
+                    {% renderCompanyTile companies["flowfuse"] %}
+                    {% endif %}
+                    {% if dependencies %}
+                    <h3 class="mb-3 pt-6">Integrations:</h3>
+                    {% for dependency in dependencies %}
+                        {% renderIntegration integrations[dependency] %}
+                    {% endfor %}
+                    {% endif %}
+                    {% include "contact-us-cta-line.njk" %}
+                </div>
             </div>
         </div>
     </div>

src/css/style.components.css

@@ -43,6 +43,46 @@
     background-color: theme(colors.gray.600);
 }
 
+/*
+    Company Tile - Used in Blueprint Profile
+*/
+.company-tile {
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+    font-weight: 500;
+    gap: 12px;
+    padding: 6px;
+    border: 1px solid #D1D5DB;
+    background-color: white;
+    border-radius: 6px;
+}
+.company-tile label {
+    margin-bottom: -2px;
+}
+.company-tile-logo {
+    width: 24px;
+}
+/*
+    Integrations Tile Used in Blueprint Profile
+*/
+.integration-tile {
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+    gap: 12px;
+    padding: 6px;
+    border: 1px solid #D1D5DB;
+    background-color: white;
+    border-radius: 6px;
+}
+.integration-tile label {
+    margin-bottom: -2px;
+}
+.integration-tile-icon {
+    width: 24px;
+}
+
 /*
     Customer Story Tile
 */