add ep #

Author: hzoo

src/components/Main.astro

@@ -38,6 +38,10 @@ const episodesBySeasons = Object.fromEntries(
 );
 
 const seasons = Object.keys(episodesBySeasons).map(Number).sort((a, b) => b - a);
+
+// Calculate the total number of episodes
+const totalEpisodes = posts.length;
+
 ---
 
 <div class="mx-auto px-5 py-7 flex flex-col lg:flex-row lg:max-w-6xl">
@@ -74,8 +78,13 @@ const seasons = Object.keys(episodesBySeasons).map(Number).sort((a, b) => b - a)
                         <h2 class="text-2xl font-bold text-his-green">Season {season}</h2>
                     )}
                     <div class="space-y-1">
-                        {episodesBySeasons[season].map((episode) => (
-                            <article class="hover:bg-his-hover px-2 rounded-lg transition-colors">
+                        {episodesBySeasons[season].map((episode, index) => {
+                            // Find the index of the current episode in the overall sorted posts array
+                            const overallIndex = posts.findIndex(p => p.slug === episode.slug);
+                            // Calculate the episode number (total - overallIndex)
+                            const epNumber = totalEpisodes - overallIndex;
+                            return (
+                            <article class="hover:bg-his-hover px-2 rounded-lg transition-colors relative">
                                 <a href={`/${episode.slug}`} class="block group">
                                     <h3 class="text-xl font-semibold group-hover:text-his-green transition-colors">
                                         {episode.data.title}
@@ -89,8 +98,13 @@ const seasons = Object.keys(episodesBySeasons).map(Number).sort((a, b) => b - a)
                                     </div>
                                     <p class="mt-2 text-his-text-secondary">{episode.data.description}</p>
                                 </a>
+                                {/* Episode number at top right */}
+                                <span class="absolute top-2 right-2 text-xs font-bold text-his-text-secondary">
+                                    #{epNumber}
+                                </span>
                             </article>
-                        ))}
+                            );
+                        })}
                     </div>
                 </section>
             ))}