Merge pull request #327 from petaa33/feat/add-sponsors

feat: Custom contributors widget
stride3d · Jan 30, 2025 · 27dcddf · 27dcddf
2 parents b64c592 + 3cef4b5
commit 27dcddf
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 18 deletions.
diff --git a/_data/bronze_sponsors.js b/_data/bronze_sponsors.js
@@ -0,0 +1,10 @@
+import eleventyFetch from "@11ty/eleventy-fetch";
+
+export default async function fetchSponsors(params) {
+	const json = await eleventyFetch("https://opencollective.com/stride3d/tiers/bronze-strider/all.json", {
+			duration: "7d",
+			type: "json"
+		});
+
+	return json;
+}
diff --git a/_data/gold_sponsors.js b/_data/gold_sponsors.js
@@ -0,0 +1,10 @@
+import eleventyFetch from "@11ty/eleventy-fetch";
+
+export default async function fetchSponsors(params) {
+	const json = await eleventyFetch("https://opencollective.com/stride3d/tiers/gold-strider/all.json", {
+			duration: "7d",
+			type: "json"
+		});
+
+	return json;
+}
diff --git a/_data/silver_sponsors.js b/_data/silver_sponsors.js
@@ -0,0 +1,10 @@
+import eleventyFetch from "@11ty/eleventy-fetch";
+
+export default async function fetchSponsors(params) {
+	const json = await eleventyFetch("https://opencollective.com/stride3d/tiers/silver-strider/all.json", {
+			duration: "7d",
+			type: "json"
+		});
+
+	return json;
+}
diff --git a/_includes/oc_sponsors.njk b/_includes/oc_sponsors.njk
@@ -0,0 +1,49 @@
+<div class="card mt-5">
+    <div class="oc-sponsors-container">
+        <div class="tier-container">
+            <div class="tier-item gold">GOLD STRIDERS</div>
+            <div class="tier-item"> 
+                {% for sponsor in gold_sponsors %}
+                    <div class="img-container">
+                        {% if sponsor.image %}
+                            <img src={{sponsor.image}} alt={{sponsor.name}} class="gold"/>
+                        {% else %}
+                            <img src="/images/svg/logo.svg" alt={{sponsor.name}} class="gold"/>
+                        {%endif%}
+                        <div>{{sponsor.name}}</div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+        <div class="tier-container">
+            <div class="tier-item silver">SILVER STRIDERS</div>
+            <div class="tier-item"> 
+                {% for sponsor in silver_sponsors %}
+                    <div class="img-container">
+                        {% if sponsor.image %}
+                            <img src={{sponsor.image}} alt={{sponsor.name}} class="silver"/>
+                        {% else %}
+                            <img src="/images/svg/logo.svg" alt={{sponsor.name}} class="silver"/>
+                        {%endif%}
+                        <div>{{sponsor.name}}</div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+        <div class="tier-container">
+            <div class="tier-item bronze">BRONZE STRIDERS</div>
+            <div class="tier-item"> 
+                {% for sponsor in bronze_sponsors %}
+                    <div class="img-container">
+                        {% if sponsor.image %}
+                        <img src={{sponsor.image}} alt={{sponsor.name}} class="bronze"/>
+                        {% else %}
+                            <img src="/images/svg/logo.svg" alt={{sponsor.name}} class="bronze"/>
+                        {%endif%}
+                        <div>{{sponsor.name}}</div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/css/styles.scss b/css/styles.scss
@@ -1,5 +1,6 @@
 @import "custom-bootstrap";
 @import "/css/all.min.css";
+@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 :root {
     --main-shadow: 2px 2px 8px #0000001a;
@@ -288,4 +289,75 @@ svg path.logo-path {
     background-size: 50px 50px;
 }
 
+.oc-sponsors-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .tier-container {
+        display: flex;
+        flex-direction: column;
+
+        @media screen and (min-width: 1280px) {
+            flex-direction: row;
+        }
+
+        .tier-item {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            gap: 20px;
+            align-items: center;
+            justify-content: center;
+            font-family: "Kanit", serif;
+            font-weight: 900;
+            font-size: 46px;
+            letter-spacing: -2px;
+            padding: 40px 12px;
+            flex-wrap: wrap;
+        }
+
+        .tier-item.gold {             
+            background-color: rgb(221, 205, 62);
+        }
+
+        .tier-item.silver {
+            background-color: silver;
+        }
+
+        .tier-item.bronze {
+            background-color: rgb(216, 156, 78);
+        }
+
+        .img-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 2px;
+            font-family: "Segoe UI";
+            font-weight: 400;
+            font-size: 12px;
+            letter-spacing: normal;
+            img {
+                width: 80px;
+                height: 80px;
+                border-radius: 50px;
+                font-size: 14px;
+                box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
+            }
+
+            img.gold {
+                border: solid 3px rgb(221, 205, 62);
+            }
+            img.silver {
+                border: solid 3px silver;
+            }
+            img.bronze {
+                border: solid 3px rgb(216, 156, 78);
+            }
+        }
+    }
+}
+
 @import "syntax-highlighting";
diff --git a/sponsor.html b/sponsor.html
@@ -61,24 +61,9 @@ <h2 class="mb-0">Featured Sponsors</h2>
     {% include sponsor-generic.html %}
 </div>
 {% comment %} The styling is difficult as those widgets are not responsive. We can fix in the future by fetching json and display what we want and how we want. {% endcomment %}
-<div class="card mt-5">
-    <div class="card-body p-4">
-        <div class="row mb-3 mt-4">
-            <div class="col-md-4">
-                <h2 class="text-center">Gold Striders</h2>
-                <object type="image/svg+xml" data="https://opencollective.com/stride3d/tiers/gold-strider.svg?avatarHeight=40&button=false&width=290"></object>
-            </div>
-            <div class="col-md-4">
-                <h2 class="text-center">Silver Striders</h2>
-                <object type="image/svg+xml" data="https://opencollective.com/stride3d/tiers/silver-strider.svg?avatarHeight=40&button=false&width=290"></object>
-            </div>
-            <div class="col-md-4">
-                <h2 class="text-center">Bronze Striders</h2>
-                <object type="image/svg+xml" data="https://opencollective.com/stride3d/tiers/bronze-strider.svg?avatarHeight=40&button=false&width=290"></object>
-            </div>
-        </div>
-    </div>
-</div>
+
+{% include oc_sponsors.njk %}
+
 <div class="card mt-5">
     <div class="card-body p-4">
         <div class="row">