From e2909dc59e9dc33fd1bc97c04df6cf1c4e59b732 Mon Sep 17 00:00:00 2001
From: rgantzos <86856959+rgantzos@users.noreply.github.com>
Date: Mon, 26 Aug 2024 08:18:45 -0700
Subject: [PATCH] Add How-To video links

---
 extras/icons/external.svg            |  1 +
 extras/popup/popup.css               | 23 +++++++++++++++++++++++
 extras/popup/popup.js                | 17 +++++++++++++++++
 extras/style.css                     | 20 ++++++++++++++++++++
 features/asset-size/data.json        |  5 ++++-
 features/chomp-blocks/data.json      |  5 ++++-
 features/custom-explore/data.json    |  5 ++++-
 features/more-editor-fonts/data.json |  5 ++++-
 features/rotate-gradient/data.json   |  5 ++++-
 9 files changed, 81 insertions(+), 5 deletions(-)
 create mode 100644 extras/icons/external.svg

diff --git a/extras/icons/external.svg b/extras/icons/external.svg
new file mode 100644
index 00000000..445732ca
--- /dev/null
+++ b/extras/icons/external.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ff9f00"><path d="m216-160-56-56 464-464H360v-80h400v400h-80v-264L216-160Z"/></svg>
\ No newline at end of file
diff --git a/extras/popup/popup.css b/extras/popup/popup.css
index a421c854..d55125c4 100644
--- a/extras/popup/popup.css
+++ b/extras/popup/popup.css
@@ -508,4 +508,27 @@ span.new-feature-tag.beta {
 
 .option-selection span:last-child {
   border-inline-end: none;
+}
+
+/* Support */
+
+.support-vid {
+  color: #ff9f00 !important;
+  opacity: .5;
+  cursor: pointer;
+  position: relative;
+    top: -.25rem;
+    margin-bottom: .25rem;
+    display: block;
+}
+
+.support-vid:hover {
+  opacity: 1;
+}
+
+.support-vid img {
+  height: 1rem;
+  margin-left: .25rem;
+  position: relative;
+  top: .3rem;
 }
\ No newline at end of file
diff --git a/extras/popup/popup.js b/extras/popup/popup.js
index c32f55d2..f6c735ff 100644
--- a/extras/popup/popup.js
+++ b/extras/popup/popup.js
@@ -679,6 +679,23 @@ async function getFeatures() {
       languageData[feature.id + "/description"]?.message || feature.description;
     div.appendChild(p);
 
+    if (feature.support?.yt) {
+      let span = document.createElement("span")
+      span.textContent = "How-To Video"
+      span.className = "support-vid"
+      span.dataset.url = feature.support.yt
+      span.addEventListener("click", function() {
+        let url = this.dataset.url
+        chrome.tabs.create({
+          url,
+        })
+      })
+      span.appendChild(Object.assign(document.createElement("img"), {
+        src: "/extras/icons/external.svg"
+      }))
+      div.appendChild(span)
+    }
+
     if (feature.options) {
       for (var optionPlace in feature.options) {
         var option = feature.options[optionPlace];
diff --git a/extras/style.css b/extras/style.css
index f1524756..5334565a 100644
--- a/extras/style.css
+++ b/extras/style.css
@@ -887,4 +887,24 @@ body {
 
 .option-selection span:last-child {
   border-inline-end: none;
+}
+/* Support */
+
+.support-vid {
+  color: #ff9f00 !important;
+  opacity: .5;
+  cursor: pointer;
+  position: relative;
+    top: -.25rem;
+}
+
+.support-vid:hover {
+  opacity: 1;
+}
+
+.support-vid img {
+  height: 1rem;
+  margin-left: .25rem;
+  position: relative;
+  top: .3rem;
 }
\ No newline at end of file
diff --git a/features/asset-size/data.json b/features/asset-size/data.json
index ab88577f..3c919da9 100644
--- a/features/asset-size/data.json
+++ b/features/asset-size/data.json
@@ -9,6 +9,9 @@
     ],
     "type": ["Editor"],
     "dynamic": true,
-    "scripts": [{ "file": "script.js", "runOn": "/projects/*" }]
+    "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
+    "support": {
+      "yt": "https://youtu.be/gpH3VJvDTkc"
+    }
   }
   
\ No newline at end of file
diff --git a/features/chomp-blocks/data.json b/features/chomp-blocks/data.json
index a138facd..7a8ca42e 100644
--- a/features/chomp-blocks/data.json
+++ b/features/chomp-blocks/data.json
@@ -10,5 +10,8 @@
   "tags": [],
   "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
   "dynamic": true,
-  "type": ["Editor"]
+  "type": ["Editor"],
+  "support": {
+    "yt": "https://youtu.be/6sl-Q0ZYYyQ"
+  }
 }
diff --git a/features/custom-explore/data.json b/features/custom-explore/data.json
index d3e37908..5d82a3f8 100644
--- a/features/custom-explore/data.json
+++ b/features/custom-explore/data.json
@@ -61,5 +61,8 @@
                 }
             ]
         }
-    ]
+    ],
+    "support": {
+      "yt": "https://youtu.be/QIWxCXrD2-M"
+    }
 }
diff --git a/features/more-editor-fonts/data.json b/features/more-editor-fonts/data.json
index 86a9d203..d2d33fbd 100644
--- a/features/more-editor-fonts/data.json
+++ b/features/more-editor-fonts/data.json
@@ -12,5 +12,8 @@
   "tags": ["New", "Featured"],
   "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
   "styles": [{ "file": "style.css", "runOn": "/projects/*" }],
-  "resources": [{ "name": "more-text-icon", "path": "/text.svg" }]
+  "resources": [{ "name": "more-text-icon", "path": "/text.svg" }],
+  "support": {
+    "yt": "https://youtu.be/zh3zsjBcz_M"
+  }
 }
diff --git a/features/rotate-gradient/data.json b/features/rotate-gradient/data.json
index 899bcaab..1edb09bc 100644
--- a/features/rotate-gradient/data.json
+++ b/features/rotate-gradient/data.json
@@ -10,5 +10,8 @@
   "type": ["Editor"],
   "dynamic": true,
   "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
-  "styles": [{ "file": "style.css", "runOn": "/projects/*" }]
+  "styles": [{ "file": "style.css", "runOn": "/projects/*" }],
+  "support": {
+    "yt": "https://youtu.be/5S032vWPvd0"
+  }
 }