bring back client rendered music section

components/Music.tsx

@@ -0,0 +1,31 @@
+import useSWR from "swr";
+import ExtLink from "./ExtLink";
+import { SWRResponse } from "swr";
+import { SongInformation } from "../lib/Music.types";
+
+const fetcher = (...args: any[]) => fetch(args[0]).then((res) => res.json());
+
+const Music = () => {
+    const { data, error }: SWRResponse<SongInformation, Error> = useSWR(
+        "/api/v1/music",
+        fetcher
+    );
+
+    if (error || !data || !data.listening) return null;
+
+    return (
+        <p>
+            I&#39;m currently listening to{" "}
+            <ExtLink href={data.url as string}>
+                {data.title} by {data.artist}
+            </ExtLink>
+            <style jsx>{`
+        p {
+          opacity: 0.5;
+        }
+      `}</style>
+        </p>
+    );
+};
+
+export default Music;

pages/api/v1/music.ts

@@ -0,0 +1,30 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { SongInformation } from "../../../lib/Music.types";
+
+export default async (
+    req: NextApiRequest,
+    res: NextApiResponse<SongInformation>
+) => {
+    if (!process.env?.LASTFMAPI)
+        return res.status(500).json({ listening: false });
+
+    let result = await fetch(
+        `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=ghostwolfy&api_key=${process.env.LASTFMAPI}&format=json&limit=1`
+    ).then((request) => request.json());
+
+    if (!result?.recenttracks?.track[0]["@attr"])
+        return res.status(200).json({ listening: false });
+
+    res.setHeader("Cache-Control", "s-maxage=30, stale-while-revalidate");
+
+    res.status(200).json({
+        listening: true,
+        artist: result.recenttracks.track[0].artist["#text"],
+        title: result.recenttracks.track[0].name,
+        url: `https://open.spotify.com/search/${encodeURIComponent(
+            result.recenttracks.track[0].artist["#text"] +
+            " " +
+            result.recenttracks.track[0].name
+        )}`,
+    });
+}

pages/index.tsx

@@ -3,21 +3,10 @@ import styles from "../styles/Home.module.css";
 import ExtLink from "../components/ExtLink";
 import Section from "../components/Section";
 import Project from "../components/Project";
+import Music from "../components/Music";
 import { useState, useEffect } from "react";
-import { GetMusic } from "../lib/Music";
-import { SongInformation } from "../lib/Music.types";
 
-export async function getStaticProps() {
-  const music = await GetMusic();
-  return {
-    props: {
-      music,
-    },
-    revalidate: 20,
-  };
-}
-
-const Home = ({ music }: { music: SongInformation }) => {
+const Home = () => {
   const [introductionPlace, setIntroductionPlace] = useState(0);
   const [currentTime, setCurrentTime] = useState("");
   const [animatedHeader, setAnimatedHeader] = useState("");
@@ -179,14 +168,7 @@ const Home = ({ music }: { music: SongInformation }) => {
         </p>
       </Section>
 
-      {music.listening && (
-        <p style={{ opacity: 0.5 }}>
-          I&#39;m currently listening to{" "}
-          <ExtLink href={music.url as string}>
-            {music.title} by {music.artist}
-          </ExtLink>
-        </p>
-      )}
+      <Music />
     </>
   );
 };