Merge pull request FlowFuse#1406 from FlowFuse/docs-tutorials

Docs: Add links to YT tutorials on homepage and "Getting Started"

docs/components/RecommendedTutorials.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="recommended-tutorials">
+        <a v-for="a in videos" :key="a.title" :href="a.url" target="_blank">
+            <img :src="a.image" :alt="a.title">
+            <div class="overlay">
+                <PlayIcon class="play-icon" />
+            </div>
+        </a>
+        <a class="more">
+            <div class="overlay">
+                <label>...More Coming Soon!</label>
+            </div>
+        </a>
+    </div>
+</template>
+
+<script setup>
+import PlayIcon from './icons/PlayIcon.vue'
+const videos = [
+    {
+        title: 'Getting Started with Node-RED & Dashboard',
+        url: 'https://youtu.be/DFNv91TTt68?si=Wj07fuD1l27qtT-1',
+        image: 'https://website-data.s3.eu-west-1.amazonaws.com/Tutorial+Thumbnail+-+Getting+Started.jpg'
+    },
+    {
+        title: 'Visualising Data in Node-RED & Dashboard',
+        url: 'https://youtu.be/Ecno0EuLyKQ?si=AW2OUpVwJgQU_qli',
+        image: 'https://website-data.s3.eu-west-1.amazonaws.com/Tutorial+Thumbnail+-+Data+Visualisation.jpg'
+    }
+]
+</script>
+
+<style scoped>
+    .recommended-tutorials {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16px;
+    }
+    .recommended-tutorials a {
+        overflow: hidden;
+        border-radius: 12px;
+        border: 2px solid transparent;
+        position: relative;
+    }
+    .recommended-tutorials img {
+        transition: 0.15s transform;
+    }
+    .recommended-tutorials a:hover {
+        border: 2px solid var(--vp-c-brand-1);
+    }
+    .recommended-tutorials a:hover img {
+        transform: scale(1.05);
+    }
+    .recommended-tutorials .overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        top: 0;
+        left: 0;
+    }
+    .recommended-tutorials .play-icon {
+        width: 48px;
+        background-color: #3551b2;
+        color: white;
+        border-radius: 50%;
+        padding: 6px;
+        padding-left: 9px;
+    }
+    .recommended-tutorials .more {
+        pointer-events: none;
+        background-color: #EEF2FF;
+        border: 1px solid #818CF8;
+    }
+</style>

docs/components/icons/PlayIcon.vue

@@ -0,0 +1,5 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
+    </svg>
+</template>

docs/getting-started.md

@@ -6,6 +6,7 @@ description: Kickstart your Node-RED Dashboard 2.0 journey with this getting sta
     import { ref } from 'vue'
     import FlowViewer from './components/FlowViewer.vue'
     import ExampleDesignPatterns from '../examples/design-patterns.json'
+    import RecommendedTutorials from './components/RecommendedTutorials.vue'
 
     const examples = ref({
       'design-patterns': ExampleDesignPatterns,
@@ -21,6 +22,10 @@ Welcome to the documentation for the Node-RED Dashboard 2.0, the successor to th
 
 This project was formed by FlowFuse, as part of efforts to upgrade the original Dashboard to steer away from Angular v1.0 which has been [officially deprecated](https://flowfuse.com/blog/2024/06/dashboard-1-deprecated/). You can read our full statement about _why_ we're building Dashboard 2.0 [here](https://flowfuse.com/blog/2023/06/dashboard-announcement/?_gl=1*cckr5u*_gcl_au*MTAzMTA0MzY1Ni4xNzE2MzY2NTAz).
 
+## Recommended Tutorials
+
+<RecommendedTutorials />
+
 ## Installation
 
 [FlowFuse](https://flowfuse.com)'s Node-RED Dashboard 2.0 is available in the Node-RED Palette Manager. To install it:

docs/index.md

@@ -31,6 +31,7 @@ hero:
     import { ref } from 'vue';
 
     import HomeExtension from './components/HomeExtension.vue';
+    import RecommendedTutorials from './components/RecommendedTutorials.vue';
     import RecommendedReading from './components/RecommendedReading.vue';
     import FlowFuseAdvert from './components/FlowFuseAdvert.vue';
     import CopyIcon from './components/icons/CopyIcon.vue';
@@ -58,6 +59,10 @@ hero:
     <div id="ebook-form"></div>
 </div>
 
+## Recommended Tutorials
+
+<RecommendedTutorials />
+
 ## More Recommended Reading
 
 <RecommendedReading />