Latest changes

.gitignore

@@ -12,3 +12,5 @@ yarn-debug.log*
 yarn-error.log*
 #VSCode
 .vscode/
+#ideaj
+.idea/

components/css/styles.css

@@ -1,15 +1,15 @@
   body{
     font-family: Jaldi;
-    font-size: 1.5em;
+    font-size: 2em;
     margin: 0;
     padding: 0;
     text-align: center;
     font-display: swap;
   }
 
-  div #header {
-    text-align: center;
-    padding-top: 1em;
+  html {
+    font-size: 10px;
+    margin-bottom: 60px
   }
   
   .menu{
@@ -20,10 +20,6 @@
     display: inline-block
   }
   
-  h1 {
-  
-  }
-  
   .header_image {
     margin-bottom: 10px;
   }
@@ -65,7 +61,7 @@
   }
   
   div .ep-title{
-    font-size: 1.5em;
+    font-size: 2em;
     font-weight: bold;
   }
   
@@ -88,8 +84,7 @@
   .show_block{
     *display: inline;
     zoom: 1;
-    width: 340px; 
-    height: 200px;
+    height: 100%;
     padding: 5px;
     margin: 5px;
     border-style: solid;
@@ -171,13 +166,6 @@
     margin: 10px;
   }
   
-  footer {  
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    background-color: #c7c2c2;
-  }
-  
   div .show_list ul li div {
     display: inline-block;
     text-align: justify;
@@ -237,6 +225,13 @@
       width: 75%;
       float: left
     }
+
+    div #header {
+      text-align: center;
+      padding-top: 12rem;
+      padding-bottom: 12rem;
+      background-color: lightgray;
+    }
   }
 
   @media screen and (min-width: 1200px) {
@@ -244,3 +239,23 @@
       width: 33.33333333%;
     }
   }
+
+  .navbar .dropdown-menu a{
+    font-size: 2em !important
+  }
+
+  div .footer {
+    height: 2rem;
+    background-color: black;
+  }
+
+  .container {
+    min-height: 100vh;
+    position: relative;
+  }
+
+  footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }

components/featureimage.js

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

components/footer.js

@@ -0,0 +1,9 @@
+//components/Footer.js
+
+const Footer = () => (
+    <footer>
+        Blah
+    </footer>
+)
+
+export default Footer;

components/header.js

@@ -9,17 +9,11 @@ const headerStyle = {
   
   const Header = () => (
     <div id="header">
-    <div className="social_block">
-      <div className="social_twitter">
-        <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 className="col-md-12">
+        <a href="/" alt="Home">
+          <img className="header_image img-fluid" src="/images/logo.png" alt="Angry Beanie" />
+        </a>
       </div>
-    </div>
-    <div className="col-md-12">
-      <a href="/" alt="Home">
-        <img className="header_image img-fluid" src="/images/logo.png" alt="Angry Beanie" />
-      </a>
-    </div>
   </div>
   );
   

components/main.js

@@ -1,4 +1,5 @@
 import Header from "./header"
+import Footer from "./footer"
 import NavBar from "./navbar"
 import SideBar from "./sidebar"
 import Head from 'next/head'
@@ -15,8 +16,9 @@ const Layout = (props) => (
                 <Header />
                 <div className="container">
                     <NavBar sections={props.sections}/>
-                        {props.children}
+                    {props.children}
                 </div>
+                
             </div>
 )
 

components/navbar.js

@@ -11,21 +11,21 @@ const NavBar = (props, sections) => {
   const toggle = () => setIsOpen(prevState => !prevState);
 
   return (
-      <Navbar expand="lg" collapseOnSelect bg="dark" variant="dark">
+    <Navbar expand="lg" collapseOnSelect bg="light" variant="light">
       <Navbar.Toggle aria-controls="responsive-navbar-nav" />
       <Navbar.Collapse>
-        <Nav>
+        <Nav className="m-auto">
           <NavLink href="/">Home</NavLink>
         </Nav>
-        <NavDropdown title="Podcasts">
+        <NavDropdown className="m-auto" 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>
+        <NavItem className="m-auto">
           <NavLink href="/news">News and such</NavLink>
         </NavItem>
         {props.sections.sections.map((section) => (                    
-          <NavDropdown title={section.title}>
+          <NavDropdown className="m-auto" title={section.title}>
               {section.pages.map((page) => (
                 <NavDropdown.Item key={page.page_slug} href={"/sections/" + page.page_slug}>{page.page_title}</NavDropdown.Item>
               ))}       
@@ -33,6 +33,7 @@ const NavBar = (props, sections) => {
         ))}
         </Navbar.Collapse>
       </Navbar>
+    
   );
 }
 

next.config.js

@@ -1,12 +1,10 @@
 // next.config.js
-const withLess = require('@zeit/next-less')
 const withCSS = require('@zeit/next-css');
-module.exports = withLess({
-  /* config options here */
-})
-module.exports = withCSS({
-  /* config options here */
-});
+const withFonts = require('next-fonts');
+const withImages = require('next-images');
+const withPlugins = require("next-compose-plugins");
+
+module.exports = withPlugins([withCSS, withFonts, withImages])
 module.exports = {
   serverRuntimeConfig: {
     // Will only be available on the server side
@@ -14,7 +12,7 @@ module.exports = {
     audio_path: 'https://audio.angrybeanie.com/'
   },
   images: {
-    domains: ['www.angrybeanie.com', 'localhost']
+    domains: ['www.angrybeanie.com', 'localhost', 'cms.local.angrybeanie.com']
   },
   publicRuntimeConfig: {
     analytics_code: 'UA-2497299-19'

package.json

@@ -11,17 +11,22 @@
   "author": "James Purser",
   "license": "ISC",
   "dependencies": {
+    "@zeit/next-css": "^1.0.1",
     "@zeit/next-less": "^1.0.1",
-    "bootstrap": "^4.5.3",
-    "less": "^3.13.0",
-    "next": "^10.0.3",
-    "next-images": "^1.6.2",
+    "bootstrap": "^4.6.0",
+    "less": "^3.13.1",
+    "mdbreact": "^5.1.0",
+    "next": "^10.2.3",
+    "next-compose-plugins": "^2.2.1",
+    "next-fonts": "^1.5.1",
+    "next-images": "^1.8.1",
+    "postcss": "^8.3.6",
     "react": "^16.14.0",
-    "react-bootstrap": "^1.4.0",
+    "react-bootstrap": "^1.6.1",
     "react-dom": "^16.14.0",
     "react-ga": "^3.3.0",
-    "react-h5-audio-player": "^3.5.0",
+    "react-h5-audio-player": "^3.7.1",
     "react-paginate": "^6.5.0",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^5.2.1"
   }
 }

pages/_app.js

@@ -1,8 +1,9 @@
 // import App from 'next/app'
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import 'bootstrap-css-only/css/bootstrap.min.css';
+import 'mdbreact/dist/css/mdb.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))
@@ -11,8 +12,8 @@ function MyApp({ Component, pageProps }) {
   const router = useRouter()
   useEffect(() => {
     const handleRouteChange = (url) => {
-      gtag.pageview(url);
-      console.log("Pageview is happening")
+     // gtag.pageview(url);
+     // console.log("Pageview is happening")
     };
     router.events.on("routeChangeComplete", handleRouteChange);
     return () => {

pages/_document.js

@@ -22,10 +22,10 @@ class CustomDocument extends Document {
                 function gtag(){dataLayer.push(arguments);}
                 gtag('js', new Date());
 
-                /*gtag('config', '${GA_TRACKING_ID}', {
+                gtag('config', '${GA_TRACKING_ID}', {
                   page_path: window.location.pathname,
                 });
-                console.log("Page View")*/
+                console.log("Page View")
               `,
             }}
           />

pages/index.js

@@ -24,8 +24,12 @@ export async function getServerSideProps(context) {
 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>
+        <div>
+          <h1><Link href="/news/[slug]" as={"/news/" + article.slug}><a>{article.title}</a></Link></h1>
+          <div dangerouslySetInnerHTML={{ __html: article.lead}} ></div>
+        </div>
       ))}
+      <hr />
       <LatestEpisodes episodedata={props.episodedata} config={props.config}></LatestEpisodes>
     </Layout>);
 }

pages/news.js

@@ -2,8 +2,6 @@ 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) {
     if(context.query.page == null || context.query.page == '0') {

pages/news/[slug].js

@@ -3,6 +3,8 @@ import "../../components/main.js"
 import Layout from "../../components/main.js"
 import FeatureImage from "../../components/featureimage.js"
 import StorySideBar from '../../components/storysidebar.js'
+import * as gtag from "../../lib/gtag"
+import Image from 'next/image';
 
 export async function getServerSideProps(context) {
     const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
@@ -23,14 +25,14 @@ export async function getServerSideProps(context) {
     const secdata = await secres.json()
     
     return {
-        props: { article_obj, sections: secdata, pagedata, storydata}, // will be passed to the page component as props
+        props: { article_obj, sections: secdata, pagedata, storydata, serverRuntimeConfig}, // will be passed to the page component as props
     }
 }
 
-const Article = ({article_obj, sections, pagedata, storydata}) => (
+const Article = ({article_obj, sections, pagedata, storydata, serverRuntimeConfig}) => (
     <Layout sections={sections} pagedata={pagedata}>
         <div className="main_content col-md-9 col-sm-12">
-            <FeatureImage imagedata={article_obj}></FeatureImage>
+            <FeatureImage imagedata = {article_obj.image} basepath = {serverRuntimeConfig.base_path} ></FeatureImage>
             <h1>{article_obj.title}</h1>
             <div className="article_body" dangerouslySetInnerHTML={{ __html: article_obj.body }}></div>
         </div>

pages/podcasts/archived.js

@@ -2,6 +2,7 @@ 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()
@@ -22,7 +23,11 @@ const PodcastArchived = ({sections, podcastdata, pagedata}) => (
     <Layout sections={sections} pagedata={pagedata}>
         <h1>Archived Podcasts</h1>
         {podcastdata.shows.map((podcast) => (
-            <h1><Link href={"/podcasts/shows/" + podcast.slug}>{podcast.title}</Link></h1>
+            <h1><Image
+            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>
         ))}
 
     </Layout>

pages/podcasts/current.js

@@ -2,6 +2,7 @@ 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()
@@ -24,7 +25,11 @@ const PodcastCurrent = ({sections, podcastdata, episodedata, pagedata}) => (
     <Layout sections={sections} episodedata={episodedata} pagedata={pagedata}>
         <h1>Current Podcasts</h1>
         {podcastdata.shows.map((podcast) => (
-            <h1><Link href={"/podcasts/shows/" + podcast.slug}>{podcast.title}</Link></h1>
+            <h1><Image
+                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>
         ))}
 
     </Layout>

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

@@ -4,6 +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 EpisodePager from '../../../components/episodepager.js';
 
 export async function getServerSideProps(context) {
     const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
@@ -17,6 +19,9 @@ export async function getServerSideProps(context) {
     const epres = await fetch(serverRuntimeConfig.base_path + "/api/podcast/episode/"+slug[1])
     const epdata = await epres.json()
 
+    const sepres = await fetch(serverRuntimeConfig.base_path + "/api/podcasts/episodes/"+epdata.episode_show+"/0/5")
+    const sepdata = await sepres.json()
+
     const audiodata = {
         audio_path: serverRuntimeConfig.audio_path,
         audio_mp3:  epdata.audio_mp3
@@ -27,20 +32,28 @@ export async function getServerSideProps(context) {
     }
 
     return {
-        props: { pagedata, sections: secdata, episode: epdata, audiodata }
+        props: { pagedata, sections: secdata, episode: epdata, audiodata, sepdata }
     }
 }
 
 const Episode = ( props ) => {
-    return (<Layout pagedata={props.pagedata} sections={props.sections} episode={props.episode} audiodata={props.audiodata}>
+    return (<Layout 
+                pagedata={props.pagedata} 
+                sections={props.sections} 
+                episode={props.episode} 
+                audiodata={props.audiodata}
+                sepdata={props.sepdata}>
         <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}} />
+        <div className="main_content col-md-9 col-sm-12">
+            <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}} />
+        </div>
+        <EpisodePager episodedata={props.sepdata} />
     </Layout>)
 }