Destructure in maps for less duplication

src/components/Button.astro

@@ -9,8 +9,8 @@ interface Props {
 const { href, variant = "text", title, class: className = "" } = Astro.props;
 
 const baseClasses =
-  "border-transparent inline-block border-b-2 p-2 cursor-pointer hover:border-neutral-300 hover:bg-neutral-100 hover:dark:border-neutral-600 hover:dark:bg-neutral-700";
+  "border-transparent border-b-2 p-2 cursor-pointer hover:border-neutral-300 hover:bg-neutral-100 hover:dark:border-neutral-600 hover:dark:bg-neutral-700";
-const classes = `${baseClasses} ${variant === "icon" && href ? "inline-grid place-content-center" : ""} ${className}`;
+const classes = `${baseClasses} ${variant === "icon" && href ? "inline-grid place-content-center" : "inline-block"} ${className}`;
 ---
 
 {

src/components/TableOfContents.astro

@@ -27,14 +27,14 @@ const { headings } = Astro.props;
         headings.length ? (
           headings
             .filter(({ depth }) => depth === 2)
-            .map((heading) => (
+            .map(({ slug, text }) => (
               <li>
                 <a
                   class="block px-2 py-1 text-center text-blue-800 hover:underline dark:text-blue-300"
-                  href={`#${heading.slug}`}
+                  href={`#${slug}`}
-                  aria-labelledby={`Section: ${heading.slug}`}
+                  aria-labelledby={`Section: ${slug}`}
                 >
-                  {heading.text}
+                  {text}
                 </a>
               </li>
             ))

src/pages/blog/[slug].astro

@@ -18,16 +18,12 @@ if (!article) {
   throw new Error();
 }
 
+const { title, description, pubDate, modDate } = article.data;
+
 const { Content, headings } = await render(article);
 ---
 
-<PageLayout
+<PageLayout {title} {description} {pubDate} {modDate} {slug}>
-  title={article.data.title}
-  description={article.data.description}
-  pubDate={article.data.pubDate}
-  modDate={article.data.modDate}
-  {slug}
->
   <TableOfContents {headings} />
   <Content />
 </PageLayout>

src/pages/blog/index.astro

@@ -15,15 +15,12 @@ const sortedArticles = allArticles.sort((a, b) => {
 >
   <ul>
     {
-      sortedArticles.map((article) => (
+      sortedArticles.map(({ id, data: { title, pubDate } }) => (
         <li>
-          <Date date={article.data.pubDate} />
+          <Date date={pubDate} />
           <span>&raquo;</span>
-          <a
+          <a class="text-blue-800 hover:no-underline" href={`/blog/${id}`}>
-            class="text-blue-800 hover:no-underline"
+            {title}
-            href={`/blog/${article.id}`}
-          >
-            {article.data.title}
           </a>
         </li>
       ))

src/pages/rss.xml.ts

@@ -25,12 +25,12 @@ export const GET: APIRoute = async (context) => {
       <lastBuildDate>${latestModDate.toUTCString()}</lastBuildDate>
       <atom:link href="${context.url.origin}/rss.xml" rel="self" type="application/rss+xml" />
     `,
-    items: blog.map((article) => ({
+    items: blog.map(({ id, body, data }) => ({
-      link: `/blog/${article.id}/`,
+      link: `/blog/${id}/`,
-      content: sanitizeHtml(parser.render(article.body ?? ""), {
+      content: sanitizeHtml(parser.render(body ?? ""), {
         allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
       }),
-      ...article.data,
+      ...data,
     })),
   });
 };

src/pages/tracks.astro

@@ -1,6 +1,5 @@
 ---
 import PageLayout from "../layouts/PageLayout.astro";
-import { Image } from "astro:assets";
 import { getCollection } from "astro:content";
 import Track from "../components/Track.astro";
 
@@ -20,14 +19,8 @@ const tracks = await getCollection("tracks");
     class="not-prose relative start-1/2 -ms-[min(50vw-1rem,50ch)] grid max-w-[calc(min(100vw-2rem,100ch))] grid-cols-[repeat(auto-fit,minmax(min(100%,200px),1fr))] place-content-center gap-4"
   >
     {
-      tracks.map((track) => (
+      tracks.map(({ data: { title, artist, album, youtubeLink, cover } }) => (
-        <Track
+        <Track {title} {artist} {album} {youtubeLink} {cover} />
-          title={track.data.title}
-          artist={track.data.artist}
-          album={track.data.album}
-          youtubeLink={track.data.youtubeLink}
-          cover={track.data.cover}
-        />
       ))
     }
   </div>