Add a "made with" page (#220)

Signed-off-by: Nico Burns <[email protected]>
Signed-off-by: Manuel Rego <[email protected]>
Co-authored-by: Manuel Rego <[email protected]>
Co-authored-by: Delan Azabani <[email protected]>

Author: 3 people

_data/madewith.json

@@ -0,0 +1,62 @@
+[
+    {
+        "name": "Browser UIs",
+        "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": "kdab",
+                "name": "Servo Qt",
+                "link": "https://www.kdab.com/embedding-servo-in-qt/",
+                "img": "/img/made-with/servo-qt.png",
+                "description": "A Servo Webview as Qt widget, enabling browser UI built in Qt"
+            },
+            {
+                "key": "moto",
+                "name": " Moto",
+                "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"
+            }
+        ]
+    },
+    {
+        "name": "Made with Servo Components",
+        "projects":
+        [
+            {
+                "key": "blitz",
+                "name": "Blitz",
+                "link": "https://github.com/DioxusLabs/blitz",
+                 "img": "/img/made-with/blitz.png",
+                 "description": "An HTML renderer and application runtime built on top of Stylo"
+            },
+            {
+                "key": "wry-backend",
+                "name": "Wry Backend",
+                "link": "https://github.com/tauri-apps/wry/tree/servo-wry-demo",
+                 "img": "/img/made-with/wry-backend.png",
+                 "description": "A Servo backend for Wry, the webview library used by Tauri"
+            }
+        ]
+    }
+]

_data/menu.json

@@ -17,6 +17,7 @@
     "url": "#",
     "subpages": [
       { "title": "About Servo", "url": "/about/" },
+      { "title": "Made with Servo", "url": "/made-with/" },
       { "title": "Governance", "url": "https://github.com/servo/project/blob/main/governance/README.md", "external": true },
       { "title": "Sponsorship", "url": "/sponsorship/" },
       { "title": "Acknowledgements", "url": "/acknowledgements/" }

assets/css/style.css.liquid

@@ -667,6 +667,10 @@ figcaption {
   max-width: 64rem;
 }
 
+.subpage-content.fullwidth {
+  max-width: none;
+}
+
   .subpage-content h1,
   .subpage-content h2,
   .subpage-content h3 {

assets/img/made-with/blitz.png

@@ -0,0 +1,77 @@
+---
+layout: default.html
+title: Made With Servo
+---
+
+<style type="text/css">
+
+.made-with-container {
+  gap: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: start;
+  margin-bottom: 3rem;
+}
+
+.made-with-container::last-child {
+  margin-bottom: 0;
+}
+
+.made-with-item {
+  display: block;
+  width: 400px;
+  max-width: 100%;
+  flex: 0 0 400px;
+  border: 2px solid var(--dark-grey);
+  cursor: pointer;
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.made-with-item:hover {
+  background-color: #EAEAEA;
+}
+
+.made-with-text {
+  padding: 1.25rem;
+}
+
+.made-with-text > p {
+  padding: 0;
+}
+
+.made-with-image {
+  aspect-ratio: 2;
+  object-fit: cover;
+  object-position: top left;
+  background-color: transparent;
+}
+
+</style>
+
+<div class="inner-container subpage-content fullwidth">
+
+<h1>{{ title }}</h1>
+<p class="subtitle">
+  This page showcases projects that are built with Servo or Servo components.
+</p>
+
+{% for group in madewith %}
+
+## {{group.name}}
+
+<div class="made-with-container">
+  {% for project in group.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">
+      <h3>{{ project.name }}</h3>
+      <p>{{ project.description }}</p>
+    </div>
+  </a>{% endfor %}
+</div>
+
+{% endfor %}
+
+
+</div>