2024-11-22

layouts/index.hbs

@@ -2,37 +2,37 @@
 {
   layout: "base",
   latest_episodes: function(episodes) {
-    return episodes.sort().reverse().slice(0,3)
+    return episodes.sort().reverse().slice(0,4)
   }
 }
 ---
-<div class="p-5 my-5 text-center bg-body-tertiary">
-    <div>
-      <h1 class="text-uppercase">{{title}}</h1>
-      <section>
-        {{{content}}}
-      </section>
-      <section>
-        {{#if links.podcastRss}}
-          <a href="{{{links.podcastRss}}}" class="btn btn-outline-primary"><i class="bi bi-rss-fill me-1"></i>RSS</a>
-        {{/if}}
-      </section>
-    </div>
+<div class="hero">
+  <h1>{{title}}</h1>
+  <section class="text-muted">
+    {{{content}}}
+  </section>
+  <section>
+    {{#if links.podcastRss}}
+      <a href="{{{links.podcastRss}}}" class="btn btn-outline-primary"><i class="bi bi-rss-fill me-1"></i>RSS</a>
+    {{/if}}
+  </section>
 </div>
 <section class="py-5">
-  <h1>Latest Episodes</h1>
-    <div class="row row-cols-1 row-cols-md-3 g-1">
+  <h1 class="text-center fs-2">Latest Episodes</h1>
+  <div class="container" style="max-width:500px">
+    <div class="row row-cols-2 g-1">
       {{#each (latest_episodes collections.episode)}}
-        <div class="col">
-          <div class="card m-2">
-                <img src="{{this.url}}/../image.jpg" class="img-fluid">
-                <div class="card-body">
-                  <h5 class="card-title"><a href={{{this.url}}}>{{#if data.title}}{{{data.title}}}{{else}}Episode {{data.episode}}{{/if}}</a></h5>
-                  <h6 class="card-subtitle mb-2 text-body-secondary"> Season {{{data.season}}}</h6>
-                  <span class="card-subtitle mb-2 text-body-secondary"> {{{date this.date "ddd, MMM D, YYYY, LT"}}}</h6>
-                </div>
+          <div class="col">
+            <div class="card m-2">
+              <a href={{{this.url}}}><img src="{{this.data.image}}" class="card-img-top"></a>
+              <div class="card-body">
+                <h5 class="card-title"><a href={{{this.url}}}>{{#if data.title}}{{{data.title}}}{{else}}Episode {{data.episode}}{{/if}}</a></h5>
+                <h6 class="card-subtitle mb-2 text-body-secondary">Season {{{data.season}}}</h6>
+                <span class="card-subtitle mb-2 text-body-secondary">{{{date this.date "MMM D, YYYY"}}}</h6>
+              </div>
+            </div>
           </div>
-        </div>
       {{/each}}
     </div>
+  </div>
   </section>