The code and data behind xeiaso.net
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add donate page

Signed-off-by: Xe Iaso <me@xeiaso.net>

Xe Iaso 9ae6cd18 9f3122a4

+108 -5
+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
··· 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 + };