feat: prefetching

src/components/blocks/AssociatedMedia.astro

@@ -81,7 +81,7 @@ const sections = [
           <ul>
             {items.map((item) => (
               <li>
-                <a href={item.url}>{item.title || item.name}</a>
+                <a href={item.url} data-astro-prefetch>{item.title || item.name}</a>
                 {key === "artists" && item.total_plays > 0 && (
                   <strong class="highlight-text">
                     {item.total_plays}{" "}

src/components/home/RecentActivity.astro

@@ -26,33 +26,36 @@ const link = links[0];
 
 <article>
   <h2>
-    <div set:html={IconActivity({ size: 24 })}/>
+    <div set:html={IconActivity({ size: 24 })} />
     Recent activity
   </h2>
   <ul>
     <li>
       <span class="music">Top artist this week:</span>
-      <a href={artist.artist_url}>{artist.artist_name}</a>
+      <a href={artist.artist_url} data-astro-prefetch>{artist.artist_name}</a>
     </li>
     <li>
       <span class="music">Top track this week:</span>
-      <a href={track.artist_url}>{track.track_name} by {track.artist_name}</a>
+      <a href={track.artist_url} data-astro-prefetch
+        >{track.track_name} by {track.artist_name}</a
+      >
     </li>
     <li>
       <span class="tv">Last episode watched:</span>
       <strong class="highlight-text">{show.formatted_episode}</strong> of <a
-        href={show.url}>{show.title}</a
+        href={show.url}
+        data-astro-prefetch>{show.title}</a
       >
     </li>
     <li>
       <span class="movies">Last movie watched:</span>
-      <a href={movie.url}>{movie.title}</a>{
+      <a href={movie.url} data-astro-prefetch>{movie.title}</a>{
         movie.rating ? ` (${movie.rating})` : ""
       }
     </li>
     <li>
       <span class="books">Last book finished:</span>
-      <a href={book.url}>{book.title}</a> by {book.author}{
+      <a href={book.url} data-astro-prefetch>{book.title}</a> by {book.author}{
         book.rating ? ` (${book.rating})` : ""
       }
     </li>

src/components/media/Grid.astro

@@ -46,7 +46,7 @@ function getImageAttributes(item, shape) {
       );
 
       return (
-        <a href={item.grid.url} title={alt}>
+        <a href={item.grid.url} title={alt} data-astro-prefetch>
           <div class="item media-overlay">
             <div class="meta-text">
               <div class="header">{item.grid.title}</div>

src/components/media/music/Chart.astro

@@ -15,7 +15,7 @@ const { data, count } = Astro.props;
           <li value={item.chart.rank}>
             <div class="item">
               <div class="info">
-                <a class="title" href={item.chart.url}>
+                <a class="title" href={item.chart.url} data-astro-prefetch>
                   {item.chart.title}
                 </a>
                 <span class="subtext">{item.chart.artist}</span>

src/components/media/music/Recent.astro

@@ -10,7 +10,7 @@ const { globals } = await fetchGlobalData(Astro);
     data.slice(0, 10).map((item) => (
       <div class="item">
         <div class="meta">
-          <a href={item.chart.url}>
+          <a href={item.chart.url} data-astro-prefetch>
             <img
               srcset={`
               ${globals.cdn_url}${item.chart.image}?class=w50&type=webp 50w,

src/components/media/watching/Hero.astro

@@ -4,7 +4,7 @@ import Hero from "@components/blocks/Hero.astro";
 const { movie } = Astro.props;
 ---
 
-<a href={movie.url}>
+<a href={movie.url} data-astro-prefetch>
   <div class="watching media-overlay hero">
     <div class="meta-text">
       <div class="header">{movie.title}</div>