Generate Posts based on collection

Turn music component into a link

src/components/Music.astro

@@ -1,14 +1,14 @@
 ---
 ---
 
-<div id="current-music">
+<a id="current-music" href="https://www.last.fm/user/Fluffy_Bean_">
     <img src="/leg.webp" alt="Track cover art" id="current-music-image"/>
     <ul>
         <li id="current-music-title">Track Name</li>
         <li id="current-music-artist">by Artist</li>
         <li id="current-music-album">on Album</li>
     </ul>
-</div>
+</a>
 
 <script>
     const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
@@ -26,14 +26,15 @@
     @import "../styles/vars.scss";
 
     #current-music {
-        padding: 8px;
+        padding: 16px;
 
         display: flex;
         flex-direction: row;
 
+        text-decoration: none;
+
         border-radius: $radius;
-        border: 2px solid $gray;
-        background-color: $dark;
+        background-color: $gray;
         color: $light;
 
         > img {
@@ -54,5 +55,13 @@
                 list-style: none;
             }
         }
+
+        &:hover, &:focus-visible {
+            background-color: lighten($gray, 1%);
+        }
+    }
+
+    #current-music-title {
+        font-weight: bold;
     }
 </style>

src/pages/index.astro

@@ -9,16 +9,16 @@ const tools = ["Proxmox", "JetBrain IDEs", "Docker", "Linux", "SQLite", "Postgre
 const languages = ["Go", "Python", "HTML", "CSS", "Sass", "TypeScript", "JavaScript", "Scratch", "PHP", "SQL", "Bash"];
 const frameworks = ["Gin", "Echo", "Flask", "Svelte", "Astro", "raylib"];
 const projects = await getCollection('projects');
+const posts = await getCollection('posts');
 ---
 
 <Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
 	<h1>Leggy Land</h1>
 	<p>Made with Coffee, lots of it.</p>
-	<div style="margin-top: 16px" />
-	<Music />
-	<div style="margin-top: 16px" />
 
-	<!--<hr>-->
+	<div style="margin: 16px 0">
+		<Music />
+	</div>
 
 	<section>
 		<h2>Who am I</h2>
@@ -85,16 +85,13 @@ const projects = await getCollection('projects');
 	<section>
 		<h2>Recent Posts</h2>
 		<ul role="list" class="project-list">
-			<Card
-				href="/projects/example"
-				title="Bruh"
-				body="Lmao"
-			/>
-			<Card
-				href="/projects/example"
-				title="Aurgh"
-				body="Blowing up Blandfords"
-			/>
+			{posts.map(project => (
+				<Card
+					href=`/posts/${project.slug}`
+					title={project.data.title}
+					body={project.data.description}
+				/>
+			))}
 		</ul>
 		<a href="/posts" id="see-all-posts">See Posts</a>
 	</section>