Finished section for music

- Finished listing of musical compositions
- Slight update to listing of blog posts
- Updating api.js
- Fixed dark/light mode in some pages (font color)

src/components/CompositionsList.astro

@@ -0,0 +1,14 @@
+---
+import SingleCompositionCard from "./SingleCompositionCard.astro";
+import { Separator } from "./ui/separator";
+
+const { songs } = Astro.props
+---
+{
+	songs.map((song, index) => (
+		<>
+	  		<SingleCompositionCard song={song} />
+	  		{index == songs.length-1 ? <></> : <Separator className="my-2" />}
+	  	</>
+	))
+}

src/components/SingleCompositionCard.astro

@@ -0,0 +1,39 @@
+---
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../components/ui/card";
+import { Separator } from "../components/ui/separator";
+import { Image } from "astro:assets";
+
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
+const t = useTranslations(getLangFromUrl(Astro.url));
+
+const { song } = Astro.props;
+---
+<Card>
+	<CardHeader>
+	<Image
+		src={song.data.image.url}
+		alt={song.data.image.alt}
+		class="rounded-md"
+		inferSize
+	/>
+	<span class="py-2"></span>
+	<CardTitle>{song.data.name}</CardTitle>
+	<CardDescription>
+		<br />
+		{song.data.comment[Astro.currentLocale]}
+	</CardDescription>
+	</CardHeader>
+	<CardContent className="flex justify-evenly">
+		<a href={song.data.pdfLink} download>{t("music")["downloadPDF"]}</a>
+		<Separator orientation="vertical" className="mx-2 h-full"/>
+		<a href={song.data.mp3Link} download>{t("music")["downloadMP3"]}</a>
+		<Separator orientation="vertical" className="mx-2 h-full"/>
+		<a href={song.data.flacLink} download>{t("music")["downloadFLAC"]}</a>
+	</CardContent>
+</Card>