Initial commit

.gitignore

@@ -0,0 +1,14 @@
+// .gitnignore
+# next.js build output
+.next
+# dotenv environment variables file (build for Zeit Now)
+.env
+.env.build
+# Dependency directories
+node_modules/
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+#VSCode
+.vscode/

components/css/styles.css

@@ -0,0 +1,216 @@
+  body{
+    font-family: Jaldi;
+    font-size: 1em;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+  
+  div #header {
+    text-align: center;
+    padding-top: 1em;
+  }
+  
+  .menu{
+    list-style: none
+  }
+  
+  .menu li {
+    display: inline-block
+  }
+  
+  h1 {
+  
+  }
+  
+  .header_image {
+    margin-bottom: 10px;
+  }
+  
+  .sidebar {
+    display: block;
+  }
+  
+  .episode {
+    margin-bottom: 50px;
+    text-align: left;
+    background-color: ghostwhite;
+    padding: 20px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: darkslategrey;
+  }
+  
+  .episode_title {
+    font-weight: bold;
+    text-align: justify;
+    font-size: 30px;
+  }
+  
+  ul .no-style {
+    list-style-type: none;
+  }
+  
+  #show-links ul {
+    list-style-type: none;
+  }
+  
+  .show_list {
+    margin-top: 25px;
+    text-align: justify;
+  }
+  .show_list ul {
+    list-style-type: none;
+  }
+  
+  div .ep-title{
+    font-size: 1.5em;
+    font-weight: bold;
+  }
+  
+  .ep-feature-image {
+    display: inline;
+  }
+  
+  .featured_episodes{
+    margin-right: auto;
+    margin-left: auto;
+    text-align: center;
+    overflow: auto;
+  }
+  
+  .featured_episodes ul {
+    list-style-type: none;
+  }
+  
+  .show_block{
+    display: inline-block;
+    *display: inline;
+    zoom: 1;
+    width: 340px; 
+    height: 200px;
+    padding: 5px;
+    margin: 5px;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    vertical-align: top;
+    position: relative;
+    box-shadow: 5px 5px 5px #000;
+    float: left;
+  }
+  
+  .show_container {
+    display: inline-block;
+    padding: 10px;
+  }
+  
+  .show_description {
+    text-align: center;
+  }
+  
+  .show_block:hover{
+    box-shadow: 0px 0px 0px #000;
+  }
+  
+  .show_block h2{
+    font-size: 1.2em
+  }
+  
+  .show_block .show_teaser{
+    font-style: italic;
+  }
+  
+  
+  @media screen and (min-width: 780px) {
+    .show_block audio{
+      width: 300px;
+    }
+  }
+  
+  @media screen and (max-width: 460px) {
+    .show_block audio{
+      width: 100px;
+    }
+  }
+  
+  .col-xs-12 .featured_episodes .ul .li {
+    margin-left: 25px;
+  }
+  
+  .col-xs-12 .show_block {
+    width: 100%;
+  }
+  
+  .main_content {
+    margin: 0 auto;
+  }
+  
+  .navbar-default {
+  }
+  
+  .article_body {
+    text-align: justify;
+  }
+  
+  .social_block {
+    width: 100%;
+    }
+    
+  .show_link {
+    margin: 10px;
+  }
+  
+  footer {  
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background-color: #c7c2c2;
+  }
+  
+  div .show_list ul li div {
+    display: inline-block;
+    text-align: justify;
+  }
+  
+  div .episode_pages {
+    background-color: #fff;
+    display: inline-block;
+    float: none;
+  }
+  
+  div .episode_pages ul {
+    list-style: none;
+  }
+  
+  div .episode_pages ul li {
+    float: left;
+    margin: 5px;
+  }
+  
+  div .episode_pages ul li .active_page {
+    font-weight: bold;
+    color: #000;
+  }
+  
+  .latest_news .article_body {
+    text-align: center;
+  }
+  
+  div .article_sidebar ul {
+    list-style: none;
+  }
+  
+  div .article_sidebar ul li {
+    margin-left: -10px;
+  }
+  
+  div .audio_player {
+    margin: 10px;
+  }
+  
+  div .featuredimage {
+    margin: 0 auto;
+  }
+  

components/header.js

@@ -0,0 +1,26 @@
+// components/Header.js
+
+const headerStyle = {
+    backgroundColor: "blue",
+    color: "white",
+    width: "100%",
+    height: "50px"
+  };
+  
+  const Header = () => (
+    <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>      
+      </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" />
+      </a>
+    </div>
+  </div>
+  );
+  
+  export default Header;

components/latestepisodes.js

@@ -0,0 +1,10 @@
+import Link from 'next/link';
+
+const LatestEpisodes = ({ episodedata }) => (
+    <div id="latestepisodes">
+        
+
+    </div>
+);
+
+export default LatestEpisodes

components/main.js

@@ -0,0 +1,27 @@
+import Header from "./header"
+import NavBar from "./navbar"
+
+const layoutStyle = {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    width: "100%"
+    };
+
+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;

components/navbar.js

@@ -0,0 +1,116 @@
+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'
+
+const NavBar = (props, sections) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => setIsOpen(prevState => !prevState);
+
+  return (
+    <div>
+      <Navbar color="light" light expand="md">
+        <NavItem>
+          <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>
+        <NavItem>
+          <NavLink href="/news">News and such</NavLink>
+        </NavItem>
+        {props.sections.sections.sections.map((section) => (                    
+          <UncontrolledDropdown>
+            <DropdownToggle caret>
+            {section.title}
+            </DropdownToggle>
+            <DropdownMenu>
+              {section.pages.map((page) => (
+                <DropdownItem><Link href={page.page_slug}>{page.page_title}</Link></DropdownItem>
+              ))}
+            </DropdownMenu>       
+          </UncontrolledDropdown>
+        ))}
+      </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/showlist.js

@@ -0,0 +1,2 @@
+import Link from "next/link"
+

docker/Dockerfile

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

next.config.js

@@ -0,0 +1,9 @@
+// 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 */
+})

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "angrybeanie_frontend",
+  "version": "0.0.1",
+  "description": "The frontend for the angrybeanie website",
+  "main": "index.js",
+  "scripts": {
+    "dev": "NODE_OPTIONS='--inspect' next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "author": "James Purser",
+  "license": "ISC",
+  "dependencies": {
+    "@zeit/next-less": "^1.0.1",
+    "bootstrap": "^4.5.3",
+    "less": "^3.12.2",
+    "next": "^9.4.4",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "reactstrap": "^8.7.1"
+  }
+}

pages/_app.js

@@ -0,0 +1,21 @@
+// import App from 'next/app'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import "../components/css/styles.css"
+
+function MyApp({ Component, pageProps }) {
+    return <Component {...pageProps} />
+  }
+  
+  // Only uncomment this method if you have blocking data requirements for
+  // every single page in your application. This disables the ability to
+  // perform automatic static optimization, causing every page in your app to
+  // be server-side rendered.
+  //
+  // MyApp.getInitialProps = async (appContext) => {
+  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
+  //   const appProps = await App.getInitialProps(appContext);
+  //
+  //   return { ...appProps }
+  // }
+  
+  export default MyApp

pages/_document.js

@@ -0,0 +1,20 @@
+import Document, { Head, Main, NextScript } from 'next/document';
+import React from 'react';
+
+class CustomDocument extends Document {
+  render() {
+    return (
+      <html lang="en">
+        <Head>
+        <link href="https://fonts.googleapis.com/css?family=Cabin|Jaldi" rel="stylesheet" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    );
+  }
+}
+
+export default CustomDocument;

pages/index.js

@@ -0,0 +1,24 @@
+import Layout from "../components/main"
+import Link from 'next/link'
+
+export async function getStaticProps(context) {
+  const res = await fetch(`http://localhost:8000/api/collections/1`)
+  const artdata = await res.json()
+
+  const secres = await fetch(`http://localhost:8000/api/sections`)
+  const secdata = await secres.json()
+  
+  return {
+      props: { articles: artdata, sections : secdata }, // will be passed to the page component as props
+  }
+}
+
+function HomePage ({articles, sections}) {
+    return (<Layout sections={sections}>
+      {articles.articles.map((article) =>  (
+        <h1><Link href="/news/[slug]" as={"/news/" + article.slug}><a>{article.title}</a></Link></h1>
+      ))}
+    </Layout>);
+}
+  
+export default HomePage

pages/news.js

@@ -0,0 +1,29 @@
+import "../components/main"
+import Layout from "../components/main"
+import Link from 'next/link'
+
+export async function getServerSideProps(context) {
+    const res = await fetch(`http://localhost:8000/api/documents/0/5`)
+    const articles = await res.json()
+
+    const secres = await fetch(`http://localhost:8000/api/sections`)
+    const secdata = await secres.json()
+    
+    return {
+        props: { articles, sections : secdata }, // will be passed to the page component as props
+    }
+  }
+
+function News({ articles, sections }) {
+    return <Layout sections={sections}>
+        <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>
+        ))}
+    </Layout>
+}
+
+export default News

pages/news/[slug].js

@@ -0,0 +1,26 @@
+import "../../components/main.js"
+import Layout from "../../components/main.js"
+
+export async function getServerSideProps(context) {
+    const slug = context.params.slug
+    const url = 'http://localhost:8000/api/document/' + slug
+    console.log(url)
+    const res = await fetch(url)
+    const article_obj = await res.json()
+
+    const secres = await fetch(`http://localhost:8000/api/sections`)
+    const secdata = await secres.json()
+    
+    return {
+        props: { article_obj, sections: secdata }, // 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>
+    </Layout>
+)
+
+export default Article

pages/podcasts/[podcast].js

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

pages/podcasts/archived.js

@@ -0,0 +1,28 @@
+import "../../components/main.js"
+import LatestEpisodes from "../../components/latestepisodes.js"
+import Layout from "../../components/main.js"
+
+export async function getStaticProps(context) {
+    const secres = await fetch(`http://localhost:8000/api/sections`)
+    const secdata = await secres.json()
+
+    const podcastres = await fetch(`http://localhost:8000/api/podcasts/bystatus/0`)
+    const podcastdata = await podcastres.json()
+
+    return {
+        props: { sections : secdata, podcastdata }, // will be passed to the page component as props
+    }
+}
+
+const PodcastArchived = ({sections, podcastdata}) => (
+    <Layout sections={sections}>
+        <LatestEpisodes></LatestEpisodes>
+        <h1>Archived Podcasts</h1>
+        {podcastdata.shows.map((podcast) => (
+            <h1>{podcast.title}</h1>
+        ))}
+
+    </Layout>
+)
+
+export default PodcastArchived

pages/podcasts/current.js

@@ -0,0 +1,30 @@
+import "../../components/main.js"
+import LatestEpisodes from "../../components/latestepisodes.js"
+import Layout from "../../components/main.js"
+
+export async function getStaticProps(context) {
+    const secres = await fetch(`http://localhost:8000/api/sections`)
+    const secdata = await secres.json()
+
+    const podcastres = await fetch(`http://localhost:8000/api/podcasts/bystatus/1`)
+    const podcastdata = await podcastres.json()
+
+    const episodedata = "hi there"
+
+    return {
+        props: { sections : secdata, podcastdata, episodedata }, // will be passed to the page component as props
+    }
+}
+
+const PodcastCurrent = ({sections, podcastdata, episodedata}) => (
+    <Layout sections={sections} episodedata={episodedata}>
+        <LatestEpisodes></LatestEpisodes>
+        <h1>Current Podcasts</h1>
+        {podcastdata.shows.map((podcast) => (
+            <h1>{podcast.title}</h1>
+        ))}
+
+    </Layout>
+)
+
+export default PodcastCurrent

pages/shows.js

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

pages/shows/show.js

@@ -0,0 +1,11 @@
+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