From 8560cc2386b6cc79470907add5ef6b11dd942787 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 15 Oct 2024 15:08:27 +0100
Subject: [PATCH] Add links to YT tutorials on homepage and "Getting Started"

---
 docs/components/RecommendedTutorials.vue | 77 ++++++++++++++++++++++++
 docs/components/icons/PlayIcon.vue       |  5 ++
 docs/getting-started.md                  |  5 ++
 docs/index.md                            |  5 ++
 4 files changed, 92 insertions(+)
 create mode 100644 docs/components/RecommendedTutorials.vue
 create mode 100644 docs/components/icons/PlayIcon.vue

diff --git a/docs/components/RecommendedTutorials.vue b/docs/components/RecommendedTutorials.vue
new file mode 100644
index 000000000..286cb0a5f
--- /dev/null
+++ b/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>
diff --git a/docs/components/icons/PlayIcon.vue b/docs/components/icons/PlayIcon.vue
new file mode 100644
index 000000000..9ebf7ce59
--- /dev/null
+++ b/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>
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 808c2ce87..293deb45b 100644
--- a/docs/getting-started.md
+++ b/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:
diff --git a/docs/index.md b/docs/index.md
index afa3d1dea..a2f61a862 100644
--- a/docs/index.md
+++ b/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 />