made-with: Sort alphabetically and keep sorted the json file too (#297)

Signed-off-by: Manuel Rego Casasnovas <rego@igalia.com>

Author: mrego

_data/madewith.json

@@ -4,18 +4,10 @@
         "projects":
         [
             {
-                "key": "servoshell",
-                "name": "servoshell",
-                "link": "https://github.com/servo/servo/tree/main/ports/servoshell",
-                "img": "/img/made-with/servoshell.png",
-                "description": "First-party browser UI built with egui"
-            },
-            {
-                "key": "verso",
-                "name": "Verso",
-                "link": "https://github.com/versotile-org/verso/",
-                "img": "/img/made-with/verso.png",
-                "description": "A browser UI for Servo that implements the UI as HTML using Servo's own web rendering support"
+                "key": "cuervo",
+                "name": "Cuervo",
+                "link": "https://github.com/mcclure/cuervo/tree/unstable_traversal_experiment",
+                "description": "A text-based UI for Servo"
             },
             {
                 "key": "kdab",
@@ -30,25 +22,33 @@
                 "link": "https://github.com/moto-browser/moto",
                 "description": "A fork/extension of servoshell that aims to add features such as bookmarks, history and download management"
             },
-            {
-                "key": "cuervo",
-                "name": "Cuervo",
-                "link": "https://github.com/mcclure/cuervo/tree/unstable_traversal_experiment",
-                "description": "A text-based UI for Servo"
-            },
             {
                 "key": "servo-gtk",
                 "name": "Servo GTK",
                 "link": "https://github.com/nacho/servo-gtk",
                 "img": "/img/made-with/servo-gtk.png",
                 "description": "A GTK4 library that embeds the Servo web engine"
             },
+            {
+                "key": "servoshell",
+                "name": "servoshell",
+                "link": "https://github.com/servo/servo/tree/main/ports/servoshell",
+                "img": "/img/made-with/servoshell.png",
+                "description": "First-party browser UI built with egui"
+            },
             {
                 "key": "slint-servo",
                 "name": "Slint Servo",
                 "link": "https://github.com/slint-ui/slint/tree/master/examples/servo",
                 "img": "/img/made-with/slint-servo.png",
                 "description": "Integrate Servo Web Engine as WebView Component for Slint to render websites"
+            },
+            {
+                "key": "verso",
+                "name": "Verso",
+                "link": "https://github.com/versotile-org/verso/",
+                "img": "/img/made-with/verso.png",
+                "description": "A browser UI for Servo that implements the UI as HTML using Servo's own web rendering support"
             }
         ]
     },

made-with.md

@@ -61,7 +61,8 @@ title: Made With Servo
 ## {{group.name}}
 
 <div class="made-with-container">
-  {% for project in group.projects %}
+  {% assign projects = group.projects | sort_natural: "name" %}
+  {% for project in projects %}
   <a class="made-with-item" href="{{project.link}}" target="_blank">
     {% if project.img %}<img src="{{ project.img | url }}" class="made-with-image" alt=" " />{% endif %}
     <div class="made-with-text">