Add How-To video links

STForScratch · Aug 26, 2024 · e2909dc · e2909dc
1 parent 616bffd
commit e2909dc
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 5 deletions.
diff --git a/extras/icons/external.svg b/extras/icons/external.svg
diff --git 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;
 }
diff --git 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
@@ -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;
 }
diff --git 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"
+    }
   }
 
diff --git 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
@@ -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
@@ -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
@@ -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"
+  }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,5 +61,8 @@ @@
                     }
                 ]
             }
-        ]
+        ],
+        "support": {
+          "yt": "https://youtu.be/QIWxCXrD2-M"
+        }
     }