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