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>

src/pages/books/index.astro

@@ -42,7 +42,7 @@ const currentYear = new Date().getFullYear();
   {
     bookData.map((book) => (
       <article class="book-entry" key={book.url}>
-        <a href={book.url}>
+        <a href={book.url} data-astro-prefetch>
           <img
             srcset={`
             ${globals.cdn_url}${book.image}?class=verticalsm&type=webp 200w,

src/pages/music/artists/[slug].astro

@@ -87,6 +87,7 @@ const playLabel = artist.total_plays === 1 ? "play" : "plays";
           <a
             href={artist.genre.url}
             title={`Learn more about ${artist.genre.name}`}
+            data-astro-prefetch
           >
             {artist.genre.name}
           </a>

src/pages/music/concerts/[...page].astro

@@ -57,7 +57,7 @@ const description =
     {paginatedConcerts.map((concert) => (
       <li>
         {concert.artist.url ? (
-          <a href={concert.artist.url}>{concert.artist.name}</a>
+          <a href={concert.artist.url} data-astro-prefetch>{concert.artist.name}</a>
         ) : (
           <span>{concert.artist.name}</span>
         )}{" "}

src/utils/helpers/media.js

@@ -29,11 +29,11 @@ export const mediaLinks = (data, type, count = 10) => {
   const buildLink = (item) => {
     switch (type) {
       case "genre":
-        return `<a href="${item["genre_url"]}">${item["genre_name"]}</a>`;
+        return `<a href="${item["genre_url"]}" data-astro-prefetch>${item["genre_name"]}</a>`;
       case "artist":
-        return `<a href="${item["url"]}">${item["name"]}</a>`;
+        return `<a href="${item["url"]}" data-astro-prefetch>${item["name"]}</a>`;
       case "book":
-        return `<a href="${item["url"]}">${item["title"]}</a>`;
+        return `<a href="${item["url"]}" data-astro-prefetch>${item["title"]}</a>`;
       default:
         return "";
     }