Add podcasts to homepage

css/base.css

@@ -24,6 +24,7 @@ dd,
 h1,
 h2,
 h3,
+h4,
 figure,
 table,
 p,

css/excerpt.css

@@ -4,19 +4,16 @@
   flex-grow: 1;
   border-bottom: 1px solid var(--color-light-grey);
   margin-bottom: var(--space-sm);
-  padding-bottom: var(--space-sm);
 }
 
 @media (--viewport-md) {
   .excerpt {
     margin-bottom: var(--space-md);
-    padding-bottom: var(--space-md);
   }
 }
 
 .excerpt__head,
-.excerpt__body,
+.excerpt__body {
-.excerpt__title {
   margin-bottom: var(--space-xs);
 }
 
@@ -26,15 +23,24 @@
 
 @media (--viewport-md) {
   .excerpt__head,
-  .excerpt__body,
+  .excerpt__body {
-  .excerpt__title {
     margin-bottom: var(--space-sm);
   }
 }
 
+.excerpt__title {
+  font-size: 1.5rem;
+}
+
+.excerpt__subtitle {
+  font-size: 1.2rem;
+  margin-top: var(--space-sm);
+}
+
 .excerpt__metadata {
   color: var(--color-grey);
   font-size: 12px;
+  margin-bottom: var(--space-sm);
 }
 
 .excerpt__icon,
@@ -50,3 +56,9 @@
 .excerpt__text {
   margin: 0 15px 0 5px;
 }
+
+.excerpt__audio {
+  display: block;
+  margin-bottom: var(--space-sm);
+  background-color: var(--color-light-blue);
+}

css/page.css

@@ -90,11 +90,13 @@
   .page__columns {
     display: flex;
     flex-flow: row wrap;
+    margin: 0 calc(var(--space-md) / 2 * -1);
   }
 
   .page__cell {
     display: flex;
     flex-flow: column nowrap;
     flex: 1 0 50%;
+    padding: 0 calc(var(--space-md) / 2);
   }
 }

theme/front-page.php

@@ -17,7 +17,7 @@
         $day = date('jS', $date);
         $date = get_the_date('jS F, Y', $post->ID).' at '.get_the_date('H:i', $post->ID);
         $content = (strlen($post->post_excerpt) === 0) ?
-          strip_tags(substr($post->post_content, 0, 200)).'...' :
+          strip_tags(substr($post->post_content, 0, 200)).'[...]' :
           $post->post_excerpt;
         $excerpt = array(
           title => $post->post_title,
@@ -33,6 +33,17 @@
       }
     ?>
     </div>
+    <h2 class="title">Podcasts</h2>
+    <div class="page__columns">
+      <div class="page__cell">
+        <?php $podcast = windycoys_get_podcast_meta('tfc') ?>
+        <?php get_template_part('partials/podcast') ?>
+      </div>
+      <div class="page__cell">
+        <?php $podcast = windycoys_get_podcast_meta('xin') ?>
+        <?php get_template_part('partials/podcast') ?>
+      </div>
+    </div>
   </section>
   <section class="page__banner">
     <?php get_template_part('partials/banner') ?>

theme/functions.php

@@ -43,3 +43,95 @@ function windycoys_get_deploy_timestamp() {
   }
   return false;
 }
+
+function windycoys_create_podcasts_table() {
+  global $wpdb;
+  $charset_collate = $wpdb->get_charset_collate();
+  $sql = "CREATE TABLE windycoys_podcasts (
+    id int(2) NOT NULL AUTO_INCREMENT,
+    podcast_id varchar(3) DEFAULT '' NOT NULL,
+    last_update bigint(10) DEFAULT 0 NOT NULL,
+    content longtext DEFAULT '' NOT NULL,
+    PRIMARY KEY  (id)
+  ) $charset_collate;";
+  require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
+  dbDelta($sql);
+  $wpdb->insert('windycoys_podcasts', array(
+    'podcast_id' => 'tfc',
+    'last_update' => 0,
+    'content' => '{}'
+  ));
+  $wpdb->insert('windycoys_podcasts', array(
+    'podcast_id' => 'xin',
+    'last_update' => 0,
+    'content' => '{}'
+  ));
+}
+
+function windycoys_fetch_podcast_meta($id) {
+  global $wpdb;
+  $urls = array(
+    'tfc' => 'https://rss.acast.com/thefightingcock',
+    'xin' => 'https://rss.acast.com/theextrainch',
+  );
+  $feed = file_get_contents($urls[$id]);
+  $feed = str_replace('<media:', '<', $feed);
+  $feed = str_replace('</media:', '</', $feed);
+  $feed = str_replace('<itunes:', '<', $feed);
+  $feed = str_replace('</itunes:', '</', $feed);
+  $now = time();
+  $wpdb->update("windycoys_podcasts",
+    array('last_update' => $now, 'content' => $feed),
+    array('podcast_id'=>$id)
+  );
+  return $feed;
+}
+
+function windycoys_refresh_podcast_meta($id) {
+  global $wpdb;
+  $now = time();
+  $res = $wpdb->get_row('SELECT * FROM windycoys_podcasts WHERE
+    podcast_id = "' . $id .'"');
+  if (!$res) {
+    windycoys_create_podcasts_table();
+  }
+  if ($res->last_update + 300 < $now) {
+    return array(
+      from_cache => false,
+      data => windycoys_fetch_podcast_meta($id),
+    );
+  }
+  return array(
+    from_cache => true,
+    data => $res->content,
+  );
+}
+
+function windycoys_get_episodes_url($id) {
+  $urls = array(
+    'tfc' => 'https://play.acast.com/s/thefightingcock',
+    'xin' => 'https://play.acast.com/s/theextrainch',
+  );
+  return $urls[$id];
+}
+
+function windycoys_get_podcast_meta($id) {
+  $res = windycoys_refresh_podcast_meta($id);
+  $rss = simplexml_load_string($res['data']);
+  $item = $rss->channel->item;
+  $date = strtotime((String) $item->pubDate);
+  return array(
+    from_cache => $res['from_cache'],
+    podcast_title => (String) $rss->channel->title,
+    podcast_description => (String) $rss->channel->description,
+    podcast_url => (String) $rss->channel->image->url,
+    podcast_episodes => windycoys_get_episodes_url($id),
+    title => (String) $item->title,
+    description => (String) $item->description,
+    image => (String) $item->image['href'],
+    date => date('jS F, Y', $date).' at '.date('H:i', $date),
+    length => (String) $item->duration,
+    url => (String) $item->link,
+    audio => (String) $item->enclosure['url'],
+  );
+}

theme/partials/podcast.php

@@ -0,0 +1,44 @@
+<?php
+global $podcast;
+?>
+<div class="excerpt">
+  <div class="excerpt__head">
+    <h3 class="excerpt__title">
+      <a class="link" href="<?php echo $podcast['podcast_episodes'] ?>">
+        <?php echo $podcast['podcast_title'] ?>
+      </a>
+    </h3>
+    <h4 class="excerpt__subtitle">
+      <a class="link" href="<?php echo $podcast['url'] ?>">
+        <?php echo $podcast['title'] ?>
+      </a>
+    </h4>
+  </div>
+  <div class="excerpt__body">
+    <?php echo $podcast['description'] ?>
+  </div>
+  <div class="excerpt__foot">
+    <audio class="excerpt__audio" src="<?php echo $podcast['audio'] ?>" controls="true">
+      Your browser does not support the <code>audio</code> element.
+    </audio>
+    <p class="excerpt__metadata">
+      <a
+        class="link"
+        href="<?php echo $podcast['audio'] ?>"
+        title="Download the MP3">
+        Download MP3
+      </a> |
+      <a class="link" href="<?php echo $podcast['podcast_episodes'] ?>">
+        More episodes
+      </a>
+    </p>
+    <p class="excerpt__metadata">
+      <span class="excerpt__icon">
+        <svg class="icon icon--extra-small" aria-hidden="true">
+          <use xlink:href="#icon-calendar"></use>
+        </svg>
+      </span>
+      <span class="excerpt__text"><?php echo $podcast['date'] ?></span>
+    </p>
+  </div>
+</div>