Updated to the correct API

CNAME

@@ -1 +1 @@
-jakecover.me
+cobular.com

package.json

@@ -48,7 +48,7 @@
       "react-app/jest"
     ]
   },
-  "homepage": "https://jakecover.me",
+  "homepage": "https://cobular.com",
   "name": "personal-website-static",
   "private": true,
   "scripts": {

src/components/AboutMe/AboutMe.scss

@@ -59,7 +59,7 @@
 
     ul {
       text-align: left;
-      padding-left: 40px;
+      padding-left: 30px;
       margin-bottom: 0;
     }
 
@@ -68,7 +68,9 @@
       font-size: 18px;
       list-style-type: symbols("+");
       list-style-position: inside;
-
+    }
+    li::-moz-list-bullet {
+      content: "+ ";
     }
   }
 
@@ -99,8 +101,12 @@
     &:hover, &:focus, &:focus-visible {
       text-decoration-color: var(--link-color);
     }
+  }
 
-
+  #now-playing {
+    max-width: 25ch;
+    margin-left: 1.2ch;
+    text-indent: -1.2ch;
   }
 }
 

src/components/AboutMe/LastFmLi.tsx

@@ -1,61 +1,79 @@
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
-import axios from "axios";
 
 interface NowPlayingData {
-    introduction: string;
+  artist: string;
-    lastfm: {
+  track: string;
-        artist: string;
+  playing: boolean;
-        track: string;
+  url: string | undefined;
-        playing: boolean;
-        url: string | undefined;
-    };
 }
 
 export function LastFmLi() {
-    const [nowPlayingData, setNowPlayingData] = useState<NowPlayingData>({
+  const [nowPlayingData, setNowPlayingData] = useState<NowPlayingData>({
-        introduction: "",
+    artist: "nobody",
-        lastfm: {
+    playing: false,
-            artist: "nobody",
+    track: "nothing",
-            playing: false,
+    url: undefined,
-            track: "nothing",
+  });
-            url: undefined,
-        },
-    });
-
-    async function updateNowPlaying() {
-        try {
-            const songRequestData = await axios.get("https://api.jakecover.me");
 
-            setNowPlayingData(songRequestData.data);
+  async function updateNowPlaying() {
-        } catch (err) {
+    try {
-            console.error(err);
+      const songRequestData = await fetch("https://api.cobular.com/graphql", {
+        body: JSON.stringify({
+          query: `
+query {
+  nowPlaying {
+    track {
+      ... on Track {
+        title
+        artists {
+          name
         }
+        link
+      }
     }
+  }
+}
 
-    useEffect(() => {
+      `,
-        updateNowPlaying();
+        }),
-
+        headers: {
-        const interval = setInterval(updateNowPlaying, 10000);
+          Accept: "application/json",
-
+          "Content-Type": "application/json",
-        return () => {
+          Dnt: "1",
-            clearInterval(interval);
+        },
-        };
+        method: "POST",
-    }, []);
+      });
-
+      const data: any = await songRequestData.json();
-    if (nowPlayingData.lastfm.playing) {
+      setNowPlayingData({
-        return (
+        playing: true,
-            <li>
+        artist: data["data"]["nowPlaying"]["track"]["artists"][0]["name"],
-                <a
+        track: data["data"]["nowPlaying"]["track"]["title"],
-                    href={nowPlayingData.lastfm.url}
+        url: data["data"]["nowPlaying"]["track"]["link"],
-                    target={"_blank"}
+      });
-                    rel="noreferrer"
+    } catch (err) {
-                    style={{color: "inherit", textDecoration: "inherit"}}
+      console.error(err);
-                >
-                    listening to {nowPlayingData.lastfm.track} by{" "}
-                    {nowPlayingData.lastfm.artist}
-                </a>
-            </li>
-        );
     }
-    return <li>not listening to anything right now.</li>;
+  }
+
+  useEffect(() => {
+    updateNowPlaying();
+
+    const interval = setInterval(updateNowPlaying, 10000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  if (nowPlayingData.playing) {
+    return (
+      <li id={"now-playing"}>
+        listening to{" "}
+        <a href={nowPlayingData.url} target={"_blank"} rel="noreferrer">
+          {nowPlayingData.track} by {nowPlayingData.artist}
+        </a>
+      </li>
+    );
+  }
+  return <li>not listening to anything right now. <br/></li>;
 }