add podcast links like blog

pages/podcast.js

@@ -1,14 +1,42 @@
 import Link from 'next/link';
+import dayjs from 'dayjs';
 
 import styles from '../styles/blog.module.scss';
 
-export default function Blog({ data }) {
+export default function Blog({ episodes }) {
 
     return (
         <>
+            <div className={styles.podcast}>
+                <h1 className={styles.header}>Welcome to The Ridge Podcast</h1>
+                <p>Here you can find conversations on Appalachia history and culture.</p>
+            </div>
             <h1 className={styles.header}>List of episodes:</h1>
-            <div className={styles.blog}>This page is a work in progres! Check back later for a list of all episodes</div>
+            <div className={styles.blog}>
+                {episodes.map((episodes, index) => (
+                    <div className={styles.post}>
+                        <hr/>
+                        <Link href={episodes.link} passHref>
+                            <a><h1 className={styles.info}>{episodes.title}</h1></a>
+                        </Link>
+                        <h4 className={styles.info}>The Ridge Podcast</h4>
+                        <h4 className={styles.info}>{dayjs(episodes.date).format('MMMM D, YYYY')}</h4>
+                    </div>
+                ))}
+            </div>
         </>
     );
 }
 
+export async function getServerSideProps() {
+    // local development
+    // const res = { quote: "Quote", author: "Author" };
+    // const quotes = res;
+
+    // production
+    const res = await fetch(`https://api.ethancedwards.com/podcast/v1/dump`);
+    const episodes = await res.json();
+
+    return { props: { episodes } };
+
+}

styles/blog.module.scss

@@ -17,6 +17,12 @@
 
 }
 
+.podcast {
+  p {
+    padding: 0 30px;
+  }
+}
+
 .blog {
     margin: 20px;
     padding: 10px;