new currently playing music card

next.config.mjs

@@ -22,6 +22,11 @@ const config = {
         protocol: "https",
         port: '',
         hostname: "storage.thatalex.dev" 
+      },
+      {
+        protocol: "https",
+        port: '',
+        hostname: "lastfm.freetls.fastly.net"
       }
     ]
   }

package.json

@@ -20,6 +20,7 @@
     "@trpc/next": "^10.37.1",
     "@trpc/react-query": "^10.37.1",
     "@trpc/server": "^10.37.1",
+    "axios": "^1.6.2",
     "grommet-icons": "^4.11.0",
     "next": "^13.5.4",
     "next-auth": "^4.23.0",

src/components/MusicCard.tsx

@@ -0,0 +1,30 @@
+import Image from "next/image";
+import Link from "next/link";
+import { api } from "@/utils/api";
+
+export default function MusicCard() {
+    const musicFetch = api.misc.song.useQuery()
+
+    if (musicFetch.data) {
+        return (
+            <Link href="https://last.fm/user/lulawex" target="_blank">
+                <div className="bg-white max-w-xs text-black rounded-sm leading-tight">
+                    <div className="flex items-start p-2">
+                        <div className="flex-none">
+                            <Image 
+                                src={musicFetch.data.track.image[3]?.["#text"] ?? ""}
+                                alt="Cover Art" 
+                                width="50"
+                                height="50"
+                            />
+                        </div>
+                        <div className="flex flex-col ml-2 pt-1.5">
+                            <h1>{musicFetch.data.track.name}</h1>
+                            <p>{musicFetch.data.track.artist["#text"]}</p>
+                        </div>
+                    </div>
+                </div>
+            </Link>
+        )
+    }
+}

src/components/footer.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
                     </Link>
                 </p>
                 <p className="text-center">
-                    All music, game, TV and movie covers are owned by their respective authors.
+                    All music, game, TV and movie covers are owned by their respective authors.<br/>Currently playing info provided by Last.fm
                 </p>
                 <p className="text-center">
                     &copy; Alex Frantz, 2023

src/pages/index.tsx

@@ -2,6 +2,7 @@ import RootLayout from "@/components/RootLayout";
 import Dropdown from "@/components/Dropdown";
 import ProjectCard from "@/components/ProjectsCard";
 import Image from 'next/image';
+import MusicCard from '@/components/MusicCard'
 
 export default function Home() {
     return (
@@ -45,6 +46,9 @@ function Music() {
         <Image key="1" src="https://storage.thatalex.dev/content/5sos.png" alt="5 Seconds of Summer Cover" width="100" height="100" className="inline mr-2" />,
         <Image key="2" src="https://storage.thatalex.dev/content/tlou-covers-and-rarities.jpg" alt="TLOU Covers and Rarities Cover" width="100" height="100" className="inline mr-2" />,
         <Image key="3" src="https://storage.thatalex.dev/content/zach-bryan.png" alt="Zach Bryan Cover" width="100" height="100" className="inline mr-2" />,
-        <Image key="4" src="https://storage.thatalex.dev/content/reputation.jpg" alt="Reputation Cover" width="100" height="100" className="inline mr-2" />
+        <Image key="4" src="https://storage.thatalex.dev/content/reputation.jpg" alt="Reputation Cover" width="100" height="100" className="inline mr-2" />,
+        <div key="5" className="float-right pt-8">
+            <MusicCard key="5" />
+        </div>
     ]
 }

src/server/api/root.ts

@@ -1,5 +1,6 @@
 import { postRouter } from "@/server/api/routers/post";
 import { linksRouter } from "./routers/links";
+import { miscRouter } from "./routers/misc";
 import { createTRPCRouter } from "@/server/api/trpc";
 
 /**
@@ -9,7 +10,8 @@ import { createTRPCRouter } from "@/server/api/trpc";
  */
 export const appRouter = createTRPCRouter({
   post: postRouter,
-  links: linksRouter
+  links: linksRouter,
+  misc: miscRouter
 });
 
 // export type definition of API

src/server/api/routers/misc.ts

@@ -0,0 +1,39 @@
+import axios from 'axios';
+
+import {
+    createTRPCRouter,
+    publicProcedure
+} from '@/server/api/trpc';
+
+type ImageListType = {
+    "size": string,
+    "#text": string
+}
+
+type LastTrackType = {
+    status: number,
+    track: {
+        "@attr": object,
+        "album": {
+            "mbid": string,
+            "#text": string
+        },
+        "artist": {
+            "mbid": string,
+            "#text": string,
+        },
+        "image": ImageListType[],
+        "mbid": string,
+        "name": string,
+        "streamable": number,
+        "url": string
+    }
+}
+
+export const miscRouter = createTRPCRouter({
+    song: publicProcedure
+    .query(async () => {
+        const response = await axios.get<LastTrackType>("https://api.thatalex.dev/v3/music/last-track")
+        return response.data
+    }),
+})