refactor/feat: ipod nano 7g-style now playing component, discontinue fontawesome, content updates

- redesign NowPlaying widget with iPod Nano 7th generation-inspired UI - content updates (home, about) - general code cleanup - bump deps, clean up - update README for self hosting - remove old workflows
2025-08-02 02:39:24 -04:00 · 2025-08-02 02:39:24 -04:00 · d613b58dd6
commit d613b58dd6
parent db86ce3277
17 changed files with 466 additions and 460 deletions
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@ -33,9 +33,11 @@ export default function About() {
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="text-center py-12">
-        <div className='flex flex-col items-center justify-center gap-6 mb-6'>
-          <User size={60} />
-          <h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
+        <div className="flex flex-col gap-4">
+          <div className="flex justify-center">
+            <User size={60} />
+          </div>
+          <h1 className="text-4xl font-bold mt-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
            {t('about.title')}
          </h1>
        </div>
@ -109,7 +111,7 @@ export default function About() {
                      <h3 className={cn("text-xl font-semibold mb-2 text-gray-200", key === "Laptops" && "mt-4")}>{key}</h3>
                      {(value as unknown as string[]).map((text: string, index: number) => (
                        <p key={index} className="text-gray-300 leading-relaxed mt-2">
-                          {text.split(/(KernelSU-Next|LineageOS 22.2|Android 16|NixOS|Xubuntu)/).map((part, i) => {
+                          {text.split(/(KernelSU-Next|LineageOS 22.2|Android 16|Xubuntu)/).map((part, i) => {
                            if (part === 'KernelSU-Next') {
                              return <Link key={i} href="https://github.com/KernelSU-Next/KernelSU-Next">KernelSU-Next</Link>
                            }
@ -119,8 +121,8 @@ export default function About() {
                            if (part === 'Android 16') {
                              return <Link key={i} href="https://developer.android.com/about/versions/16/get">Android 16</Link>
                            }
-                            if (part === 'NixOS') {
-                              return <Link key={i} href="https://nixos.org/">NixOS</Link>
+                            if (part === 'OpenCore') {
+                              return <Link key={i} href="https://github.com/acidanthera/OpenCorePkg">OpenCore</Link>
                            }
                            if (part === 'Xubuntu') {
                              return <Link key={i} href="https://xubuntu.org/">Xubuntu</Link>
@ -133,14 +135,16 @@ export default function About() {
                        <div className="flex flex-row justify-center gap-4 mt-4">
                          <Button
                            href="/device/cheetah"
-                            label="Pixel 7 Pro"
-                            icon={Smartphone}
-                          />
+                            icon={<Smartphone />}
+                          >
+                            Pixel 7 Pro
+                          </Button>
                          <Button
                            href="/device/bonito"
-                            label="Pixel 3a XL"
-                            icon={Smartphone}
-                          />
+                            icon={<Smartphone />}
+                          >
+                            Pixel 3a XL
+                          </Button>
                        </div>
                      )}
                    </div>
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@ -2,11 +2,11 @@

 import Header from '@/components/Header'
 import Footer from '@/components/Footer'
-import ContactButton from '@/components/objects/ContactButton'
+import Button from '@/components/objects/Button'
 import { Phone } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { faPhone, faEnvelope } from '@fortawesome/free-solid-svg-icons'
-import { faGithub, faTelegram, faBluesky, faXTwitter } from '@fortawesome/free-brands-svg-icons'
+import { SiGithub, SiForgejo, SiTelegram } from 'react-icons/si'
+import { Mail, Smartphone } from 'lucide-react'

 export default function Contact() {
  const { t } = useTranslation();
@ -23,56 +23,65 @@ export default function Contact() {
  ];

  const contactButtonLabels = [
-    t('contact.buttons.github'),
-    t('contact.buttons.telegram'),
-    t('contact.buttons.bluesky'),
-    t('contact.buttons.x'),
-    t('contact.buttons.phone'),
-    t('contact.buttons.email')
+    "ihatenodejs",
+    "aidan",
+    "p0ntu5",
+    "+1 802-416-9516",
+    "aidan@p0ntus.com",
  ];
  
  const contactButtonHrefs = [
    "https://github.com/ihatenodejs",
+    "https://git.p0ntus.com/aidan",
    "https://t.me/p0ntu5",
-    "https://bsky.app/profile/aidxn.cc",
-    "https://x.com/ihatenodejs",
    "tel:+18024169516",
    "mailto:aidan@p0ntus.com"
  ];
  
-  const contactButtonIcons = [faGithub, faTelegram, faBluesky, faXTwitter, faPhone, faEnvelope];
+  const contactButtonIcons = [
+    <SiGithub key="github" />,
+    <SiForgejo key="forgejo" />,
+    <SiTelegram key="telegram" />,
+    <Smartphone key="smartphone" />,
+    <Mail key="mail" />
+  ];

  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="grow container mx-auto px-4 py-12">
        <div className="max-w-2xl mx-auto text-center">
-          <div className='mb-6 flex justify-center'>
-            <Phone size={60} />
+          <div className="flex flex-col gap-4">
+            <div className="flex justify-center">
+              <Phone size={60} />
+            </div>
+            <h1 className="text-4xl font-bold mt-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
+              {t('contact.title')}
+            </h1>
          </div>
-          <h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
-            {t('contact.title')}
-          </h1>
-          <div className="p-6 space-y-4">
-            {contactButtonLabels.map((label, index) => (
-              <ContactButton 
-                key={index} 
-                label={label} 
-                href={contactButtonHrefs[index]} 
-                icon={contactButtonIcons[index]} 
-                className='mr-3'
-              />
-            ))}
-          </div>
-
-          {sections.map((section, sectionIndex) => (
-            <div key={sectionIndex}>
-              <h2 className="text-2xl font-semibold mb-4 text-gray-200 mt-10">{section.title}</h2>
-              {section.texts.map((text, index) => (
-                <p key={index} className="text-gray-300 mb-4">{text}</p>
+          <div className="flex flex-col gap-8 mt-8">
+            <div className="flex flex-wrap justify-center gap-3">
+              {contactButtonLabels.map((label, index) => (
+                <Button
+                  key={index}
+                  href={contactButtonHrefs[index]}
+                  target="_blank"
+                  variant="rounded"
+                  icon={contactButtonIcons[index]}
+                >
+                  {label}
+                </Button> 
              ))}
            </div>
-          ))}
+            {sections.map((section, sectionIndex) => (
+              <div key={sectionIndex} className="flex flex-col gap-4">
+                <h2 className="text-2xl font-semibold text-gray-200">{section.title}</h2>
+                {section.texts.map((text, index) => (
+                  <p key={index} className="text-gray-300">{text}</p>
+                ))}
+              </div>
+            ))}
+          </div>
        </div>
      </main>
      <Footer />
--- a/app/domains/page.tsx
+++ b/app/domains/page.tsx
@ -1,8 +1,7 @@
 import Header from '@/components/Header'
 import Footer from '@/components/Footer'
 import { Link } from "lucide-react"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faBan } from "@fortawesome/free-solid-svg-icons"
+import { TbCurrencyDollarOff } from "react-icons/tb";
 import domains from "@/public/data/domains.json"

 export default function Domains() {
@ -11,17 +10,16 @@ export default function Domains() {
      <Header />
      <main className="grow container mx-auto px-4 py-12">
        <div className="max-w-2xl mx-auto flex flex-col items-center text-center">
-          <div className="mb-6 flex justify-center">
-            <Link size={60} />
+          <div className="flex flex-col gap-4">
+            <div className="flex justify-center">
+              <Link size={60} />
+            </div>
+            <h1 className="text-4xl font-bold mt-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
+              My Domains
+            </h1>
          </div>
-          <h1
-            className="text-4xl font-bold my-2 text-gray-200"
-            style={{ textShadow: "0 0 10px rgba(255, 255, 255, 0.5)" }}
-          >
-            My Domains
-          </h1>
          <div className="mb-4 p-4 pt-8 flex flex-col items-center space-y-2">
-            <FontAwesomeIcon icon={faBan} className="text-red-500 text-xl" />
+            <TbCurrencyDollarOff size={26} className="text-red-500" />
            <span className="text-red-500 font-medium text-center mt-1 mb-0">
              These domains are not for sale.
            </span>
--- a/app/manifesto/page.tsx
+++ b/app/manifesto/page.tsx
@ -8,12 +8,14 @@ export default function Manifesto() {
      <Header />
      <main className="grow container mx-auto px-4 py-12">
        <div className="max-w-2xl mx-auto text-center">
-          <div className='mb-6 flex justify-center'>
-            <BookOpen size={60} />
+          <div className="flex flex-col gap-4">
+            <div className="flex justify-center">
+              <BookOpen size={60} />
+            </div>
+            <h1 className="text-4xl font-bold mt-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
+              Internet Manifesto
+            </h1>
          </div>
-          <h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
-            Internet Manifesto
-          </h1>
          <div className="px-6 pt-6">
          <h2 className="text-2xl font-semibold mb-4 text-gray-200">
              1. Empathy and Understanding
--- a/app/page.tsx
+++ b/app/page.tsx
@ -42,8 +42,18 @@ export default function Home() {
        </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 hover:border-gray-600 transition-colors duration-300">
-            <LastPlayed />
+          <div className="relative border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300 p-4">
+            <div className="absolute top-2 right-2">
+              <div className="flex items-center gap-1 bg-black bg-opacity-50 rounded-full px-2 py-1">
+                <div className="w-1 h-1 bg-red-400 rounded-full animate-pulse"></div>
+                <div className="text-white text-xs">
+                  LIVE
+                </div>
+              </div>
+            </div>
+            <div className="flex justify-center items-center h-full">
+              <LastPlayed />
+            </div>
          </div>

          {mainSections.map((section, secIndex) => (
@ -62,9 +72,10 @@ export default function Home() {
            <p className="text-gray-300 mb-6">{t('home.contact.description')}</p>
            <Button
              href={'/contact'}
-              label={t('home.contact.button')}
-              icon={Mail}
-            />
+              icon={<Mail size={16} />}
+            >
+              {t('home.contact.button')}
+            </Button>
          </section>

          <section id="donation" className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
@ -73,39 +84,44 @@ export default function Home() {
            <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}
+                href="https://unsilenced.org"
+                icon={<FaHandcuffs />}
                target="_blank"
-              />
+              >
+                {t('home.donation.charities.unsilenced')}
+              </Button>
              <Button
-                href={'https://drugpolicy.org'}
-                label={t('home.donation.charities.drugpolicy')}
-                icon={PillBottle}
+                href="https://drugpolicy.org"
+                icon={<PillBottle size={16} />}
                target="_blank"
-              />
+              >
+                {t('home.donation.charities.drugpolicy')}
+              </Button>
              <Button
-                href={'https://www.aclu.org'}
-                label={t('home.donation.charities.aclu')}
-                icon={Scale}
+                href="https://www.aclu.org"
+                icon={<Scale size={16} />}
                target="_blank"
-              />
+              >
+                {t('home.donation.charities.aclu')}
+              </Button>
            </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}
+                href="https://donate.stripe.com/6oEeWVcXs9L9ctW4gj"
+                icon={<CreditCard size={16} />}
                target="_blank"
-              />
+              >
+                {t('home.donation.donate.stripe')}
+              </Button>
              <Button
-                href={'https://github.com/sponsors/ihatenodejs'}
-                label={t('home.donation.donate.github')}
-                icon={SiGithubsponsors}
+                href="https://github.com/sponsors/ihatenodejs"
+                icon={<SiGithubsponsors size={16} />}
                target="_blank"
-              />
+              >
+                {t('home.donation.donate.github')}
+              </Button>
            </div>
          </section>
        </div>