Also add the ID to the metadata (#908)

CONTRIBUTING.md

@@ -45,12 +45,13 @@ The header comments look like this:
 
 ```js
 // Name: Example Extension
+// ID: extensionid
 // Description: Does a very cool thing. This must have punctuation at the end!
 // By: GarboMuffin <https://scratch.mit.edu/users/GarboMuffin/>
 // Original: TestMuffin
 ```
 
-Remember, this has to be the *very first* thing in the JS file. `Name` and `Description` are required. You can have zero or more `By` and `Original`. Put credit links in `<angled brackets>` if you have one. It must point to a Scratch user profile. The parser is pretty loose, but try not to deviate too far from this format.
+Remember, this has to be the *very first* thing in the JS file. `Name`, `Description`, and `ID` are required. Make sure that `ID` exactly matches what you return in `getInfo()`. You can have zero or more `By` and `Original`. Put credit links in `<angled brackets>` if you have one. It must point to a Scratch user profile. The parser is pretty loose, but try not to deviate too far from this format.
 
 New extensions do not *need* images, but they are highly encouraged. Save the image in the `images` folder with the same folder name and file name (but different file extension) as the extension's source code. For example, if your extension is located in `extensions/TestMuffin/fetch.js`, save the image as `images/TestMuffin/fetch.svg` or `images/TestMuffin/fetch.png`. The homepage generator will detect it automatically. Images are displayed in a 2:1 aspect ratio. SVG (preferred), PNG, or JPG are accepted. PNG or JPG should be 600x300 in resolution. Please add proper attribution to `images/README.md` for *any* resources that were not made by you.
 

development/builder.js

@@ -5,7 +5,7 @@ const renderTemplate = require('./render-template');
 const renderDocs = require('./render-docs');
 const compatibilityAliases = require('./compatibility-aliases');
 const parseMetadata = require('./parse-extension-metadata');
-const featuredExtensionsIDs = require('../extensions/extensions.json');
+const featuredExtensionSlugs = require('../extensions/extensions.json');
 
 /**
  * @typedef {'development'|'production'|'desktop'} Mode
@@ -78,6 +78,10 @@ class ExtensionFile extends BuildFile {
 
     const metadata = this.getMetadata();
 
+    if (!metadata.id) {
+      throw new Error('Missing // ID:');
+    }
+
     if (!metadata.name) {
       throw new Error('Missing // Name:');
     }
@@ -122,12 +126,12 @@ class HomepageFile extends BuildFile {
     return '.html';
   }
 
-  getFullExtensionURL (extensionID) {
-    return `${this.host}${extensionID}.js`;
+  getFullExtensionURL (extensionSlug) {
+    return `${this.host}${extensionSlug}.js`;
   }
 
-  getRunExtensionURL (extensionID) {
-    return `https://turbowarp.org/editor?extension=${this.getFullExtensionURL(extensionID)}`;
+  getRunExtensionURL (extensionSlug) {
+    return `https://turbowarp.org/editor?extension=${this.getFullExtensionURL(extensionSlug)}`;
   }
 
   read () {
@@ -136,7 +140,7 @@ class HomepageFile extends BuildFile {
       .slice(0, 5)
       .map((i) => i[0]);
 
-    const extensionMetadata = Object.fromEntries(featuredExtensionsIDs.map((id) => [
+    const extensionMetadata = Object.fromEntries(featuredExtensionSlugs.map((id) => [
       id,
       this.extensionFiles[id].getMetadata()
     ]));
@@ -169,13 +173,14 @@ class JSONMetadataFile extends BuildFile {
 
   read () {
     const extensions = [];
-    for (const extensionID of featuredExtensionsIDs) {
+    for (const extensionSlug of featuredExtensionSlugs) {
       const extension = {};
-      const file = this.extensionFiles[extensionID];
+      const file = this.extensionFiles[extensionSlug];
       const metadata = file.getMetadata();
-      const image = this.extensionImages[extensionID];
+      const image = this.extensionImages[extensionSlug];
 
-      extension.id = extensionID;
+      extension.slug = extensionSlug;
+      extension.id = metadata.id;
       extension.name = metadata.name;
       extension.description = metadata.description;
       if (image) {
@@ -251,14 +256,14 @@ IMAGE_FORMATS.set('.jpg', ImageFile);
 IMAGE_FORMATS.set('.svg', SVGFile);
 
 class DocsFile extends BuildFile {
-  constructor (absolutePath, extensionId) {
+  constructor (absolutePath, extensionSlug) {
     super(absolutePath);
-    this.extensionId = extensionId;
+    this.extensionSlug = extensionSlug;
   }
 
   read () {
     const markdown = super.read().toString('utf-8');
-    return renderDocs(markdown, this.extensionId);
+    return renderDocs(markdown, this.extensionSlug);
   }
 
   getType () {
@@ -336,9 +341,9 @@ class Builder {
       if (!ImageFileClass) {
         continue;
       }
-      const extensionId = filename.split('.')[0];
-      if (extensionId !== 'unknown') {
-        extensionImages[extensionId] = `images/${filename}`;
+      const extensionSlug = filename.split('.')[0];
+      if (extensionSlug !== 'unknown') {
+        extensionImages[extensionSlug] = `images/${filename}`;
       }
       build.files[`/images/${filename}`] = new ImageFileClass(absolutePath);
     }
@@ -347,8 +352,8 @@ class Builder {
       if (!filename.endsWith('.md')) {
         continue;
       }
-      const extensionId = filename.split('.')[0];
-      build.files[`/${extensionId}.html`] = new DocsFile(absolutePath, extensionId);
+      const extensionSlug = filename.split('.')[0];
+      build.files[`/${extensionSlug}.html`] = new DocsFile(absolutePath, extensionSlug);
     }
 
     const scratchblocksPath = pathUtil.join(__dirname, '../node_modules/scratchblocks/build/scratchblocks.min.js');
@@ -360,10 +365,10 @@ class Builder {
       if (!filename.endsWith('.js')) {
         continue;
       }
-      const extensionId = filename.split('.')[0];
-      const featured = featuredExtensionsIDs.includes(extensionId);
+      const extensionSlug = filename.split('.')[0];
+      const featured = featuredExtensionSlugs.includes(extensionSlug);
       const file = new ExtensionFile(absolutePath, featured);
-      extensionFiles[extensionId] = file;
+      extensionFiles[extensionSlug] = file;
       build.files[`/${filename}`] = file;
     }
 

development/homepage-template.ejs

@@ -241,8 +241,8 @@
           <h2>Development Server Tools</h2>
           <p>
             Most recently modified extensions:
-            <% for (const extensionID of mostRecentExtensions) { %>
-              <a href="<%= getRunExtensionURL(extensionID) %>"><%= extensionID %>.js</a>
+            <% for (const extensionSlug of mostRecentExtensions) { %>
+              <a href="<%= getRunExtensionURL(extensionSlug) %>"><%= extensionSlug %>.js</a>
             <% } %>
           </p>
         </div>
@@ -297,15 +297,15 @@
           return result;
         };
         %>
-        <% for (const [extensionID, metadata] of Object.entries(extensionMetadata)) { %>
+        <% for (const [extensionSlug, metadata] of Object.entries(extensionMetadata)) { %>
           <div class="extension">
             <div class="extension-banner">
-              <% const image = extensionImages[extensionID] || 'images/unknown.svg'; %>
+              <% const image = extensionImages[extensionSlug] || 'images/unknown.svg'; %>
               <img loading="lazy" src="<%= image %>" class="extension-image">
 
               <div class="extension-buttons">
-                <button class="copy" data-copy="<%= getFullExtensionURL(extensionID) %>">Copy URL</button>
-                <a class="open" href="<%= getRunExtensionURL(extensionID) %>">Open Extension</a>
+                <button class="copy" data-copy="<%= getFullExtensionURL(extensionSlug) %>">Copy URL</button>
+                <a class="open" href="<%= getRunExtensionURL(extensionSlug) %>">Open Extension</a>
               </div>
             </div>
       

development/parse-extension-metadata.js

@@ -79,6 +79,9 @@ const parseMetadata = (extensionCode) => {
     const value = parts[1].trim();
 
     switch (key) {
+      case 'id':
+        metadata.id = value;
+        break;
       case 'name':
         metadata.name = value;
         break;

extensions/-SIPC-/consoles.js

@@ -1,4 +1,5 @@
 // Name: Consoles
+// ID: sipcconsole
 // Description: Blocks that interact the JavaScript console built in to your browser's developer tools.
 // By: -SIPC-
 

extensions/-SIPC-/time.js

@@ -1,4 +1,5 @@
 // Name: Time
+// ID: sipctime
 // Description: Blocks for interacting with unix timestamps and other date strings.
 // By: -SIPC-
 

extensions/0832/rxFS2.js

@@ -1,4 +1,5 @@
 // Name: rxFS
+// ID: 0832rxfs2
 // Description: Blocks for interacting with a virtual in-memory filesystem.
 // By: 0832
 

extensions/Alestore/nfcwarp.js

@@ -1,4 +1,5 @@
 // Name: NFCWarp
+// ID: alestorenfc
 // Description: Allows reading data from NFC (NDEF) devices. Only works in Chrome on Android.
 // By: Alestore Games <https://scratch.mit.edu/users/aleb2005/>
 

extensions/DT/cameracontrols.js

@@ -1,4 +1,5 @@
 // Name: Camera Controls
+// ID: DTcameracontrols
 // Description: Move the visible part of the stage.
 // By: DT
 

extensions/JeremyGamer13/tween.js

@@ -1,4 +1,5 @@
 // Name: Tween
+// ID: jeremygamerTweening
 // Description: Easing methods for smooth animations.
 // By: JeremyGamer13 <https://scratch.mit.edu/users/JeremyGamer13/>
 

extensions/Lily/AllMenus.js

@@ -1,4 +1,5 @@
 // Name: All Menus
+// ID: lmsAllMenus
 // Description: Special category with every menu from every Scratch category and extensions.
 // By: LilyMakesThings <https://scratch.mit.edu/users/LilyMakesThings/>
 

extensions/Lily/Cast.js

@@ -1,4 +1,5 @@
 // Name: Cast
+// ID: lmsCast
 // Description: Convert values between types.
 // By: LilyMakesThings <https://scratch.mit.edu/users/LilyMakesThings/>
 

extensions/Lily/ClonesPlus.js

@@ -1,4 +1,5 @@
 // Name: Clones Plus
+// ID: lmsclonesplus
 // Description: Expansion of Scratch's clone features.
 // By: LilyMakesThings <https://scratch.mit.edu/users/LilyMakesThings/>
 

extensions/Lily/CommentBlocks.js

@@ -1,4 +1,5 @@
 // Name: Comment Blocks
+// ID: lmscomments
 // Description: Annotate your scripts.
 // By: LilyMakesThings <https://scratch.mit.edu/users/LilyMakesThings/>
 

extensions/Lily/LooksPlus.js

@@ -1,4 +1,5 @@
 // Name: Looks Plus
+// ID: lmsLooksPlus
 // Description: Expands upon the looks category, allowing you to show/hide, get costume data and edit SVG skins on sprites.
 // By: LilyMakesThings <https://scratch.mit.edu/users/LilyMakesThings/>
 

extensions/Lily/McUtils.js

@@ -1,4 +1,5 @@
 // Name: McUtils
+// ID: lmsmcutils
 // Description: Helpful utilities for any fast food employee.
 // By: LilyMakesThings <https://scratch.mit.edu/users/LilyMakesThings/>
 

extensions/Lily/MoreTimers.js

@@ -1,4 +1,5 @@
 // Name: More Timers
+// ID: lmsTimers
 // Description: Control several timers at once.
 // By: LilyMakesThings <https://scratch.mit.edu/users/LilyMakesThings/>
 

extensions/Lily/Skins.js

@@ -1,4 +1,5 @@
 // Name: Skins
+// ID: lmsSkins
 // Description: Have your sprites render as other images or costumes.
 // By: LilyMakesThings <https://scratch.mit.edu/users/LilyMakesThings/>
 

extensions/Lily/TempVariables2.js

@@ -1,4 +1,5 @@
 // Name: Temporary Variables
+// ID: lmsTempVars2
 // Description: Create disposable runtime or thread variables.
 // By: LilyMakesThings <https://scratch.mit.edu/users/LilyMakesThings/>
 

extensions/Longboost/color_channels.js

@@ -1,4 +1,5 @@
 // Name: RGB Channels
+// ID: lbdrawtest
 // Description: Only render or stamp certain RGB channels.
 
 (function(Scratch) {

extensions/NOname-awa/graphics2d.js

@@ -1,4 +1,5 @@
 // Name: Graphics 2D
+// ID: nonameawagraph
 // Description: Blocks to compute lengths, angles, and areas in two dimensions.
 // By: NOname-awa
 

extensions/NOname-awa/more-comparisons.js

@@ -1,4 +1,5 @@
 // Name: More Comparisons
+// ID: nonameawacomparisons
 // Description: More comparison blocks.
 // By: NOname-awa
 

extensions/NexusKitten/moremotion.js

@@ -1,4 +1,5 @@
 // Name: More Motion
+// ID: nkmoremotion
 // Description: More motion-related blocks.
 // By: NamelessCat <https://scratch.mit.edu/users/NamelessCat/>
 

extensions/Skyhigh173/bigint.js

@@ -1,4 +1,5 @@
 // Name: BigInt
+// ID: skyhigh173BigInt
 // Description: Math blocks that work on infinitely large integers (no decimals).
 // By: Skyhigh173
 

extensions/Skyhigh173/json.js

@@ -1,4 +1,5 @@
 // Name: JSON
+// ID: skyhigh173JSON
 // Description: Handle JSON strings and arrays.
 // By: Skyhigh173
 

extensions/TheShovel/CanvasEffects.js

@@ -1,4 +1,5 @@
 // Name: Canvas Effects
+// ID: theshovelcanvaseffects
 // Description: Apply visual effects to the entire stage.
 // By: TheShovel
 

extensions/TheShovel/CustomStyles.js

@@ -1,4 +1,5 @@
 // Name: Custom Styles
+// ID: shovelcss
 // Description: Customize the appearance of variable monitors and prompts in your project.
 // By: TheShovel
 

extensions/TheShovel/LZ-String.js

@@ -1,4 +1,5 @@
 // Name: LZ Compress
+// ID: shovellzcompress
 // Description: Compress and decompress text using lz-string.
 
 (function(Scratch) {

extensions/TheShovel/ShovelUtils.js

@@ -1,4 +1,5 @@
 // Name: ShovelUtils
+// ID: ShovelUtils
 // Description: A bunch of miscellaneous blocks.
 // By: TheShovel
 

extensions/Xeltalliv/clippingblending.js

@@ -1,4 +1,5 @@
 // Name: Clipping & Blending
+// ID: xeltallivclipblend
 // Description: Clipping outside of a specified rectangular area and additive color blending.
 // By: Vadik1 <https://scratch.mit.edu/users/Vadik1/>
 

extensions/XeroName/Deltatime.js

@@ -1,4 +1,5 @@
 // Name: Deltatime
+// ID: dtbyxeroname
 // Description: Precise delta timing blocks.
 // By: XeroName <https://scratch.mit.edu/users/plant2014/>
 

extensions/ZXMushroom63/searchApi.js

@@ -1,4 +1,5 @@
 // Name: Search Params
+// ID: zxmushroom63searchparams
 // Description: Interact with URL search parameters: the part of the URL after a question mark.
 // By: ZXMushroom63
 

extensions/ar.js

@@ -1,4 +1,5 @@
 // Name: Augmented Reality
+// ID: AR
 // Description: Shows image from camera and performs motion tracking, allowing 3D projects to correctly overlay virtual objects on real world.
 // By: Vadik1 <https://scratch.mit.edu/users/Vadik1/>
 

extensions/battery.js

@@ -1,4 +1,5 @@
 // Name: Battery
+// ID: battery
 // Description: Access information about the battery of phones or laptops. May not work on all devices and browsers.
 
 (function (Scratch) {

extensions/bitwise.js

@@ -1,4 +1,5 @@
 // Name: Bitwise
+// ID: Bitwise
 // Description: Blocks that operate on the binary representation of numbers in computers.
 // By: TrueFantom <https://scratch.mit.edu/users/TrueFantom/>
 

extensions/box2d.js

@@ -1,4 +1,5 @@
 // Name: Box2D Physics
+// ID: griffpatch
 // Description: Two dimensional physics.
 // Original: griffpatch <https://scratch.mit.edu/users/griffpatch/>
 

extensions/clipboard.js

@@ -1,4 +1,5 @@
 // Name: Clipboard
+// ID: clipboard
 // Description: Read and write from the system clipboard.
 
 /*!

extensions/clouddata-ping.js

@@ -1,4 +1,5 @@
 // Name: Ping Cloud Data
+// ID: clouddataping
 // Description: Determine whether a cloud variable server is probably up.
 // Original: TheShovel