Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Randomise homepage members #104

Merged
merged 3 commits into from
Sep 13, 2024
Merged

Randomise homepage members #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2102ac8
Add <thead> and <tbody> to <table>s
vladh Sep 11, 2024
acbc180
Randomise homepage members
vladh Sep 11, 2024
a4c142c
Update sorting strategy
vladh Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 22 additions & 14 deletions src/components/Leaderboard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const { grouped } = Astro.props;

import LeaderboardMember from "./LeaderboardMember.astro";
import {
getMembers, formatDevGroupBounds, filterInactiveMembers, groupMembers, sortMembers, DEV_GROUP_BOUNDS
getMembers, formatDevGroupBounds, filterInactiveMembers, groupMembers, sortMembersByDollarsPerDev, DEV_GROUP_BOUNDS
} from '../members.ts';

const members = await getMembers();
Expand All @@ -20,24 +20,32 @@ const members = await getMembers();
{groupMembers(filterInactiveMembers(members)).map((groupMembers, idx) => groupMembers.length > 0 && <div>
<h2>{formatDevGroupBounds(DEV_GROUP_BOUNDS[idx])}</h2>
<table class="table--lr">
<thead>
<tr>
<th>Name</th>
<th>$/dev in latest report</th>
</tr>
</thead>
<tbody>
{sortMembersByDollarsPerDev(groupMembers).map((member) =>
<LeaderboardMember member={member}></LeaderboardMember>
)}
</tbody>
</table>
</div>)}
</div> : (
<table class="table--lr">
<thead>
<tr>
<th>Name</th>
<th>$/dev in latest report</th>
</tr>
{sortMembers(groupMembers).map((member) =>
</thead>
<tbody>
{sortMembersByDollarsPerDev(filterInactiveMembers(members)).map((member) => <tr>
<LeaderboardMember member={member}></LeaderboardMember>
)}
</table>
</div>)}
</div> : (
<table class="table--lr">
<tr>
<th>Name</th>
<th>$/dev in latest report</th>
</tr>
{sortMembers(filterInactiveMembers(members)).map((member) => <tr>
<LeaderboardMember member={member}></LeaderboardMember>
</tr>)}
</tr>)}
</tbody>
</table>
)}

Expand Down
66 changes: 47 additions & 19 deletions src/components/MiniLeaderboard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,33 @@
// SPDX-License-Identifier: Apache-2.0

import {
getMembers, filterInactiveMembers, sortMembers,
getDollarsPerDev, fmtCurrency
getMembers, filterInactiveMembers, getDollarsPerDev, fmtCurrency, sortMembersByDevs,
} from '../members.ts';

const members = await getMembers();
const N_TO_CHOOSE = 5;
const members = sortMembersByDevs(filterInactiveMembers(await getMembers()));
---

<table class="table--lr">
<tr>
<th>Name</th>
<th>$/dev in latest report</th>
</tr>
{sortMembers(filterInactiveMembers(members)).slice(0, 5).map((member) => <tr>
<td>
<a class="sneaky" href={`/members/${member.id}`}>
<img src={member.data.urlSquareLogoWithBackground} alt={`The ${member.data.name} logo`}>
{member.data.name}
</div>
</td>
<td>
{fmtCurrency(getDollarsPerDev(member.data.annualReports[0]))}
</td>
</tr>)}
<table class="mini-leaderboard table--lr">
<thead>
<tr>
<th>Name</th>
<th>$/dev in latest report</th>
</tr>
</thead>
<tbody>
{members.map((member, idx) => <tr hidden={idx >= N_TO_CHOOSE}>
<td>
<a class="sneaky" href={`/members/${member.id}`}>
<img src={member.data.urlSquareLogoWithBackground} alt={`The ${member.data.name} logo`}>
{member.data.name}
</div>
</td>
<td>
{fmtCurrency(getDollarsPerDev(member.data.annualReports[0]))}
</td>
</tr>)}
</tbody>
</table>

<style>
Expand All @@ -47,3 +51,27 @@ const members = await getMembers();
padding: 0.25rem 0
}
</style>

<script>
const N_TO_CHOOSE = 5;
const PROBABILITY_TO_SKIP = 0.5;

const $miniLeaderboards = document.querySelectorAll<HTMLElement>('.mini-leaderboard');
$miniLeaderboards.forEach(($miniLeaderboard) => {
const $rows = $miniLeaderboard.querySelectorAll<HTMLElement>('tbody tr');
let nChosen = 0;
const nTotal = $rows.length;
$rows.forEach(($row, idx) => {
const mustChoose = idx == 0 || (N_TO_CHOOSE - nChosen == nTotal - idx);
const mustNotChoose = nChosen == N_TO_CHOOSE;
if (mustNotChoose) {
$row.hidden = true;
} else if (mustChoose || Math.random() < PROBABILITY_TO_SKIP) {
$row.hidden = false;
nChosen++;
} else {
$row.hidden = true;
}
});
});
</script>
19 changes: 18 additions & 1 deletion src/members.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,10 +104,27 @@ export function groupMembers(members: MemberWithId[]): MemberWithId[][] {
return groups;
}

/**
* Sorts members by the average number of devs in their latest annual report.
*/
export function sortMembersByDevs(members: MemberWithId[]): MemberWithId[] {
return members.toSorted((m1, m2) => {
if (m1.data.annualReports.length == 0) {
return 1;
}
if (m2.data.annualReports.length == 0) {
return -1;
}
const devs1 = m1.data.annualReports[0].averageNumberOfDevs;
const devs2 = m2.data.annualReports[0].averageNumberOfDevs;
return devs2 - devs1;
});
}

/**
* Sorts members by the dollars per dev donated in their latest annual report.
*/
export function sortMembers(members: MemberWithId[]): MemberWithId[] {
export function sortMembersByDollarsPerDev(members: MemberWithId[]): MemberWithId[] {
return members.toSorted((m1, m2) => {
if (m1.data.annualReports.length == 0) {
return 1;
Expand Down
52 changes: 28 additions & 24 deletions src/pages/about.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,30 +32,34 @@ import Layout from "../layouts/Layout.astro";
<p>We have four working groups and a steering group comprised of working group leads.</p>

<table class="table--bordered">
<tr>
<th>Working Group</th>
<th>Lead</th>
</tr>
<tr>
<td>Member Outreach</td>
<td><a href="https://vladh.net">Vlad-Stefan Harbuz</a></td>
</tr>
<tr>
<td>Maintainer Outreach</td>
<td><a href="https://ethanarrowood.com/">Ethan Arrowood</a></td>
</tr>
<tr>
<td>Marketing &amp; Media</td>
<td><a href="https://github.com/selviano">Michael Selvidge</a></td>
</tr>
<tr>
<td>Design &amp; Build</td>
<td><a href="https://chadwhitacre.com/">Chad Whitacre</a></td>
</tr>
<tr>
<td>Steering</td>
<td><a href="https://chadwhitacre.com/">Chad Whitacre</a></td>
</tr>
<thead>
<tr>
<th>Working Group</th>
<th>Lead</th>
</tr>
</thead>
<tbody>
<tr>
<td>Member Outreach</td>
<td><a href="https://vladh.net">Vlad-Stefan Harbuz</a></td>
</tr>
<tr>
<td>Maintainer Outreach</td>
<td><a href="https://ethanarrowood.com/">Ethan Arrowood</a></td>
</tr>
<tr>
<td>Marketing &amp; Media</td>
<td><a href="https://github.com/selviano">Michael Selvidge</a></td>
</tr>
<tr>
<td>Design &amp; Build</td>
<td><a href="https://chadwhitacre.com/">Chad Whitacre</a></td>
</tr>
<tr>
<td>Steering</td>
<td><a href="https://chadwhitacre.com/">Chad Whitacre</a></td>
</tr>
</tbody>
</table>
</section>

Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ import TextButton from "../components/TextButton.astro";
<section class="flex-center">
<div>
<div class="text-center">
<h2>Top orgs opening up</h2>
<h2>Some Member Companies</h2>
</div>

<MiniLeaderboard></MiniLeaderboard>
Expand Down
52 changes: 28 additions & 24 deletions src/pages/members/[id].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,30 +59,34 @@ export async function getStaticPaths() {
</div>

<table class="table--bordered table--lr">
<tr>
<th>Item</th>
<th>Amount ($)</th>
</tr>
<tr>
<td>Payments to Projects</td>
<td>{fmtCurrency(report.payments)}</td>
</tr>
<tr>
<td></td>
<td>= {fmtCurrency(getDollarsPerDev(report))} / dev</td>
</tr>
<tr>
<td>Value of Time</td>
<td>{fmtCurrency(report.monetaryValueOfTime)}</td>
</tr>
<tr>
<td>Value of Materials</td>
<td>{fmtCurrency(report.monetaryValueOfMaterials)}</td>
</tr>
<tr>
<td>Total</td>
<td>{fmtCurrency(getReportFullTotal(report))}</td>
</tr>
<thead>
<tr>
<th>Item</th>
<th>Amount ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Payments to Projects</td>
<td>{fmtCurrency(report.payments)}</td>
</tr>
<tr>
<td></td>
<td>= {fmtCurrency(getDollarsPerDev(report))} / dev</td>
</tr>
<tr>
<td>Value of Time</td>
<td>{fmtCurrency(report.monetaryValueOfTime)}</td>
</tr>
<tr>
<td>Value of Materials</td>
<td>{fmtCurrency(report.monetaryValueOfMaterials)}</td>
</tr>
<tr>
<td>Total</td>
<td>{fmtCurrency(getReportFullTotal(report))}</td>
</tr>
</tbody>
</table>
<div class="text-center">
<TextButton href={report.url}>Read report</TextButton>
Expand Down