Skip to content

Commit 440b982

Browse files
birkskyumbirkskyum
authored
Shuffle people on about page (#443)
1 parent 7eb9e2a commit 440b982

File tree

4 files changed

+91
-79
lines changed

4 files changed

+91
-79
lines changed

‎src/components/BoardAndTeam.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { onMount } from "solid-js";
2+
import { shuffleList } from "../utils/shuffleList";
3+
4+
export const BoardAndTeam = (props: { board: any[]; team: any[] }) => {
5+
onMount(() => {
6+
shuffleList(".board-list");
7+
shuffleList(".team-list");
8+
});
9+
10+
return (
11+
<>
12+
<h1 class="text-center pt-3">Governing Board</h1>
13+
<div class="text-center">
14+
<div class="container pb-3 px-2">
15+
<div
16+
class="board-list justify-content-center"
17+
style="display:flex; gap: 20px; flex-wrap: wrap;"
18+
>
19+
{props.board.map((member) => (
20+
<div class="text-center person">
21+
<a href={`about/${member.link}`}>
22+
<img
23+
src={member.avatar}
24+
width="150"
25+
class="rounded-circle mt-3 border border-white"
26+
/>
27+
<h3 class="m-3">{member.name}</h3>
28+
</a>
29+
</div>
30+
))}
31+
</div>
32+
</div>
33+
<p class="text-center">
34+
In charge to steering the Organization is the
35+
<a href="https://maplibre.org/about/">
36+
MapLibre Governing Board
37+
</a>. <br />
38+
They are elected by
39+
<a href="https://github.com/maplibre/maplibre/blob/main/VOTING_MEMBERS.md">
40+
Voting Members
41+
</a>
42+
, a group who represents the broader community.
43+
</p>
44+
<div>
45+
<h1 class="text-center pt-4">Team</h1>
46+
47+
<div class="container pb-5 pt-2">
48+
<div
49+
class="team-list justify-content-center"
50+
style="display:flex; gap: 20px; flex-wrap: wrap;"
51+
>
52+
{props.team.map((member) => (
53+
<div class="text-center person">
54+
<a href={`about/${member.link}`}>
55+
<img
56+
src={member.avatar}
57+
width="150"
58+
class="rounded-circle mt-3 border border-white"
59+
/>
60+
<h3 class="m-3">{member.name}</h3>
61+
{member.position}
62+
</a>
63+
</div>
64+
))}
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</>
70+
);
71+
};

‎src/components/Sponsors.tsx‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,10 @@
11
import { onMount } from "solid-js";
2+
import { shuffleList } from "../utils/shuffleList";
23

34
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-
195
onMount(() => {
20-
shuffleSponsorList(".gold-list");
21-
shuffleSponsorList(".silver-list");
6+
shuffleList(".gold-list");
7+
shuffleList(".silver-list");
228
});
239
return (
2410
<div id="sponsor-list">

‎src/pages/about/index.astro‎

Lines changed: 2 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import TitleHeader from "../../components/TitleHeader.astro";
55
import board from "../../content/board.json" with { type: "json" };
66
import team from "../../content/team.json" with { type: "json" };
77
import Layout from "../../layouts/Layout.astro";
8+
import { BoardAndTeam } from "../../components/BoardAndTeam";
89
---
910

1011
<Layout title="About">
@@ -56,68 +57,7 @@ import Layout from "../../layouts/Layout.astro";
5657
Find quarterly financial reports in the
5758
<a href="about/reports">Reports</a> page.
5859
</p>
59-
<h1 class="text-center pt-3">Governing Board</h1>
60-
<div class="text-center">
61-
<p>
62-
<div class="container pb-3 px-2">
63-
<div
64-
class="justify-content-center"
65-
style="display:flex; gap: 20px; flex-wrap: wrap;"
66-
>
67-
{
68-
board.map((member) => (
69-
<div class="text-center person">
70-
<a href={`about/${member.link}`}>
71-
<img
72-
src={member.avatar}
73-
width="150"
74-
class="rounded-circle mt-3 border border-white"
75-
/>
76-
<h3 class="m-3">{member.name}</h3>
77-
</a>
78-
</div>
79-
))
80-
}
81-
</div>
82-
</div>
83-
</p>
84-
<p class="text-center">
85-
In charge to steering the Organization is the
86-
<a href="https://maplibre.org/about/">MapLibre Governing Board</a>. <br
87-
/>
88-
They are elected by
89-
<a
90-
href="https://github.com/maplibre/maplibre/blob/main/VOTING_MEMBERS.md"
91-
>Voting Members</a
92-
>, a group who represents the broader community.
93-
</p>
94-
<div>
95-
<h1 class="text-center pt-4">Team</h1>
96-
97-
<div class="container pb-5 pt-2">
98-
<div
99-
class="justify-content-center"
100-
style="display:flex; gap: 20px; flex-wrap: wrap;"
101-
>
102-
{
103-
team.map((member) => (
104-
<div class="text-center person">
105-
<a href={`about/${member.link}`}>
106-
<img
107-
src={member.avatar}
108-
width="150"
109-
class="rounded-circle mt-3 border border-white"
110-
/>
111-
<h3 class="m-3">{member.name}</h3>
112-
{member.position}
113-
</a>
114-
</div>
115-
))
116-
}
117-
</div>
118-
</div>
119-
</div>
120-
</div>
60+
<BoardAndTeam board={board} team={team} client:only />
12161
<div class="text-center">
12262
<h1 class="text-center pt-3">Brand Assets</h1>
12363
<p class="text-center">

‎src/utils/shuffleList.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function shuffleList(selector: string): void {
2+
const container = document.querySelector(selector);
3+
if (!container) return;
4+
5+
const items = Array.from(container.children);
6+
7+
// Shuffle using Fisher-Yates algorithm
8+
for (let i = items.length - 1; i > 0; i--) {
9+
const j = Math.floor(Math.random() * (i + 1));
10+
[items[i], items[j]] = [items[j], items[i]];
11+
}
12+
13+
// Append shuffled items back to their container
14+
items.forEach((item) => container.appendChild(item));
15+
}

0 commit comments

Comments
 (0)