Add bindings section

index.html

@@ -160,6 +160,17 @@ <h1 class="title is-1 pb-6">
 
     <!-- Showcase Projects -->
     <section class="section is-medium">
+        <div class="container">
+            <h1 class="title is-1"><a name="bindings">#</a> Bindings</h1>
+            <br>
+            <p class="subtitle is-4">Ported <b>wgpu</b>? <a
+                    href="https://github.com/gfx-rs/wgpu-rs.github.io">Make a PR</a>, and reach out to us on <a
+                    href="https://matrix.to/#/#wgpu-users:matrix.org">#wgpu-users</a>!</p>
+            <br>
+
+            <div id="bindings_container"></div>
+        </div>
+
         <div class="container">
             <h1 class="title is-1"><a name="showcase">#</a> Showcase</h1>
             <br>
@@ -200,6 +211,16 @@ <h1 class="title is-1"><a name="showcase">#</a> Showcase</h1>
     </script>
 
     <script>
+        // List of bindings; Edit this list to add or remove projects
+        const bindings_list = [
+            {
+                "name": "wgpu4k",
+                "description": "Work-in-progress binding for Kotlin/Multiplatform",
+                "website": "https://GitHub.com/wgpu4k/wgpu4k",
+                "thumbnail": "https://avatars.githubusercontent.com/u/163670885"
+            }
+        ]
+
         // List of showcase projects; Edit this list to add or remove projects
         const showcase_list = [
             {
@@ -406,15 +427,27 @@ <h1 class="title is-1"><a name="showcase">#</a> Showcase</h1>
             `;
         }
 
-        const showcase_container = document.getElementById("showcase_container");
+        const sections = [
+            {
+                "container": "bindings_container",
+                "entries": bindings_list
+            },
+            {
+                "container": "showcase_container",
+                "entries": showcase_list
+            }
+        ];
 
-        for (let { name, description, website, thumbnail } of showcase_list) {
-            showcase_container.insertAdjacentHTML("beforeend", showcase_template({
-                name,
-                description,
-                website,
-                thumbnail
-            }));
+        for (let { container, entries } of sections) {
+            const container_element = document.getElementById(container);
+            for (let { name, description, website, thumbnail } of entries) {
+                container_element.insertAdjacentHTML("beforeend", showcase_template({
+                    name,
+                    description,
+                    website,
+                    thumbnail
+                }));
+            }
         }
     </script>
 </body>