Add How-To video links

Author: rgantzos

extras/icons/external.svg

@@ -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;
 }

extras/popup/popup.css

@@ -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];

extras/popup/popup.js

@@ -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;
 }

extras/style.css

@@ -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"
+    }
   }
 

features/asset-size/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"
+  }
 }

features/chomp-blocks/data.json

@@ -61,5 +61,8 @@
                 }
             ]
         }
-    ]
+    ],
+    "support": {
+      "yt": "https://youtu.be/QIWxCXrD2-M"
+    }
 }

features/custom-explore/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"
+  }
 }

features/more-editor-fonts/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"
+  }
 }