a bit less horrible

src/App.css

@@ -89,7 +89,6 @@
     justify-content: space-around;
     font-size: larger;
     flex-wrap: wrap;
-    height: 80%;
     overflow-x: scroll;
 }
 
@@ -269,8 +268,8 @@
 
 .singlemusic {
     cursor: pointer;
-    min-width: 15em;
-    max-width: 15em;
+    width: 15em;
+    height: auto;
     word-wrap: anywhere;
     margin: 1em;
     padding: 1em;

src/App.tsx

@@ -2,7 +2,7 @@ import "./App.css";
 import { AdvancedBr, Singular88, SingularOomfie } from "./components/comps.tsx";
 import { createSignal, onMount } from "solid-js";
 import Reviews from "./components/api.tsx";
-import Music, { MusicEntry } from "./components/music.tsx";
+import { Music, MusicEntry, Song } from "./components/music.tsx";
 import { Bdpfp, Normalpfp } from "./components/pfp.tsx";
 import { InfoCard } from "./components/middlecard.tsx";
 
@@ -61,16 +61,17 @@ function nyaboom() {
 }
 
 function App() {
-  const [musicList, setMusicList] = createSignal<string[]>([]);
+  const [musicList, setMusicList] = createSignal<Song[]>([]);
   const [isLoading, setIsLoading] = createSignal(true);
   const [oomfies, setoomfies] = createSignal(<>oomfies</>);
   const [isAnimating, setIsAnimating] = createSignal(false);
   onMount(async () => {
     try {
       const response = await fetch(
-        "https://imtoolazytomakeaproperapi.amy.rip/",
+        "https://bopbot.amy.rip/",
       );
-      const data = await response.json();
+      const data = await response.json() as Song[];
+      data.reverse();
       setMusicList(data);
     } catch (error) {
       console.error("Error fetching music data:", error);
@@ -271,7 +272,7 @@ function App() {
               {isLoading() ? (
                 <p>Loading...</p>
               ) : (
-                musicList().map((link) => <MusicEntry spotifylink={link} />)
+                musicList().map((link) => <MusicEntry musicInfo={link} />)
               )}
             </div>
           </div>

src/components/music.tsx

@@ -1,6 +1,18 @@
 import { createSignal, onMount } from "solid-js";
 
-export default function Music(props: { shouldpopup: () => boolean, children: any }) {
+export interface Song {
+    title: string;
+    artist: string;
+    apiProvider: string;
+    thumbnailUrl: string;
+    link: string;
+}
+
+function shortenName(name: string, limit: number = 33): string {
+    return name.length > limit ? name.substring(0, limit - 3) + "..." : name
+}
+
+export function Music(props: { shouldpopup: () => boolean, children: any }) {
     return <div style={{
         position: "absolute",
         display: props.shouldpopup() ? "block" : "none"
@@ -9,39 +21,25 @@ export default function Music(props: { shouldpopup: () => boolean, children: any
     </div>
 }
 
-export function MusicEntry({ spotifylink }: { spotifylink: string }) {
-    const [musicInfo, setMusicInfo] = createSignal({}) as any;
-    const [isLoading, setIsLoading] = createSignal(true);
-    onMount(async () => {
-        try {
-            const apiresponse = await fetch(`https://corsisdum.exhq.dev/v1-alpha.1/links?url=spotify%253Atrack%253A${spotifylink}`)
-            const data = await apiresponse.json()
-            setMusicInfo(data)
-        } catch (error) {
-            console.error("Error fetching music data from song.link:", error);
-        } finally {
-            setIsLoading(false);
-        }
-    })
+export function MusicEntry(props: {musicInfo:Song}) {
+
     return (
-        <>{isLoading() ? (
-            <p>Loading...</p>
-        ) : (
-            <div onClick={() => {
-                document.location.href = musicInfo().pageUrl
-            }} class="singlemusic">
-                <img style={{
-                    "margin-right": "0.5em"
-                }} src={"https://proxy.spiro.exhq.dev/_/plain/" + musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.thumbnailUrl} alt={"album cover of" + musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.title} />
-                <div class="innersinglemusic">
-                    <div class="musicartist" > {
-                        musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.artistName?.length > 43 ? musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.artistName.substring(0, 30) + "..." : musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.artistName
-                    }</div>
-                    <div class="musictitle"> {
-                        musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.title?.length > 43 ? musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.title.substring(0, 30) + "..." : musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.title
-                    } </div>
-                </div>
+        <div onClick={() => {
+            document.location.href = props.musicInfo.link
+        }} class="singlemusic">
+            <img style={{
+                "margin-right": "0.5em"
+            }}
+                 src={"https://proxy.spiro.exhq.dev/_/plain/" + props.musicInfo.thumbnailUrl}
+                 alt={"album cover of" + props.musicInfo.title}/>
+            <div class="innersinglemusic">
+                <div class="musicartist"> {
+                    shortenName(props.musicInfo.artist)
+                }</div>
+                <div class="musictitle"> {
+                    shortenName(props.musicInfo.title)
+                } </div>
             </div>
-        )}</>
+        </div>
     )
 }