Initial commit

Dockerfile

@@ -0,0 +1,19 @@
+FROM node:alpine
+
+ENV PORT 3000
+
+RUN mkdir -p /usr/src
+
+WORKDIR /usr/src
+
+COPY package*.json /usr/src/
+
+RUN npm install
+
+COPY . /usr/src
+
+RUN npm run build
+
+EXPOSE 3000
+
+CMD npm run start

components/audioplayer.js

@@ -0,0 +1,16 @@
+import AudioPlayer from "react-h5-audio-player";
+import 'react-h5-audio-player/lib/styles.css';
+
+const AbAudioPlayer = (audiodata) => {
+
+    return (
+    <div className="audio">
+        <AudioPlayer
+            src={audiodata.audio_path + audiodata.audio_mp3}
+            //onPlay={e => gtag.event({action: "play", category:"audio", label: "audio started", value: audiodata.audio_mp3})}
+            />
+    </div>
+    )
+}
+
+export default AbAudioPlayer

components/css/styles.css

@@ -1,9 +1,10 @@
   body{
     font-family: Jaldi;
-    font-size: 1em;
+    font-size: 1.5em;
     margin: 0;
     padding: 0;
     text-align: center;
+    font-display: swap;
   }
   
   div #header {
@@ -81,10 +82,10 @@
   
   .featured_episodes ul {
     list-style-type: none;
+    display: flex
   }
   
   .show_block{
-    display: inline-block;
     *display: inline;
     zoom: 1;
     width: 340px; 
@@ -133,6 +134,10 @@
     .show_block audio{
       width: 100px;
     }
+
+    .featured_episodes ul {
+      flex-direction: column
+    }
   }
   
   .col-xs-12 .featured_episodes .ul .li {
@@ -149,6 +154,10 @@
   
   .navbar-default {
   }
+
+  .navbar {
+    margin-bottom: 5px;
+  }
   
   .article_body {
     text-align: justify;
@@ -213,4 +222,25 @@
   div .featuredimage {
     margin: 0 auto;
   }
-  
+
+  @media only screen and (min-width: 768px) {
+    
+  }
+
+  @media screen and (min-width: 992px) {
+    .col-md-3 {
+      width: 25%;
+      float: left
+    }
+
+    .col-md-9 {
+      width: 75%;
+      float: left
+    }
+  }
+
+  @media screen and (min-width: 1200px) {
+    .col-lg-4 {
+      width: 33.33333333%;
+    }
+  }

components/episodepager.js

@@ -0,0 +1,48 @@
+import ReactPaginate from "react-paginate";
+import { useRouter } from "next/router";
+import Link from 'next/link'
+
+const EpisodePager = ({ episodedata, config, showdata }) => {
+    const router = useRouter()
+
+    const handlePagination = page => {
+        const path = router.pathname
+        const query = router.query
+        query.page = page.selected + 1
+        router.push({
+          pathname: path,
+          query: query,
+        })
+      }
+
+    return (
+        <div className="episode_pages col-xs-12">
+            <div className="show_episodes">
+                {episodedata.episodes.map((episode) => (
+                <div key={episode.slug} className="episode">
+                    <div className="episode_title" id ={episode.episode_slug}>
+                        <Link href={episode.show_slug + "/" + episode.episode_slug}>{episode.title}</Link>
+                    </div>
+                    <div className="content-date">
+                        {episode.episode_published}
+                    </div>
+                    
+                    <div className="episode_body" dangerouslySetInnerHTML={{ __html: episode.episode_lead}}></div>
+                </div>
+                ))}
+            </div>
+            <ReactPaginate
+            marginPagesDisplayed={2}
+            pageRangeDisplayed={5}
+            previousLabel={"previous"}
+            nextLabel={"next"}
+            breakLabel={"..."}
+            initialPage={episodedata.curPage - 1}
+            pageCount={2}
+            onPageChange={handlePagination}
+        />
+        </div>
+    )
+}
+    
+export default EpisodePager

components/featureimage.js

@@ -0,0 +1,13 @@
+import Image from 'next/image';
+
+const FeatureImage = ({ imagedata }) => (
+    <div className="featuredimage">
+        <Image
+            src={'https://www.angrybeanie.com' + imagedata.image.src}
+            height={imagedata.image.height}
+            width={imagedata.image.width}
+        />
+    </div>
+);
+
+export default FeatureImage

components/header.js

@@ -11,13 +11,13 @@ const headerStyle = {
     <div id="header">
     <div className="social_block">
       <div className="social_twitter">
-        <a href="https://www.twitter.com/angrybeanie"><img src="{{ asset('images/twitter.png')}}" alt="Angry Beanie on Twitter" target="_blank"/></a>
-        <a href="https://www.facebook.com/angrybeanie"><img src="{{ asset('images/facebok.png')}}" alt="Angry Beanie on Facebook" target="_blank"/></a>      
+        <a href="https://www.twitter.com/angrybeanie"><img src="/images/twitter.png" alt="Angry Beanie on Twitter" target="_blank"/></a>
+        <a href="https://www.facebook.com/angrybeanie"><img src="/images/facebok.png" alt="Angry Beanie on Facebook" target="_blank"/></a>      
       </div>
     </div>
     <div className="col-md-12">
       <a href="/" alt="Home">
-        <img className="header_image img-responsive" src="{{ asset('images/logo.png')}}" alt="Angry Beanie" />
+        <img className="header_image img-fluid" src="/images/logo.png" alt="Angry Beanie" />
       </a>
     </div>
   </div>

components/latestepisodes.js

@@ -1,8 +1,27 @@
 import Link from 'next/link';
+import AudioPlayer from "react-h5-audio-player";
+import 'react-h5-audio-player/lib/styles.css';
 
-const LatestEpisodes = ({ episodedata }) => (
-    <div id="latestepisodes">
-        
+const LatestEpisodes = ({ episodedata, config }) => (
+    <div className="featured_episodes">
+        <h1>Latest Episodes</h1>
+        <ul className="no-style">
+        {episodedata.episodes.map((episode) =>(
+            <li className="col-xs-12 col-md-4 col-lg-4">
+                <div className="show_block">
+                    <div className="feature_show_title">
+                        <Link href={"/podcasts/shows/"+episode.show_slug} >
+                            {episode.show}
+                        </Link>
+                    </div>
+                    <div className="ep-title">{episode.title}</div>
+                    <AudioPlayer
+                        src={config.audio_path + episode.audio_mp3}
+                        />
+                </div>
+            </li>
+        ))}
+        </ul>
 
     </div>
 );

components/main.js

@@ -1,27 +1,23 @@
 import Header from "./header"
 import NavBar from "./navbar"
+import SideBar from "./sidebar"
+import Head from 'next/head'
+import { render } from "less"
+import { Route, Switch } from 'react-router';
+import StorySideBar from "./storysidebar"
 
-const layoutStyle = {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    width: "100%"
-    };
+const Layout = (props) => (
+            <div className="Layout">
+                <Head>
+                    <title>{props.pagedata.title}</title>
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
+                </Head>
+                <Header />
+                <div className="container">
+                    <NavBar sections={props.sections}/>
+                        {props.children}
+                </div>
+            </div>
+)
 
-const contentStyle = {
-flex: 1,
-display: "flex",
-flexDirection: "column"
-};
-
-const Layout  = props =>   (
-    <div className="Layout" style={layoutStyle}>
-        <Header />
-        <NavBar sections={props}/>
-        <div className="Content" style={contentStyle}>
-            {props.children}
-        </div>
-    </div>
-);
-
-export default Layout;
+export default Layout

components/navbar.js

@@ -1,116 +1,39 @@
 import React, { useState } from 'react';
 import Link from 'next/link';
-import {
-Collapse,
-Navbar,
-NavbarToggler,
-NavbarBrand,
-Nav,
-NavItem,
-NavLink,
-Dropdown,
-DropdownToggle,
-DropdownMenu,
-DropdownItem,
-NavbarText,
-UncontrolledDropdown
-} from 'reactstrap';
-import PropTypes from 'prop-types'
+import Navbar from 'react-bootstrap/Navbar';
+import Nav from 'react-bootstrap/Nav';
+import NavLink from 'react-bootstrap/NavLink';
+import NavItem from 'react-bootstrap/NavItem';
+import NavDropdown from 'react-bootstrap/NavDropdown';
 
 const NavBar = (props, sections) => {
   const [isOpen, setIsOpen] = useState(false);
   const toggle = () => setIsOpen(prevState => !prevState);
 
   return (
-    <div>
-      <Navbar color="light" light expand="md">
-        <NavItem>
+      <Navbar expand="lg" collapseOnSelect bg="dark" variant="dark">
+      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+      <Navbar.Collapse>
+        <Nav>
           <NavLink href="/">Home</NavLink>
-        </NavItem>
-        <UncontrolledDropdown>
-          <DropdownToggle caret>
-            Podcasts
-            </DropdownToggle>
-          <DropdownMenu>
-            <DropdownItem><Link href="/podcasts/current">Current Podcasts</Link></DropdownItem>
-            <DropdownItem><Link href="/podcasts/archived">Archived Podcasts</Link></DropdownItem>
-          </DropdownMenu>
-        </UncontrolledDropdown>
+        </Nav>
+        <NavDropdown title="Podcasts">
+            <NavDropdown.Item key="current" href="/podcasts/current">Current Podcasts</NavDropdown.Item>
+            <NavDropdown.Item key="archived" href="/podcasts/archived">Archived Podcasts</NavDropdown.Item>
+        </NavDropdown>
         <NavItem>
           <NavLink href="/news">News and such</NavLink>
         </NavItem>
-        {props.sections.sections.sections.map((section) => (                    
-          <UncontrolledDropdown>
-            <DropdownToggle caret>
-            {section.title}
-            </DropdownToggle>
-            <DropdownMenu>
+        {props.sections.sections.map((section) => (                    
+          <NavDropdown title={section.title}>
               {section.pages.map((page) => (
-                <DropdownItem><Link href={page.page_slug}>{page.page_title}</Link></DropdownItem>
-              ))}
-            </DropdownMenu>       
-          </UncontrolledDropdown>
+                <NavDropdown.Item key={page.page_slug} href={"/sections/" + page.page_slug}>{page.page_title}</NavDropdown.Item>
+              ))}       
+          </NavDropdown>
         ))}
+        </Navbar.Collapse>
       </Navbar>
-    </div>
   );
 }
 
-Dropdown.propTypes = {
-  a11y: PropTypes.bool, // defaults to true. Set to false to enable more bootstrap like tabbing behavior
-  disabled: PropTypes.bool,
-  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
-  group: PropTypes.bool,
-  isOpen: PropTypes.bool,
-  // For Dropdown usage inside a Nav
-  nav: PropTypes.bool,
-  active: PropTypes.bool,
-  // For Dropdown usage inside a Navbar (disables popper)
-  inNavbar: PropTypes.bool,
-  tag: PropTypes.string, // default: 'div' unless nav=true, then 'li'
-  toggle: PropTypes.func,
-  setActiveFromChild: PropTypes.bool
-};
-
-DropdownToggle.propTypes = {
-  caret: PropTypes.bool,
-  color: PropTypes.string,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  'data-toggle': PropTypes.string,
-  'aria-haspopup': PropTypes.bool,
-  // For DropdownToggle usage inside a Nav
-  nav: PropTypes.bool,
-  // Defaults to Button component
-  tag: PropTypes.any
-};
-
-DropdownMenu.propTypes = {
-  tag: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  right: PropTypes.bool,
-  flip: PropTypes.bool, // default: true,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  // Custom modifiers that are passed to DropdownMenu.js, see https://popper.js.org/popper-documentation.html#modifiers
-  modifiers: PropTypes.object,
-  persist: PropTypes.bool, // presist the popper, even when closed. See #779 for reasoning
-  // passed to popper, see https://popper.js.org/popper-documentation.html#Popper.Defaults.positionFixed
-  positionFixed: PropTypes.bool
-};
-
-DropdownItem.propTypes = {
-  children: PropTypes.node,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool,
-  divider: PropTypes.bool,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  header: PropTypes.bool,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  toggle: PropTypes.bool, // default: true
-  text: PropTypes.bool
-};
 export default NavBar

components/showsidebar.js

@@ -0,0 +1,13 @@
+import Image from 'next/image';
+
+const ShowSideBar = (props) => (
+<div className="side_content col-md-3">
+    <Image
+        src={props.props.serverRuntimeConfig.base_path + props.props.showdata.logo.src}
+        height={props.props.showdata.logo.height}
+        width={props.props.showdata.logo.width}
+    />
+</div>
+);
+
+export default ShowSideBar

components/sidebar.js

@@ -0,0 +1,7 @@
+const SideBar = (props) => (
+<div className="side_content col-md-3">
+   {props.children}
+</div>
+);
+
+export default SideBar

components/storypager.js

@@ -0,0 +1,44 @@
+import ReactPaginate from "react-paginate";
+import { useRouter } from "next/router";
+import Link from 'next/link'
+
+const StoryPager = ({ storydata }) => {
+    const router = useRouter()
+
+    const handlePagination = page => {
+        const path = router.pathname
+        const query = router.query
+        query.page = page.selected + 1
+        router.push({
+          pathname: path,
+          query: query,
+        })
+      }
+    
+    return (
+        <div className="episode_pages col-sm-12">
+            <div className="show_episodes">
+                {storydata.articles.map((story) => (
+                    <div key={story.slug}>
+                        <div className="episode_title">
+                            <Link href="/news/[slug]" as={"/news/" + story.slug}>{story.title}</Link>
+                        </div>
+                        <div className="article_body" dangerouslySetInnerHTML={{ __html: story.lead }} />
+                    </div>
+                ))}
+                <ReactPaginate
+                marginPagesDisplayed={2}
+                pageRangeDisplayed={5}
+                previousLabel={"previous"}
+                nextLabel={"next"}
+                breakLabel={"..."}
+                initialPage={storydata.page - 1}
+                pageCount={storydata.total / 5}
+                onPageChange={handlePagination} />
+            </div>
+        </div>
+    )
+
+}
+
+export default StoryPager

components/storysidebar.js

@@ -0,0 +1,14 @@
+import Link from 'next/link'
+
+const StorySideBar = (storydata) => (
+    <div className="side_content col-md-3">
+       {storydata.stories.articles.map((article) =>  (
+            <div key={article.slug}>
+                <h1><Link href="/news/[slug]" as={"/news/" + article.slug}>{article.title}</Link></h1>
+                <div dangerouslySetInnerHTML={{__html: article.lead}} />
+            </div>
+        ))}
+    </div>
+    );
+    
+export default StorySideBar

docker/Dockerfile

@@ -1,3 +0,0 @@
-FROM node:10
-
-WORKDIR 

lib/gtag.js

@@ -0,0 +1,19 @@
+export const GA_TRACKING_ID = 'G-HDSXTW54QC'
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url) => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url,
+  })
+  console.log("Page view action")
+}
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  })
+  console.log("event sent: " + action + ":" + category + ":" + label + ":" + value)
+}

lib/usePageTracking.js

@@ -0,0 +1,14 @@
+import { useEffect} from "react";
+import { useLocation } from "react-router-dom";
+import ReactGA from "react-ga";
+
+const usePageTracking = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    ReactGA.initialize("UA-000000000-0");
+    ReactGA.pageview(location.pathname + location.search);
+  }, [location]);
+};
+
+export default usePageTracking;

next.config.js

@@ -6,4 +6,17 @@ module.exports = withLess({
 })
 module.exports = withCSS({
   /* config options here */
-})
+});
+module.exports = {
+  serverRuntimeConfig: {
+    // Will only be available on the server side
+    base_path: 'http://cms.local.angrybeanie.com:8000',
+    audio_path: 'https://audio.angrybeanie.com/'
+  },
+  images: {
+    domains: ['www.angrybeanie.com', 'localhost']
+  },
+  publicRuntimeConfig: {
+    analytics_code: 'UA-2497299-19'
+  }
+}

package.json

@@ -13,10 +13,15 @@
   "dependencies": {
     "@zeit/next-less": "^1.0.1",
     "bootstrap": "^4.5.3",
-    "less": "^3.12.2",
-    "next": "^9.4.4",
+    "less": "^3.13.0",
+    "next": "^10.0.3",
+    "next-images": "^1.6.2",
     "react": "^16.14.0",
+    "react-bootstrap": "^1.4.0",
     "react-dom": "^16.14.0",
-    "reactstrap": "^8.7.1"
+    "react-ga": "^3.3.0",
+    "react-h5-audio-player": "^3.5.0",
+    "react-paginate": "^6.5.0",
+    "react-router-dom": "^5.2.0"
   }
 }

pages/_app.js

@@ -1,9 +1,29 @@
 // import App from 'next/app'
 import 'bootstrap/dist/css/bootstrap.min.css';
+import { Fragment, useEffect } from 'react';
 import "../components/css/styles.css"
+import * as gtag from '../lib/gtag'
+import { Router, useRouter } from 'next/router'
+
+//Router.events.on('routeChangeComplete', (url) => gtag.pageview(url))
 
 function MyApp({ Component, pageProps }) {
-    return <Component {...pageProps} />
+  const router = useRouter()
+  useEffect(() => {
+    const handleRouteChange = (url) => {
+      gtag.pageview(url);
+      console.log("Pageview is happening")
+    };
+    router.events.on("routeChangeComplete", handleRouteChange);
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, [router.events]);
+  
+
+    return (
+      <Component {...pageProps} />
+    )
   }
   
   // Only uncomment this method if you have blocking data requirements for

pages/_document.js

@@ -1,18 +1,42 @@
-import Document, { Head, Main, NextScript } from 'next/document';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 import React from 'react';
+import { Fragment } from 'react'
+
+import { GA_TRACKING_ID } from '../lib/gtag'
 
 class CustomDocument extends Document {
   render() {
     return (
-      <html lang="en">
+      <Html lang="en">
         <Head>
+        <Fragment>
+          {/* Global Site Tag (gtag.js) - Google Analytics */}
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+
+                /*gtag('config', '${GA_TRACKING_ID}', {
+                  page_path: window.location.pathname,
+                });
+                console.log("Page View")*/
+              `,
+            }}
+          />
+        </Fragment>
         <link href="https://fonts.googleapis.com/css?family=Cabin|Jaldi" rel="stylesheet" />
         </Head>
         <body>
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     );
   }
 }

pages/index.js

@@ -1,23 +1,32 @@
 import Layout from "../components/main"
+import LatestEpisodes from "../components/latestepisodes"
 import Link from 'next/link'
+import getConfig from 'next/config'
 
-export async function getStaticProps(context) {
-  const res = await fetch(`http://localhost:8000/api/collections/1`)
+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 secres = await fetch(`http://localhost:8000/api/sections`)
+  const epres = await fetch(serverRuntimeConfig.base_path + '/api/podcasts/episodes/latest/0/3')
+  const epdata = await epres.json()
+
+  const secres = await fetch(serverRuntimeConfig.base_path + `/api/sections`)
   const secdata = await secres.json()
+
+  const pagedata = {'title': 'Angry Beanie'}
   
   return {
-      props: { articles: artdata, sections : secdata }, // will be passed to the page component as props
+      props: { articles: artdata, sections : secdata, pagedata, episodedata: epdata, config: serverRuntimeConfig}, // will be passed to the page component as props
   }
 }
 
-function HomePage ({articles, sections}) {
-    return (<Layout sections={sections}>
-      {articles.articles.map((article) =>  (
+function HomePage (props) {
+    return (<Layout sections={props.sections} pagedata={props.pagedata}>
+      {props.articles.articles.map((article) =>  (
         <h1><Link href="/news/[slug]" as={"/news/" + article.slug}><a>{article.title}</a></Link></h1>
       ))}
+      <LatestEpisodes episodedata={props.episodedata} config={props.config}></LatestEpisodes>
     </Layout>);
 }
   

pages/news.js

@@ -1,28 +1,36 @@
 import "../components/main"
+import getConfig from 'next/config'
 import Layout from "../components/main"
+import StoryPager from "../components/storypager"
 import Link from 'next/link'
+import StorySideBar from "../components/storysidebar"
 
 export async function getServerSideProps(context) {
-    const res = await fetch(`http://localhost:8000/api/documents/0/5`)
+    if(context.query.page == null || context.query.page == '0') {
+        var page = 0;
+    } else {
+        var page = Number(context.query.page) - 1
+    }
+
+    const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
+
+    const res = await fetch(serverRuntimeConfig.base_path + `/api/documents/`+ page + `/5`)
     const articles = await res.json()
 
-    const secres = await fetch(`http://localhost:8000/api/sections`)
+    const secres = await fetch(serverRuntimeConfig.base_path + `/api/sections`)
     const secdata = await secres.json()
+
+    const pagedata = {'title': 'Angry Beanie News'}
     
     return {
-        props: { articles, sections : secdata }, // will be passed to the page component as props
+        props: { articles, sections : secdata, pagedata }, // will be passed to the page component as props
     }
   }
 
-function News({ articles, sections }) {
-    return <Layout sections={sections}>
+function News({ articles, sections, pagedata }) {
+    return <Layout sections={sections} pagedata={pagedata}>
         <h1>NEWS</h1>
-        {articles.articles.map((article) =>  (
-            <div>
-            <h1><Link href="/news/[slug]" as={"/news/" + article.slug}>{article.title}</Link></h1>
-            <div><html dangerouslySetInnerHTML={{__html: article.lead}} /></div>
-            </div>
-        ))}
+        <StoryPager storydata={articles} />
     </Layout>
 }
 

pages/news/[slug].js

@@ -1,25 +1,40 @@
+import getConfig from 'next/config'
 import "../../components/main.js"
 import Layout from "../../components/main.js"
+import FeatureImage from "../../components/featureimage.js"
+import StorySideBar from '../../components/storysidebar.js'
 
 export async function getServerSideProps(context) {
+    const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
     const slug = context.params.slug
-    const url = 'http://localhost:8000/api/document/' + slug
-    console.log(url)
+    const url = serverRuntimeConfig.base_path + '/api/document/' + slug
+ 
     const res = await fetch(url)
     const article_obj = await res.json()
 
-    const secres = await fetch(`http://localhost:8000/api/sections`)
+    const stories = await fetch(serverRuntimeConfig.base_path + `/api/documents/0/5`)
+    const storydata = await stories.json()
+
+    const pagedata = {
+        'title': "Angry Beanie - " + article_obj.title
+    }
+
+    const secres = await fetch(serverRuntimeConfig.base_path + '/api/sections')
     const secdata = await secres.json()
     
     return {
-        props: { article_obj, sections: secdata }, // will be passed to the page component as props
+        props: { article_obj, sections: secdata, pagedata, storydata}, // will be passed to the page component as props
     }
 }
 
-const Article = ({article_obj, sections}) => (
-    <Layout sections={sections}>
-        <h1>{article_obj.title}</h1>
-        <div className="article_body" dangerouslySetInnerHTML={{ __html: article_obj.body }}></div>
+const Article = ({article_obj, sections, pagedata, storydata}) => (
+    <Layout sections={sections} pagedata={pagedata}>
+        <div className="main_content col-md-9 col-sm-12">
+            <FeatureImage imagedata={article_obj}></FeatureImage>
+            <h1>{article_obj.title}</h1>
+            <div className="article_body" dangerouslySetInnerHTML={{ __html: article_obj.body }}></div>
+        </div>
+        <StorySideBar stories={storydata} />
     </Layout>
 )
 

pages/podcasts/[podcast].js

@@ -1,10 +0,0 @@
-import "../../components/main.js"
-import Layout from "../../components/main.js"
-
-const Podcast = ({}) => (
-    <Layout>
-
-    </Layout>
-)
-
-export default Podcast

pages/podcasts/archived.js

@@ -1,25 +1,28 @@
 import "../../components/main.js"
-import LatestEpisodes from "../../components/latestepisodes.js"
 import Layout from "../../components/main.js"
+import Link from 'next/link'
+import getConfig from 'next/config'
 
-export async function getStaticProps(context) {
-    const secres = await fetch(`http://localhost:8000/api/sections`)
+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(`http://localhost:8000/api/podcasts/bystatus/0`)
+    const podcastres = await fetch(serverRuntimeConfig.base_path + `/api/podcasts/bystatus/0`)
     const podcastdata = await podcastres.json()
 
+    const pagedata = {'title': 'Angry Beanie - Archived Podcast Projects'}
+
     return {
-        props: { sections : secdata, podcastdata }, // will be passed to the page component as props
+        props: { sections : secdata, podcastdata, pagedata }, // will be passed to the page component as props
     }
 }
 
-const PodcastArchived = ({sections, podcastdata}) => (
-    <Layout sections={sections}>
-        <LatestEpisodes></LatestEpisodes>
+const PodcastArchived = ({sections, podcastdata, pagedata}) => (
+    <Layout sections={sections} pagedata={pagedata}>
         <h1>Archived Podcasts</h1>
         {podcastdata.shows.map((podcast) => (
-            <h1>{podcast.title}</h1>
+            <h1><Link href={"/podcasts/shows/" + podcast.slug}>{podcast.title}</Link></h1>
         ))}
 
     </Layout>

pages/podcasts/current.js

@@ -1,27 +1,30 @@
 import "../../components/main.js"
-import LatestEpisodes from "../../components/latestepisodes.js"
 import Layout from "../../components/main.js"
+import Link from 'next/link'
+import getConfig from 'next/config'
 
-export async function getStaticProps(context) {
-    const secres = await fetch(`http://localhost:8000/api/sections`)
+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(`http://localhost:8000/api/podcasts/bystatus/1`)
+    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 }, // will be passed to the page component as props
+        props: { sections : secdata, podcastdata, episodedata, pagedata }, // will be passed to the page component as props
     }
 }
 
-const PodcastCurrent = ({sections, podcastdata, episodedata}) => (
-    <Layout sections={sections} episodedata={episodedata}>
-        <LatestEpisodes></LatestEpisodes>
+const PodcastCurrent = ({sections, podcastdata, episodedata, pagedata}) => (
+    <Layout sections={sections} episodedata={episodedata} pagedata={pagedata}>
         <h1>Current Podcasts</h1>
         {podcastdata.shows.map((podcast) => (
-            <h1>{podcast.title}</h1>
+            <h1><Link href={"/podcasts/shows/" + podcast.slug}>{podcast.title}</Link></h1>
         ))}
 
     </Layout>

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

@@ -0,0 +1,47 @@
+import { useRouter } from 'next/router'
+import getConfig from 'next/config'
+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';
+
+export async function getServerSideProps(context) {
+    const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
+    const slug = context.params.episode
+
+    console.log(serverRuntimeConfig.base_path)
+
+    const secres = await fetch(serverRuntimeConfig.base_path + '/api/sections')
+    const secdata = await secres.json()
+
+    const epres = await fetch(serverRuntimeConfig.base_path + "/api/podcast/episode/"+slug[1])
+    const epdata = await epres.json()
+
+    const audiodata = {
+        audio_path: serverRuntimeConfig.audio_path,
+        audio_mp3:  epdata.audio_mp3
+    }
+
+    const pagedata = {
+        'title': 'Angry Beanie - ' + epdata.episode_title
+    }
+
+    return {
+        props: { pagedata, sections: secdata, episode: epdata, audiodata }
+    }
+}
+
+const Episode = ( props ) => {
+    return (<Layout pagedata={props.pagedata} sections={props.sections} episode={props.episode} audiodata={props.audiodata}>
+        <h1>{props.episode.episode_title}</h1>
+        <AudioPlayer
+            src={props.audiodata.audio_path + props.audiodata.audio_mp3}
+            onPlay={e => gtag.event({action: "play", category:"audio", label: "audio started", value: props.audiodata.audio_mp3})}
+            onPause={e => gtag.event({action: "pause", category:"audio", label: "audio paused", value: props.audiodata.audio_mp3})}
+            onEnded={e => gtag.event({action: "end", category:"audio", label: "audio ended", value: props.audiodata.audio_mp3})}
+            />
+        <div className="article_body" dangerouslySetInnerHTML={{ __html: props.episode.episode_body}} />
+    </Layout>)
+}
+
+export default Episode

pages/podcasts/shows/[podcast].js

@@ -0,0 +1,38 @@
+import getConfig from 'next/config'
+import "../../../components/main.js"
+import Layout from "../../../components/main.js"
+import EpisodePager from "../../../components/episodepager.js"
+
+export async function getServerSideProps(context) {
+    const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
+    const slug = context.params.podcast
+    const url = serverRuntimeConfig.base_path + '/api/podcasts/series/' + slug
+    const showres = await fetch(url)
+    const showdata = await showres.json()
+   
+    if(context.query.page == null || context.query.page == '0') {
+        var page = 0;
+    } else {
+        var page = Number(context.query.page) - 1
+    }
+    const epres = await fetch(serverRuntimeConfig.base_path + "/api/podcasts/episodes/"+slug+"/"+page+"/10")
+    const epdata = await epres.json()
+
+    const secres = await fetch(serverRuntimeConfig.base_path + '/api/sections')
+    const secdata = await secres.json()
+
+    const pagedata = {
+        'title': 'Angry Beanie - ' + showdata.title
+    }
+    return {
+        props: {pagedata, sections: secdata, showdata, epdata, serverRuntimeConfig}
+    }
+}
+const Podcast = (props) => (
+    <Layout pagedata={props.pagedata} sections={props.sections} showdata={props.showdata}>
+        <h1>{props.showdata.title}</h1>
+        <EpisodePager episodedata={props.epdata} config={props.serverRuntimeConfig} showdata={props.showdata}/>
+    </Layout>
+)
+
+export default Podcast

pages/sections/[page].js

@@ -0,0 +1,29 @@
+import Layout from "../../components/main"
+import Link from 'next/link'
+import getConfig from 'next/config'
+
+export async function getServerSideProps(context) {
+    const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
+    const pslug = context.params.page
+    const res = await fetch(serverRuntimeConfig.base_path + `/api/page/` + pslug)
+    const pagedata = await res.json()
+
+    pagedata.title = "Angry Beanie - " + pagedata.title
+  
+    const secres = await fetch(serverRuntimeConfig.base_path + `/api/sections`)
+    const secdata = await secres.json()
+    
+    return {
+        props: { sections : secdata, pagedata }, // will be passed to the page component as props
+    }
+  }
+
+function Page ({articles, sections, pagedata}) {
+    return (<Layout sections={sections} pagedata={pagedata}>
+        <h1>{pagedata.title}</h1>
+        <div class="page_body" dangerouslySetInnerHTML={{ __html: pagedata.body }}>
+        </div>
+      </Layout>);
+}
+
+export default Page

pages/shows.js

@@ -1,10 +0,0 @@
-import "../components/main"
-import Layout from "../components/main"
-
-const Shows = () => (
-    <Layout>
-        <h1>SHOWS</h1>
-    </Layout>
-)
-
-export default Shows

pages/shows/show.js

@@ -1,11 +0,0 @@
-import Link from "next/link"
-import "../../components/main.js"
-import Layout from "../../components/main.js"
-
-const Show = () => (
-    <Layout>
-        <h1>Show</h1>
-    </Layout>
-)
-
-export default Show