comparing ecc6a26512cceb869d2ac8b4763d9dc78fa14a5b and main on indexx.dev/static

-64

src/components/AudioVisualizer.jsx

···

       1
       -
       import React from "react";

     

       2
       -
       

     

       3
       -
       const BAR_COUNT = 15;

     

       4
       -
       const BAR_ANIMATION_DELAYS = [

     

       5
       -
         "0.3s",

     

       6
       -
         "0.7s",

     

       7
       -
         "0.1s",

     

       8
       -
         "0.9s",

     

       9
       -
         "0.4s",

     

       10
       -
         "0.2s",

     

       11
       -
         "0.8s",

     

       12
       -
         "0.5s",

     

       13
       -
         "0s",

     

       14
       -
         "0.6s",

     

       15
       -
         "0.3s",

     

       16
       -
         "0.9s",

     

       17
       -
         "0.1s",

     

       18
       -
         "0.7s",

     

       19
       -
         "0.4s",

     

       20
       -
       ];

     

       21
       -
       

     

       22
       -
       export default function AudioVisualizer() {

     

       23
       -
         return (

     

       24
       -
           <div className="visualizer">

     

       25
       -
             {Array(BAR_COUNT).fill(0).map((_, index) => (

     

       26
       -
               <div

     

       27
       -
                 key={index}

     

       28
       -
                 className="bar"

     

       29
       -
                 style={{ animationDelay: BAR_ANIMATION_DELAYS[index] }}

     

       30
       -
               >

     

       31
       -
               </div>

     

       32
       -
             ))}

     

       33
       -
       

     

       34
       -
             <style jsx>

     

       35
       -
               {`

     

       36
       -
               .visualizer {

     

       37
       -
                 display: flex;

     

       38
       -
                 align-items: center;

     

       39
       -
                 gap: 1px;

     

       40
       -
                 height: 50px;

     

       41
       -
               }

     

       42
       -
       

     

       43
       -
               .bar {

     

       44
       -
                 width: 2px;

     

       45
       -
                 background: linear-gradient(to top, #1b1bff, #8585fe, #1b1bff);

     

       46
       -
                 border-radius: 1px;

     

       47
       -
                 animation: wave 2.5s ease-in-out infinite; 

     

       48
       -
               }

     

       49
       -
               

     

       50
       -
               @keyframes wave {

     

       51
       -
                 0%, 100% {

     

       52
       -
                   /* Start/End Height */

     

       53
       -
                   height: 5px; 

     

       54
       -
                 }

     

       55
       -
                 50% {

     

       56
       -
                   /* Peak Height */

     

       57
       -
                   height: 30px; 

     

       58
       -
                 }

     

       59
       -
               }

     

       60
       -
             `}

     

       61
       -
             </style>

     

       62
       -
           </div>

     

       63
       -
         );

     

       64
       -
       }

-27

src/components/Header.astro

···

       1
       -
       <section id="header">

     

       2
       -
         <h1 class="animated-border unselectable spin">

     

       3
       -
           <svg

     

       4
       -
             xmlns="http://www.w3.org/2000/svg"

     

       5
       -
             width="24"

     

       6
       -
             height="24"

     

       7
       -
             viewBox="0 0 24 24"

     

       8
       -
             style="position: absolute; top: -5px; margin-left: -7px; transform: rotate(-10deg); z-index: 2000;"

     

       9
       -
             ><path

     

       10
       -
               fill="gold"

     

       11
       -
               d="M5 16 3 5l5.5 5L12 4l3.5 6L21 5l-2 11zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14z"

     

       12
       -
             ></path></svg

     

       13
       -
           >

     

       14
       -
           <span style="position: relative; z-index: 2;">index</span>

     

       15
       -
         </h1>

     

       16
       -
         <span style="display: block; margin-top: -5px;"

     

       17
       -
           >hey, i'm index. have a great day 👋</span

     

       18
       -
         >

     

       19
       -
         <span style="display: block; margin-top: -5px;"

     

       20
       -
           >i do stuff in typescript sometimes</span

     

       21
       -
         >

     

       22
       -
         <small

     

       23
       -
           style="display: block; margin-top: -5px;margin-bottom:10px;color: rgb(0, 84, 106);font-size: 0.9rem;"

     

       24
       -
         >

     

       25
       -
           he/him

     

       26
       -
         </small>

     

       27
       -
       </section>

-27

src/components/ProjectCard.astro

···

       1
       -
       ---

     

       2
       -
       interface Props {

     

       3
       -
         title: string;

     

       4
       -
         description: string;

     

       5
       -
         date: string;

     

       6
       -
         href: string;

     

       7
       -
         note?: string;

     

       8
       -
       }

     

       9
       -
       

     

       10
       -
       const { title, description, date, href, note } = Astro.props;

     

       11
       -
       ---

     

       12
       -
       

     

       13
       -
       <a href={href} target="_blank" class="text-reset">

     

       14
       -
         <div class="project-card" style="color: #fff;">

     

       15
       -
           <small class="text-muted">{date}</small>

     

       16
       -
           <h4>{title}</h4>

     

       17
       -
           {description}

     

       18
       -
           {

     

       19
       -
             note && (

     

       20
       -
               <>

     

       21
       -
                 <br />

     

       22
       -
                 <small class="text-muted">{note}</small>

     

       23
       -
               </>

     

       24
       -
             )

     

       25
       -
           }

     

       26
       -
         </div>

     

       27
       -
       </a>

-43

src/components/SocialLink.astro

···

       1
       -
       ---

     

       2
       -
       import type { JSX } from "astro/jsx-runtime";

     

       3
       -
       

     

       4
       -
       interface Props {

     

       5
       -
         icon?: any;

     

       6
       -
         name: string;

     

       7
       -
         href: string;

     

       8
       -
         tooltip?: {

     

       9
       -
           title: string;

     

       10
       -
           placement?: string;

     

       11
       -
         };

     

       12
       -
         rel?: string;

     

       13
       -
       }

     

       14
       -
       

     

       15
       -
       const { icon, name, href, tooltip, rel } = Astro.props;

     

       16
       -
       

     

       17
       -
       const Icon = icon;

     

       18
       -
       ---

     

       19
       -
       

     

       20
       -
       <a

     

       21
       -
         rel={rel}

     

       22
       -
         href={href}

     

       23
       -
         target="_blank"

     

       24
       -
         {...tooltip && {

     

       25
       -
           "data-bs-toggle": "tooltip",

     

       26
       -
           "data-bs-title": tooltip.title,

     

       27
       -
           "data-bs-placement": tooltip.placement || "bottom",

     

       28
       -
         }}

     

       29
       -
       >

     

       30
       -
         <span class="icon-hover">

     

       31
       -
           {Icon ? <Icon style="width: 35px; height: 35px;" /> : name}

     

       32
       -
         </span>

     

       33
       -
       </a>

     

       34
       -
       

     

       35
       -
       <style>

     

       36
       -
         .icon-hover {

     

       37
       -
           display: inline-block;

     

       38
       -
           transition: transform 0.2s ease;

     

       39
       -
         }

     

       40
       -
         a:hover .icon-hover {

     

       41
       -
           transform: scale(1.12);

     

       42
       -
         }

     

       43
       -
       </style>

-35

src/components/SocialLinks.astro

···

       1
       -
       ---

     

       2
       -
       import Bluesky from "./icons/Bluesky.astro";

     

       3
       -
       import Discord from "./icons/Discord.astro";

     

       4
       -
       import SocialLink from "./SocialLink.astro";

     

       5
       -
       import Tangled from "./icons/Tangled.astro";

     

       6
       -
       

     

       7
       -
       const links = [

     

       8
       -
         {

     

       9
       -
           icon: Bluesky,

     

       10
       -
           name: "Bluesky",

     

       11
       -
           href: "https://bsky.app/profile/did:plc:sfjxpxxyvewb2zlxwoz2vduw",

     

       12
       -
         },

     

       13
       -
         {

     

       14
       -
           icon: Discord,

     

       15
       -
           name: "Discord",

     

       16
       -
           href: "https://discord.com/users/589386198011871233",

     

       17
       -
           tooltip: {

     

       18
       -
             title: "index.lua",

     

       19
       -
             placement: "top",

     

       20
       -
           },

     

       21
       -
         },

     

       22
       -
         {

     

       23
       -
           icon: Tangled,

     

       24
       -
           name: "Tangled",

     

       25
       -
           href: "https://tangled.org/@indexx.dev",

     

       26
       -
         },

     

       27
       -
       ];

     

       28
       -
       ---

     

       29
       -
       

     

       30
       -
       <ul

     

       31
       -
         class="d-flex mt-3 mb-3"

     

       32
       -
         style="padding: 0px; width: 50%; margin: auto; justify-content: center; gap: 20px;"

     

       33
       -
       >

     

       34
       -
         {links.map((link) => <SocialLink {...link} />)}

     

       35
       -
       </ul>

+27

src/components/astro/Header.astro

···

       1
       +
       <section id="header">

     

       2
       +
         <h1 class="animated-border unselectable spin">

     

       3
       +
           <svg

     

       4
       +
             xmlns="http://www.w3.org/2000/svg"

     

       5
       +
             width="24"

     

       6
       +
             height="24"

     

       7
       +
             viewBox="0 0 24 24"

     

       8
       +
             style="position: absolute; top: -5px; margin-left: -7px; transform: rotate(-10deg); z-index: 2000;"

     

       9
       +
             ><path

     

       10
       +
               fill="gold"

     

       11
       +
               d="M5 16 3 5l5.5 5L12 4l3.5 6L21 5l-2 11zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14z"

     

       12
       +
             ></path></svg

     

       13
       +
           >

     

       14
       +
           <span style="position: relative; z-index: 2;">index</span>

     

       15
       +
         </h1>

     

       16
       +
         <span style="display: block; margin-top: -5px;"

     

       17
       +
           >hey, i'm index. have a great day 👋</span

     

       18
       +
         >

     

       19
       +
         <span style="display: block; margin-top: -5px;"

     

       20
       +
           >i do stuff in typescript sometimes</span

     

       21
       +
         >

     

       22
       +
         <small

     

       23
       +
           style="display: block; margin-top: -5px;margin-bottom:10px;color: rgb(0, 84, 106);font-size: 0.9rem;"

     

       24
       +
         >

     

       25
       +
           he/him

     

       26
       +
         </small>

     

       27
       +
       </section>

+27

src/components/astro/ProjectCard.astro

···

       1
       +
       ---

     

       2
       +
       interface Props {

     

       3
       +
         title: string;

     

       4
       +
         description: string;

     

       5
       +
         date: string;

     

       6
       +
         href: string;

     

       7
       +
         note?: string;

     

       8
       +
       }

     

       9
       +
       

     

       10
       +
       const { title, description, date, href, note } = Astro.props;

     

       11
       +
       ---

     

       12
       +
       

     

       13
       +
       <a href={href} target="_blank" class="text-reset">

     

       14
       +
         <div class="project-card" style="color: #fff;">

     

       15
       +
           <small class="text-muted">{date}</small>

     

       16
       +
           <h4>{title}</h4>

     

       17
       +
           {description}

     

       18
       +
           {

     

       19
       +
             note && (

     

       20
       +
               <>

     

       21
       +
                 <br />

     

       22
       +
                 <small class="text-muted">{note}</small>

     

       23
       +
               </>

     

       24
       +
             )

     

       25
       +
           }

     

       26
       +
         </div>

     

       27
       +
       </a>

+43

src/components/astro/SocialLink.astro

···

       1
       +
       ---

     

       2
       +
       import type { JSX } from "astro/jsx-runtime";

     

       3
       +
       

     

       4
       +
       interface Props {

     

       5
       +
         icon?: any;

     

       6
       +
         name: string;

     

       7
       +
         href: string;

     

       8
       +
         tooltip?: {

     

       9
       +
           title: string;

     

       10
       +
           placement?: string;

     

       11
       +
         };

     

       12
       +
         rel?: string;

     

       13
       +
       }

     

       14
       +
       

     

       15
       +
       const { icon, name, href, tooltip, rel } = Astro.props;

     

       16
       +
       

     

       17
       +
       const Icon = icon;

     

       18
       +
       ---

     

       19
       +
       

     

       20
       +
       <a

     

       21
       +
         rel={rel}

     

       22
       +
         href={href}

     

       23
       +
         target="_blank"

     

       24
       +
         {...tooltip && {

     

       25
       +
           "data-bs-toggle": "tooltip",

     

       26
       +
           "data-bs-title": tooltip.title,

     

       27
       +
           "data-bs-placement": tooltip.placement || "bottom",

     

       28
       +
         }}

     

       29
       +
       >

     

       30
       +
         <span class="icon-hover">

     

       31
       +
           {Icon ? <Icon style="width: 35px; height: 35px;" /> : name}

     

       32
       +
         </span>

     

       33
       +
       </a>

     

       34
       +
       

     

       35
       +
       <style>

     

       36
       +
         .icon-hover {

     

       37
       +
           display: inline-block;

     

       38
       +
           transition: transform 0.2s ease;

     

       39
       +
         }

     

       40
       +
         a:hover .icon-hover {

     

       41
       +
           transform: scale(1.12);

     

       42
       +
         }

     

       43
       +
       </style>

+35

src/components/astro/SocialLinks.astro

···

       1
       +
       ---

     

       2
       +
       import Bluesky from "../icons/Bluesky.astro";

     

       3
       +
       import Discord from "../icons/Discord.astro";

     

       4
       +
       import SocialLink from "./SocialLink.astro";

     

       5
       +
       import Tangled from "../icons/Tangled.astro";

     

       6
       +
       

     

       7
       +
       const links = [

     

       8
       +
         {

     

       9
       +
           icon: Bluesky,

     

       10
       +
           name: "Bluesky",

     

       11
       +
           href: "https://bsky.app/profile/did:plc:sfjxpxxyvewb2zlxwoz2vduw",

     

       12
       +
         },

     

       13
       +
         {

     

       14
       +
           icon: Discord,

     

       15
       +
           name: "Discord",

     

       16
       +
           href: "https://discord.com/users/589386198011871233",

     

       17
       +
           tooltip: {

     

       18
       +
             title: "index.lua",

     

       19
       +
             placement: "top",

     

       20
       +
           },

     

       21
       +
         },

     

       22
       +
         {

     

       23
       +
           icon: Tangled,

     

       24
       +
           name: "Tangled",

     

       25
       +
           href: "https://tangled.org/@indexx.dev",

     

       26
       +
         },

     

       27
       +
       ];

     

       28
       +
       ---

     

       29
       +
       

     

       30
       +
       <ul

     

       31
       +
         class="d-flex mt-3 mb-3"

     

       32
       +
         style="padding: 0px; width: 50%; margin: auto; justify-content: center; gap: 20px;"

     

       33
       +
       >

     

       34
       +
         {links.map((link) => <SocialLink {...link} />)}

     

       35
       +
       </ul>

-95

src/components/islands/Lastfm.jsx

···

       1
       -
       import { useEffect, useState } from "react";

     

       2
       -
       import AudioVisualizer from "../AudioVisualizer";

     

       3
       -
       

     

       4
       -
       export default function Lastfm() {

     

       5
       -
           const [data, setData] = useState(null);

     

       6
       -
           const [error, setError] = useState(null);

     

       7
       -
       

     

       8
       -
           useEffect(() => {

     

       9
       -
               const fetchLastfmData = async () => {

     

       10
       -
                   try {

     

       11
       -
                       const res = await fetch(

     

       12
       -
                           "https://workers.indexx.dev/misc/lastfm",

     

       13
       -
                       );

     

       14
       -
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       15
       -
       

     

       16
       -
                       const json = await res.json();

     

       17
       -
                       const status = {

     

       18
       -
                           song: json.track,

     

       19
       -
                           artist: json.artist,

     

       20
       -
                           albumArt: json.cover,

     

       21
       -
                           createdAt: json.createdAt,

     

       22
       -
                           link: json.url,

     

       23
       -
                           nowPlaying: !json.createdAt,

     

       24
       -
                       };

     

       25
       -
                       setData(status);

     

       26
       -
                   } catch (err) {

     

       27
       -
                       console.error("Fetch failed:", err);

     

       28
       -
                       setError(err.message);

     

       29
       -
                   }

     

       30
       -
               };

     

       31
       -
       

     

       32
       -
               fetchLastfmData();

     

       33
       -
           }, []);

     

       34
       -
       

     

       35
       -
           if (error || !data) return null;

     

       36
       -
       

     

       37
       -
           let timeAgo = "";

     

       38
       -
           let oldStatusClasses = "";

     

       39
       -
       

     

       40
       -
           if (!data.nowPlaying && data.createdAt) {

     

       41
       -
               const date = new Date(data.createdAt);

     

       42
       -
               const now = new Date();

     

       43
       -
               const diff = now.getTime() - date.getTime();

     

       44
       -
       

     

       45
       -
               const minutes = Math.floor(diff / 60000);

     

       46
       -
               const hours = Math.floor(minutes / 60);

     

       47
       -
               const days = Math.floor(hours / 24);

     

       48
       -
       

     

       49
       -
               if (days > 0) timeAgo = `${days} days ago`;

     

       50
       -
               else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       51
       -
               else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       52
       -
               else timeAgo = "just now";

     

       53
       -
       

     

       54
       -
               if (days == 1) timeAgo = "1 day ago";

     

       55
       -
       

     

       56
       -
               oldStatusClasses = days > 3

     

       57
       -
                   ? "opacity-75 text-decoration-line-through"

     

       58
       -
                   : "";

     

       59
       -
           }

     

       60
       -
       

     

       61
       -
           return (

     

       62
       -
               <a

     

       63
       -
                   id="now-playing"

     

       64
       -
                   href={data.link}

     

       65
       -
                   target="_blank"

     

       66
       -
                   className={oldStatusClasses}

     

       67
       -
               >

     

       68
       -
                   <AudioVisualizer />

     

       69
       -
                   <div

     

       70
       -
                       style={{

     

       71
       -
                           display: "flex",

     

       72
       -
                           flexDirection: "column",

     

       73
       -
                           gap: "2px",

     

       74
       -
                           width: "100%",

     

       75
       -
                       }}

     

       76
       -
                   >

     

       77
       -
                       <div style={{ fontWeight: "bold" }}>{data.song}</div>

     

       78
       -
                       <div style={{ fontSize: "0.9em", marginTop: "-5px" }}>

     

       79
       -
                           {data.artist}

     

       80
       -
                       </div>

     

       81
       -
                       <div

     

       82
       -
                           style={{

     

       83
       -
                               fontSize: "0.8em",

     

       84
       -
                               opacity: 0.7,

     

       85
       -
                               marginTop: "-5px",

     

       86
       -
                           }}

     

       87
       -
                       >

     

       88
       -
                           <small style={{ fontSize: "0.7rem" }}>

     

       89
       -
                               ^ what I'm listening (or last listened) to

     

       90
       -
                           </small>

     

       91
       -
                       </div>

     

       92
       -
                   </div>

     

       93
       -
               </a>

     

       94
       -
           );

     

       95
       -
       }

-78

src/components/islands/ProjectsPane.jsx

···

       1
       -
       import { useEffect, useState } from "react";

     

       2
       -
       

     

       3
       -
       export default function NowPlaying() {

     

       4
       -
           const [data, setData] = useState(null);

     

       5
       -
           const [error, setError] = useState(null);

     

       6
       -
       

     

       7
       -
           useEffect(() => {

     

       8
       -
               const fetchProjectData = async () => {

     

       9
       -
                   try {

     

       10
       -
                       const res = await fetch(

     

       11
       -
                           "https://pds.indexx.dev/xrpc/com.atproto.repo.listRecords?repo=did%3Aplc%3Asfjxpxxyvewb2zlxwoz2vduw&collection=dev.indexx.www.project&limit=100&reverse=false",

     

       12
       -
                       );

     

       13
       -
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       14
       -
       

     

       15
       -
                       const data = await res.json();

     

       16
       -
                       const projects = data.records.map((record) => record.value);

     

       17
       -
       

     

       18
       -
                       setData(projects.map((project) => ({

     

       19
       -
                           title: project.name,

     

       20
       -
                           description: project.description,

     

       21
       -
                           date: project.dateLabel,

     

       22
       -
                           href: project.url,

     

       23
       -
                           note: project.note ?? "",

     

       24
       -
                       })));

     

       25
       -
                   } catch (err) {

     

       26
       -
                       console.error("Fetch failed:", err);

     

       27
       -
                       setError(err.message);

     

       28
       -
                   }

     

       29
       -
               };

     

       30
       -
       

     

       31
       -
               fetchProjectData();

     

       32
       -
           }, []);

     

       33
       -
       

     

       34
       -
           if (error) return <span>Error: {error}</span>;

     

       35
       -
           if (!data) return null;

     

       36
       -
       

     

       37
       -
           return (

     

       38
       -
               <section id="projects-pane" data-bs-theme="dark">

     

       39
       -
                   <h6

     

       40
       -
                       className="text-muted text-center"

     

       41
       -
                       style={{ textTransform: "uppercase", letterSpacing: "5px" }}

     

       42
       -
                   >

     

       43
       -
                       My Recent Projects

     

       44
       -
                   </h6>

     

       45
       -
       

     

       46
       -
                   <ul className="list-unstyled">

     

       47
       -
                       {data.map((project) => (

     

       48
       -
                           <li>

     

       49
       -
                               <a

     

       50
       -
                                   href={project.href}

     

       51
       -
                                   target="_blank"

     

       52
       -
                                   className="text-reset"

     

       53
       -
                               >

     

       54
       -
                                   <div

     

       55
       -
                                       className="project-card"

     

       56
       -
                                       style={{ color: "#fff" }}

     

       57
       -
                                   >

     

       58
       -
                                       <small className="text-muted">

     

       59
       -
                                           {project.date}

     

       60
       -
                                       </small>

     

       61
       -
                                       <h4>{project.title}</h4>

     

       62
       -
                                       {project.description}

     

       63
       -
                                       {project.note && (

     

       64
       -
                                           <>

     

       65
       -
                                               <br />

     

       66
       -
                                               <small className="text-muted">

     

       67
       -
                                                   {project.note}

     

       68
       -
                                               </small>

     

       69
       -
                                           </>

     

       70
       -
                                       )}

     

       71
       -
                                   </div>

     

       72
       -
                               </a>

     

       73
       -
                           </li>

     

       74
       -
                       ))}

     

       75
       -
                   </ul>

     

       76
       -
               </section>

     

       77
       -
           );

     

       78
       -
       }

-109

src/components/islands/Status.jsx

···

       1
       -
       import { useEffect, useState } from "react";

     

       2
       -
       const actorDid = import.meta.env.PUBLIC_ACTOR_DID;

     

       3
       -
       

     

       4
       -
       if (!actorDid) {

     

       5
       -
           console.error(

     

       6
       -
               "PUBLIC_ACTOR_DID is not defined. Please check your .env file.",

     

       7
       -
           );

     

       8
       -
       }

     

       9
       -
       

     

       10
       -
       export default function Status() {

     

       11
       -
           const [data, setData] = useState(null);

     

       12
       -
           const [error, setError] = useState(null);

     

       13
       -
       

     

       14
       -
           useEffect(() => {

     

       15
       -
               const fetchStatus = async () => {

     

       16
       -
                   if (!actorDid) {

     

       17
       -
                       setError("Configuration error: Actor DID is missing.");

     

       18
       -
                       return;

     

       19
       -
                   }

     

       20
       -
                   try {

     

       21
       -
                       const res = await fetch(

     

       22
       -
                           `https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=${actorDid}&limit=1&filter=posts_no_replies`,

     

       23
       -
                       );

     

       24
       -
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       25
       -
       

     

       26
       -
                       const json = await res.json();

     

       27
       -
                       const latestPost = json.feed[0].post;

     

       28
       -
       

     

       29
       -
                       const status = {

     

       30
       -
                           text: latestPost.record.text,

     

       31
       -
                           createdAt: latestPost.record.createdAt,

     

       32
       -
                           link: `https://bsky.app/profile/${actorDid}/post/${

     

       33
       -
                               latestPost.uri.split("/")[4]

     

       34
       -
                           }`,

     

       35
       -
                       };

     

       36
       -
                       setData(status);

     

       37
       -
                   } catch (err) {

     

       38
       -
                       console.error("Fetch failed:", err);

     

       39
       -
                       setError(err.message);

     

       40
       -
                   }

     

       41
       -
               };

     

       42
       -
       

     

       43
       -
               fetchStatus();

     

       44
       -
           }, [actorDid]);

     

       45
       -
       

     

       46
       -
           if (error) {

     

       47
       -
               return (

     

       48
       -
                   <span

     

       49
       -
                       className="badge bg-dark"

     

       50
       -
                       style={{

     

       51
       -
                           color: "#595959 !important",

     

       52
       -
                           //outline: "1px solid white",

     

       53
       -
                           //outlineOffset: "1px",

     

       54
       -
                       }}

     

       55
       -
                   >

     

       56
       -
                       Error: {error}

     

       57
       -
                   </span>

     

       58
       -
               );

     

       59
       -
           }

     

       60
       -
           if (!data) {

     

       61
       -
               return (

     

       62
       -
                   <span

     

       63
       -
                       className="badge bg-dark"

     

       64
       -
                       style={{

     

       65
       -
                           color: "#595959 !important",

     

       66
       -
                           //outline: "1px solid white",

     

       67
       -
                           //outlineOffset: "1px",

     

       68
       -
                       }}

     

       69
       -
                   >

     

       70
       -
                       Loading status...

     

       71
       -
                   </span>

     

       72
       -
               );

     

       73
       -
           }

     

       74
       -
       

     

       75
       -
           const date = new Date(data.createdAt);

     

       76
       -
           const now = new Date();

     

       77
       -
           const diff = now.getTime() - date.getTime();

     

       78
       -
       

     

       79
       -
           const days = Math.floor(diff / (1000 * 60 * 60 * 24));

     

       80
       -
       

     

       81
       -
           if (days >= 2) {

     

       82
       -
               return null;

     

       83
       -
           }

     

       84
       -
       

     

       85
       -
           const minutes = Math.floor(diff / 60000);

     

       86
       -
           const hours = Math.floor(minutes / 60);

     

       87
       -
       

     

       88
       -
           let timeAgo = "just now";

     

       89
       -
           if (days > 0) timeAgo = `${days} days ago`;

     

       90
       -
           else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       91
       -
           else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       92
       -
       

     

       93
       -
           if (days == 1) timeAgo = "1 day ago";

     

       94
       -
       

     

       95
       -
           const oldStatusClasses = days >= 1

     

       96
       -
               ? "opacity-75 text-decoration-line-through"

     

       97
       -
               : "";

     

       98
       -
       

     

       99
       -
           return (

     

       100
       -
               <a

     

       101
       -
                   href={data.link}

     

       102
       -
                   target="_blank"

     

       103
       -
                   className={`badge bg-white ${oldStatusClasses}`}

     

       104
       -
                   //style={{ outline: "1px solid white", outlineOffset: "1px" }}

     

       105
       -
               >

     

       106
       -
                   I'm.. "{data.text}", {timeAgo}

     

       107
       -
               </a>

     

       108
       -
           );

     

       109
       -
       }

-95

src/components/islands/Tealfm.jsx

···

       1
       -
       import { useEffect, useState } from "react";

     

       2
       -
       

     

       3
       -
       export default function Tealfm() {

     

       4
       -
           const [data, setData] = useState(null);

     

       5
       -
           const [error, setError] = useState(null);

     

       6
       -
       

     

       7
       -
           useEffect(() => {

     

       8
       -
               const fetchTealfmData = async () => {

     

       9
       -
                   try {

     

       10
       -
                       const res = await fetch(

     

       11
       -
                           "https://pds.indexx.dev/xrpc/com.atproto.repo.listRecords?repo=did%3Aplc%3Asfjxpxxyvewb2zlxwoz2vduw&collection=fm.teal.alpha.feed.play&limit=1&reverse=false",

     

       12
       -
                       );

     

       13
       -
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       14
       -
       

     

       15
       -
                       const data = await res.json();

     

       16
       -
                       const latest = data.records[0].value;

     

       17
       -
       

     

       18
       -
                       const status = {

     

       19
       -
                           song: latest.trackName,

     

       20
       -
                           artist: latest.artists.map((artist) => artist.artistName)

     

       21
       -
                               .join(", "),

     

       22
       -
                           albumArt:

     

       23
       -
                               `https://coverartarchive.org/release/${latest.releaseMbId}/front-500`,

     

       24
       -
                           createdAt: latest.playedTime,

     

       25
       -
                           link: latest.originUrl ?? "",

     

       26
       -
                       };

     

       27
       -
                       setData(status);

     

       28
       -
                   } catch (err) {

     

       29
       -
                       console.error("Fetch failed:", err);

     

       30
       -
                       setError(err.message);

     

       31
       -
                   }

     

       32
       -
               };

     

       33
       -
       

     

       34
       -
               fetchTealfmData();

     

       35
       -
           }, []);

     

       36
       -
       

     

       37
       -
           if (error) return <span>Error: {error}</span>;

     

       38
       -
           if (!data) return null;

     

       39
       -
       

     

       40
       -
           let timeAgo = "";

     

       41
       -
           let oldStatusClasses = "";

     

       42
       -
       

     

       43
       -
           const date = new Date(data.createdAt);

     

       44
       -
           const now = new Date();

     

       45
       -
           const diff = now.getTime() - date.getTime();

     

       46
       -
       

     

       47
       -
           const minutes = Math.floor(diff / 60000);

     

       48
       -
           const hours = Math.floor(minutes / 60);

     

       49
       -
           const days = Math.floor(hours / 24);

     

       50
       -
       

     

       51
       -
           if (days > 0) timeAgo = `${days} days ago`;

     

       52
       -
           else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       53
       -
           else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       54
       -
           else timeAgo = "just now";

     

       55
       -
       

     

       56
       -
           oldStatusClasses = days > 3

     

       57
       -
               ? "opacity-75 text-decoration-line-through"

     

       58
       -
               : "";

     

       59
       -
       

     

       60
       -
           return (

     

       61
       -
               <a

     

       62
       -
                   id="now-playing"

     

       63
       -
                   href={data.link}

     

       64
       -
                   target="_blank"

     

       65
       -
                   className={oldStatusClasses}

     

       66
       -
               >

     

       67
       -
                   <img

     

       68
       -
                       src={data.albumArt}

     

       69
       -
                       alt={`${data.album} cover`}

     

       70
       -
                   />

     

       71
       -
                   <div

     

       72
       -
                       style={{

     

       73
       -
                           display: "flex",

     

       74
       -
                           flexDirection: "column",

     

       75
       -
                           gap: "2px",

     

       76
       -
                           width: "100%",

     

       77
       -
                       }}

     

       78
       -
                   >

     

       79
       -
                       <div style={{ fontWeight: "bold" }}>{data.song}</div>

     

       80
       -
                       <div style={{ fontSize: "0.9em", marginTop: "-5px" }}>

     

       81
       -
                           {data.artist}

     

       82
       -
                       </div>

     

       83
       -
                       <div

     

       84
       -
                           style={{

     

       85
       -
                               fontSize: "0.8em",

     

       86
       -
                               opacity: 0.7,

     

       87
       -
                               marginTop: "-5px",

     

       88
       -
                           }}

     

       89
       -
                       >

     

       90
       -
                           {timeAgo}

     

       91
       -
                       </div>

     

       92
       -
                   </div>

     

       93
       -
               </a>

     

       94
       -
           );

     

       95
       -
       }

+80

src/components/jsx/AudioVisualizer.jsx

···

       1
       +
       import React from "react";

     

       2
       +
       

     

       3
       +
       const BAR_COUNT = 15;

     

       4
       +
       const BAR_ANIMATION_DELAYS = [

     

       5
       +
         "0.3s",

     

       6
       +
         "0.7s",

     

       7
       +
         "0.1s",

     

       8
       +
         "0.9s",

     

       9
       +
         "0.4s",

     

       10
       +
         "0.2s",

     

       11
       +
         "0.8s",

     

       12
       +
         "0.5s",

     

       13
       +
         "0s",

     

       14
       +
         "0.6s",

     

       15
       +
         "0.3s",

     

       16
       +
         "0.9s",

     

       17
       +
         "0.1s",

     

       18
       +
         "0.7s",

     

       19
       +
         "0.4s",

     

       20
       +
       ];

     

       21
       +
       

     

       22
       +
       export default function AudioVisualizer({ isSilent = false }) {

     

       23
       +
         // Define the base animation style

     

       24
       +
         const activeAnimation = "wave 2.5s ease-in-out infinite";

     

       25
       +
       

     

       26
       +
         // Define the style for the silent state (dots)

     

       27
       +
         const silentStyle = {

     

       28
       +
           animation: "none",

     

       29
       +
           height: "5px",

     

       30
       +
         };

     

       31
       +
       

     

       32
       +
         return (

     

       33
       +
           <div className="visualizer">

     

       34
       +
             {Array(BAR_COUNT).fill(0).map((_, index) => {

     

       35
       +
               // Determine the specific style for each bar

     

       36
       +
               const barStyle = isSilent

     

       37
       +
                 ? silentStyle // If silent, use the fixed dot style

     

       38
       +
                 : { // If not silent, use the full animation with its unique delay

     

       39
       +
                   animation: activeAnimation,

     

       40
       +
                   animationDelay: BAR_ANIMATION_DELAYS[index],

     

       41
       +
                 };

     

       42
       +
       

     

       43
       +
               return (

     

       44
       +
                 <div

     

       45
       +
                   key={index}

     

       46
       +
                   className="bar"

     

       47
       +
                   style={barStyle} // Apply the determined style object

     

       48
       +
                 >

     

       49
       +
                 </div>

     

       50
       +
               );

     

       51
       +
             })}

     

       52
       +
       

     

       53
       +
             <style jsx>

     

       54
       +
               {`

     

       55
       +
               .visualizer {

     

       56
       +
                 display: flex;

     

       57
       +
                 align-items: center;

     

       58
       +
                 gap: 1px;

     

       59
       +
                 height: 50px;

     

       60
       +
               }

     

       61
       +
       

     

       62
       +
               .bar {

     

       63
       +
                 width: 2px;

     

       64
       +
                 background: rgb(0, 151, 188);

     

       65
       +
                 border-radius: 1px;

     

       66
       +
               }

     

       67
       +
               

     

       68
       +
               @keyframes wave {

     

       69
       +
                 0%, 100% {

     

       70
       +
                   height: 5px; 

     

       71
       +
                 }

     

       72
       +
                 50% {

     

       73
       +
                   height: 30px; 

     

       74
       +
                 }

     

       75
       +
               }

     

       76
       +
             `}

     

       77
       +
             </style>

     

       78
       +
           </div>

     

       79
       +
         );

     

       80
       +
       }

+95

src/components/jsx/Lastfm.jsx

···

       1
       +
       import { useEffect, useState } from "react";

     

       2
       +
       import AudioVisualizer from "./AudioVisualizer";

     

       3
       +
       

     

       4
       +
       export default function Lastfm() {

     

       5
       +
           const [data, setData] = useState(null);

     

       6
       +
           const [error, setError] = useState(null);

     

       7
       +
       

     

       8
       +
           useEffect(() => {

     

       9
       +
               const fetchLastfmData = async () => {

     

       10
       +
                   try {

     

       11
       +
                       const res = await fetch(

     

       12
       +
                           "https://workers.indexx.dev/misc/lastfm",

     

       13
       +
                       );

     

       14
       +
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       15
       +
       

     

       16
       +
                       const json = await res.json();

     

       17
       +
                       const status = {

     

       18
       +
                           song: json.track,

     

       19
       +
                           artist: json.artist,

     

       20
       +
                           albumArt: json.cover,

     

       21
       +
                           createdAt: json.createdAt,

     

       22
       +
                           link: json.url,

     

       23
       +
                           nowPlaying: !json.createdAt,

     

       24
       +
                       };

     

       25
       +
                       setData(status);

     

       26
       +
                   } catch (err) {

     

       27
       +
                       console.error("Fetch failed:", err);

     

       28
       +
                       setError(err.message);

     

       29
       +
                   }

     

       30
       +
               };

     

       31
       +
       

     

       32
       +
               fetchLastfmData();

     

       33
       +
           }, []);

     

       34
       +
       

     

       35
       +
           if (error || !data) return null;

     

       36
       +
       

     

       37
       +
           let timeAgo = "";

     

       38
       +
           let oldStatusClasses = "";

     

       39
       +
       

     

       40
       +
           if (!data.nowPlaying && data.createdAt) {

     

       41
       +
               const date = new Date(data.createdAt);

     

       42
       +
               const now = new Date();

     

       43
       +
               const diff = now.getTime() - date.getTime();

     

       44
       +
       

     

       45
       +
               const minutes = Math.floor(diff / 60000);

     

       46
       +
               const hours = Math.floor(minutes / 60);

     

       47
       +
               const days = Math.floor(hours / 24);

     

       48
       +
       

     

       49
       +
               if (days > 0) timeAgo = `${days} days ago`;

     

       50
       +
               else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       51
       +
               else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       52
       +
               else timeAgo = "just now";

     

       53
       +
       

     

       54
       +
               if (days == 1) timeAgo = "1 day ago";

     

       55
       +
       

     

       56
       +
               oldStatusClasses = days > 3

     

       57
       +
                   ? "opacity-75 text-decoration-line-through"

     

       58
       +
                   : "";

     

       59
       +
           }

     

       60
       +
       

     

       61
       +
           return (

     

       62
       +
               <a

     

       63
       +
                   id="now-playing"

     

       64
       +
                   href={data.link}

     

       65
       +
                   target="_blank"

     

       66
       +
                   className={oldStatusClasses}

     

       67
       +
               >

     

       68
       +
                   <AudioVisualizer isSilent={!data.nowPlaying} />

     

       69
       +
                   <div

     

       70
       +
                       style={{

     

       71
       +
                           display: "flex",

     

       72
       +
                           flexDirection: "column",

     

       73
       +
                           gap: "2px",

     

       74
       +
                           width: "100%",

     

       75
       +
                       }}

     

       76
       +
                   >

     

       77
       +
                       <div style={{ fontWeight: "bold" }}>{data.song}</div>

     

       78
       +
                       <div style={{ fontSize: "0.9em", marginTop: "-5px" }}>

     

       79
       +
                           {data.artist}

     

       80
       +
                       </div>

     

       81
       +
                       <div

     

       82
       +
                           style={{

     

       83
       +
                               fontSize: "0.8em",

     

       84
       +
                               opacity: 0.7,

     

       85
       +
                               marginTop: "-5px",

     

       86
       +
                           }}

     

       87
       +
                       >

     

       88
       +
                           <small style={{ fontSize: "0.7rem" }}>

     

       89
       +
                               ^ what I'm listening (or last listened) to

     

       90
       +
                           </small>

     

       91
       +
                       </div>

     

       92
       +
                   </div>

     

       93
       +
               </a>

     

       94
       +
           );

     

       95
       +
       }

+78

src/components/jsx/ProjectsPane.jsx

···

       1
       +
       import { useEffect, useState } from "react";

     

       2
       +
       

     

       3
       +
       export default function NowPlaying() {

     

       4
       +
           const [data, setData] = useState(null);

     

       5
       +
           const [error, setError] = useState(null);

     

       6
       +
       

     

       7
       +
           useEffect(() => {

     

       8
       +
               const fetchProjectData = async () => {

     

       9
       +
                   try {

     

       10
       +
                       const res = await fetch(

     

       11
       +
                           "https://pds.indexx.dev/xrpc/com.atproto.repo.listRecords?repo=did%3Aplc%3Asfjxpxxyvewb2zlxwoz2vduw&collection=dev.indexx.www.project&limit=100&reverse=false",

     

       12
       +
                       );

     

       13
       +
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       14
       +
       

     

       15
       +
                       const data = await res.json();

     

       16
       +
                       const projects = data.records.map((record) => record.value);

     

       17
       +
       

     

       18
       +
                       setData(projects.map((project) => ({

     

       19
       +
                           title: project.name,

     

       20
       +
                           description: project.description,

     

       21
       +
                           date: project.dateLabel,

     

       22
       +
                           href: project.url,

     

       23
       +
                           note: project.note ?? "",

     

       24
       +
                       })));

     

       25
       +
                   } catch (err) {

     

       26
       +
                       console.error("Fetch failed:", err);

     

       27
       +
                       setError(err.message);

     

       28
       +
                   }

     

       29
       +
               };

     

       30
       +
       

     

       31
       +
               fetchProjectData();

     

       32
       +
           }, []);

     

       33
       +
       

     

       34
       +
           if (error) return <span>Error: {error}</span>;

     

       35
       +
           if (!data) return null;

     

       36
       +
       

     

       37
       +
           return (

     

       38
       +
               <section id="projects-pane" data-bs-theme="dark">

     

       39
       +
                   <h6

     

       40
       +
                       className="text-muted text-center"

     

       41
       +
                       style={{ textTransform: "uppercase", letterSpacing: "5px" }}

     

       42
       +
                   >

     

       43
       +
                       My Recent Projects

     

       44
       +
                   </h6>

     

       45
       +
       

     

       46
       +
                   <ul className="list-unstyled">

     

       47
       +
                       {data.map((project) => (

     

       48
       +
                           <li>

     

       49
       +
                               <a

     

       50
       +
                                   href={project.href}

     

       51
       +
                                   target="_blank"

     

       52
       +
                                   className="text-reset"

     

       53
       +
                               >

     

       54
       +
                                   <div

     

       55
       +
                                       className="project-card"

     

       56
       +
                                       style={{ color: "#fff" }}

     

       57
       +
                                   >

     

       58
       +
                                       <small className="text-muted">

     

       59
       +
                                           {project.date}

     

       60
       +
                                       </small>

     

       61
       +
                                       <h4>{project.title}</h4>

     

       62
       +
                                       {project.description}

     

       63
       +
                                       {project.note && (

     

       64
       +
                                           <>

     

       65
       +
                                               <br />

     

       66
       +
                                               <small className="text-muted">

     

       67
       +
                                                   {project.note}

     

       68
       +
                                               </small>

     

       69
       +
                                           </>

     

       70
       +
                                       )}

     

       71
       +
                                   </div>

     

       72
       +
                               </a>

     

       73
       +
                           </li>

     

       74
       +
                       ))}

     

       75
       +
                   </ul>

     

       76
       +
               </section>

     

       77
       +
           );

     

       78
       +
       }

+109

src/components/jsx/Status.jsx

···

       1
       +
       import { useEffect, useState } from "react";

     

       2
       +
       const actorDid = import.meta.env.PUBLIC_ACTOR_DID;

     

       3
       +
       

     

       4
       +
       if (!actorDid) {

     

       5
       +
           console.error(

     

       6
       +
               "PUBLIC_ACTOR_DID is not defined. Please check your .env file.",

     

       7
       +
           );

     

       8
       +
       }

     

       9
       +
       

     

       10
       +
       export default function Status() {

     

       11
       +
           const [data, setData] = useState(null);

     

       12
       +
           const [error, setError] = useState(null);

     

       13
       +
       

     

       14
       +
           useEffect(() => {

     

       15
       +
               const fetchStatus = async () => {

     

       16
       +
                   if (!actorDid) {

     

       17
       +
                       setError("Configuration error: Actor DID is missing.");

     

       18
       +
                       return;

     

       19
       +
                   }

     

       20
       +
                   try {

     

       21
       +
                       const res = await fetch(

     

       22
       +
                           `https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=${actorDid}&limit=1&filter=posts_no_replies`,

     

       23
       +
                       );

     

       24
       +
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       25
       +
       

     

       26
       +
                       const json = await res.json();

     

       27
       +
                       const latestPost = json.feed[0].post;

     

       28
       +
       

     

       29
       +
                       const status = {

     

       30
       +
                           text: latestPost.record.text,

     

       31
       +
                           createdAt: latestPost.record.createdAt,

     

       32
       +
                           link: `https://bsky.app/profile/${actorDid}/post/${

     

       33
       +
                               latestPost.uri.split("/")[4]

     

       34
       +
                           }`,

     

       35
       +
                       };

     

       36
       +
                       setData(status);

     

       37
       +
                   } catch (err) {

     

       38
       +
                       console.error("Fetch failed:", err);

     

       39
       +
                       setError(err.message);

     

       40
       +
                   }

     

       41
       +
               };

     

       42
       +
       

     

       43
       +
               fetchStatus();

     

       44
       +
           }, [actorDid]);

     

       45
       +
       

     

       46
       +
           if (error) {

     

       47
       +
               return (

     

       48
       +
                   <span

     

       49
       +
                       className="badge bg-dark"

     

       50
       +
                       style={{

     

       51
       +
                           color: "#595959 !important",

     

       52
       +
                           //outline: "1px solid white",

     

       53
       +
                           //outlineOffset: "1px",

     

       54
       +
                       }}

     

       55
       +
                   >

     

       56
       +
                       Error: {error}

     

       57
       +
                   </span>

     

       58
       +
               );

     

       59
       +
           }

     

       60
       +
           if (!data) {

     

       61
       +
               return (

     

       62
       +
                   <span

     

       63
       +
                       className="badge bg-dark"

     

       64
       +
                       style={{

     

       65
       +
                           color: "#595959 !important",

     

       66
       +
                           //outline: "1px solid white",

     

       67
       +
                           //outlineOffset: "1px",

     

       68
       +
                       }}

     

       69
       +
                   >

     

       70
       +
                       Loading status...

     

       71
       +
                   </span>

     

       72
       +
               );

     

       73
       +
           }

     

       74
       +
       

     

       75
       +
           const date = new Date(data.createdAt);

     

       76
       +
           const now = new Date();

     

       77
       +
           const diff = now.getTime() - date.getTime();

     

       78
       +
       

     

       79
       +
           const days = Math.floor(diff / (1000 * 60 * 60 * 24));

     

       80
       +
       

     

       81
       +
           if (days >= 2) {

     

       82
       +
               return null;

     

       83
       +
           }

     

       84
       +
       

     

       85
       +
           const minutes = Math.floor(diff / 60000);

     

       86
       +
           const hours = Math.floor(minutes / 60);

     

       87
       +
       

     

       88
       +
           let timeAgo = "just now";

     

       89
       +
           if (days > 0) timeAgo = `${days} days ago`;

     

       90
       +
           else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       91
       +
           else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       92
       +
       

     

       93
       +
           if (days == 1) timeAgo = "1 day ago";

     

       94
       +
       

     

       95
       +
           const oldStatusClasses = days >= 1

     

       96
       +
               ? "opacity-75 text-decoration-line-through"

     

       97
       +
               : "";

     

       98
       +
       

     

       99
       +
           return (

     

       100
       +
               <a

     

       101
       +
                   href={data.link}

     

       102
       +
                   target="_blank"

     

       103
       +
                   className={`badge bg-white ${oldStatusClasses}`}

     

       104
       +
                   //style={{ outline: "1px solid white", outlineOffset: "1px" }}

     

       105
       +
               >

     

       106
       +
                   I'm.. "{data.text}", {timeAgo}

     

       107
       +
               </a>

     

       108
       +
           );

     

       109
       +
       }

+154

src/components/jsx/Tealfm.jsx

···

       1
       +
       import { useEffect, useState } from "react";

     

       2
       +
       import AudioVisualizer from "./AudioVisualizer";

     

       3
       +
       

     

       4
       +
       export default function Tealfm() {

     

       5
       +
           const [data, setData] = useState(null);

     

       6
       +
           const [error, setError] = useState(null);

     

       7
       +
           const [isCurrentlyPlaying, setIsCurrentlyPlaying] = useState(false);

     

       8
       +
       

     

       9
       +
           useEffect(() => {

     

       10
       +
               const fetchStatus = async () => {

     

       11
       +
                   const repo = "did:plc:sfjxpxxyvewb2zlxwoz2vduw";

     

       12
       +
                   const statusCollection = "fm.teal.alpha.actor.status";

     

       13
       +
                   const lastPlayedCollection = "fm.teal.alpha.feed.play";

     

       14
       +
       

     

       15
       +
                   try {

     

       16
       +
                       const statusUrl =

     

       17
       +
                           `https://pds.indexx.dev/xrpc/com.atproto.repo.getRecord?repo=${repo}&collection=${statusCollection}&rkey=self`;

     

       18
       +
                       const statusRes = await fetch(statusUrl);

     

       19
       +
       

     

       20
       +
                       if (!statusRes.ok) {

     

       21
       +
                           throw new Error(`HTTP ${statusRes.status} on status fetch`);

     

       22
       +
                       }

     

       23
       +
       

     

       24
       +
                       const statusData = await statusRes.json();

     

       25
       +
                       const statusValue = statusData?.value;

     

       26
       +
                       const nowTimestamp = Math.floor(Date.now() / 1000);

     

       27
       +
       

     

       28
       +
                       const isExpired = statusValue?.expiry &&

     

       29
       +
                           nowTimestamp > parseInt(statusValue.expiry, 10);

     

       30
       +
                       const isItemEmpty = !statusValue?.item?.trackName;

     

       31
       +
       

     

       32
       +
                       let status;

     

       33
       +
       

     

       34
       +
                       if (statusValue && !isExpired && !isItemEmpty) {

     

       35
       +
                           const latest = statusValue.item;

     

       36
       +
       

     

       37
       +
                           status = {

     

       38
       +
                               song: latest.trackName,

     

       39
       +
                               artist: latest.artists.map((artist) =>

     

       40
       +
                                   artist.artistName

     

       41
       +
                               ).join(", "),

     

       42
       +
                               createdAt: parseInt(statusValue.time, 10) * 1000,

     

       43
       +
                               link: latest.originUrl ?? "",

     

       44
       +
                           };

     

       45
       +
                           setData(status);

     

       46
       +
                           setIsCurrentlyPlaying(true);

     

       47
       +
                           return;

     

       48
       +
                       }

     

       49
       +
       

     

       50
       +
                       console.log(

     

       51
       +
                           "Status expired or empty. Falling back to last played record.",

     

       52
       +
                       );

     

       53
       +
       

     

       54
       +
                       const lastPlayedUrl =

     

       55
       +
                           `https://pds.indexx.dev/xrpc/com.atproto.repo.listRecords?repo=${repo}&collection=${lastPlayedCollection}&limit=1&reverse=false`;

     

       56
       +
                       const lastPlayedRes = await fetch(lastPlayedUrl);

     

       57
       +
       

     

       58
       +
                       if (!lastPlayedRes.ok) {

     

       59
       +
                           throw new Error(

     

       60
       +
                               `HTTP ${lastPlayedRes.status} on listRecords fetch`,

     

       61
       +
                           );

     

       62
       +
                       }

     

       63
       +
       

     

       64
       +
                       const lastPlayedData = await lastPlayedRes.json();

     

       65
       +
       

     

       66
       +
                       if (

     

       67
       +
                           lastPlayedData.records && lastPlayedData.records.length > 0

     

       68
       +
                       ) {

     

       69
       +
                           const latest = lastPlayedData.records[0].value;

     

       70
       +
       

     

       71
       +
                           status = {

     

       72
       +
                               song: latest.trackName,

     

       73
       +
                               artist: latest.artists.map((artist) =>

     

       74
       +
                                   artist.artistName

     

       75
       +
                               ).join(", "),

     

       76
       +
                               albumArt:

     

       77
       +
                                   `https://coverartarchive.org/release/${latest.releaseMbId}/front-500`,

     

       78
       +
                               createdAt: latest.playedTime,

     

       79
       +
                               link: latest.originUrl ?? "",

     

       80
       +
                           };

     

       81
       +
                           setData(status);

     

       82
       +
                           setIsCurrentlyPlaying(false);

     

       83
       +
                       } else {

     

       84
       +
                           console.log("No records found in last played collection.");

     

       85
       +
                           setIsCurrentlyPlaying(false);

     

       86
       +
                       }

     

       87
       +
                   } catch (err) {

     

       88
       +
                       console.error("Fetch failed:", err);

     

       89
       +
                       setError(err.message);

     

       90
       +
                       setIsCurrentlyPlaying(false);

     

       91
       +
                   }

     

       92
       +
               };

     

       93
       +
       

     

       94
       +
               fetchStatus();

     

       95
       +
           }, []);

     

       96
       +
       

     

       97
       +
           if (error) return <span>Error: {error}</span>;

     

       98
       +
           if (!data) return null;

     

       99
       +
       

     

       100
       +
           let timeAgo = "";

     

       101
       +
           let oldStatusClasses = "";

     

       102
       +
       

     

       103
       +
           const date = new Date(data.createdAt);

     

       104
       +
           const now = new Date();

     

       105
       +
           const diff = now.getTime() - date.getTime();

     

       106
       +
       

     

       107
       +
           const minutes = Math.floor(diff / 60000);

     

       108
       +
           const hours = Math.floor(minutes / 60);

     

       109
       +
           const days = Math.floor(hours / 24);

     

       110
       +
       

     

       111
       +
           if (days > 0) timeAgo = `${days} days ago`;

     

       112
       +
           else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       113
       +
           else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       114
       +
           else timeAgo = "just now";

     

       115
       +
       

     

       116
       +
           oldStatusClasses = days > 3

     

       117
       +
               ? "opacity-75 text-decoration-line-through"

     

       118
       +
               : "";

     

       119
       +
       

     

       120
       +
           return (

     

       121
       +
               <a

     

       122
       +
                   id="now-playing"

     

       123
       +
                   href={data.link}

     

       124
       +
                   target="_blank"

     

       125
       +
                   className={oldStatusClasses}

     

       126
       +
               >

     

       127
       +
                   <AudioVisualizer isSilent={!isCurrentlyPlaying} />

     

       128
       +
                   <div

     

       129
       +
                       style={{

     

       130
       +
                           display: "flex",

     

       131
       +
                           flexDirection: "column",

     

       132
       +
                           gap: "2px",

     

       133
       +
                           width: "100%",

     

       134
       +
                       }}

     

       135
       +
                   >

     

       136
       +
                       <div style={{ fontWeight: "bold" }}>{data.song}</div>

     

       137
       +
                       <div style={{ fontSize: "0.9em", marginTop: "-5px" }}>

     

       138
       +
                           {data.artist}

     

       139
       +
                       </div>

     

       140
       +
                       <div

     

       141
       +
                           style={{

     

       142
       +
                               fontSize: "0.8em",

     

       143
       +
                               opacity: 0.7,

     

       144
       +
                               marginTop: "-5px",

     

       145
       +
                           }}

     

       146
       +
                       >

     

       147
       +
                           <small style={{ fontSize: "0.7rem" }}>

     

       148
       +
                               ^ what I'm listening (or last listened) to

     

       149
       +
                           </small>

     

       150
       +
                       </div>

     

       151
       +
                   </div>

     

       152
       +
               </a>

     

       153
       +
           );

     

       154
       +
       }

+1 -1

src/layouts/Layout.astro

···

       30
        
           <!-- RESOURCES -->

     

       31
        
           <link href="/bootstrap.min.css" rel="stylesheet" />

     

       32
        
           <script src="/bootstrap.bundle.min.js" is:inline></script>

     

       33
       -
           <link rel="stylesheet" href="/style.css?v=2" type="text/css" />

     

       34
        
         </head>

     

       35
        
         <body>

     

       36
        
           <slot />

···

       30
        
           <!-- RESOURCES -->

     

       31
        
           <link href="/bootstrap.min.css" rel="stylesheet" />

     

       32
        
           <script src="/bootstrap.bundle.min.js" is:inline></script>

     

       33
       +
           <link rel="stylesheet" href="/style.css?v=3" type="text/css" />

     

       34
        
         </head>

     

       35
        
         <body>

     

       36
        
           <slot />

+6 -6

src/pages/index.astro

···

       1
        
       ---

     

       2
        
       import Layout from "../layouts/Layout.astro";

     

       3
        
       

     

       4
       -
       import Header from "../components/Header.astro";

     

       5
       -
       import SocialLinks from "../components/SocialLinks.astro";

     

       6
        
       

     

       7
       -
       import ProjectsPane from "../components/islands/ProjectsPane.jsx";

     

       8
       -
       import Status from "../components/islands/Status.jsx";

     

       9
       -
       import Lastfm from "../components/islands/Lastfm";

     

       10
        
       ---

     

       11
        
       

     

       12
        
       <Layout title="hello" description="insert wave emoji">

     

       13
        
         <main id="page" class="text-center">

     

       14
        
           <Header />

     

       15
        
           <Status client:load />

     

       16
       -
           <Lastfm client:load />

     

       17
        
           <SocialLinks />

     

       18
        
           <!--

     

       19
        
           <img

···

       1
        
       ---

     

       2
        
       import Layout from "../layouts/Layout.astro";

     

       3
        
       

     

       4
       +
       import Header from "../components/astro/Header.astro";

     

       5
       +
       import SocialLinks from "../components/astro/SocialLinks.astro";

     

       6
        
       

     

       7
       +
       import ProjectsPane from "../components/jsx/ProjectsPane.jsx";

     

       8
       +
       import Status from "../components/jsx/Status.jsx";

     

       9
       +
       import Tealfm from "../components/jsx/Tealfm";

     

       10
        
       ---

     

       11
        
       

     

       12
        
       <Layout title="hello" description="insert wave emoji">

     

       13
        
         <main id="page" class="text-center">

     

       14
        
           <Header />

     

       15
        
           <Status client:load />

     

       16
       +
           <Tealfm client:load />

     

       17
        
           <SocialLinks />

     

       18
        
           <!--

     

       19
        
           <img

Compare changes