From 3180e25696fcb5dfbf05b6f812122bfbe374cd4b Mon Sep 17 00:00:00 2001 From: mirkobrombin Date: Mon, 16 Dec 2024 14:08:41 +0100 Subject: [PATCH] chore: code improvements --- src/pages/funding.astro | 861 +++++++++++++++++----------------------- 1 file changed, 374 insertions(+), 487 deletions(-) diff --git a/src/pages/funding.astro b/src/pages/funding.astro index f8d2759..7d75ce4 100644 --- a/src/pages/funding.astro +++ b/src/pages/funding.astro @@ -1,6 +1,210 @@ --- import Layout from "../layouts/Layout.astro"; import { Icon } from "astro-icon/components"; + +interface DonationMethod { + name: string; + bgClass: string; + titleColorClass?: string; + recurring?: boolean; + oneTime?: boolean; + preferred?: boolean; + flexible?: boolean; + crypto?: boolean; + badgeText?: string; + badgeColorClass?: string; + linkText: string; + linkUrl: string; + oldLinkText?: string; + oldLinkUrl?: string; + extraBadgeText?: string; + extraBadgeColorClass?: string; + extraBadgeText2?: string; + extraBadgeColorClass2?: string; + icon: string; +} + +interface Task { + status: string; + statusColorClass: string; + title: string; + description: string; + progress: number; + link: string; + extras?: string[]; + icons?: { name: string; title: string }[]; + infoText?: string; +} + +interface Sponsor { + username: string; + avatar: string; +} + +interface PeopleList { + github: Sponsor[]; + other: string[]; +} + +const donationMethods: DonationMethod[] = [ + { + name: "GitHub Sponsors", + bgClass: "bg-blue-900 text-white", + recurring: true, + linkText: "Sponsor via GitHub", + linkUrl: "https://github.com/sponsors/bottlesdevs", + icon: "material-symbols:favorite-outline", + }, + { + name: "PayPal", + bgClass: "bg-blue-500 dark:bg-blue-700 text-white", + recurring: true, + oneTime: true, + preferred: true, + linkText: "Donate via PayPal", + linkUrl: "https://www.paypal.com/donate?hosted_button_id=HM2VKUH5STU4J", + oldLinkText: "Old PayPal Method", + oldLinkUrl: "https://paypal.me/MirkoBrombin", + icon: "material-symbols:credit-card-outline", + }, + { + name: "LiberaPay", + bgClass: "bg-yellow-400 dark:bg-yellow-500 text-gray-900", + flexible: true, + linkText: "Donate via LiberaPay", + linkUrl: "https://liberapay.com/bottles", + icon: "material-symbols:volunteer-activism-outline", + }, + { + name: "Patreon", + bgClass: "bg-red-500 text-white", + recurring: true, + linkText: "Support via Patreon", + linkUrl: "https://www.patreon.com/MirkoBrombin", + icon: "material-symbols:favorite-outline", + }, + { + name: "Cryptocurrency", + bgClass: "bg-purple-500 dark:bg-purple-700 text-white", + crypto: true, + linkText: "View Addresses", + linkUrl: "#", + icon: "material-symbols:currency-bitcoin", + }, +]; + +const tasks: Task[] = [ + { + status: "DONE", + statusColorClass: "bg-green-500", + title: "Library mode", + description: + "Allow users to add any program from any bottle in a library view for easy access.", + progress: 100, + link: "https://usebottles.com/posts/2022-08-28-release-2022.8.28", + }, + { + status: "ALPHA", + statusColorClass: "bg-yellow-500", + title: "Per-bottle sandbox", + description: + "Experimental feature for wrapping each bottle with a sandbox to limit permissions.", + progress: 80, + link: "https://github.com/bottlesdevs/Bottles/issues/1158", + icons: [ + { name: "material-symbols:build-circle", title: "In progress" }, + { name: "material-symbols:help-outline", title: "Needs funding" }, + ], + infoText: "Estimated time: 1 week of work based on average hourly cost.", + }, + { + status: "REJECTED", + statusColorClass: "bg-red-500", + title: "Layered bottles", + description: + "Our solution for multiple environments in one bottle. Planned for Bottles Next. Please refer to the Bottles Next task for more details.", + progress: 0, + link: "https://github.com/bottlesdevs/Bottles/issues/510", + infoText: + "This feature is planned for Bottles Next. Read the Bottles Next task for more information.", + }, + { + status: "WIP", + statusColorClass: "bg-blue-500", + title: "Integration of UMU", + description: + "Integration of UMU to enhance the gaming compatibility in Bottles.", + progress: 10, + link: "https://usebottles.com/posts/2024-09-24-umu-next/", + icons: [ + { name: "material-symbols:build-circle", title: "In progress" }, + { name: "material-symbols:help-outline", title: "Needs funding" }, + ], + infoText: "Estimated time: 4 weeks of work based on average hourly cost.", + }, + { + status: "NEXT", + statusColorClass: "bg-purple-500", + title: "Bottles Next", + description: `A complete redesign of Bottles to overcome current limitations and provide a consistent user experience across Linux and macOS. We need funds, contributors, and companies to provide infrastructure support. + +Additionally, we are experimenting with two technologies developed by the same developer of Bottles to determine the best candidate for Bottles Next: +`, + progress: 10, + link: "https://usebottles.com/posts/2023-10-05-bottles-next-a-new-chapter/", + icons: [ + { name: "material-symbols:build-circle", title: "In progress" }, + { name: "material-symbols:help-outline", title: "Needs funding" }, + ], + infoText: + "We are looking for funds, contributors, and companies to provide infrastructure support.", + }, +]; + +const filterButtons = [ + { status: "WIP", text: "WIP" }, + { status: "DONE", text: "Done" }, + { status: "ALPHA", text: "Alpha" }, + { status: "NEXT", text: "Next" }, + { status: "REJECTED", text: "Rejected" }, +]; + +const legendIcons = [ + { + name: "material-symbols:build-circle", + text: "Work in progress", + title: "In progress", + }, + { + name: "material-symbols:help-outline", + text: "Needs funding", + title: "Needs funding", + }, + { + name: "material-symbols:info-outline", + text: "More information", + title: "More information", + }, +]; + +const people: PeopleList = { + github: [], + other: [ + "Christopher (kit) Eubanks", + "Black_file", + "Chris", + "Robin Lee", + "Andrew Ego", + "Sonny Piers", + "Dan G", + "Caleb Woodbine", + "Robert Krisztian Sandor", + "+ All the anonymous donations", + ], +}; --- @@ -42,87 +246,74 @@ import { Icon } from "astro-icon/components"; Here are the official channels from which you can donate to Bottles Developers.

+
+ { + donationMethods.map((method) => ( +
+ +

{method.name}

-
-
- -

GitHub Sponsors

- Recurring - Sponsor via GitHub -
-
- -

PayPal

- One-Time / Recurring - Preferred Method - Donate via PayPal - Old PayPal Method -
-
- -

LiberaPay

- Flexible Subscription - Donate via LiberaPay -
-
- -

Cryptocurrency

- Bitcoin, Ethereum, and more - View Addresses -
+ {method.recurring && method.oneTime ? ( + + One-Time / Recurring + + ) : method.recurring ? ( + + Recurring + + ) : method.oneTime ? ( + + One-Time + + ) : ( + "" + )} + + {method.preferred ? ( + + Preferred Method + + ) : ( + "" + )} + {method.flexible ? ( + + Flexible Subscription + + ) : ( + "" + )} + {method.crypto ? ( + + Bitcoin, Ethereum, and more + + ) : ( + "" + )} + + + {method.linkText} + + {method.oldLinkText ? ( + + {method.oldLinkText} + + ) : ( + "" + )} +
+ )) + }
-
-

Bitcoin (BTC)

- Network: BTC(SegWit)à + Network: BTC(SegWit)

-
-

Litecoin (LTC)

Network: LTC

@@ -179,9 +366,7 @@ import { Icon } from "astro-icon/components"; LWqpd2411CQTuWD15bcPP7bfAw3wmYHScm
-
-

Ripple (XRP)

Network: XRP

@@ -200,29 +385,12 @@ import { Icon } from "astro-icon/components"; + Close +
-
- -

Patreon

- Recurring - Donate via Patreon -
- - - - - + { + filterButtons.map((btn) => ( + + )) + }
Reset Filters - Reset Filters -
-
- - Work in progress -
-
- - Needs funding -
-
- - More information -
+ { + legendIcons.map((icon) => ( +
+ + + {icon.text} + +
+ )) + }

-
-
- [DONE] ( +
-

Library mode

-

- Allow users to add any program from any bottle in a library view - for easy access. -

-
- +
- -
-
-
- - - README - -
-
-
-
- [ALPHA] -

Per-bottle sandbox

-
- - -
-

- Experimental feature for wrapping each bottle with a sandbox to - limit permissions. -

-
- - - - -
-
-
- - - README - -
-
-
-
- [REJECTED] -

Layered bottles

-

- Our solution for multiple environments in one bottle. Planned - for Bottles Next. Please refer to the Bottles Next task for more - details. -

-
- - - - -
-
-
- - - README - -
-
-
-
- [WIP] -

Integration of UMU

-
- - -
-

- Integration of UMU to enhance the gaming compatibility in - Bottles. -

-
- - - - -
-
-
- - - README - -
-
-
-
- [NEXT] -

Bottles Next

-
- - -
-

- A complete redesign of Bottles to overcome current limitations - and provide a consistent user experience across Linux and macOS. - We need funds, contributors, and companies to provide - infrastructure support. -

- Additionally, we are experimenting with two technologies developed - by the same developer of Bottles to determine the best candidate - for Bottles Next: -

-

-
- - - - + class={`${task.statusColorClass} text-white px-2 py-1 rounded-full text-sm inline-block mb-4`} + > + [{task.status}] + +

{task.title}

+ {task.icons ? ( +
+ {task.icons.map((ic) => ( + + ))} +
+ ) : ( + "" + )} +

+

+ + + + {task.infoText ? ( + + ) : ( + "" + )} +
+
+
+ + + README + +
-
-
- - - README - -
-
+ )) + }
@@ -593,17 +518,11 @@ import { Icon } from "astro-icon/components";

Thanks to them who made a donation or became our GitHub sponsor ❤️!

-
- -
- +

Other platforms

-
- -
- +

- Thanks from the Bottles Developers.

@@ -662,29 +581,24 @@ import { Icon } from "astro-icon/components"; username: string; avatar: string; } - interface PeopleList { github: Sponsor[]; other: string[]; } - class Donations { domSelector: string; list: PeopleList; - constructor(domSelector: string, list: PeopleList) { this.domSelector = domSelector; this.list = list; this.renderPeople(); } - async renderPeople(): Promise { const githubPeople = await this.getGitHubSponsors(); const otherPeople = this.list.other; this.addSection("#github", githubPeople, true); this.addSection("#other", otherPeople); } - addSection( sectionDOM: string, personList: Sponsor[] | string[], @@ -706,22 +620,16 @@ import { Icon } from "astro-icon/components"; .querySelector(sectionDOM) ?.insertAdjacentHTML("beforeend", sectionHtml); } - getPersonMarkup( person: string, hasPic: boolean, avatarUrl: string = "" ): string { return `
- ${ - hasPic - ? `${person}` - : "" - } + ${hasPic ? `${person}` : ""} ${person}
`; } - async getGitHubSponsors(): Promise { try { const response = await fetch( @@ -736,13 +644,11 @@ import { Icon } from "astro-icon/components"; avatar: sponsor.avatar, })); return allSponsors; - } catch (error) { - console.error("Error fetching GitHub sponsors:", error); + } catch { return []; } } } - const people: PeopleList = { github: [], other: [ @@ -758,85 +664,71 @@ import { Icon } from "astro-icon/components"; "+ All the anonymous donations", ], }; - document.addEventListener("DOMContentLoaded", () => { new Donations("#people", people); - const urlParams = new URLSearchParams(window.location.search); if (urlParams.has("thankyou")) { document.getElementById("donationModal")?.classList.remove("hidden"); } - document.getElementById("closeModal")?.addEventListener("click", () => { document.getElementById("donationModal")?.classList.add("hidden"); }); - document .getElementById("closeCryptoModal") ?.addEventListener("click", () => { document.getElementById("cryptoModal")?.classList.add("hidden"); }); - document .getElementById("closeInfoModal") ?.addEventListener("click", () => { document.getElementById("infoModal")?.classList.add("hidden"); }); - const filterButtons = document.querySelectorAll(".filter-button"); - const searchInput = document.getElementById("searchInput"); + const searchInput = document.getElementById( + "searchInput" + ) as HTMLInputElement; const resetButton = document.getElementById("resetButton"); const taskCards = document.querySelectorAll(".task-card"); - let currentStatusFilter = ""; let currentSearchQuery = ""; - function updateTasksDisplay() { taskCards.forEach((card) => { - const cardStatus = card.getAttribute("data-status"); - // @ts-ignore - const title = card.getAttribute("data-title").toLowerCase(); - // @ts-ignore - const description = card.querySelector("p").textContent.toLowerCase(); + const c = card as HTMLElement; + const cardStatus = c.getAttribute("data-status") || ""; + const title = (c.getAttribute("data-title") || "").toLowerCase(); + const description = ( + c.querySelector("p")?.textContent || "" + ).toLowerCase(); let matchesStatus = true; let matchesSearch = true; - if (currentStatusFilter !== "") { matchesStatus = cardStatus === currentStatusFilter; } - if (currentSearchQuery !== "") { matchesSearch = title.includes(currentSearchQuery) || description.includes(currentSearchQuery); } - - if (matchesStatus && matchesSearch) { - // @ts-ignore - card.style.display = ""; - } else { - // @ts-ignore - card.style.display = "none"; - } + c.style.display = matchesStatus && matchesSearch ? "" : "none"; }); } - filterButtons.forEach((button) => { button.addEventListener("click", () => { - const status = button.getAttribute("data-status"); - // @ts-ignore + const b = button as HTMLElement; + const status = b.getAttribute("data-status") || ""; currentStatusFilter = status; filterButtons.forEach((btn) => { - btn.classList.remove("active", "bg-blue-500", "text-white"); - btn.classList.add( + const bb = btn as HTMLElement; + bb.classList.remove("active", "bg-blue-500", "text-white"); + bb.classList.add( "bg-gray-200", "dark:bg-gray-700", "text-black", "dark:text-white" ); }); - button.classList.add("active", "bg-blue-500", "text-white"); - button.classList.remove( + b.classList.add("active", "bg-blue-500", "text-white"); + b.classList.remove( "bg-gray-200", "dark:bg-gray-700", "text-black", @@ -845,23 +737,18 @@ import { Icon } from "astro-icon/components"; updateTasksDisplay(); }); }); - - // @ts-ignore searchInput.addEventListener("input", () => { - // @ts-ignore currentSearchQuery = searchInput.value.toLowerCase(); updateTasksDisplay(); }); - - // @ts-ignore - resetButton.addEventListener("click", () => { + resetButton?.addEventListener("click", () => { currentStatusFilter = ""; currentSearchQuery = ""; - // @ts-ignore searchInput.value = ""; filterButtons.forEach((btn) => { - btn.classList.remove("active", "bg-blue-500", "text-white"); - btn.classList.add( + const bb = btn as HTMLElement; + bb.classList.remove("active", "bg-blue-500", "text-white"); + bb.classList.add( "bg-gray-200", "dark:bg-gray-700", "text-black",