The code and data behind xeiaso.net
feat: add donate page
Signed-off-by: Xe Iaso <me@xeiaso.net>
+108
-5
+5
-5
lume/src/_includes/base.njk
+5
-5
lume/src/_includes/base.njk
···
103
103
</a>
104
104
</div>
105
105
<div class="flex items-center flex-shrink-0 mr-6">
106
+
<a href="/donate/" class="text-fg-1 dark:text-fgDark-1">
107
+
<span class="text-xl font-aile tracking-tight">Donate</span>
108
+
</a>
109
+
</div>
110
+
<div class="flex items-center flex-shrink-0 mr-6">
106
111
<a href="/resume/" class="text-fg-1 dark:text-fgDark-1">
107
112
<span class="text-xl font-aile tracking-tight">Resume</span>
108
113
</a>
···
110
115
<div class="flex items-center flex-shrink-0 mr-6">
111
116
<a href="/talks/" class="text-fg-1 dark:text-fgDark-1">
112
117
<span class="text-xl font-aile tracking-tight">Talks</span>
113
-
</a>
114
-
</div>
115
-
<div class="flex items-center flex-shrink-0 mr-6">
116
-
<a href="/xecast/" class="text-fg-1 dark:text-fgDark-1">
117
-
<span class="text-xl font-aile tracking-tight">Xecast</span>
118
118
</a>
119
119
</div>
120
120
<div class="mx-auto"></div>
+103
lume/src/donate.jsx
+103
lume/src/donate.jsx
···
1
+
export const title = "Donate";
2
+
export const layout = "base.njk";
3
+
4
+
const GitHubIcon = () => (
5
+
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="icon icon-tabler icons-tabler-outline icon-tabler-brand-github"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
6
+
);
7
+
8
+
const PatreonIcon = () => (
9
+
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="icon icon-tabler icons-tabler-outline icon-tabler-brand-patreon"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M20 8.408c-.003 -2.299 -1.746 -4.182 -3.79 -4.862c-2.54 -.844 -5.888 -.722 -8.312 .453c-2.939 1.425 -3.862 4.545 -3.896 7.656c-.028 2.559 .22 9.297 3.92 9.345c2.75 .036 3.159 -3.603 4.43 -5.356c.906 -1.247 2.071 -1.599 3.506 -1.963c2.465 -.627 4.146 -2.626 4.142 -5.273z" /></svg>
10
+
);
11
+
12
+
const CashIcon = () => (
13
+
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="icon icon-tabler icons-tabler-outline icon-tabler-cash"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M7 15h-3a1 1 0 0 1 -1 -1v-8a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v3" /><path d="M7 9m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z" /><path d="M12 14a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /></svg>
14
+
);
15
+
16
+
const DonationCard = ({ icon, backgroundImageUrl, name, link, accentColor }) => {
17
+
return (
18
+
// The main container is now only responsible for positioning, background, and animations.
19
+
<div className="relative bg-gray-800 rounded-xl shadow-lg transform hover:scale-105 transition-transform duration-300 overflow-hidden motion-reduce:transform-none motion-reduce:transition-none">
20
+
{/* Blurred Background Image */}
21
+
<img
22
+
src={backgroundImageUrl}
23
+
alt="" // This is a decorative image, so the alt text is empty.
24
+
className="absolute inset-0 w-full h-full object-cover filter blur-md opacity-20 z-0"
25
+
onError={(e) => { e.target.style.display = 'none'; }}
26
+
/>
27
+
28
+
{/* Card Content Wrapper */}
29
+
{/* This new wrapper handles the content layout (padding, flexbox) and sits on top of the background. */}
30
+
<div className="relative z-10 flex flex-col items-center text-center justify-center p-8 h-full">
31
+
<h3 className="text-2xl font-bold text-white mb-4">{name}</h3>
32
+
{/* This div sets the size and color for the SVG icon. */}
33
+
<div className="w-16 h-16 text-white mb-4 flex-shrink-0">
34
+
{icon}
35
+
</div>
36
+
<a
37
+
href={link}
38
+
target="_blank"
39
+
rel="noopener noreferrer"
40
+
className="text-white font-semibold py-3 px-8 rounded-lg transition-opacity duration-300 hover:opacity-80 motion-reduce:transition-none"
41
+
style={{ backgroundColor: accentColor }}
42
+
>
43
+
Donate
44
+
</a>
45
+
</div>
46
+
</div>
47
+
);
48
+
};
49
+
50
+
export default () => {
51
+
const donationOptions = [
52
+
{
53
+
id: 1,
54
+
name: 'GitHub Sponsors',
55
+
icon: <GitHubIcon />,
56
+
backgroundImageUrl: 'https://files.xeiaso.net/hero/summer-walk.avif',
57
+
link: 'https://github.com/sponsors/Xe',
58
+
accentColor: '#635BFF',
59
+
},
60
+
{
61
+
id: 2,
62
+
name: "Liberapay",
63
+
icon: <CashIcon />,
64
+
backgroundImageUrl: 'https://files.xeiaso.net/hero/skrunkly-cherries.avif',
65
+
link: 'https://liberapay.com/Xe/',
66
+
accentColor: '#0070BA',
67
+
},
68
+
{
69
+
id: 3,
70
+
name: 'Patreon',
71
+
icon: <PatreonIcon />,
72
+
backgroundImageUrl: 'https://files.xeiaso.net/hero/airplane-side-sunset.avif',
73
+
link: 'https://www.patreon.com/cadey',
74
+
accentColor: '#6772E5',
75
+
},
76
+
];
77
+
78
+
return (
79
+
<>
80
+
<h1 className="text-3xl mb-4">Donate</h1>
81
+
<p className="mb-4">
82
+
Want to help me make things better? Your contribution helps me continue my work. Choose your preferred way to donate below.
83
+
</p>
84
+
85
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-4">
86
+
{donationOptions.map((option) => (
87
+
<DonationCard
88
+
key={option.id}
89
+
icon={option.icon}
90
+
backgroundImageUrl={option.backgroundImageUrl}
91
+
name={option.name}
92
+
link={option.link}
93
+
accentColor={option.accentColor}
94
+
/>
95
+
))}
96
+
</div>
97
+
98
+
<p className="mb-4">
99
+
More options will be added in the future as facts and circumstances demand.
100
+
</p>
101
+
</>
102
+
);
103
+
};