Merge pull request #928 from MaterArc/studio-creation-date

Studio Creation Date

Author: rgantzos

features/features.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": 2,
+    "id": "studio-creation-date",
+    "versionAdded": "v4.0.0"
+  },
   {
     "version": 2,
     "id": "explore-filter",

features/studio-creation-date/calendar.svg

@@ -0,0 +1,15 @@
+{
+  "title": "Studio Creation Date",
+  "description": "Adds the creation date of the studio to the studio footer.",
+  "credits": [
+    {
+      "username": "MaterArc",
+      "url": "https://scratch.mit.edu/users/MaterArc/"
+    }
+  ],
+  "type": ["Website"],
+  "tags": ["New"],
+  "dynamic": true,
+  "scripts": [{ "file": "script.js", "runOn": "/studios/*" }],
+  "resources": [{ "name": "calendar", "path": "/calendar.svg" }]
+}

features/studio-creation-date/data.json

@@ -0,0 +1,48 @@
+export default function ({ feature }) {
+  ScratchTools.waitForElements(
+    ".studio-info-footer-stats",
+    async function (footer) {
+      if (document.querySelector(".ste-studio-created")) return;
+
+      const studioId = window.location.href.match(/studios\/(\d+)/)[1];
+      const apiUrl = `https://api.scratch.mit.edu/studios/${studioId}`;
+
+      const response = await fetch(apiUrl);
+      const data = await response.json();
+
+      const createdDate = new Date(data.history.created);
+      const monthNames = [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ];
+      const formattedDate = `Created ${
+        monthNames[createdDate.getUTCMonth()]
+      } ${createdDate.getUTCDate()}, ${createdDate.getUTCFullYear()}`;
+
+      const creationDateDiv = document.createElement("div");
+      creationDateDiv.classList.add("studio-creation-date");
+      creationDateDiv.classList.add("ste-studio-created")
+
+      const creationDateImg = document.createElement("img");
+      creationDateImg.src = feature.self.getResource("calendar");
+
+      const creationDateSpan = document.createElement("span");
+      creationDateSpan.textContent = formattedDate;
+
+      creationDateDiv.appendChild(creationDateImg);
+      creationDateDiv.appendChild(creationDateSpan);
+
+      footer.insertBefore(creationDateDiv, footer.firstChild);
+    }
+  );
+}