merge: Data driven about page sections (and add me as a contributor!) (!800)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/800

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>
Approved-by: Hazelnoot <acomputerdog@gmail.com>

3 files changed, 197 insertions, 101 deletions

diff --git a/locales/index.d.ts b/locales/index.d.ts
index a1b347e5d3..5caebcfa02 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -7396,6 +7396,14 @@ export interface Locale extends ILocale {
          * Testers
          */
         "testers": string;
+        /**
+         * Misskey Contributors
+         */
+        "misskeyContributors": string;
+        /**
+         * Our lovely Sponsors
+         */
+        "ourLovelySponsors": string;
     };
     "_displayOfSensitiveMedia": {
         /**
diff --git a/packages/frontend/src/pages/about-sharkey.vue b/packages/frontend/src/pages/about-sharkey.vue
index 7ebae62a7b..1746fc0e68 100644
--- a/packages/frontend/src/pages/about-sharkey.vue
+++ b/packages/frontend/src/pages/about-sharkey.vue
@@ -74,108 +74,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</FormLink>
 					</div>
 				</FormSection>
-				<FormSection>
-					<template #label>{{ i18n.ts._aboutMisskey.projectMembers }}</template>
-					<div :class="$style.contributors" style="margin-bottom: 8px;">
-						<a href="https://activitypub.software/dakkar" target="_blank" :class="$style.contributor">
-							<img src="https://secure.gravatar.com/avatar/c71b315eed7c63ff94c42b1b3e8dbad1?s=192&d=identicon" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@dakkar</span>
-						</a>
-						<a href="https://activitypub.software/supakaity" target="_blank" :class="$style.contributor">
-							<img src="https://activitypub.software/uploads/-/system/user/avatar/65/avatar.png?width=40" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@supakaity</span>
-						</a>
-						<a href="https://activitypub.software/julia" target="_blank" :class="$style.contributor">
-							<img src="https://activitypub.software/uploads/-/system/user/avatar/41/avatar.png?width=40" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@julia</span>
-						</a>
-						<a href="https://activitypub.software/Leah" target="_blank" :class="$style.contributor">
-							<img src="https://secure.gravatar.com/avatar/3b35b921b284ccfd1fe348508f6f705b?s=80&d=identicon" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@Leah</span>
-						</a>
-						<a href="https://activitypub.software/fEmber" target="_blank" :class="$style.contributor">
-							<img src="https://secure.gravatar.com/avatar/ea0ea6451fdb74311efad369bdce018e?s=80&d=identicon" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@fEmber</span>
-						</a>
-						<a href="https://activitypub.software/tess" target="_blank" :class="$style.contributor">
-							<img src="https://activitypub.software/uploads/-/system/user/avatar/132/avatar.png?width=128" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@tess</span>
-						</a>
-						<a href="https://activitypub.software/marie" target="_blank" :class="$style.contributor">
-							<img src="https://activitypub.software/uploads/-/system/user/avatar/2/avatar.png?width=128" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@Marie</span>
-						</a>
-						<a href="https://activitypub.software/luna" target="_blank" :class="$style.contributor">
-							<img src="https://secure.gravatar.com/avatar/4faf37df86a3d93a6c19ed6abf8588eade4efb837410dbbc53021b4fd12eaae7?s=80&d=identicon" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@Luna</span>
-						</a>
-					</div>
-					<template #description><MkLink url="https://activitypub.software/TransFem-org/Sharkey/-/graphs/develop">{{ i18n.ts._aboutMisskey.allContributors }}</MkLink></template>
-				</FormSection>
-				<FormSection>
-					<template #label>{{ i18n.ts._aboutMisskey.testers }}</template>
-					<div :class="$style.contributors" style="margin-bottom: 8px;">
-						<a href="https://antani.cyou/@lucent" target="_blank" :class="$style.contributor">
-							<img src="https://antani.cyou/proxy/avatar.webp?url=https%3A%2F%2Fantani.cyou%2Ffiles%2Fa2944119-024c-4abd-86e5-64bf0d30b26f&avatar=1" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@lucent</span>
-						</a>
-						<a href="https://plasmatrap.com/@privateger" target="_blank" :class="$style.contributor">
-							<img src="https://mediaproxy.plasmatrap.com/?url=https%3A%2F%2Fplasmatrap.com%2Ffiles%2F2cf35a8f-6520-4d4c-9611-bf22ee983293&avatar=1" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@privateger</span>
-						</a>
-						<a href="https://thetransagenda.gay/@phoenix_fairy" target="_blank" :class="$style.contributor">
-							<img src="https://thetransagenda.gay/proxy/avatar.webp?url=https%3A%2F%2Fs3.us-east-005.backblazeb2.com%2Ftranssharkey%2Fnull%2Fd93ac6dc-2020-4b5a-bce7-84b41e97a0ac.png&avatar=1" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@phoenix_fairy</span>
-						</a>
-					</div>
-				</FormSection>
-				<FormSection>
-					<template #label>Misskey Contributors</template>
+				<FormSection v-for="section in everyone" :key="section.heading">
+					<template #label>{{ section.heading }}</template>
 					<div :class="$style.contributors" style="margin-bottom: 8px;">
-						<a href="https://github.com/syuilo" target="_blank" :class="$style.contributor">
-							<img src="https://avatars.githubusercontent.com/u/4439005?v=4" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@syuilo</span>
-						</a>
-						<a href="https://github.com/tamaina" target="_blank" :class="$style.contributor">
-							<img src="https://avatars.githubusercontent.com/u/7973572?v=4" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@tamaina</span>
-						</a>
-						<a href="https://github.com/acid-chicken" target="_blank" :class="$style.contributor">
-							<img src="https://avatars.githubusercontent.com/u/20679825?v=4" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@acid-chicken</span>
-						</a>
-						<a href="https://github.com/kakkokari-gtyih" target="_blank" :class="$style.contributor">
-							<img src="https://avatars.githubusercontent.com/u/67428053?v=4" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@kakkokari-gtyih</span>
+						<a v-for="person in section.people" :key="person.handle" :href="person.link" target="_blank" :class="$style.contributor">
+							<img :src="person.avatar" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">{{ person.handle }}</span>
 						</a>
-						<a href="https://github.com/tai-cha" target="_blank" :class="$style.contributor">
-							<img src="https://avatars.githubusercontent.com/u/40626578?v=4" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@tai-cha</span>
-						</a>
-						<a href="https://github.com/samunohito" target="_blank" :class="$style.contributor">
-							<img src="https://avatars.githubusercontent.com/u/46447427?v=4" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@samunohito</span>
-						</a>
-						<a href="https://github.com/anatawa12" target="_blank" :class="$style.contributor">
-							<img src="https://avatars.githubusercontent.com/u/22656849?v=4" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@anatawa12</span>
-						</a>
-					</div>
-				</FormSection>
-				<FormSection v-if="sponsors[0].length > 0">
-					<template #label>Our lovely Sponsors</template>
-					<div :class="$style.contributors">
-						<span
-							v-for="sponsor in sponsors[0]"
-							:key="sponsor"
-							style="margin-bottom: 0.5rem;"
-						>
-							<a :href="sponsor.website || sponsor.profile" target="_blank" :class="$style.contributor">
-								<img :src="sponsor.image || `https://ui-avatars.com/api/?background=0D8ABC&color=fff&name=${sponsor.name}`" :class="$style.contributorAvatar">
-								<span :class="$style.contributorUsername">{{ sponsor.name }}</span>
-							</a>
-						</span>
 					</div>
+					<template v-if="section.link" #description><MkLink :url="section.link.url">{{ section.link.label }}</MkLink></template>
 				</FormSection>
 			</div>
 		</MkSpacer>
@@ -201,15 +108,194 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { claimAchievement, claimedAchievements } from '@/scripts/achievements.js';
 import { $i } from '@/account.js';
 
+type Section = {
+	heading: string,
+	link?: {
+		label: string,
+		url: string,
+	},
+	people: {
+		handle: string,
+		avatar: string,
+		link?: string
+	}[],
+};
+
 const thereIsTreasure = ref($i && !claimedAchievements.includes('foundTreasure'));
 
 let easterEggReady = false;
 const easterEggEmojis = ref([]);
 const easterEggEngine = ref(null);
-const sponsors = ref([]);
+const everyone = ref<Section[]>([
+	{
+		heading: i18n.ts._aboutMisskey.projectMembers,
+		link: {
+			label: i18n.ts._aboutMisskey.allContributors,
+			url: 'https://activitypub.software/TransFem-org/Sharkey/-/graphs/develop',
+		},
+		people: fisher_yates([
+			{
+				handle: '@CenTdemeern1',
+				avatar: 'https://secure.gravatar.com/avatar/e97dd57d32caf703cea556ace6304617b7420f17f5b1aac4a1eea8e4234735bb?s=128&d=identicon',
+				link: 'https://activitypub.software/CenTdemeern1',
+			},
+			{
+				handle: '@dakkar',
+				avatar: 'https://secure.gravatar.com/avatar/c71b315eed7c63ff94c42b1b3e8dbad1?s=128&d=identicon',
+				link: 'https://activitypub.software/dakkar',
+			},
+			{
+				handle: '@hazelnoot',
+				avatar: 'https://activitypub.software/uploads/-/system/user/avatar/5/avatar.png?width=128',
+				link: 'https://activitypub.software/fEmber',
+			},
+			{
+				handle: '@julia',
+				avatar: 'https://activitypub.software/uploads/-/system/user/avatar/41/avatar.png?width=128',
+				link: 'https://activitypub.software/julia',
+			},
+			{
+				handle: '@Leah',
+				avatar: 'https://secure.gravatar.com/avatar/3b35b921b284ccfd1fe348508f6f705b?s=128&d=identicon',
+				link: 'https://activitypub.software/Leah',
+			},
+			{
+				handle: '@Luna',
+				avatar: 'https://secure.gravatar.com/avatar/4faf37df86a3d93a6c19ed6abf8588eade4efb837410dbbc53021b4fd12eaae7?s=128&d=identicon',
+				link: 'https://activitypub.software/luna',
+			},
+			{
+				handle: '@Marie',
+				avatar: 'https://activitypub.software/uploads/-/system/user/avatar/2/avatar.png?width=128',
+				link: 'https://activitypub.software/marie',
+			},
+			{
+				handle: '@supakaity',
+				avatar: 'https://activitypub.software/uploads/-/system/user/avatar/65/avatar.png?width=128',
+				link: 'https://activitypub.software/supakaity',
+			},
+			{
+				handle: '@tess',
+				avatar: 'https://activitypub.software/uploads/-/system/user/avatar/132/avatar.png?width=128',
+				link: 'https://activitypub.software/tess',
+			},
+		]),
+	},
+	{
+		heading: i18n.ts._aboutMisskey.testers,
+		people: [
+			{
+				handle: '@lucent',
+				avatar: 'https://antani.cyou/proxy/avatar.webp?url=https%3A%2F%2Fantani.cyou%2Ffiles%2Fa2944119-024c-4abd-86e5-64bf0d30b26f&avatar=1',
+				link: 'https://antani.cyou/@lucent',
+			},
+			{
+				handle: '@privateger',
+				avatar: 'https://mediaproxy.plasmatrap.com/?url=https%3A%2F%2Fplasmatrap.com%2Ffiles%2F2cf35a8f-6520-4d4c-9611-bf22ee983293&avatar=1',
+				link: 'https://plasmatrap.com/@privateger',
+			},
+			{
+				handle: '@phoenix_fairy',
+				avatar: 'https://thetransagenda.gay/proxy/avatar.webp?url=https%3A%2F%2Fs3.us-east-005.backblazeb2.com%2Ftranssharkey%2Fnull%2Fd93ac6dc-2020-4b5a-bce7-84b41e97a0ac.png&avatar=1',
+				link: 'https://thetransagenda.gay/@phoenix_fairy',
+			},
+		],
+	},
+	{
+		heading: i18n.ts._aboutMisskey.misskeyContributors,
+		people: [
+			{
+				handle: '@syuilo',
+				avatar: 'https://avatars.githubusercontent.com/u/4439005?s=128&v=4',
+				link: 'https://github.com/syuilo',
+			},
+			{
+				handle: '@tamaina',
+				avatar: 'https://avatars.githubusercontent.com/u/7973572?s=128&v=4',
+				link: 'https://github.com/tamaina',
+			},
+			{
+				handle: '@acid-chicken',
+				avatar: 'https://avatars.githubusercontent.com/u/20679825?s=128&v=4',
+				link: 'https://github.com/acid-chicken',
+			},
+			{
+				handle: '@mei23',
+				avatar: 'https://avatars.githubusercontent.com/u/30769358?s=128&v=4',
+				link: 'https://github.com/mei23',
+			},
+			{
+				handle: '@AyaMorisawa',
+				avatar: 'https://avatars.githubusercontent.com/u/10798641?s=128&v=4',
+				link: 'https://github.com/AyaMorisawa',
+			},
+			{
+				handle: '@kakkokari-gtyih',
+				avatar: 'https://avatars.githubusercontent.com/u/67428053?s=128&v=4',
+				link: 'https://github.com/kakkokari-gtyih',
+			},
+			{
+				handle: '@tai-cha',
+				avatar: 'https://avatars.githubusercontent.com/u/40626578?s=128&v=4',
+				link: 'https://github.com/tai-cha',
+			},
+			{
+				handle: '@Johann150',
+				avatar: 'https://avatars.githubusercontent.com/u/20990607?s=128&v=4',
+				link: 'https://github.com/Johann150',
+			},
+			{
+				handle: '@anatawa12',
+				avatar: 'https://avatars.githubusercontent.com/u/22656849?s=128&v=4',
+				link: 'https://github.com/anatawa12',
+			},
+			{
+				handle: '@saschanaz',
+				avatar: 'https://avatars.githubusercontent.com/u/3396686?s=128&v=4',
+				link: 'https://github.com/saschanaz',
+			},
+			{
+				handle: '@zyoshoka',
+				avatar: 'https://avatars.githubusercontent.com/u/107108195?s=128&v=4',
+				link: 'https://github.com/zyoshoka',
+			},
+			{
+				handle: '@samunohito',
+				avatar: 'https://avatars.githubusercontent.com/u/46447427?s=128&v=4',
+				link: 'https://github.com/samunohito',
+			},
+		],
+	},
+]);
 const containerEl = shallowRef<HTMLElement>();
 
-await misskeyApi('sponsors', { forceUpdate: false }).then((res) => sponsors.value.push(res.sponsor_data));
+await misskeyApi('sponsors', { forceUpdate: false }).then((res) => {
+	const section: Section = {
+		heading: i18n.ts._aboutMisskey.ourLovelySponsors,
+		people: [],
+	};
+	for (const sponsor of res.sponsor_data) {
+		section.people.push({
+			handle: sponsor.name,
+			avatar: sponsor.image || `https://ui-avatars.com/api/?background=0D8ABC&color=fff&name=${sponsor.name}`,
+			link: sponsor.website || sponsor.profile,
+		});
+	}
+	everyone.value.push(section);
+});
+
+/**
+ * Based on the pseudocode description from Wikipedia:
+ * https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
+ * Modifies the array in-place, but still returns it for the sake of convenience
+ */
+function fisher_yates<T>(array: T[]): T[] {
+	for (let i = array.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[array[i], array[j]] = [array[j], array[i]];
+	}
+	return array;
+}
 
 function iconLoaded() {
 	const emojis = defaultStore.state.reactions;
diff --git a/sharkey-locales/en-US.yml b/sharkey-locales/en-US.yml
index 5813656bf1..827112facc 100644
--- a/sharkey-locales/en-US.yml
+++ b/sharkey-locales/en-US.yml
@@ -241,6 +241,8 @@ _aboutMisskey:
   translation: "Translate Sharkey"
   donate_sharkey: "Donate to Sharkey"
   testers: "Testers"
+  misskeyContributors: "Misskey Contributors"
+  ourLovelySponsors: "Our lovely Sponsors"
 _serverDisconnectedBehavior:
   disabled: "Disable warning"
 _channel: