Skip to content

Commit 7eb9e2a

Browse files
birkskyumbirkskyum
authored
shuffle sponsor on refresh (#394)
1 parent ce79e64 commit 7eb9e2a

File tree

2 files changed

+97
-70
lines changed

2 files changed

+97
-70
lines changed

‎src/components/Sponsors.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { onMount } from "solid-js";
2+
3+
export const Sponsors = (props: any) => {
4+
function shuffleSponsorList(selector) {
5+
const list = document.querySelector(selector);
6+
if (!list) return;
7+
const items = Array.from(list.querySelectorAll("a"));
8+
9+
// Shuffle using Fisher-Yates algorithm
10+
for (let i = items.length - 1; i > 0; i--) {
11+
const j = Math.floor(Math.random() * (i + 1));
12+
[items[i], items[j]] = [items[j], items[i]];
13+
}
14+
15+
// Append shuffled items back to their container
16+
items.forEach((item) => list.appendChild(item));
17+
}
18+
19+
onMount(() => {
20+
shuffleSponsorList(".gold-list");
21+
shuffleSponsorList(".silver-list");
22+
});
23+
return (
24+
<div id="sponsor-list">
25+
<h2 class="mt-6">Current Members of the Sponsorship Program</h2>
26+
<p>
27+
<b>Gold Tier</b>
28+
<br />
29+
</p>
30+
<div class="gold-list">
31+
<a href="https://aws.amazon.com/location/">
32+
<div>
33+
<img src="img/aws-logo.svg" />
34+
</div>
35+
</a>
36+
37+
<a href="https://www.meta.com/">
38+
<div>
39+
<img src="img/meta-logo.svg" />
40+
</div>
41+
</a>
42+
43+
<a href="https://www.microsoft.com/">
44+
<div>
45+
<img src="img/msft-logo.svg" />
46+
</div>
47+
</a>
48+
</div>
49+
50+
<p>
51+
<br />
52+
<b>Silver Tier</b>
53+
<br />
54+
</p>
55+
56+
<div class="silver-list">
57+
<a href="https://www.mierune.co.jp/?lang=en">
58+
<div>
59+
<img src="img/mierune-logo.svg" />
60+
</div>
61+
</a>
62+
<a href="https://komoot.com/">
63+
<div>
64+
<img src="img/komoot-logo.svg" />
65+
</div>
66+
</a>
67+
<a href="https://www.jawg.io/">
68+
<div>
69+
<img src="img/jawgmaps-logo.svg" />
70+
</div>
71+
</a>
72+
<a href="https://www.radar.com/">
73+
<div>
74+
<img src="img/radar-logo.svg" />
75+
</div>
76+
</a>
77+
<a href="https://www.mappedin.com/">
78+
<div>
79+
<img src="img/mappedin-logo.svg" />
80+
</div>
81+
</a>
82+
<a href="https://mapme.com/">
83+
<div>
84+
<img src="img/mapme-logo.svg" />
85+
</div>
86+
</a>
87+
<a href="https://www.maptiler.com/">
88+
<div>
89+
<img src="img/maptiler-logo.svg" />
90+
</div>
91+
</a>
92+
</div>
93+
</div>
94+
);
95+
};

‎src/pages/sponsors/index.astro‎

Lines changed: 2 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import { Sponsors } from "../../components/Sponsors.tsx";
23
import TitleHeader from "../../components/TitleHeader.astro";
34
import Layout from "../../layouts/Layout.astro";
45
@@ -30,76 +31,7 @@ title: "Sponsors";
3031
</li>
3132
</ul>
3233

33-
<div id="sponsor-list">
34-
<h2 class="mt-6">Current Members of the Sponsorship Program</h2>
35-
<p>
36-
<b>Gold Tier</b>
37-
<br />
38-
</p>
39-
<div class="gold-list">
40-
<a href="https://aws.amazon.com/location/">
41-
<div>
42-
<img src="img/aws-logo.svg" />
43-
</div>
44-
</a>
45-
46-
<a href="https://www.meta.com/">
47-
<div>
48-
<img src="img/meta-logo.svg" />
49-
</div>
50-
</a>
51-
<a href="https://www.microsoft.com/">
52-
<div>
53-
<img src="img/msft-logo.svg" />
54-
</div>
55-
</a>
56-
</div>
57-
58-
<p>
59-
<br />
60-
<b>Silver Tier</b>
61-
<br />
62-
</p>
63-
64-
<div class="silver-list">
65-
<a href="https://www.mierune.co.jp/?lang=en">
66-
<div>
67-
<img src="img/mierune-logo.svg" />
68-
</div>
69-
</a>
70-
<a href="https://komoot.com/">
71-
<div>
72-
<img src="img/komoot-logo.svg" />
73-
</div>
74-
</a>
75-
<a href="https://www.jawg.io/">
76-
<div>
77-
<img src="img/jawgmaps-logo.svg" />
78-
</div>
79-
</a>
80-
<a href="https://www.radar.com/">
81-
<div>
82-
<img src="img/radar-logo.svg" />
83-
</div>
84-
</a>
85-
86-
<a href="https://www.mappedin.com/">
87-
<div>
88-
<img src="img/mappedin-logo.svg" />
89-
</div>
90-
</a>
91-
<a href="https://mapme.com/">
92-
<div>
93-
<img src="img/mapme-logo.svg" />
94-
</div>
95-
</a>
96-
<a href="https://www.maptiler.com/">
97-
<div>
98-
<img src="img/maptiler-logo.svg" />
99-
</div>
100-
</a>
101-
</div>
102-
</div>
34+
<Sponsors client:only />
10335

10436
<h2 class="mt-6">Donations by Individuals</h2>
10537
<p>

0 commit comments

Comments
 (0)