Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Homepage: Create blueprint section from blueprints repo #3022

Merged
merged 2 commits into from
Mar 10, 2025
Merged

Homepage: Create blueprint section from blueprints repo #3022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6df113d
Create blueprint section
Mar 9, 2025
a246118
Create partial
Mar 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions src/_includes/homepage_blueprints.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{% set blueprintIds = ["d9yNg20jRw", "e85N3lmyX6", "6EbLVbLa9j"] %}
{%- for item in collections.blueprints | reverse -%}
{% if item.data.blueprintId in blueprintIds %}
<li class="flex flex-col h-full">
<div class="mb-2">
{%- for tag in item.data.tags -%}
{% if tag !== "blueprints" %}
<label class="text-gray-700 text-xs font-light rounded-sm bg-indigo-50 py-1.5 px-2 inline-block w-auto">{{ tag | replace('-', ' ') | replace('20', '2.0') | title }}</label>
{% endif %}
{%- endfor %}
</div>
<div class="grid bg-indigo-50 ff-image-cover blueprint rounded-lg border drop-shadow-md hover:drop-shadow-lg grow pb-4">
<a href="{{ item.url }}" class="w-full flex flex-col group hover:no-underline">
<div class="transition-transform group-hover:scale-105 ff-image-cover aspect-video border-b">
{% tileImage item, "./images/og-blog.jpg", "Image with logo and the slogan: Elevate Node-RED with Flowfuse", 285 %}
</div>
<div class="pt-4 my-auto">
<h5 class="my-auto group-hover:underline px-4 font-medium text-lg leading-6">{{ item.data.title }}</h5>
</div>
</a>
</div>
</li>
{% endif %}
{%- endfor -%}
16 changes: 15 additions & 1 deletion src/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,21 @@ hubspot:
</div>
</div>
</div>


<!-- Blueprints -->
<div class="max-w-md sm:max-w-xl md:max-w-screen-lg mx-auto mt-24 mb-20">
<h2 class="text-center w-full md:text-left"><span class="text-indigo-600">Drive industrial innovation</span> with Node-RED and FlowFuse</h2>
<p class="text-center w-full md:text-left">Create powerful industrial applications — from real-time monitoring to complex automation — all in one platform. Whether you're optimising production, tracking performance, or visualising data, FlowFuse makes it easy to turn ideas into reality. And to help you get started faster, explore our library of ready-made blueprints for quick, customisable solutions.</p>
<div class="container m-auto text-left max-w-sm md:max-w-none pt-8 w-full gap-4">
<ul class="flex flex-col sm:grid md:grid-cols-3 gap-x-6 gap-y-12">
{% include "homepage_blueprints.njk" %}
</ul>
<a href="/blueprints/" class="w-full text-right flex flex-row items-center justify-end self-end justify-self-end gap-1 mt-6">
See all
{% include "components/icons/arrow-long-right.svg" %}
</a>
</div>
</div>
<!-- Testimonials -->
<div class="w-full mt-24 md:px-0">
<div class="sm:max-w-screen-lg mx-auto">
Expand Down