Relevant forum posts

Author: rgantzos

api/main.js

@@ -288,7 +288,8 @@ ScratchTools.disable = function (feature) {
     el.self.enabled = false
   })
   ScratchTools.managedElements.filter((el) => el.feature === feature).forEach(function(el) {
-    el.previousDisplay = el.element.style.display
+    if (!el.element) return;
+    el.previousDisplay = el.element?.style.display
     el.element.style.display = "none"
   })
   ste.console.log(`Disabled ${feature}.`, "ste-main");

api/module.js

@@ -74,7 +74,8 @@ ScratchTools.injectModule = async function (script) {
         el.self.enabled = true
       })
       ScratchTools.managedElements.filter((el) => el.feature === script.feature.id).forEach(function(el) {
-        el.element.style.display = el.previousDisplay || null
+        if (!el.element) return;
+        el.element.style.display = el?.previousDisplay || null
       })
       allEnableFunctions[script.feature.id]?.();
     }

features/features.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": 2,
+    "id": "relevant-forum-posts",
+    "versionAdded": "v3.4.0"
+  },
   {
     "version": 2,
     "id": "wrap-lists",

features/relevant-forum-posts/data.json

@@ -0,0 +1,12 @@
+{
+  "title": "Show Relevant Forum Posts",
+  "description": "When creating a new forum topic, shows other topics that may be similar to what you are creating.",
+  "credits": [
+    { "username": "rgantzos", "url": "https://scratch.mit.edu/users/rgantzos/" }
+  ],
+  "type": ["Forums"],
+  "tags": ["New"],
+  "dynamic": true,
+  "scripts": [{ "file": "script.js", "runOn": "/discuss/*" }],
+  "styles": [{ "file": "style.css", "runOn": "/discuss/*" }]
+}

features/relevant-forum-posts/script.js

@@ -0,0 +1,63 @@
+export default async function ({ feature, console }) {
+  if (window.location.pathname.split("/")[4] !== "add") return;
+
+  let input = await ScratchTools.waitForElement("input#id_name");
+  input.addEventListener("focusout", async function () {
+    if (!feature.self.enabled) return;
+    if (!input.value) return;
+    let data = await fetchRelevantPosts(input.value);
+    if (document.querySelector(".ste-relevant-posts")) {
+      document.querySelector(".ste-relevant-posts").remove();
+    }
+    if (data.length !== 0) {
+      data.length = 10;
+      let div = document.createElement("div");
+      div.className = "ste-relevant-posts";
+      feature.self.hideOnDisable(div)
+
+      let postIds = [];
+
+      data.forEach(function (post) {
+        if (!postIds.find((el) => el === post.topic.id)) {
+          postIds.push(post.topic.id);
+          let a = document.createElement("a");
+          a.href = `/discuss/topic/${post.topic.id}/`;
+
+          let h3 = document.createElement("h3");
+          h3.textContent = post.topic.title;
+
+          let p = document.createElement("p");
+          p.innerHTML = post.content.html;
+          p.textContent = p.textContent.slice(0, 100);
+
+          let category = document.createElement("p");
+          category.textContent = post.topic.category;
+          category.className = "ste-relevant-category"
+
+          a.appendChild(h3);
+          a.appendChild(p);
+          a.appendChild(category);
+
+          div.appendChild(a);
+        }
+      });
+
+      input.parentNode.parentNode.insertBefore(
+        div,
+        input.parentNode.nextSibling
+      );
+    }
+  });
+
+  async function fetchRelevantPosts(content) {
+    let data = await (
+      await fetch(
+        `https://scratchdb.lefty.one/v3/forum/search/?q=${content
+          .replaceAll("?", "")
+          .replaceAll("#", "")
+          .replaceAll("&", "")}&o=relevance&page=0`
+      )
+    ).json();
+    return data.posts;
+  }
+}

features/relevant-forum-posts/style.css

@@ -0,0 +1,26 @@
+.ste-relevant-posts {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+}
+
+.ste-relevant-posts > a {
+  width: 20rem;
+  display: inline-block;
+  flex-shrink: 0;
+  flex-grow: 0;
+  margin-right: 0.8rem;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+}
+
+.ste-relevant-posts *:hover {
+    text-decoration: none;
+}
+
+.ste-relevant-category {
+    color: #55474790;
+    margin-top: .5rem;
+}