···

       
1
       
1
       
-
       
import React from "react";

     

       
2
       
2
       
-
       


     

       
3
       
3
       
-
       
const BAR_COUNT = 15;

     

       
4
       
4
       
-
       
const BAR_ANIMATION_DELAYS = [

     

       
5
       
5
       
-
       
  "0.3s",

     

       
6
       
6
       
-
       
  "0.7s",

     

       
7
       
7
       
-
       
  "0.1s",

     

       
8
       
8
       
-
       
  "0.9s",

     

       
9
       
9
       
-
       
  "0.4s",

     

       
10
       
10
       
-
       
  "0.2s",

     

       
11
       
11
       
-
       
  "0.8s",

     

       
12
       
12
       
-
       
  "0.5s",

     

       
13
       
13
       
-
       
  "0s",

     

       
14
       
14
       
-
       
  "0.6s",

     

       
15
       
15
       
-
       
  "0.3s",

     

       
16
       
16
       
-
       
  "0.9s",

     

       
17
       
17
       
-
       
  "0.1s",

     

       
18
       
18
       
-
       
  "0.7s",

     

       
19
       
19
       
-
       
  "0.4s",

     

       
20
       
20
       
-
       
];

     

       
21
       
21
       
-
       


     

       
22
       
22
       
-
       
export default function AudioVisualizer() {

     

       
23
       
23
       
-
       
  return (

     

       
24
       
24
       
-
       
    <div className="visualizer">

     

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

     

       
26
       
26
       
-
       
        <div

     

       
27
       
27
       
-
       
          key={index}

     

       
28
       
28
       
-
       
          className="bar"

     

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

     

       
30
       
30
       
-
       
        >

     

       
31
       
31
       
-
       
        </div>

     

       
32
       
32
       
-
       
      ))}

     

       
33
       
33
       
-
       


     

       
34
       
34
       
-
       
      <style jsx>

     

       
35
       
35
       
-
       
        {`

     

       
36
       
36
       
-
       
        .visualizer {

     

       
37
       
37
       
-
       
          display: flex;

     

       
38
       
38
       
-
       
          align-items: center;

     

       
39
       
39
       
-
       
          gap: 1px;

     

       
40
       
40
       
-
       
          height: 50px;

     

       
41
       
41
       
-
       
        }

     

       
42
       
42
       
-
       


     

       
43
       
43
       
-
       
        .bar {

     

       
44
       
44
       
-
       
          width: 2px;

     

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

     

       
46
       
46
       
-
       
          border-radius: 1px;

     

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

     

       
48
       
48
       
-
       
        }

     

       
49
       
49
       
-
       
        

     

       
50
       
50
       
-
       
        @keyframes wave {

     

       
51
       
51
       
-
       
          0%, 100% {

     

       
52
       
52
       
-
       
            /* Start/End Height */

     

       
53
       
53
       
-
       
            height: 5px; 

     

       
54
       
54
       
-
       
          }

     

       
55
       
55
       
-
       
          50% {

     

       
56
       
56
       
-
       
            /* Peak Height */

     

       
57
       
57
       
-
       
            height: 30px; 

     

       
58
       
58
       
-
       
          }

     

       
59
       
59
       
-
       
        }

     

       
60
       
60
       
-
       
      `}

     

       
61
       
61
       
-
       
      </style>

     

       
62
       
62
       
-
       
    </div>

     

       
63
       
63
       
-
       
  );

     

       
64
       
64
       
-
       
}

     

···

       
1
       
1
       
-
       
<section id="header">

     

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

     

       
3
       
3
       
-
       
    <svg

     

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

     

       
5
       
5
       
-
       
      width="24"

     

       
6
       
6
       
-
       
      height="24"

     

       
7
       
7
       
-
       
      viewBox="0 0 24 24"

     

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

     

       
9
       
9
       
-
       
      ><path

     

       
10
       
10
       
-
       
        fill="gold"

     

       
11
       
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
       
12
       
-
       
      ></path></svg

     

       
13
       
13
       
-
       
    >

     

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

     

       
15
       
15
       
-
       
  </h1>

     

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

     

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

     

       
18
       
18
       
-
       
  >

     

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

     

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

     

       
21
       
21
       
-
       
  >

     

       
22
       
22
       
-
       
  <small

     

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

     

       
24
       
24
       
-
       
  >

     

       
25
       
25
       
-
       
    he/him

     

       
26
       
26
       
-
       
  </small>

     

       
27
       
27
       
-
       
</section>

     

···

       
1
       
1
       
-
       
---

     

       
2
       
2
       
-
       
interface Props {

     

       
3
       
3
       
-
       
  title: string;

     

       
4
       
4
       
-
       
  description: string;

     

       
5
       
5
       
-
       
  date: string;

     

       
6
       
6
       
-
       
  href: string;

     

       
7
       
7
       
-
       
  note?: string;

     

       
8
       
8
       
-
       
}

     

       
9
       
9
       
-
       


     

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

     

       
11
       
11
       
-
       
---

     

       
12
       
12
       
-
       


     

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

     

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

     

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

     

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

     

       
17
       
17
       
-
       
    {description}

     

       
18
       
18
       
-
       
    {

     

       
19
       
19
       
-
       
      note && (

     

       
20
       
20
       
-
       
        <>

     

       
21
       
21
       
-
       
          <br />

     

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

     

       
23
       
23
       
-
       
        </>

     

       
24
       
24
       
-
       
      )

     

       
25
       
25
       
-
       
    }

     

       
26
       
26
       
-
       
  </div>

     

       
27
       
27
       
-
       
</a>

     

···

       
1
       
1
       
-
       
---

     

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

     

       
3
       
3
       
-
       


     

       
4
       
4
       
-
       
interface Props {

     

       
5
       
5
       
-
       
  icon?: any;

     

       
6
       
6
       
-
       
  name: string;

     

       
7
       
7
       
-
       
  href: string;

     

       
8
       
8
       
-
       
  tooltip?: {

     

       
9
       
9
       
-
       
    title: string;

     

       
10
       
10
       
-
       
    placement?: string;

     

       
11
       
11
       
-
       
  };

     

       
12
       
12
       
-
       
  rel?: string;

     

       
13
       
13
       
-
       
}

     

       
14
       
14
       
-
       


     

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

     

       
16
       
16
       
-
       


     

       
17
       
17
       
-
       
const Icon = icon;

     

       
18
       
18
       
-
       
---

     

       
19
       
19
       
-
       


     

       
20
       
20
       
-
       
<a

     

       
21
       
21
       
-
       
  rel={rel}

     

       
22
       
22
       
-
       
  href={href}

     

       
23
       
23
       
-
       
  target="_blank"

     

       
24
       
24
       
-
       
  {...tooltip && {

     

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

     

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

     

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

     

       
28
       
28
       
-
       
  }}

     

       
29
       
29
       
-
       
>

     

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

     

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

     

       
32
       
32
       
-
       
  </span>

     

       
33
       
33
       
-
       
</a>

     

       
34
       
34
       
-
       


     

       
35
       
35
       
-
       
<style>

     

       
36
       
36
       
-
       
  .icon-hover {

     

       
37
       
37
       
-
       
    display: inline-block;

     

       
38
       
38
       
-
       
    transition: transform 0.2s ease;

     

       
39
       
39
       
-
       
  }

     

       
40
       
40
       
-
       
  a:hover .icon-hover {

     

       
41
       
41
       
-
       
    transform: scale(1.12);

     

       
42
       
42
       
-
       
  }

     

       
43
       
43
       
-
       
</style>

     

···

       
1
       
1
       
-
       
---

     

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

     

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

     

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

     

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

     

       
6
       
6
       
-
       


     

       
7
       
7
       
-
       
const links = [

     

       
8
       
8
       
-
       
  {

     

       
9
       
9
       
-
       
    icon: Bluesky,

     

       
10
       
10
       
-
       
    name: "Bluesky",

     

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

     

       
12
       
12
       
-
       
  },

     

       
13
       
13
       
-
       
  {

     

       
14
       
14
       
-
       
    icon: Discord,

     

       
15
       
15
       
-
       
    name: "Discord",

     

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

     

       
17
       
17
       
-
       
    tooltip: {

     

       
18
       
18
       
-
       
      title: "index.lua",

     

       
19
       
19
       
-
       
      placement: "top",

     

       
20
       
20
       
-
       
    },

     

       
21
       
21
       
-
       
  },

     

       
22
       
22
       
-
       
  {

     

       
23
       
23
       
-
       
    icon: Tangled,

     

       
24
       
24
       
-
       
    name: "Tangled",

     

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

     

       
26
       
26
       
-
       
  },

     

       
27
       
27
       
-
       
];

     

       
28
       
28
       
-
       
---

     

       
29
       
29
       
-
       


     

       
30
       
30
       
-
       
<ul

     

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

     

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

     

       
33
       
33
       
-
       
>

     

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

     

       
35
       
35
       
-
       
</ul>

     

···

       
1
       
1
       
+
       
<section id="header">

     

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

     

       
3
       
3
       
+
       
    <svg

     

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

     

       
5
       
5
       
+
       
      width="24"

     

       
6
       
6
       
+
       
      height="24"

     

       
7
       
7
       
+
       
      viewBox="0 0 24 24"

     

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

     

       
9
       
9
       
+
       
      ><path

     

       
10
       
10
       
+
       
        fill="gold"

     

       
11
       
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
       
12
       
+
       
      ></path></svg

     

       
13
       
13
       
+
       
    >

     

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

     

       
15
       
15
       
+
       
  </h1>

     

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

     

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

     

       
18
       
18
       
+
       
  >

     

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

     

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

     

       
21
       
21
       
+
       
  >

     

       
22
       
22
       
+
       
  <small

     

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

     

       
24
       
24
       
+
       
  >

     

       
25
       
25
       
+
       
    he/him

     

       
26
       
26
       
+
       
  </small>

     

       
27
       
27
       
+
       
</section>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
interface Props {

     

       
3
       
3
       
+
       
  title: string;

     

       
4
       
4
       
+
       
  description: string;

     

       
5
       
5
       
+
       
  date: string;

     

       
6
       
6
       
+
       
  href: string;

     

       
7
       
7
       
+
       
  note?: string;

     

       
8
       
8
       
+
       
}

     

       
9
       
9
       
+
       


     

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

     

       
11
       
11
       
+
       
---

     

       
12
       
12
       
+
       


     

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

     

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

     

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

     

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

     

       
17
       
17
       
+
       
    {description}

     

       
18
       
18
       
+
       
    {

     

       
19
       
19
       
+
       
      note && (

     

       
20
       
20
       
+
       
        <>

     

       
21
       
21
       
+
       
          <br />

     

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

     

       
23
       
23
       
+
       
        </>

     

       
24
       
24
       
+
       
      )

     

       
25
       
25
       
+
       
    }

     

       
26
       
26
       
+
       
  </div>

     

       
27
       
27
       
+
       
</a>

     

···

       
1
       
1
       
+
       
---

     

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

     

       
3
       
3
       
+
       


     

       
4
       
4
       
+
       
interface Props {

     

       
5
       
5
       
+
       
  icon?: any;

     

       
6
       
6
       
+
       
  name: string;

     

       
7
       
7
       
+
       
  href: string;

     

       
8
       
8
       
+
       
  tooltip?: {

     

       
9
       
9
       
+
       
    title: string;

     

       
10
       
10
       
+
       
    placement?: string;

     

       
11
       
11
       
+
       
  };

     

       
12
       
12
       
+
       
  rel?: string;

     

       
13
       
13
       
+
       
}

     

       
14
       
14
       
+
       


     

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

     

       
16
       
16
       
+
       


     

       
17
       
17
       
+
       
const Icon = icon;

     

       
18
       
18
       
+
       
---

     

       
19
       
19
       
+
       


     

       
20
       
20
       
+
       
<a

     

       
21
       
21
       
+
       
  rel={rel}

     

       
22
       
22
       
+
       
  href={href}

     

       
23
       
23
       
+
       
  target="_blank"

     

       
24
       
24
       
+
       
  {...tooltip && {

     

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

     

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

     

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

     

       
28
       
28
       
+
       
  }}

     

       
29
       
29
       
+
       
>

     

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

     

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

     

       
32
       
32
       
+
       
  </span>

     

       
33
       
33
       
+
       
</a>

     

       
34
       
34
       
+
       


     

       
35
       
35
       
+
       
<style>

     

       
36
       
36
       
+
       
  .icon-hover {

     

       
37
       
37
       
+
       
    display: inline-block;

     

       
38
       
38
       
+
       
    transition: transform 0.2s ease;

     

       
39
       
39
       
+
       
  }

     

       
40
       
40
       
+
       
  a:hover .icon-hover {

     

       
41
       
41
       
+
       
    transform: scale(1.12);

     

       
42
       
42
       
+
       
  }

     

       
43
       
43
       
+
       
</style>

     

···

       
1
       
1
       
+
       
---

     

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

     

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

     

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

     

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

     

       
6
       
6
       
+
       


     

       
7
       
7
       
+
       
const links = [

     

       
8
       
8
       
+
       
  {

     

       
9
       
9
       
+
       
    icon: Bluesky,

     

       
10
       
10
       
+
       
    name: "Bluesky",

     

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

     

       
12
       
12
       
+
       
  },

     

       
13
       
13
       
+
       
  {

     

       
14
       
14
       
+
       
    icon: Discord,

     

       
15
       
15
       
+
       
    name: "Discord",

     

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

     

       
17
       
17
       
+
       
    tooltip: {

     

       
18
       
18
       
+
       
      title: "index.lua",

     

       
19
       
19
       
+
       
      placement: "top",

     

       
20
       
20
       
+
       
    },

     

       
21
       
21
       
+
       
  },

     

       
22
       
22
       
+
       
  {

     

       
23
       
23
       
+
       
    icon: Tangled,

     

       
24
       
24
       
+
       
    name: "Tangled",

     

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

     

       
26
       
26
       
+
       
  },

     

       
27
       
27
       
+
       
];

     

       
28
       
28
       
+
       
---

     

       
29
       
29
       
+
       


     

       
30
       
30
       
+
       
<ul

     

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

     

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

     

       
33
       
33
       
+
       
>

     

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

     

       
35
       
35
       
+
       
</ul>

     

···

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

     

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

     

       
3
       
3
       
-
       


     

       
4
       
4
       
-
       
export default function Lastfm() {

     

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

     

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

     

       
7
       
7
       
-
       


     

       
8
       
8
       
-
       
    useEffect(() => {

     

       
9
       
9
       
-
       
        const fetchLastfmData = async () => {

     

       
10
       
10
       
-
       
            try {

     

       
11
       
11
       
-
       
                const res = await fetch(

     

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

     

       
13
       
13
       
-
       
                );

     

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

     

       
15
       
15
       
-
       


     

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

     

       
17
       
17
       
-
       
                const status = {

     

       
18
       
18
       
-
       
                    song: json.track,

     

       
19
       
19
       
-
       
                    artist: json.artist,

     

       
20
       
20
       
-
       
                    albumArt: json.cover,

     

       
21
       
21
       
-
       
                    createdAt: json.createdAt,

     

       
22
       
22
       
-
       
                    link: json.url,

     

       
23
       
23
       
-
       
                    nowPlaying: !json.createdAt,

     

       
24
       
24
       
-
       
                };

     

       
25
       
25
       
-
       
                setData(status);

     

       
26
       
26
       
-
       
            } catch (err) {

     

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

     

       
28
       
28
       
-
       
                setError(err.message);

     

       
29
       
29
       
-
       
            }

     

       
30
       
30
       
-
       
        };

     

       
31
       
31
       
-
       


     

       
32
       
32
       
-
       
        fetchLastfmData();

     

       
33
       
33
       
-
       
    }, []);

     

       
34
       
34
       
-
       


     

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

     

       
36
       
36
       
-
       


     

       
37
       
37
       
-
       
    let timeAgo = "";

     

       
38
       
38
       
-
       
    let oldStatusClasses = "";

     

       
39
       
39
       
-
       


     

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

     

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

     

       
42
       
42
       
-
       
        const now = new Date();

     

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

     

       
44
       
44
       
-
       


     

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

     

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

     

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

     

       
48
       
48
       
-
       


     

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

     

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

     

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

     

       
52
       
52
       
-
       
        else timeAgo = "just now";

     

       
53
       
53
       
-
       


     

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

     

       
55
       
55
       
-
       


     

       
56
       
56
       
-
       
        oldStatusClasses = days > 3

     

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

     

       
58
       
58
       
-
       
            : "";

     

       
59
       
59
       
-
       
    }

     

       
60
       
60
       
-
       


     

       
61
       
61
       
-
       
    return (

     

       
62
       
62
       
-
       
        <a

     

       
63
       
63
       
-
       
            id="now-playing"

     

       
64
       
64
       
-
       
            href={data.link}

     

       
65
       
65
       
-
       
            target="_blank"

     

       
66
       
66
       
-
       
            className={oldStatusClasses}

     

       
67
       
67
       
-
       
        >

     

       
68
       
68
       
-
       
            <AudioVisualizer />

     

       
69
       
69
       
-
       
            <div

     

       
70
       
70
       
-
       
                style={{

     

       
71
       
71
       
-
       
                    display: "flex",

     

       
72
       
72
       
-
       
                    flexDirection: "column",

     

       
73
       
73
       
-
       
                    gap: "2px",

     

       
74
       
74
       
-
       
                    width: "100%",

     

       
75
       
75
       
-
       
                }}

     

       
76
       
76
       
-
       
            >

     

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

     

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

     

       
79
       
79
       
-
       
                    {data.artist}

     

       
80
       
80
       
-
       
                </div>

     

       
81
       
81
       
-
       
                <div

     

       
82
       
82
       
-
       
                    style={{

     

       
83
       
83
       
-
       
                        fontSize: "0.8em",

     

       
84
       
84
       
-
       
                        opacity: 0.7,

     

       
85
       
85
       
-
       
                        marginTop: "-5px",

     

       
86
       
86
       
-
       
                    }}

     

       
87
       
87
       
-
       
                >

     

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

     

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

     

       
90
       
90
       
-
       
                    </small>

     

       
91
       
91
       
-
       
                </div>

     

       
92
       
92
       
-
       
            </div>

     

       
93
       
93
       
-
       
        </a>

     

       
94
       
94
       
-
       
    );

     

       
95
       
95
       
-
       
}

     

···

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

     

       
2
       
2
       
-
       


     

       
3
       
3
       
-
       
export default function NowPlaying() {

     

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

     

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

     

       
6
       
6
       
-
       


     

       
7
       
7
       
-
       
    useEffect(() => {

     

       
8
       
8
       
-
       
        const fetchProjectData = async () => {

     

       
9
       
9
       
-
       
            try {

     

       
10
       
10
       
-
       
                const res = await fetch(

     

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

     

       
12
       
12
       
-
       
                );

     

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

     

       
14
       
14
       
-
       


     

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

     

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

     

       
17
       
17
       
-
       


     

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

     

       
19
       
19
       
-
       
                    title: project.name,

     

       
20
       
20
       
-
       
                    description: project.description,

     

       
21
       
21
       
-
       
                    date: project.dateLabel,

     

       
22
       
22
       
-
       
                    href: project.url,

     

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

     

       
24
       
24
       
-
       
                })));

     

       
25
       
25
       
-
       
            } catch (err) {

     

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

     

       
27
       
27
       
-
       
                setError(err.message);

     

       
28
       
28
       
-
       
            }

     

       
29
       
29
       
-
       
        };

     

       
30
       
30
       
-
       


     

       
31
       
31
       
-
       
        fetchProjectData();

     

       
32
       
32
       
-
       
    }, []);

     

       
33
       
33
       
-
       


     

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

     

       
35
       
35
       
-
       
    if (!data) return null;

     

       
36
       
36
       
-
       


     

       
37
       
37
       
-
       
    return (

     

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

     

       
39
       
39
       
-
       
            <h6

     

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

     

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

     

       
42
       
42
       
-
       
            >

     

       
43
       
43
       
-
       
                My Recent Projects

     

       
44
       
44
       
-
       
            </h6>

     

       
45
       
45
       
-
       


     

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

     

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

     

       
48
       
48
       
-
       
                    <li>

     

       
49
       
49
       
-
       
                        <a

     

       
50
       
50
       
-
       
                            href={project.href}

     

       
51
       
51
       
-
       
                            target="_blank"

     

       
52
       
52
       
-
       
                            className="text-reset"

     

       
53
       
53
       
-
       
                        >

     

       
54
       
54
       
-
       
                            <div

     

       
55
       
55
       
-
       
                                className="project-card"

     

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

     

       
57
       
57
       
-
       
                            >

     

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

     

       
59
       
59
       
-
       
                                    {project.date}

     

       
60
       
60
       
-
       
                                </small>

     

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

     

       
62
       
62
       
-
       
                                {project.description}

     

       
63
       
63
       
-
       
                                {project.note && (

     

       
64
       
64
       
-
       
                                    <>

     

       
65
       
65
       
-
       
                                        <br />

     

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

     

       
67
       
67
       
-
       
                                            {project.note}

     

       
68
       
68
       
-
       
                                        </small>

     

       
69
       
69
       
-
       
                                    </>

     

       
70
       
70
       
-
       
                                )}

     

       
71
       
71
       
-
       
                            </div>

     

       
72
       
72
       
-
       
                        </a>

     

       
73
       
73
       
-
       
                    </li>

     

       
74
       
74
       
-
       
                ))}

     

       
75
       
75
       
-
       
            </ul>

     

       
76
       
76
       
-
       
        </section>

     

       
77
       
77
       
-
       
    );

     

       
78
       
78
       
-
       
}

     

···

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

     

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

     

       
3
       
3
       
-
       


     

       
4
       
4
       
-
       
if (!actorDid) {

     

       
5
       
5
       
-
       
    console.error(

     

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

     

       
7
       
7
       
-
       
    );

     

       
8
       
8
       
-
       
}

     

       
9
       
9
       
-
       


     

       
10
       
10
       
-
       
export default function Status() {

     

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

     

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

     

       
13
       
13
       
-
       


     

       
14
       
14
       
-
       
    useEffect(() => {

     

       
15
       
15
       
-
       
        const fetchStatus = async () => {

     

       
16
       
16
       
-
       
            if (!actorDid) {

     

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

     

       
18
       
18
       
-
       
                return;

     

       
19
       
19
       
-
       
            }

     

       
20
       
20
       
-
       
            try {

     

       
21
       
21
       
-
       
                const res = await fetch(

     

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

     

       
23
       
23
       
-
       
                );

     

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

     

       
25
       
25
       
-
       


     

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

     

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

     

       
28
       
28
       
-
       


     

       
29
       
29
       
-
       
                const status = {

     

       
30
       
30
       
-
       
                    text: latestPost.record.text,

     

       
31
       
31
       
-
       
                    createdAt: latestPost.record.createdAt,

     

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

     

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

     

       
34
       
34
       
-
       
                    }`,

     

       
35
       
35
       
-
       
                };

     

       
36
       
36
       
-
       
                setData(status);

     

       
37
       
37
       
-
       
            } catch (err) {

     

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

     

       
39
       
39
       
-
       
                setError(err.message);

     

       
40
       
40
       
-
       
            }

     

       
41
       
41
       
-
       
        };

     

       
42
       
42
       
-
       


     

       
43
       
43
       
-
       
        fetchStatus();

     

       
44
       
44
       
-
       
    }, [actorDid]);

     

       
45
       
45
       
-
       


     

       
46
       
46
       
-
       
    if (error) {

     

       
47
       
47
       
-
       
        return (

     

       
48
       
48
       
-
       
            <span

     

       
49
       
49
       
-
       
                className="badge bg-dark"

     

       
50
       
50
       
-
       
                style={{

     

       
51
       
51
       
-
       
                    color: "#595959 !important",

     

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

     

       
53
       
53
       
-
       
                    //outlineOffset: "1px",

     

       
54
       
54
       
-
       
                }}

     

       
55
       
55
       
-
       
            >

     

       
56
       
56
       
-
       
                Error: {error}

     

       
57
       
57
       
-
       
            </span>

     

       
58
       
58
       
-
       
        );

     

       
59
       
59
       
-
       
    }

     

       
60
       
60
       
-
       
    if (!data) {

     

       
61
       
61
       
-
       
        return (

     

       
62
       
62
       
-
       
            <span

     

       
63
       
63
       
-
       
                className="badge bg-dark"

     

       
64
       
64
       
-
       
                style={{

     

       
65
       
65
       
-
       
                    color: "#595959 !important",

     

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

     

       
67
       
67
       
-
       
                    //outlineOffset: "1px",

     

       
68
       
68
       
-
       
                }}

     

       
69
       
69
       
-
       
            >

     

       
70
       
70
       
-
       
                Loading status...

     

       
71
       
71
       
-
       
            </span>

     

       
72
       
72
       
-
       
        );

     

       
73
       
73
       
-
       
    }

     

       
74
       
74
       
-
       


     

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

     

       
76
       
76
       
-
       
    const now = new Date();

     

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

     

       
78
       
78
       
-
       


     

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

     

       
80
       
80
       
-
       


     

       
81
       
81
       
-
       
    if (days >= 2) {

     

       
82
       
82
       
-
       
        return null;

     

       
83
       
83
       
-
       
    }

     

       
84
       
84
       
-
       


     

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

     

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

     

       
87
       
87
       
-
       


     

       
88
       
88
       
-
       
    let timeAgo = "just now";

     

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

     

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

     

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

     

       
92
       
92
       
-
       


     

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

     

       
94
       
94
       
-
       


     

       
95
       
95
       
-
       
    const oldStatusClasses = days >= 1

     

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

     

       
97
       
97
       
-
       
        : "";

     

       
98
       
98
       
-
       


     

       
99
       
99
       
-
       
    return (

     

       
100
       
100
       
-
       
        <a

     

       
101
       
101
       
-
       
            href={data.link}

     

       
102
       
102
       
-
       
            target="_blank"

     

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

     

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

     

       
105
       
105
       
-
       
        >

     

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

     

       
107
       
107
       
-
       
        </a>

     

       
108
       
108
       
-
       
    );

     

       
109
       
109
       
-
       
}

     

···

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

     

       
2
       
2
       
-
       


     

       
3
       
3
       
-
       
export default function Tealfm() {

     

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

     

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

     

       
6
       
6
       
-
       


     

       
7
       
7
       
-
       
    useEffect(() => {

     

       
8
       
8
       
-
       
        const fetchTealfmData = async () => {

     

       
9
       
9
       
-
       
            try {

     

       
10
       
10
       
-
       
                const res = await fetch(

     

       
11
       
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
       
12
       
-
       
                );

     

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

     

       
14
       
14
       
-
       


     

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

     

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

     

       
17
       
17
       
-
       


     

       
18
       
18
       
-
       
                const status = {

     

       
19
       
19
       
-
       
                    song: latest.trackName,

     

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

     

       
21
       
21
       
-
       
                        .join(", "),

     

       
22
       
22
       
-
       
                    albumArt:

     

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

     

       
24
       
24
       
-
       
                    createdAt: latest.playedTime,

     

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

     

       
26
       
26
       
-
       
                };

     

       
27
       
27
       
-
       
                setData(status);

     

       
28
       
28
       
-
       
            } catch (err) {

     

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

     

       
30
       
30
       
-
       
                setError(err.message);

     

       
31
       
31
       
-
       
            }

     

       
32
       
32
       
-
       
        };

     

       
33
       
33
       
-
       


     

       
34
       
34
       
-
       
        fetchTealfmData();

     

       
35
       
35
       
-
       
    }, []);

     

       
36
       
36
       
-
       


     

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

     

       
38
       
38
       
-
       
    if (!data) return null;

     

       
39
       
39
       
-
       


     

       
40
       
40
       
-
       
    let timeAgo = "";

     

       
41
       
41
       
-
       
    let oldStatusClasses = "";

     

       
42
       
42
       
-
       


     

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

     

       
44
       
44
       
-
       
    const now = new Date();

     

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

     

       
46
       
46
       
-
       


     

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

     

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

     

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

     

       
50
       
50
       
-
       


     

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

     

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

     

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

     

       
54
       
54
       
-
       
    else timeAgo = "just now";

     

       
55
       
55
       
-
       


     

       
56
       
56
       
-
       
    oldStatusClasses = days > 3

     

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

     

       
58
       
58
       
-
       
        : "";

     

       
59
       
59
       
-
       


     

       
60
       
60
       
-
       
    return (

     

       
61
       
61
       
-
       
        <a

     

       
62
       
62
       
-
       
            id="now-playing"

     

       
63
       
63
       
-
       
            href={data.link}

     

       
64
       
64
       
-
       
            target="_blank"

     

       
65
       
65
       
-
       
            className={oldStatusClasses}

     

       
66
       
66
       
-
       
        >

     

       
67
       
67
       
-
       
            <img

     

       
68
       
68
       
-
       
                src={data.albumArt}

     

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

     

       
70
       
70
       
-
       
            />

     

       
71
       
71
       
-
       
            <div

     

       
72
       
72
       
-
       
                style={{

     

       
73
       
73
       
-
       
                    display: "flex",

     

       
74
       
74
       
-
       
                    flexDirection: "column",

     

       
75
       
75
       
-
       
                    gap: "2px",

     

       
76
       
76
       
-
       
                    width: "100%",

     

       
77
       
77
       
-
       
                }}

     

       
78
       
78
       
-
       
            >

     

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

     

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

     

       
81
       
81
       
-
       
                    {data.artist}

     

       
82
       
82
       
-
       
                </div>

     

       
83
       
83
       
-
       
                <div

     

       
84
       
84
       
-
       
                    style={{

     

       
85
       
85
       
-
       
                        fontSize: "0.8em",

     

       
86
       
86
       
-
       
                        opacity: 0.7,

     

       
87
       
87
       
-
       
                        marginTop: "-5px",

     

       
88
       
88
       
-
       
                    }}

     

       
89
       
89
       
-
       
                >

     

       
90
       
90
       
-
       
                    {timeAgo}

     

       
91
       
91
       
-
       
                </div>

     

       
92
       
92
       
-
       
            </div>

     

       
93
       
93
       
-
       
        </a>

     

       
94
       
94
       
-
       
    );

     

       
95
       
95
       
-
       
}

     

···

       
1
       
1
       
+
       
import React from "react";

     

       
2
       
2
       
+
       


     

       
3
       
3
       
+
       
const BAR_COUNT = 15;

     

       
4
       
4
       
+
       
const BAR_ANIMATION_DELAYS = [

     

       
5
       
5
       
+
       
  "0.3s",

     

       
6
       
6
       
+
       
  "0.7s",

     

       
7
       
7
       
+
       
  "0.1s",

     

       
8
       
8
       
+
       
  "0.9s",

     

       
9
       
9
       
+
       
  "0.4s",

     

       
10
       
10
       
+
       
  "0.2s",

     

       
11
       
11
       
+
       
  "0.8s",

     

       
12
       
12
       
+
       
  "0.5s",

     

       
13
       
13
       
+
       
  "0s",

     

       
14
       
14
       
+
       
  "0.6s",

     

       
15
       
15
       
+
       
  "0.3s",

     

       
16
       
16
       
+
       
  "0.9s",

     

       
17
       
17
       
+
       
  "0.1s",

     

       
18
       
18
       
+
       
  "0.7s",

     

       
19
       
19
       
+
       
  "0.4s",

     

       
20
       
20
       
+
       
];

     

       
21
       
21
       
+
       


     

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

     

       
23
       
23
       
+
       
  // Define the base animation style

     

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

     

       
25
       
25
       
+
       


     

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

     

       
27
       
27
       
+
       
  const silentStyle = {

     

       
28
       
28
       
+
       
    animation: "none",

     

       
29
       
29
       
+
       
    height: "5px",

     

       
30
       
30
       
+
       
  };

     

       
31
       
31
       
+
       


     

       
32
       
32
       
+
       
  return (

     

       
33
       
33
       
+
       
    <div className="visualizer">

     

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

     

       
35
       
35
       
+
       
        // Determine the specific style for each bar

     

       
36
       
36
       
+
       
        const barStyle = isSilent

     

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

     

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

     

       
39
       
39
       
+
       
            animation: activeAnimation,

     

       
40
       
40
       
+
       
            animationDelay: BAR_ANIMATION_DELAYS[index],

     

       
41
       
41
       
+
       
          };

     

       
42
       
42
       
+
       


     

       
43
       
43
       
+
       
        return (

     

       
44
       
44
       
+
       
          <div

     

       
45
       
45
       
+
       
            key={index}

     

       
46
       
46
       
+
       
            className="bar"

     

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

     

       
48
       
48
       
+
       
          >

     

       
49
       
49
       
+
       
          </div>

     

       
50
       
50
       
+
       
        );

     

       
51
       
51
       
+
       
      })}

     

       
52
       
52
       
+
       


     

       
53
       
53
       
+
       
      <style jsx>

     

       
54
       
54
       
+
       
        {`

     

       
55
       
55
       
+
       
        .visualizer {

     

       
56
       
56
       
+
       
          display: flex;

     

       
57
       
57
       
+
       
          align-items: center;

     

       
58
       
58
       
+
       
          gap: 1px;

     

       
59
       
59
       
+
       
          height: 50px;

     

       
60
       
60
       
+
       
        }

     

       
61
       
61
       
+
       


     

       
62
       
62
       
+
       
        .bar {

     

       
63
       
63
       
+
       
          width: 2px;

     

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

     

       
65
       
65
       
+
       
          border-radius: 1px;

     

       
66
       
66
       
+
       
        }

     

       
67
       
67
       
+
       
        

     

       
68
       
68
       
+
       
        @keyframes wave {

     

       
69
       
69
       
+
       
          0%, 100% {

     

       
70
       
70
       
+
       
            height: 5px; 

     

       
71
       
71
       
+
       
          }

     

       
72
       
72
       
+
       
          50% {

     

       
73
       
73
       
+
       
            height: 30px; 

     

       
74
       
74
       
+
       
          }

     

       
75
       
75
       
+
       
        }

     

       
76
       
76
       
+
       
      `}

     

       
77
       
77
       
+
       
      </style>

     

       
78
       
78
       
+
       
    </div>

     

       
79
       
79
       
+
       
  );

     

       
80
       
80
       
+
       
}

     

···

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

     

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

     

       
3
       
3
       
+
       


     

       
4
       
4
       
+
       
export default function Lastfm() {

     

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

     

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

     

       
7
       
7
       
+
       


     

       
8
       
8
       
+
       
    useEffect(() => {

     

       
9
       
9
       
+
       
        const fetchLastfmData = async () => {

     

       
10
       
10
       
+
       
            try {

     

       
11
       
11
       
+
       
                const res = await fetch(

     

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

     

       
13
       
13
       
+
       
                );

     

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

     

       
15
       
15
       
+
       


     

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

     

       
17
       
17
       
+
       
                const status = {

     

       
18
       
18
       
+
       
                    song: json.track,

     

       
19
       
19
       
+
       
                    artist: json.artist,

     

       
20
       
20
       
+
       
                    albumArt: json.cover,

     

       
21
       
21
       
+
       
                    createdAt: json.createdAt,

     

       
22
       
22
       
+
       
                    link: json.url,

     

       
23
       
23
       
+
       
                    nowPlaying: !json.createdAt,

     

       
24
       
24
       
+
       
                };

     

       
25
       
25
       
+
       
                setData(status);

     

       
26
       
26
       
+
       
            } catch (err) {

     

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

     

       
28
       
28
       
+
       
                setError(err.message);

     

       
29
       
29
       
+
       
            }

     

       
30
       
30
       
+
       
        };

     

       
31
       
31
       
+
       


     

       
32
       
32
       
+
       
        fetchLastfmData();

     

       
33
       
33
       
+
       
    }, []);

     

       
34
       
34
       
+
       


     

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

     

       
36
       
36
       
+
       


     

       
37
       
37
       
+
       
    let timeAgo = "";

     

       
38
       
38
       
+
       
    let oldStatusClasses = "";

     

       
39
       
39
       
+
       


     

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

     

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

     

       
42
       
42
       
+
       
        const now = new Date();

     

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

     

       
44
       
44
       
+
       


     

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

     

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

     

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

     

       
48
       
48
       
+
       


     

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

     

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

     

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

     

       
52
       
52
       
+
       
        else timeAgo = "just now";

     

       
53
       
53
       
+
       


     

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

     

       
55
       
55
       
+
       


     

       
56
       
56
       
+
       
        oldStatusClasses = days > 3

     

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

     

       
58
       
58
       
+
       
            : "";

     

       
59
       
59
       
+
       
    }

     

       
60
       
60
       
+
       


     

       
61
       
61
       
+
       
    return (

     

       
62
       
62
       
+
       
        <a

     

       
63
       
63
       
+
       
            id="now-playing"

     

       
64
       
64
       
+
       
            href={data.link}

     

       
65
       
65
       
+
       
            target="_blank"

     

       
66
       
66
       
+
       
            className={oldStatusClasses}

     

       
67
       
67
       
+
       
        >

     

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

     

       
69
       
69
       
+
       
            <div

     

       
70
       
70
       
+
       
                style={{

     

       
71
       
71
       
+
       
                    display: "flex",

     

       
72
       
72
       
+
       
                    flexDirection: "column",

     

       
73
       
73
       
+
       
                    gap: "2px",

     

       
74
       
74
       
+
       
                    width: "100%",

     

       
75
       
75
       
+
       
                }}

     

       
76
       
76
       
+
       
            >

     

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

     

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

     

       
79
       
79
       
+
       
                    {data.artist}

     

       
80
       
80
       
+
       
                </div>

     

       
81
       
81
       
+
       
                <div

     

       
82
       
82
       
+
       
                    style={{

     

       
83
       
83
       
+
       
                        fontSize: "0.8em",

     

       
84
       
84
       
+
       
                        opacity: 0.7,

     

       
85
       
85
       
+
       
                        marginTop: "-5px",

     

       
86
       
86
       
+
       
                    }}

     

       
87
       
87
       
+
       
                >

     

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

     

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

     

       
90
       
90
       
+
       
                    </small>

     

       
91
       
91
       
+
       
                </div>

     

       
92
       
92
       
+
       
            </div>

     

       
93
       
93
       
+
       
        </a>

     

       
94
       
94
       
+
       
    );

     

       
95
       
95
       
+
       
}

     

···

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

     

       
2
       
2
       
+
       


     

       
3
       
3
       
+
       
export default function NowPlaying() {

     

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

     

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

     

       
6
       
6
       
+
       


     

       
7
       
7
       
+
       
    useEffect(() => {

     

       
8
       
8
       
+
       
        const fetchProjectData = async () => {

     

       
9
       
9
       
+
       
            try {

     

       
10
       
10
       
+
       
                const res = await fetch(

     

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

     

       
12
       
12
       
+
       
                );

     

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

     

       
14
       
14
       
+
       


     

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

     

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

     

       
17
       
17
       
+
       


     

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

     

       
19
       
19
       
+
       
                    title: project.name,

     

       
20
       
20
       
+
       
                    description: project.description,

     

       
21
       
21
       
+
       
                    date: project.dateLabel,

     

       
22
       
22
       
+
       
                    href: project.url,

     

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

     

       
24
       
24
       
+
       
                })));

     

       
25
       
25
       
+
       
            } catch (err) {

     

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

     

       
27
       
27
       
+
       
                setError(err.message);

     

       
28
       
28
       
+
       
            }

     

       
29
       
29
       
+
       
        };

     

       
30
       
30
       
+
       


     

       
31
       
31
       
+
       
        fetchProjectData();

     

       
32
       
32
       
+
       
    }, []);

     

       
33
       
33
       
+
       


     

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

     

       
35
       
35
       
+
       
    if (!data) return null;

     

       
36
       
36
       
+
       


     

       
37
       
37
       
+
       
    return (

     

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

     

       
39
       
39
       
+
       
            <h6

     

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

     

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

     

       
42
       
42
       
+
       
            >

     

       
43
       
43
       
+
       
                My Recent Projects

     

       
44
       
44
       
+
       
            </h6>

     

       
45
       
45
       
+
       


     

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

     

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

     

       
48
       
48
       
+
       
                    <li>

     

       
49
       
49
       
+
       
                        <a

     

       
50
       
50
       
+
       
                            href={project.href}

     

       
51
       
51
       
+
       
                            target="_blank"

     

       
52
       
52
       
+
       
                            className="text-reset"

     

       
53
       
53
       
+
       
                        >

     

       
54
       
54
       
+
       
                            <div

     

       
55
       
55
       
+
       
                                className="project-card"

     

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

     

       
57
       
57
       
+
       
                            >

     

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

     

       
59
       
59
       
+
       
                                    {project.date}

     

       
60
       
60
       
+
       
                                </small>

     

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

     

       
62
       
62
       
+
       
                                {project.description}

     

       
63
       
63
       
+
       
                                {project.note && (

     

       
64
       
64
       
+
       
                                    <>

     

       
65
       
65
       
+
       
                                        <br />

     

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

     

       
67
       
67
       
+
       
                                            {project.note}

     

       
68
       
68
       
+
       
                                        </small>

     

       
69
       
69
       
+
       
                                    </>

     

       
70
       
70
       
+
       
                                )}

     

       
71
       
71
       
+
       
                            </div>

     

       
72
       
72
       
+
       
                        </a>

     

       
73
       
73
       
+
       
                    </li>

     

       
74
       
74
       
+
       
                ))}

     

       
75
       
75
       
+
       
            </ul>

     

       
76
       
76
       
+
       
        </section>

     

       
77
       
77
       
+
       
    );

     

       
78
       
78
       
+
       
}

     

···

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

     

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

     

       
3
       
3
       
+
       


     

       
4
       
4
       
+
       
if (!actorDid) {

     

       
5
       
5
       
+
       
    console.error(

     

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

     

       
7
       
7
       
+
       
    );

     

       
8
       
8
       
+
       
}

     

       
9
       
9
       
+
       


     

       
10
       
10
       
+
       
export default function Status() {

     

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

     

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

     

       
13
       
13
       
+
       


     

       
14
       
14
       
+
       
    useEffect(() => {

     

       
15
       
15
       
+
       
        const fetchStatus = async () => {

     

       
16
       
16
       
+
       
            if (!actorDid) {

     

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

     

       
18
       
18
       
+
       
                return;

     

       
19
       
19
       
+
       
            }

     

       
20
       
20
       
+
       
            try {

     

       
21
       
21
       
+
       
                const res = await fetch(

     

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

     

       
23
       
23
       
+
       
                );

     

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

     

       
25
       
25
       
+
       


     

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

     

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

     

       
28
       
28
       
+
       


     

       
29
       
29
       
+
       
                const status = {

     

       
30
       
30
       
+
       
                    text: latestPost.record.text,

     

       
31
       
31
       
+
       
                    createdAt: latestPost.record.createdAt,

     

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

     

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

     

       
34
       
34
       
+
       
                    }`,

     

       
35
       
35
       
+
       
                };

     

       
36
       
36
       
+
       
                setData(status);

     

       
37
       
37
       
+
       
            } catch (err) {

     

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

     

       
39
       
39
       
+
       
                setError(err.message);

     

       
40
       
40
       
+
       
            }

     

       
41
       
41
       
+
       
        };

     

       
42
       
42
       
+
       


     

       
43
       
43
       
+
       
        fetchStatus();

     

       
44
       
44
       
+
       
    }, [actorDid]);

     

       
45
       
45
       
+
       


     

       
46
       
46
       
+
       
    if (error) {

     

       
47
       
47
       
+
       
        return (

     

       
48
       
48
       
+
       
            <span

     

       
49
       
49
       
+
       
                className="badge bg-dark"

     

       
50
       
50
       
+
       
                style={{

     

       
51
       
51
       
+
       
                    color: "#595959 !important",

     

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

     

       
53
       
53
       
+
       
                    //outlineOffset: "1px",

     

       
54
       
54
       
+
       
                }}

     

       
55
       
55
       
+
       
            >

     

       
56
       
56
       
+
       
                Error: {error}

     

       
57
       
57
       
+
       
            </span>

     

       
58
       
58
       
+
       
        );

     

       
59
       
59
       
+
       
    }

     

       
60
       
60
       
+
       
    if (!data) {

     

       
61
       
61
       
+
       
        return (

     

       
62
       
62
       
+
       
            <span

     

       
63
       
63
       
+
       
                className="badge bg-dark"

     

       
64
       
64
       
+
       
                style={{

     

       
65
       
65
       
+
       
                    color: "#595959 !important",

     

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

     

       
67
       
67
       
+
       
                    //outlineOffset: "1px",

     

       
68
       
68
       
+
       
                }}

     

       
69
       
69
       
+
       
            >

     

       
70
       
70
       
+
       
                Loading status...

     

       
71
       
71
       
+
       
            </span>

     

       
72
       
72
       
+
       
        );

     

       
73
       
73
       
+
       
    }

     

       
74
       
74
       
+
       


     

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

     

       
76
       
76
       
+
       
    const now = new Date();

     

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

     

       
78
       
78
       
+
       


     

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

     

       
80
       
80
       
+
       


     

       
81
       
81
       
+
       
    if (days >= 2) {

     

       
82
       
82
       
+
       
        return null;

     

       
83
       
83
       
+
       
    }

     

       
84
       
84
       
+
       


     

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

     

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

     

       
87
       
87
       
+
       


     

       
88
       
88
       
+
       
    let timeAgo = "just now";

     

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

     

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

     

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

     

       
92
       
92
       
+
       


     

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

     

       
94
       
94
       
+
       


     

       
95
       
95
       
+
       
    const oldStatusClasses = days >= 1

     

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

     

       
97
       
97
       
+
       
        : "";

     

       
98
       
98
       
+
       


     

       
99
       
99
       
+
       
    return (

     

       
100
       
100
       
+
       
        <a

     

       
101
       
101
       
+
       
            href={data.link}

     

       
102
       
102
       
+
       
            target="_blank"

     

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

     

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

     

       
105
       
105
       
+
       
        >

     

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

     

       
107
       
107
       
+
       
        </a>

     

       
108
       
108
       
+
       
    );

     

       
109
       
109
       
+
       
}

     

···

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

     

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

     

       
3
       
3
       
+
       


     

       
4
       
4
       
+
       
export default function Tealfm() {

     

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

     

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

     

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

     

       
8
       
8
       
+
       


     

       
9
       
9
       
+
       
    useEffect(() => {

     

       
10
       
10
       
+
       
        const fetchStatus = async () => {

     

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

     

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

     

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

     

       
14
       
14
       
+
       


     

       
15
       
15
       
+
       
            try {

     

       
16
       
16
       
+
       
                const statusUrl =

     

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

     

       
18
       
18
       
+
       
                const statusRes = await fetch(statusUrl);

     

       
19
       
19
       
+
       


     

       
20
       
20
       
+
       
                if (!statusRes.ok) {

     

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

     

       
22
       
22
       
+
       
                }

     

       
23
       
23
       
+
       


     

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

     

       
25
       
25
       
+
       
                const statusValue = statusData?.value;

     

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

     

       
27
       
27
       
+
       


     

       
28
       
28
       
+
       
                const isExpired = statusValue?.expiry &&

     

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

     

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

     

       
31
       
31
       
+
       


     

       
32
       
32
       
+
       
                let status;

     

       
33
       
33
       
+
       


     

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

     

       
35
       
35
       
+
       
                    const latest = statusValue.item;

     

       
36
       
36
       
+
       


     

       
37
       
37
       
+
       
                    status = {

     

       
38
       
38
       
+
       
                        song: latest.trackName,

     

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

     

       
40
       
40
       
+
       
                            artist.artistName

     

       
41
       
41
       
+
       
                        ).join(", "),

     

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

     

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

     

       
44
       
44
       
+
       
                    };

     

       
45
       
45
       
+
       
                    setData(status);

     

       
46
       
46
       
+
       
                    setIsCurrentlyPlaying(true);

     

       
47
       
47
       
+
       
                    return;

     

       
48
       
48
       
+
       
                }

     

       
49
       
49
       
+
       


     

       
50
       
50
       
+
       
                console.log(

     

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

     

       
52
       
52
       
+
       
                );

     

       
53
       
53
       
+
       


     

       
54
       
54
       
+
       
                const lastPlayedUrl =

     

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

     

       
56
       
56
       
+
       
                const lastPlayedRes = await fetch(lastPlayedUrl);

     

       
57
       
57
       
+
       


     

       
58
       
58
       
+
       
                if (!lastPlayedRes.ok) {

     

       
59
       
59
       
+
       
                    throw new Error(

     

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

     

       
61
       
61
       
+
       
                    );

     

       
62
       
62
       
+
       
                }

     

       
63
       
63
       
+
       


     

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

     

       
65
       
65
       
+
       


     

       
66
       
66
       
+
       
                if (

     

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

     

       
68
       
68
       
+
       
                ) {

     

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

     

       
70
       
70
       
+
       


     

       
71
       
71
       
+
       
                    status = {

     

       
72
       
72
       
+
       
                        song: latest.trackName,

     

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

     

       
74
       
74
       
+
       
                            artist.artistName

     

       
75
       
75
       
+
       
                        ).join(", "),

     

       
76
       
76
       
+
       
                        albumArt:

     

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

     

       
78
       
78
       
+
       
                        createdAt: latest.playedTime,

     

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

     

       
80
       
80
       
+
       
                    };

     

       
81
       
81
       
+
       
                    setData(status);

     

       
82
       
82
       
+
       
                    setIsCurrentlyPlaying(false);

     

       
83
       
83
       
+
       
                } else {

     

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

     

       
85
       
85
       
+
       
                    setIsCurrentlyPlaying(false);

     

       
86
       
86
       
+
       
                }

     

       
87
       
87
       
+
       
            } catch (err) {

     

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

     

       
89
       
89
       
+
       
                setError(err.message);

     

       
90
       
90
       
+
       
                setIsCurrentlyPlaying(false);

     

       
91
       
91
       
+
       
            }

     

       
92
       
92
       
+
       
        };

     

       
93
       
93
       
+
       


     

       
94
       
94
       
+
       
        fetchStatus();

     

       
95
       
95
       
+
       
    }, []);

     

       
96
       
96
       
+
       


     

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

     

       
98
       
98
       
+
       
    if (!data) return null;

     

       
99
       
99
       
+
       


     

       
100
       
100
       
+
       
    let timeAgo = "";

     

       
101
       
101
       
+
       
    let oldStatusClasses = "";

     

       
102
       
102
       
+
       


     

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

     

       
104
       
104
       
+
       
    const now = new Date();

     

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

     

       
106
       
106
       
+
       


     

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

     

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

     

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

     

       
110
       
110
       
+
       


     

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

     

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

     

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

     

       
114
       
114
       
+
       
    else timeAgo = "just now";

     

       
115
       
115
       
+
       


     

       
116
       
116
       
+
       
    oldStatusClasses = days > 3

     

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

     

       
118
       
118
       
+
       
        : "";

     

       
119
       
119
       
+
       


     

       
120
       
120
       
+
       
    return (

     

       
121
       
121
       
+
       
        <a

     

       
122
       
122
       
+
       
            id="now-playing"

     

       
123
       
123
       
+
       
            href={data.link}

     

       
124
       
124
       
+
       
            target="_blank"

     

       
125
       
125
       
+
       
            className={oldStatusClasses}

     

       
126
       
126
       
+
       
        >

     

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

     

       
128
       
128
       
+
       
            <div

     

       
129
       
129
       
+
       
                style={{

     

       
130
       
130
       
+
       
                    display: "flex",

     

       
131
       
131
       
+
       
                    flexDirection: "column",

     

       
132
       
132
       
+
       
                    gap: "2px",

     

       
133
       
133
       
+
       
                    width: "100%",

     

       
134
       
134
       
+
       
                }}

     

       
135
       
135
       
+
       
            >

     

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

     

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

     

       
138
       
138
       
+
       
                    {data.artist}

     

       
139
       
139
       
+
       
                </div>

     

       
140
       
140
       
+
       
                <div

     

       
141
       
141
       
+
       
                    style={{

     

       
142
       
142
       
+
       
                        fontSize: "0.8em",

     

       
143
       
143
       
+
       
                        opacity: 0.7,

     

       
144
       
144
       
+
       
                        marginTop: "-5px",

     

       
145
       
145
       
+
       
                    }}

     

       
146
       
146
       
+
       
                >

     

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

     

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

     

       
149
       
149
       
+
       
                    </small>

     

       
150
       
150
       
+
       
                </div>

     

       
151
       
151
       
+
       
            </div>

     

       
152
       
152
       
+
       
        </a>

     

       
153
       
153
       
+
       
    );

     

       
154
       
154
       
+
       
}