cf: fix api issue w/ pages builds

app/api/now-playing/route.ts

@@ -1,5 +1,7 @@
 import { NextResponse } from 'next/server'
 
+export const runtime = 'edge';
+
 export async function GET() {
   try {
     const response = await fetch("https://api.listenbrainz.org/1/user/p0ntus/playing-now", {

app/page.tsx

@@ -6,8 +6,10 @@ import Button from '@/components/objects/Button'
 import Link from '@/components/objects/Link'
 import LastPlayed from '@/components/widgets/LastPlayed'
 import Image from 'next/image'
-import { Mail } from 'lucide-react'
+import { CreditCard, Mail, PillBottle, Scale } from 'lucide-react'
+import { FaHandcuffs } from "react-icons/fa6"
 import { useTranslation } from 'react-i18next'
+import { SiGithubsponsors } from 'react-icons/si'
 
 export default function Home() {
   const { t } = useTranslation()
@@ -27,9 +29,8 @@ export default function Home() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="grow container mx-auto px-4 py-12">
+      <main className="w-full">
-        <div className="max-w-2xl mx-auto">
+        <div className="my-12 text-center">
-          <div className="mb-12 text-center">
           <Image
             src="/ihatenodejs.jpg"
             alt="My Profile Picture"
@@ -41,10 +42,13 @@ export default function Home() {
           <p className="text-gray-400 text-xl">{t('home.profile.description')}</p>
         </div>
 
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
+          <div className="p-8 border-2 border-gray-700 rounded-lg">
             <LastPlayed />
+          </div>
 
           {mainSections.map((section, secIndex) => (
-            <section key={secIndex} id="about" className="mb-12">
+            <section key={secIndex} className="p-8 border-2 border-gray-700 rounded-lg">
               <h2 className="text-2xl font-semibold mb-4 text-gray-200">{section}</h2>
               {mainStrings[secIndex].map((text: string, index: number) => (
                 <p key={index} className="text-gray-300 leading-relaxed mt-2">
@@ -62,7 +66,7 @@ export default function Home() {
             </section>
           ))}
 
-          <section id="contact">
+          <section id="contact" className="p-8 border-2 border-gray-700 rounded-lg">
             <h2 className="text-2xl font-semibold mb-4 text-gray-200">{t('home.contact.title')}</h2>
             <p className="text-gray-300 mb-6">{t('home.contact.description')}</p>
             <Button
@@ -71,6 +75,49 @@ export default function Home() {
               icon={Mail}
             />
           </section>
+
+          <section id="donation" className="p-8 border-2 border-gray-700 rounded-lg">
+            <h2 className="text-2xl font-semibold mb-4 text-gray-200">{t('home.donation.title')}</h2>
+            <p className="text-gray-300 mb-6">{t('home.donation.description')}</p>
+            
+            <h4 className="text-lg font-semibold mb-2 text-gray-200">{t('home.donation.charities.title')}</h4>
+            <div className="grid grid-cols-1 md:grid-cols-2 md:text-sm gap-3">
+              <Button
+                href={'https://unsilenced.org'}
+                label={t('home.donation.charities.unsilenced')}
+                icon={FaHandcuffs}
+                target="_blank"
+              />
+              <Button
+                href={'https://drugpolicy.org'}
+                label={t('home.donation.charities.drugpolicy')}
+                icon={PillBottle}
+                target="_blank"
+              />
+              <Button
+                href={'https://www.aclu.org'}
+                label={t('home.donation.charities.aclu')}
+                icon={Scale}
+                target="_blank"
+              />
+            </div>
+
+            <h4 className="text-lg font-semibold mt-5 mb-2 text-gray-200">{t('home.donation.donate.title')}</h4>
+            <div className="grid grid-cols-1 md:grid-cols-2 md:text-sm gap-3">
+              <Button
+                href={'https://donate.stripe.com/6oEeWVcXs9L9ctW4gj'}
+                label={t('home.donation.donate.stripe')}
+                icon={CreditCard}
+                target="_blank"
+              />
+              <Button
+                href={'https://github.com/sponsors/ihatenodejs'}
+                label={t('home.donation.donate.github')}
+                icon={SiGithubsponsors}
+                target="_blank"
+              />
+            </div>
+          </section>
         </div>
       </main>
       <Footer />

components/objects/Button.tsx

@@ -5,13 +5,15 @@ interface ButtonProps {
   href: string;
   label: string;
   icon?: React.ElementType;
+  target?: string;
 }
 
-const Button: React.FC<ButtonProps> = ({ href, label, icon }) => {
+const Button: React.FC<ButtonProps> = ({ href, label, icon, target }) => {
   return (
     <Link
       href={href}
       className="inline-flex items-center bg-gray-800 text-white font-bold py-2 px-4 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      target={target}
     >
       {icon && React.createElement(icon, { size: 20, className: "mr-2" })}
       {label}

components/widgets/LastPlayed.tsx

@@ -141,7 +141,7 @@ const NowPlaying: React.FC = () => {
   if (loading) {
     console.log("[LastPlayed] Loading state rendered")
     return (
-      <div className="max-w-md mx-auto mb-12">
+      <div className="mb-12">
         <h2 className="text-2xl font-bold mb-4 text-gray-200">Now Playing</h2>
         <Progress value={steps > 0 ? (progress * 100) / steps : 0} className="mb-4" />
         <div className="flex items-center justify-center space-x-2">
@@ -157,7 +157,7 @@ const NowPlaying: React.FC = () => {
   if (error) {
     console.log("[LastPlayed] Error state rendered")
     return (
-      <div className="max-w-md mx-auto mb-12">
+      <div className="mb-12">
         <h2 className="text-2xl font-bold mb-4 text-gray-200">Now Playing</h2>
         <div className="flex items-center justify-center text-red-500">
           <AlertCircle className="text-red-500 mr-2" size={24} />
@@ -174,11 +174,11 @@ const NowPlaying: React.FC = () => {
 
   console.log("[LastPlayed] Rendered track:", track.track_name)
   return (
-    <div className="max-w-md mx-auto mb-12">
+    <div className="mb-12">
       <h2 className="text-2xl font-bold mb-4 text-gray-200">Now Playing</h2>
-      <div className="now-playing flex items-center border border-gray-300 rounded-lg p-4 bg-white/10 backdrop-filter backdrop-blur-lg shadow-lg">
+      <div className="now-playing flex items-center">
         {coverArt ? (
-          <div className="relative w-24 h-24 rounded-lg mr-4 flex-shrink-0">
+          <div className="relative w-26 h-26 md:w-40 md:h-40 rounded-lg mr-4 flex-shrink-0">
             <Image
               src={coverArt || ""}
               alt={track.track_name}
@@ -189,7 +189,7 @@ const NowPlaying: React.FC = () => {
             />
           </div>
         ) : (
-          <div className="w-24 h-24 bg-gray-200 rounded-lg mr-4 flex items-center justify-center flex-shrink-0">
+          <div className="w-26 h-26 md:w-40 md:h-40 bg-gray-200 rounded-lg mr-4 flex items-center justify-center flex-shrink-0">
             <Music size={48} className="text-gray-400" />
           </div>
         )}

package.json

@@ -13,33 +13,36 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "geist": "^1.3.1",
     "i18next": "^24.2.3",
-    "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-browser-languagedetector": "^8.0.5",
     "lucide-react": "^0.485.0",
-    "next": "^15.2.4",
+    "next": "^15.3.1",
-    "react": "^19.0.0",
+    "react": "^19.1.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.1.0",
     "react-fast-marquee": "^1.6.5",
-    "react-i18next": "^15.4.1",
+    "react-i18next": "^15.5.1",
     "react-icons": "^5.5.0",
-    "tailwind-merge": "^3.0.2",
+    "tailwind-merge": "^3.2.0",
     "tailwindcss-animate": "^1.0.7",
-    "tw-animate-css": "^1.2.5"
+    "tw-animate-css": "^1.2.8"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
-    "@tailwindcss/postcss": "^4.0.17",
+    "@tailwindcss/postcss": "^4.1.4",
-    "@types/node": "^20.17.28",
+    "@types/node": "^20.17.30",
-    "@types/react": "^19.0.12",
+    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.0.4",
+    "@types/react-dom": "^19.1.2",
-    "eslint": "^9.23.0",
+    "eslint": "^9.25.1",
     "eslint-config-next": "15.1.3",
     "postcss": "^8.5.3",
-    "tailwindcss": "^4.0.17",
+    "tailwindcss": "^4.1.4",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.3"
-  }
+  },
+  "trustedDependencies": [
+    "unrs-resolver"
+  ]
 }

public/locales/en-US.json

@@ -25,6 +25,22 @@
       "description": "Feel free to reach out for collaborations or just a hello :)",
       "button": "Contact Me"
     },
+    "donation": {
+      "title": "Support my work",
+      "description": "Feeling generous? Support me or one of the causes I support!",
+      "charities": {
+        "title": "Charities",
+        "description": "I support the following charities:",
+        "unsilenced": "Unsilenced",
+        "drugpolicy": "Drug Policy Alliance",
+        "aclu": "ACLU"
+      },
+      "donate": {
+        "title": "Donate to Me",
+        "stripe": "Stripe",
+        "github": "GitHub Sponsors"
+      }
+    },
     "profile": {
       "name": "Aidan",
       "description": "SysAdmin, Developer, and Student"