Skip to content

Commit 58fcbe4

Browse files
author
mirkobrombin
committed
fix: wrong type assumption
1 parent 550ac22 commit 58fcbe4

File tree

1 file changed

+176
-94
lines changed

1 file changed

+176
-94
lines changed

‎src/pages/download.astro‎

Lines changed: 176 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,159 @@
11
---
2-
import Layout from '../layouts/Layout.astro';
3-
import { Icon } from 'astro-icon/components';
2+
import Layout from "../layouts/Layout.astro";
3+
import { Icon } from "astro-icon/components";
44
---
55

66
<Layout title="Get Bottles">
7-
87
<section class="py-20 bg-gray-50 dark:bg-gray-900">
98
<div class="container mx-auto px-4">
10-
<h1 class="text-5xl font-bold mb-4 text-gray-900 dark:text-white">Get Bottles</h1>
11-
<p class="text-lg text-gray-700 dark:text-gray-300">We offer a variety of download options for Bottles.</p>
9+
<h1 class="text-5xl font-bold mb-4 text-gray-900 dark:text-white">
10+
Get Bottles
11+
</h1>
12+
<p class="text-lg text-gray-700 dark:text-gray-300">
13+
We offer a variety of download options for Bottles.
14+
</p>
1215
</div>
1316
</section>
1417

1518
<div class="container mx-auto px-4 mt-8">
1619
<div class="grid md:grid-cols-3 gap-6 mb-8">
17-
{[
18-
{
19-
id: "flatpakLink",
20-
href: "#",
21-
icon: "material-symbols:download",
22-
title: "Flatpak",
23-
description: "The recommended installation method to get the best experience. It's supported by all Linux distributions. Also recommended for Steam Deck users.",
24-
classes: "text-blue-800 dark:text-blue-300 border border-blue-400 dark:border-blue-600"
25-
},
26-
{
27-
href: "#",
28-
icon: "material-symbols:block",
29-
title: "Snap & AppImage",
30-
description: "Currently not available.",
31-
classes: "text-gray-800 dark:text-gray-300"
32-
}
33-
].map(link => (
34-
<a id={link.id} href={link.href} class={`bg-white dark:bg-gray-800 ${link.classes} p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-all relative top-0 hover:-top-1`}>
35-
<Icon name={link.icon} class="w-12 h-12 mb-4 mx-auto" />
36-
<h3 class="text-2xl font-bold mb-2">{link.title}</h3>
37-
<p>{link.description}</p>
38-
</a>
39-
))}
40-
</div>
41-
</div>
42-
43-
<section class="py-20 bg-gray-50 dark:bg-gray-900">
44-
<div class="container mx-auto px-4">
45-
<h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Other versions</h2>
46-
<p class="text-lg text-gray-700 dark:text-gray-300 mb-8">Are you looking for a specific version of Bottles?</p>
47-
48-
<div class="grid md:grid-cols-3 gap-6">
49-
{[
20+
{
21+
[
5022
{
51-
href: "https://github.com/bottlesdevs/Bottles/releases/tag/continuous-v1#",
52-
icon: "material-symbols:history",
53-
title: "Bottles 1 (Legacy)",
54-
description: "The first version of Bottles (Legacy) is still available and maintained. It does not have many features introduced by Bottles 2 but useful for those who need a very simple prefix manager."
23+
id: "flatpakLink",
24+
href: "#",
25+
icon: "material-symbols:download",
26+
title: "Flatpak",
27+
description:
28+
"The recommended installation method to get the best experience. It's supported by all Linux distributions. Also recommended for Steam Deck users.",
29+
classes:
30+
"text-blue-800 dark:text-blue-300 border border-blue-400 dark:border-blue-600",
5531
},
5632
{
57-
href: "https://github.com/bottlesdevs/Bottles",
58-
icon: "material-symbols:code",
59-
title: "Source code",
60-
description: "Bottles source code is under GPLv3 license and is publicly available on GitHub."
33+
href: "#",
34+
icon: "material-symbols:block",
35+
title: "Snap & AppImage",
36+
description: "Currently not available.",
37+
classes: "text-gray-800 dark:text-gray-300",
6138
},
62-
{
63-
href: "https://docs.usebottles.com/getting-started/installation#other-packages",
64-
icon: "material-symbols:group",
65-
title: "Other packages",
66-
description: "There are also other non-officially supported packages maintained by our community."
67-
}
68-
].map(link => (
69-
<a href={link.href} class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-300 p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-all relative top-0 hover:-top-1">
39+
].map((link) => (
40+
<a
41+
id={link.id}
42+
href={link.href}
43+
class={`bg-white dark:bg-gray-800 ${link.classes} p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-all relative top-0 hover:-top-1`}
44+
>
7045
<Icon name={link.icon} class="w-12 h-12 mb-4 mx-auto" />
7146
<h3 class="text-2xl font-bold mb-2">{link.title}</h3>
7247
<p>{link.description}</p>
7348
</a>
74-
))}
49+
))
50+
}
51+
</div>
52+
</div>
53+
54+
<section class="py-20 bg-gray-50 dark:bg-gray-900">
55+
<div class="container mx-auto px-4">
56+
<h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">
57+
Other versions
58+
</h2>
59+
<p class="text-lg text-gray-700 dark:text-gray-300 mb-8">
60+
Are you looking for a specific version of Bottles?
61+
</p>
62+
63+
<div class="grid md:grid-cols-3 gap-6">
64+
{
65+
[
66+
{
67+
href: "https://github.com/bottlesdevs/Bottles/releases/tag/continuous-v1#",
68+
icon: "material-symbols:history",
69+
title: "Bottles 1 (Legacy)",
70+
description:
71+
"The first version of Bottles (Legacy) is still available and maintained. It does not have many features introduced by Bottles 2 but useful for those who need a very simple prefix manager.",
72+
},
73+
{
74+
href: "https://github.com/bottlesdevs/Bottles",
75+
icon: "material-symbols:code",
76+
title: "Source code",
77+
description:
78+
"Bottles source code is under GPLv3 license and is publicly available on GitHub.",
79+
},
80+
{
81+
href: "https://docs.usebottles.com/getting-started/installation#other-packages",
82+
icon: "material-symbols:group",
83+
title: "Other packages",
84+
description:
85+
"There are also other non-officially supported packages maintained by our community.",
86+
},
87+
].map((link) => (
88+
<a
89+
href={link.href}
90+
class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-300 p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-all relative top-0 hover:-top-1"
91+
>
92+
<Icon name={link.icon} class="w-12 h-12 mb-4 mx-auto" />
93+
<h3 class="text-2xl font-bold mb-2">{link.title}</h3>
94+
<p>{link.description}</p>
95+
</a>
96+
))
97+
}
7598
</div>
7699
</div>
77100
</section>
78101

79-
<div id="donateModal" class="fixed flex inset-0 bg-gray-800 bg-opacity-75 items-center justify-center hidden z-20">
80-
<div class="flex flex-col relative justify-center items-center bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg m-5 text-center">
81-
<a href="#" class="absolute top-5 right-5 text-gray-600 dark:text-gray-300 hover:text-gray-400 dark:hover:text-gray-600" onclick="document.getElementById('donateModal').classList.add('hidden')">
82-
<Icon name="material-symbols:close" class="size-6" />
83-
</a>
84-
<h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Donate and download</h2>
102+
<div
103+
id="donateModal"
104+
class="fixed flex inset-0 bg-gray-800 bg-opacity-75 items-center justify-center hidden z-20"
105+
>
106+
<div
107+
class="flex flex-col relative justify-center items-center bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg m-5 text-center"
108+
>
109+
<a
110+
href="#"
111+
class="absolute top-5 right-5 text-gray-600 dark:text-gray-300 hover:text-gray-400 dark:hover:text-gray-600"
112+
onclick="document.getElementById('donateModal').classList.add('hidden')"
113+
>
114+
<Icon name="material-symbols:close" class="size-6" />
115+
</a>
116+
<h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">
117+
Donate and download
118+
</h2>
85119
<div class="flex flex-col gap-5 items-center justify-center">
86-
<p class="text-lg text-gray-700 dark:text-gray-300">Choose the amount you want to donate:</p>
120+
<p class="text-lg text-gray-700 dark:text-gray-300">
121+
Choose the amount you want to donate:
122+
</p>
87123
<div class="flex flex-row gap-3">
88-
{[1, 5].map(amount => (
89-
<button class="py-2 px-7 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" onclick={`setAmount(${amount})`}>${amount}</button>
90-
))}
91-
<input type="number" class="w-48 py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-300 rounded-lg focus:ring focus:outline-none dark:focus:ring-gray-500" id="donation-amount" oninput="checkDonation()" placeholder="Custom amount ($0+)" />
124+
{
125+
[1, 5].map((amount) => (
126+
<button
127+
class="py-2 px-7 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
128+
onclick={`setAmount(${amount})`}
129+
>
130+
${amount}
131+
</button>
132+
))
133+
}
134+
<input
135+
type="number"
136+
class="w-48 py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-300 rounded-lg focus:ring focus:outline-none dark:focus:ring-gray-500"
137+
id="donation-amount"
138+
oninput="checkDonation()"
139+
placeholder="Custom amount ($0+)"
140+
/>
92141
</div>
93142
</div>
94-
<form id="donationForm" action="https://www.paypal.com/donate" method="post" target="_blank" onsubmit="setDonationCookie()">
95-
<input type="hidden" name="business" value="[email protected]">
96-
<input type="hidden" id="paypalAmount" name="amount" value="">
97-
<button type="submit" id="donateButton" class="flex flex-row justify-center items-center py-2 px-7 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors mt-6">
143+
<form
144+
id="donationForm"
145+
action="https://www.paypal.com/donate"
146+
method="post"
147+
target="_blank"
148+
onsubmit="setDonationCookie()"
149+
>
150+
<input type="hidden" name="business" value="[email protected]" />
151+
<input type="hidden" id="paypalAmount" name="amount" value="" />
152+
<button
153+
type="submit"
154+
id="donateButton"
155+
class="flex flex-row justify-center items-center py-2 px-7 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors mt-6"
156+
>
98157
<Icon name="material-symbols:favorite" class="w-5 h-5 mr-1" />
99158
<span id="donateText">Donate and download</span>
100159
</button>
@@ -105,21 +164,30 @@ import { Icon } from 'astro-icon/components';
105164
<script>
106165
function updateElements(amount: number | string) {
107166
const elements = {
108-
donationAmount: document.getElementById('donation-amount'),
109-
donateText: document.getElementById('donateText'),
110-
donateButton: document.getElementById('donateButton'),
111-
paypalAmount: document.getElementById('paypalAmount'),
112-
donationForm: document.getElementById('donationForm')
167+
donationAmount: document.getElementById("donation-amount"),
168+
donateText: document.getElementById("donateText"),
169+
donateButton: document.getElementById("donateButton"),
170+
paypalAmount: document.getElementById("paypalAmount"),
171+
donationForm: document.getElementById(
172+
"donationForm"
173+
) as HTMLFormElement | null,
113174
};
114-
if (elements.donationAmount && elements.donateText && elements.donateButton && elements.paypalAmount && elements.donationForm) {
175+
if (
176+
elements.donationAmount &&
177+
elements.donateText &&
178+
elements.donateButton &&
179+
elements.paypalAmount &&
180+
elements.donationForm
181+
) {
115182
(elements.donationAmount as HTMLInputElement).value = amount.toString();
116183
(elements.paypalAmount as HTMLInputElement).value = amount.toString();
117184
if (parseFloat(amount.toString()) == 0) {
118-
elements.donateText.textContent = 'Free Download';
119-
elements.donationForm.action = "https://flathub.org/apps/details/com.usebottles.bottles";
185+
elements.donateText.textContent = "Free Download";
186+
elements.donationForm.action =
187+
"https://flathub.org/apps/details/com.usebottles.bottles";
120188
elements.donationForm.target = "_self";
121189
} else {
122-
elements.donateText.textContent = 'Donate and download';
190+
elements.donateText.textContent = "Donate and download";
123191
elements.donationForm.action = "https://www.paypal.com/donate";
124192
elements.donationForm.target = "_blank";
125193
}
@@ -132,16 +200,18 @@ import { Icon } from 'astro-icon/components';
132200
}
133201

134202
function checkDonation() {
135-
const donationAmount = (document.getElementById('donation-amount') as HTMLInputElement)?.value;
203+
const donationAmount = (
204+
document.getElementById("donation-amount") as HTMLInputElement
205+
)?.value;
136206
if (parseFloat(donationAmount) < 0) {
137207
updateElements(0);
138-
} else if (donationAmount === '') {
208+
} else if (donationAmount === "") {
139209
const elements = {
140-
donateText: document.getElementById('donateText'),
141-
donateButton: document.getElementById('donateButton')
210+
donateText: document.getElementById("donateText"),
211+
donateButton: document.getElementById("donateButton"),
142212
};
143213
if (elements.donateText) {
144-
elements.donateText.textContent = 'Please choose an option';
214+
elements.donateText.textContent = "Please choose an option";
145215
}
146216
(elements.donateButton as HTMLButtonElement).disabled = true;
147217
} else {
@@ -150,26 +220,38 @@ import { Icon } from 'astro-icon/components';
150220
}
151221

152222
function setDonationCookie() {
153-
const donationAmount = (document.getElementById('donation-amount') as HTMLInputElement)?.value;
223+
const donationAmount = (
224+
document.getElementById("donation-amount") as HTMLInputElement
225+
)?.value;
154226
if (donationAmount && parseFloat(donationAmount) > 0) {
155227
const date = new Date();
156-
date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
157-
document.cookie = "hasDonated=true; expires=" + date.toUTCString() + "; path=/";
228+
date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
229+
document.cookie =
230+
"hasDonated=true; expires=" + date.toUTCString() + "; path=/";
158231
}
159232
if (parseFloat(donationAmount) === 0) {
160-
window.location.href = "https://flathub.org/apps/details/com.usebottles.bottles";
233+
window.location.href =
234+
"https://flathub.org/apps/details/com.usebottles.bottles";
161235
}
162236
}
163237

164-
const hasDonated = document.cookie.split(';').some(item => item.trim().startsWith('hasDonated='));
238+
const hasDonated = document.cookie
239+
.split(";")
240+
.some((item) => item.trim().startsWith("hasDonated="));
165241

166-
window.addEventListener('load', () => {
167-
const flatpakLink = document.getElementById('flatpakLink') as HTMLAnchorElement | null;
242+
window.addEventListener("load", () => {
243+
const flatpakLink = document.getElementById(
244+
"flatpakLink"
245+
) as HTMLAnchorElement | null;
168246
if (hasDonated && flatpakLink) {
169-
flatpakLink.href = "https://flathub.org/apps/details/com.usebottles.bottles";
170-
flatpakLink.removeAttribute('onclick');
247+
flatpakLink.href =
248+
"https://flathub.org/apps/details/com.usebottles.bottles";
249+
flatpakLink.removeAttribute("onclick");
171250
} else {
172-
flatpakLink?.setAttribute('onclick', "const donateModal = document.getElementById('donateModal'); if (donateModal) { donateModal.classList.remove('hidden'); }");
251+
flatpakLink?.setAttribute(
252+
"onclick",
253+
"const donateModal = document.getElementById('donateModal'); if (donateModal) { donateModal.classList.remove('hidden'); }"
254+
);
173255
}
174256
(window as any).setAmount = setAmount;
175257
(window as any).checkDonation = checkDonation;

0 commit comments

Comments
 (0)