Fixed up episode pager, started work on Single top level Podcast Page

components/css/styles.css

@@ -258,4 +258,12 @@
     position: absolute;
     bottom: 0;
     left: 0;
+  }
+
+  .page_body {
+    text-align: justify;
+  }
+
+  h1 {
+    font-size: 4rem
   }

components/episodesidebar.js

@@ -2,10 +2,13 @@ import Link from 'next/link'
 
 const EpisodeSideBar = (epdata) => (
     <div className="side_content col-md-3">
-       {epdata.episodes.map((episode) =>  (
+        <h2>Latest Episodes</h2>
-            <div key={article.slug}>
+        <hr />
-                <h1><Link href="/news/[slug]" as={"/news/" + episode.slug}>{episode.title}</Link></h1>
+       {epdata.epdata.episodes.map((episode) =>  (
-                <div dangerouslySetInnerHTML={{__html: article.lead}} />
+            <div key={episode.episode_slug}>
+                <h2><Link href="/podcasts/shows/[show_slug]/[slug]" as={"/podcasts/shows/" + episode.show_slug + "/" + episode.episode_slug}>{episode.title}</Link></h2>
+                <div dangerouslySetInnerHTML={{__html: episode.episode_lead}} />
+                <hr />
             </div>
         ))}
     </div>

components/navbar.js

@@ -17,10 +17,9 @@ const NavBar = (props, sections) => {
         <Nav className="m-auto">
           <NavLink href="/">Home</NavLink>
         </Nav>
-        <NavDropdown className="m-auto" title="Podcasts">
+        <Nav className="m-auto">
-            <NavDropdown.Item key="current" href="/podcasts/current">Current Podcasts</NavDropdown.Item>
+          <NavLink href="/podcasts">Podcasts</NavLink>
-            <NavDropdown.Item key="archived" href="/podcasts/archived">Archived Podcasts</NavDropdown.Item>
+        </Nav>
-        </NavDropdown>
         <NavItem className="m-auto">
           <NavLink href="/news">News and such</NavLink>
         </NavItem>

components/storysidebar.js

@@ -2,10 +2,13 @@ import Link from 'next/link'
 
 const StorySideBar = (storydata) => (
     <div className="side_content col-md-3">
+        <h2>Latest Stories</h2>
+        <hr />
        {storydata.stories.articles.map((article) =>  (
             <div key={article.slug}>
-                <h1><Link href="/news/[slug]" as={"/news/" + article.slug}>{article.title}</Link></h1>
+                <h2><Link href="/news/[slug]" as={"/news/" + article.slug}>{article.title}</Link></h2>
                 <div dangerouslySetInnerHTML={{__html: article.lead}} />
+                <hr></hr>
             </div>
         ))}
     </div>

lib/rss.js

@@ -0,0 +1,16 @@
+import Parser from 'rss-parser'
+
+export const FEEDS = [
+    {
+        name: "tad",
+        url: "https://tad.angrybeanie.com/feed/"
+    }
+];
+
+export async function getFeed(feedUrl) {
+    let parser = new Parser();
+  
+    let feed = await parser.parseURL(feedUrl);
+  
+    return feed;
+}

package-lock.json

@@ -1190,6 +1190,11 @@
         "iconv-lite": "^0.6.2"
       }
     },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+    },
     "errno": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
@@ -3514,6 +3519,15 @@
         "inherits": "^2.0.1"
       }
     },
+    "rss-parser": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/rss-parser/-/rss-parser-3.12.0.tgz",
+      "integrity": "sha512-aqD3E8iavcCdkhVxNDIdg1nkBI17jgqF+9OqPS1orwNaOgySdpvq6B+DoONLhzjzwV8mWg37sb60e4bmLK117A==",
+      "requires": {
+        "entities": "^2.0.3",
+        "xml2js": "^0.4.19"
+      }
+    },
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -3553,6 +3567,11 @@
         }
       }
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
     "scheduler": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
@@ -4049,6 +4068,20 @@
         "is-typed-array": "^1.1.6"
       }
     },
+    "xml2js": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+      "requires": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      }
+    },
+    "xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -27,6 +27,7 @@
     "react-ga": "^3.3.0",
     "react-h5-audio-player": "^3.7.1",
     "react-paginate": "^6.5.0",
-    "react-router-dom": "^5.2.1"
+    "react-router-dom": "^5.2.1",
+    "rss-parser": "^3.12.0"
   }
 }

pages/index.js

@@ -2,36 +2,72 @@ import Layout from "../components/main"
 import LatestEpisodes from "../components/latestepisodes"
 import Link from 'next/link'
 import getConfig from 'next/config'
+import Head from 'next/head'
+import Image from 'next/image';
+import { FEEDS, getFeed } from "../lib/rss"
 
 export async function getServerSideProps(context) {
   const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
   const res = await fetch(serverRuntimeConfig.base_path +`/api/collections/1`)
   const artdata = await res.json()
+  const article = artdata.articles[0]
 
-  const epres = await fetch(serverRuntimeConfig.base_path + '/api/podcasts/episodes/latest/0/3')
+  const epres = await fetch(serverRuntimeConfig.base_path + '/api/podcasts/episodes/latest/0/1')
   const epdata = await epres.json()
 
-  const secres = await fetch(serverRuntimeConfig.base_path + `/api/sections`)
+  const flickr = await fetch('https://www.flickr.com/services/feeds/photos_public.gne?id=25875680@N05&lang=en-us&format=json&nojsoncallback=1')
-  const secdata = await secres.json()
+  const flickrdata = await flickr.json()
+  const firstimage = flickrdata.items[0]
 
   const pagedata = {'title': 'Angry Beanie'}
+
+  const tadfeed = FEEDS.find((tadfeed) => tadfeed.name === "tad");
+  const tadfullfeed = await getFeed(tadfeed.url)
+  const tadfirstitem = tadfullfeed.items[0]
   
   return {
-      props: { articles: artdata, sections : secdata, pagedata, episodedata: epdata, config: serverRuntimeConfig}, // will be passed to the page component as props
+      props: { article, pagedata, episodedata: epdata.episodes, config: serverRuntimeConfig, tadfirstitem, firstimage}, // will be passed to the page component as props
   }
 }
 
 function HomePage (props) {
-    return (<Layout sections={props.sections} pagedata={props.pagedata}>
+    return (
-      {props.articles.articles.map((article) =>  (
+      <div>
-        <div>
+        <Head>
-          <h1><Link href="/news/[slug]" as={"/news/" + article.slug}><a>{article.title}</a></Link></h1>
+          <title>{props.pagedata.title}</title>
-          <div dangerouslySetInnerHTML={{ __html: article.lead}} ></div>
+        </Head>
+        <div className="container">
+          <div className="frontPageImage">
+            <img className="header_image img-fluid" src="/images/logo.png" alt="Angry Beanie" />
+          </div>
+          <div className="card col-sm-3">
+            <h3>Latest Blog Post</h3>
+            <Link href="/news/[slug]" as={"/news/" + props.article.slug}>{props.article.title}</Link>
+            {props.article.abstract}
+          </div>
+          {props.episodedata.map((episode) => ( 
+          <div className="card col-sm-3">
+            <h3>Latest Podcast</h3>
+            <Link href={episode.show_slug + "/" + episode.episode_slug}>{episode.title}</Link>
+            <Image 
+              src={props.config.base_path + "/" + episode.logo.src}
+              height={episode.logo.height}
+              width="100%"
+            ></Image>
+            <div dangerouslySetInnerHTML={{ __html: episode.episode_lead}}></div>
+          </div>
+          ))}
+          <div className="card col-sm-3">
+            <h3>Latest Tech And Disability Post</h3>
+            {props.tadfirstitem.title}
+          </div>
+          <div className="card col-sm-3">
+            <h3>Latest Photo</h3>
+            <img src={ props.firstimage.media.m } height="100" width="100"></img>
+          </div>
         </div>
-      ))}
+      </div>
-      <hr />
+    );
-      <LatestEpisodes episodedata={props.episodedata} config={props.config}></LatestEpisodes>
-    </Layout>);
 }
   
 export default HomePage

pages/podcasts.js

@@ -0,0 +1,28 @@
+import "../components/main.js"
+import Layout from "../components/main.js"
+import Link from 'next/link'
+import getConfig from 'next/config'
+import Image from 'next/image';
+
+export async function getServerSideProps(context) {
+    const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
+    const secres = await fetch(serverRuntimeConfig.base_path + `/api/sections`)
+    const secdata = await secres.json()
+
+    const podcastres = await fetch(serverRuntimeConfig.base_path + `/api/podcasts/bystatus/1`)
+    const podcastdata = await podcastres.json()
+
+    const episodedata = "hi there"
+
+    const pagedata = {'title': 'Angry Beanie - Current Podcast Projects'}
+
+    return {
+        props: { sections : secdata, podcastdata, episodedata, pagedata }, // will be passed to the page component as props
+    }
+}
+
+const Podcasts = ({sections, podcastdata, episodedata, pagedata}) =>  (
+    <Layout sections={sections} episodedata={episodedata} pagedata={pagedata}></Layout>
+)
+
+export default Podcasts

pages/podcasts/current.js

@@ -26,7 +26,7 @@ const PodcastCurrent = ({sections, podcastdata, episodedata, pagedata}) => (
         <h1>Current Podcasts</h1>
         {podcastdata.shows.map((podcast) => (
             <h1><Image
-                src="https://www.angrybeanie.com/uploads/media/default/0001/01/thumb_185_default_small.png"
+                src={"https://www.angrybeanie.com/uploads/media/default/0001/01/thumb_185_default_small.png"}
                 height=""
                 width=""
                 ></Image><Link href={"/podcasts/shows/" + podcast.slug}>{podcast.title}</Link></h1>

pages/podcasts/shows/[...episode].js

@@ -4,8 +4,8 @@ import Layout from "../../../components/main.js"
 import * as gtag from "../../../lib/gtag"
 import AudioPlayer from "react-h5-audio-player";
 import 'react-h5-audio-player/lib/styles.css';
-//import EpisodeSideBar from "../../../components/episodesidebar"
+import EpisodeSideBar from "../../../components/episodesidebar"
-import EpisodePager from '../../../components/episodepager.js';
+
 
 export async function getServerSideProps(context) {
     const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
@@ -53,7 +53,7 @@ const Episode = ( props ) => {
                 />
             <div className="article_body" dangerouslySetInnerHTML={{ __html: props.episode.episode_body}} />
         </div>
-        <EpisodePager episodedata={props.sepdata} />
+        <EpisodeSideBar epdata={props.sepdata}></EpisodeSideBar>
     </Layout>)
 }
 

pages/sections/[page].js

@@ -21,7 +21,7 @@ export async function getServerSideProps(context) {
 function Page ({articles, sections, pagedata}) {
     return (<Layout sections={sections} pagedata={pagedata}>
         <h1>{pagedata.title}</h1>
-        <div class="page_body" dangerouslySetInnerHTML={{ __html: pagedata.body }}>
+        <div className="page_body" dangerouslySetInnerHTML={{ __html: pagedata.body }}>
         </div>
       </Layout>);
 }