diff --git a/features/features.json b/features/features.json index fa38492f..77393409 100644 --- a/features/features.json +++ b/features/features.json @@ -1,4 +1,9 @@ [ + { + "version": 2, + "id": "studio-creation-date", + "versionAdded": "v4.0.0" + }, { "version": 2, "id": "explore-filter", diff --git a/features/studio-creation-date/calendar.svg b/features/studio-creation-date/calendar.svg new file mode 100644 index 00000000..320d0de6 --- /dev/null +++ b/features/studio-creation-date/calendar.svg @@ -0,0 +1,3 @@ + + + diff --git a/features/studio-creation-date/data.json b/features/studio-creation-date/data.json new file mode 100644 index 00000000..ddbc2fac --- /dev/null +++ b/features/studio-creation-date/data.json @@ -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" }] +} diff --git a/features/studio-creation-date/script.js b/features/studio-creation-date/script.js new file mode 100644 index 00000000..527839ed --- /dev/null +++ b/features/studio-creation-date/script.js @@ -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); + } + ); +}