From 30d8d2d30bd310e07e4e4cfb95f42ef0fcb6838e Mon Sep 17 00:00:00 2001 From: Vlad-Stefan Harbuz Date: Sun, 15 Dec 2024 23:32:42 +0000 Subject: [PATCH] Members: add toggle between table and grid --- src/components/GridMemberList.astro | 105 +++++++++++++++++++++ src/components/Leaderboard.astro | 39 -------- src/components/LeaderboardMember.astro | 84 ----------------- src/components/TabularMemberList.astro | 116 +++++++++++++++++++++++ src/layouts/Layout.astro | 6 -- src/memberFormatting.ts | 4 + src/pages/members/index.astro | 123 +++++++++++++++++++------ src/styles/common.css | 22 +++++ 8 files changed, 340 insertions(+), 159 deletions(-) create mode 100644 src/components/GridMemberList.astro delete mode 100644 src/components/Leaderboard.astro delete mode 100644 src/components/LeaderboardMember.astro create mode 100644 src/components/TabularMemberList.astro diff --git a/src/components/GridMemberList.astro b/src/components/GridMemberList.astro new file mode 100644 index 0000000..5ea3ba2 --- /dev/null +++ b/src/components/GridMemberList.astro @@ -0,0 +1,105 @@ +--- +// © 2024 Vlad-Stefan Harbuz +// SPDX-License-Identifier: Apache-2.0 + +import dayjs from 'dayjs'; + +import { + getMembers, filterInactiveMembers, sortMembersByDevs, fmtCurrency, fmtDevs, getDollarsPerDev +} from '../memberFormatting.ts'; +import type { Map } from '../util.ts'; +import memberRoles from "../memberRoles.json" + +const members = filterInactiveMembers(await getMembers()); +--- + +
+
+ {sortMembersByDevs(members).map((member) => + +
+ `The +
+

{member.data.name}

+ {(memberRoles as Map)[member.id]} + since + {dayjs(member.data.joinDate).format('DD MMM YYYY')} +
+ {fmtDevs(member.data.annualReports[0].averageNumberOfDevs)} + {fmtCurrency(getDollarsPerDev(member.data.annualReports[0]))} / dev +
+
+
+ “{member.data.shortDescription}” + + )} +
+ + “Devs”: Average number of employed full-time equivalent developers (in latest report).
+ “$ / dev”: USD paid / average number of employed full-time equivalent developers (in latest report). + +
+ + diff --git a/src/components/Leaderboard.astro b/src/components/Leaderboard.astro deleted file mode 100644 index 67c1013..0000000 --- a/src/components/Leaderboard.astro +++ /dev/null @@ -1,39 +0,0 @@ ---- -// © 2024 Vlad-Stefan Harbuz -// SPDX-License-Identifier: Apache-2.0 - -import LeaderboardMember from "./LeaderboardMember.astro"; -import { - getMembers, filterInactiveMembers, sortMembersByDevs, -} from '../memberFormatting.ts'; - -const members = filterInactiveMembers(await getMembers()); ---- - - -
-
- {sortMembersByDevs(members).map((member) => - - )} -
- - “Devs”: Average number of employed full-time equivalent developers (in latest report).
- “$ / dev”: USD paid / average number of employed full-time equivalent developers (in latest report). - -
- - diff --git a/src/components/LeaderboardMember.astro b/src/components/LeaderboardMember.astro deleted file mode 100644 index 56d7b54..0000000 --- a/src/components/LeaderboardMember.astro +++ /dev/null @@ -1,84 +0,0 @@ ---- -// © 2024 Vlad-Stefan Harbuz -// SPDX-License-Identifier: Apache-2.0 - -interface Props { - member: MemberWithId; -} - -const { member } = Astro.props; - -import dayjs from 'dayjs'; - -import { getDollarsPerDev, fmtCurrency } from '../memberFormatting.ts'; -import type { MemberWithId } from "../schemas/members.ts"; -import type { Map } from '../util.ts'; -import memberRoles from "../memberRoles.json" - -const memberRole = (memberRoles as Map)[member.id]; -const memberJoinDate = dayjs(member.data.joinDate).format('DD MMM YYYY'); -const memberNDevs = member.data.annualReports[0].averageNumberOfDevs; -const memberDollarsPerDev = fmtCurrency(getDollarsPerDev(member.data.annualReports[0])); ---- - - -
- `The -
-

{member.data.name}

- {memberRole} since {memberJoinDate} -
- {memberNDevs} dev{memberNDevs != 1 && 's'} - {memberDollarsPerDev} / dev -
-
-
- “{member.data.shortDescription}” - - - diff --git a/src/components/TabularMemberList.astro b/src/components/TabularMemberList.astro new file mode 100644 index 0000000..6e16f98 --- /dev/null +++ b/src/components/TabularMemberList.astro @@ -0,0 +1,116 @@ +--- +// © 2024 Vlad-Stefan Harbuz +// SPDX-License-Identifier: Apache-2.0 + +import { + getMembers, filterInactiveMembers, getDollarsPerDev, fmtCurrency, sortMembersByDevs +} from '../memberFormatting.ts'; + +const members = filterInactiveMembers(await getMembers()); +--- + + + + + + + + + + + {sortMembersByDevs(members).map((member) => + + + + + + )} + +
Name + Devs + + $/dev +
+ + `The + {member.data.name} + + + + {member.data.annualReports[0].averageNumberOfDevs} + + + + {fmtCurrency(getDollarsPerDev(member.data.annualReports[0]))} + +
+ + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 47b29f9..f826d76 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -107,9 +107,3 @@ import '../styles/common.css'; - - - - diff --git a/src/memberFormatting.ts b/src/memberFormatting.ts index 2d5045a..6f400f0 100644 --- a/src/memberFormatting.ts +++ b/src/memberFormatting.ts @@ -33,6 +33,10 @@ export function fmtCurrency(num: number) { }); } +export function fmtDevs(num: number) { + return `${num} dev${num != 1 ? 's' : ''}`; +} + export function filterInactiveMembers(members: MemberWithId[]): MemberWithId[] { return members.filter((m) => m.data.annualReports.length > 0); } diff --git a/src/pages/members/index.astro b/src/pages/members/index.astro index 255280b..d2c2e5b 100644 --- a/src/pages/members/index.astro +++ b/src/pages/members/index.astro @@ -6,43 +6,106 @@ import Blob from "../../components/Blob.astro"; import Button from "../../components/Button.astro"; import Layout from "../../layouts/Layout.astro"; -import Leaderboard from "../../components/Leaderboard.astro"; +import GridMemberList from "../../components/GridMemberList.astro"; +import TabularMemberList from "../../components/TabularMemberList.astro"; import TotalTally from "../../components/TotalTally.astro"; --- -
- - -
-
- - - - - -
-
-
-

Member
Companies

-
- - -
- -
-
+
+
+ + +
+
+ + + + + +
+
-

Join the list

+

Member
Companies

+ -
- +
+
+ + + +
+ +
+
+
+

Join the list

+
+ +
+
-
- - + + + + + + + diff --git a/src/styles/common.css b/src/styles/common.css index edc5afe..dd81a1f 100644 --- a/src/styles/common.css +++ b/src/styles/common.css @@ -365,12 +365,18 @@ blockquote { padding: 0.8rem 2rem; color: var(--color-bg); background-color: var(--color-primary); + border: none; border-radius: 0.5rem; text-align: center; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 1.2em; + cursor: pointer; + &.button--small { + padding: 0.4rem 1rem; + font-size: 1rem; + } &:hover { background: var(--color-secondary); color: var(--color-bg); @@ -380,6 +386,22 @@ blockquote { color: var(--color-bg); } } +.button-group { + display: inline-block; + border: 2px solid var(--color-primary); + border-radius: 0.5rem; + overflow: hidden; + .button { + margin: 0; + border-radius: 0; + border-right: 2px solid var(--color-primary); + background: none; + color: var(--color-primary); + &:last-child { + border-right: none; + } + } +} section { margin: 4rem 0; @media (max-width: 800px) {