Add no episodes placeholder to EpisodeList component

Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com>

Author: Copilot

src/components/EpisodeList.astro

@@ -12,61 +12,67 @@ export interface Props {
 const { episodes, show } = Astro.props;
 ---
 
-<ul aria-label="EpisodeList">
-  {
-    episodes.map((episode) => {
-      return (
-        <li class="dark:border-dark-border border-b">
-          <div class="flex w-full flex-col py-12 lg:flex-row">
-            <img
-              alt={`${episode.title} - episode art`}
-              aria-hidden="true"
-              class="mb-3 block h-20 w-20 rounded-md lg:mr-6"
-              height={80}
-              loading="lazy"
-              src={episode.episodeThumbnail ?? show.image}
-              width={80}
-            />
+{
+  episodes.length === 0 ? (
+    <p class="py-12 text-center text-lg">
+      No episodes yet. Check back soon!
+    </p>
+  ) : (
+    <ul aria-label="EpisodeList">
+      {episodes.map((episode) => {
+        return (
+          <li class="dark:border-dark-border border-b">
+            <div class="flex w-full flex-col py-12 lg:flex-row">
+              <img
+                alt={`${episode.title} - episode art`}
+                aria-hidden="true"
+                class="mb-3 block h-20 w-20 rounded-md lg:mr-6"
+                height={80}
+                loading="lazy"
+                src={episode.episodeThumbnail ?? show.image}
+                width={80}
+              />
 
-            <div class="flex flex-col">
-              <FormattedDate date={new Date(episode.published)} />
+              <div class="flex flex-col">
+                <FormattedDate date={new Date(episode.published)} />
 
-              <h2 class="text-light-text-heading my-2 text-lg font-bold dark:text-white">
-                <a
-                  href={`/${episode.episodeSlug}`}
-                  style={
-                    'view-transition-name: var(--should-vt); --vt-name: vt-' +
-                    dasherize(episode.title)
-                  }
-                >
-                  {episode.episodeNumber}: {episode.title}
-                </a>
-              </h2>
+                <h2 class="text-light-text-heading my-2 text-lg font-bold dark:text-white">
+                  <a
+                    href={`/${episode.episodeSlug}`}
+                    style={
+                      'view-transition-name: var(--should-vt); --vt-name: vt-' +
+                      dasherize(episode.title)
+                    }
+                  >
+                    {episode.episodeNumber}: {episode.title}
+                  </a>
+                </h2>
 
-              <p class="mb-5">{episode.description}</p>
+                <p class="mb-5">{episode.description}</p>
 
-              <div class="flex items-center gap-6 text-sm">
-                <FullPlayButton
-                  client:visible
-                  episode={{
-                    audio: episode.audio,
-                    episodeNumber: episode.episodeNumber,
-                    id: episode.id,
-                    title: episode.title
-                  }}
-                />
+                <div class="flex items-center gap-6 text-sm">
+                  <FullPlayButton
+                    client:visible
+                    episode={{
+                      audio: episode.audio,
+                      episodeNumber: episode.episodeNumber,
+                      id: episode.id,
+                      title: episode.title
+                    }}
+                  />
 
-                <a
-                  class="text-light-text-heading font-bold dark:text-white"
-                  href={`/${episode.episodeSlug}`}
-                >
-                  Show notes
-                </a>
+                  <a
+                    class="text-light-text-heading font-bold dark:text-white"
+                    href={`/${episode.episodeSlug}`}
+                  >
+                    Show notes
+                  </a>
+                </div>
               </div>
             </div>
-          </div>
-        </li>
-      );
-    })
-  }
-</ul>
+          </li>
+        );
+      })}
+    </ul>
+  )
+}