Rebuild podcasts pages markup missing from the old site

nextflow-io · Mar 18, 2024 · ab43cf9 · ab43cf9
1 parent 4a1dcfb
commit ab43cf9
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 12 deletions.
diff --git a/src/pages/podcast/[...episode].astro b/src/pages/podcast/[...episode].astro
@@ -18,21 +18,44 @@ const tags = entry.data.tags.split(",");
 <Page title={entry.data.title} description={entry.data.description} image={entry.data.image}>
   <div class="row">
     <div class="col-sm-8">
-      <div class="blg-summary">
-        <h2><a href="#">{entry.data.title}</a></h2>
+      <div class="blg-summary podcast" data-golive={Date.parse(entry.data.date)}>
+        <h2>
+          <a href={entry.slug}>
+            <span class="label label-success">Episode {entry.data.episode}</span>
+            {entry.data.title}
+          </a>
+        </h2>
+        <h4 class="text-muted blg-description">{entry.data.description}</h4>
         <ul class="text-muted list-inline blg-header">
-          <li><i class="fa fa-user"></i> {entry.data.author}</li>
+          <li><i class="fa fa-info-circle"></i> {entry.data.subtype}</li>
           <li><i class="fa fa-calendar"></i> {entry.data.date}</li>
         </ul>
         <hr />
         <div class="blg-text">
-          <Content />
+          {
+            entry.data.youtubeid.length > 6 && (
+              <>
+                <iframe
+                  width="560"
+                  height="315"
+                  src={"https://www.youtube.com/embed/" + entry.data.youtubeid}
+                  title="YouTube video player"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowfullscreen
+                />
+                <hr />
+              </>
+            )
+          }
+          <div class="future-hide"><Content /></div>
+          <div class="future-show">Episode coming soon..</div>
         </div>
 
         <p class="tags">
           {
             tags.map((tag) => (
-              <a href={`/tags/${tag}.html`} class="background-color bg-hover-color">
+              <a href={`/tags/{tag}.html`} class="background-color bg-hover-color">
                 {tag}
               </a>
             ))

diff --git a/src/pages/podcasts.astro b/src/pages/podcasts.astro
@@ -25,13 +25,15 @@ const episodes = (await getCollection("podcast")).sort(
         {
           episodes.map((post) => {
             return (
-              <div class="blg-summary podcast" data-golive={post.data.date}>
+              <div class="blg-summary podcast" data-golive={Date.parse(post.data.date)}>
                 <h3>
                   <a href={"/podcast/" + post.slug + ".html"}>
-                    <span class="label label-success">Episode {post.data.episode}</span> {post.data.title}
+                    <span class="label label-success">Episode {post.data.episode}</span>
+                    {post.data.title}
                   </a>
                 </h3>
                 <h4 class="text-muted blg-description future-show">Episode coming soon! Subscribe to listen live..</h4>
+                <h4 class="text-muted blg-description future-hide">{post.data.description}</h4>
 
                 <div class="timeline-info hidden-xs">
                   <img src="/img/coming-soon.png" class="blg-author future-show" alt="Coming soon" />
@@ -45,11 +47,15 @@ const episodes = (await getCollection("podcast")).sort(
                     <i class="fa fa-calendar" /> {post.data.date}
                   </li>
                 </ul>
-                <hr />
-                <p class="blg-text">{post.data.description}</p>
-                <a href={"/podcast/" + post.slug + ".html"}>
-                  <img src={post.data.image} class="podcast-thumb-img" />
-                </a>
+                <div class="future-hide">
+                  <hr />
+                  {post.data.image && (
+                    <a href={"/podcast/" + post.slug + ".html"}>
+                      <img src={post.data.image} class="podcast-thumb-img" />
+                    </a>
+                  )}
+                  <p class="blg-text">{post.data.description}</p>
+                </div>
               </div>
             );
           })