purserj/angrybeanie-front-end
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
James Purser 2020-12-06 21:49:37 +11:00
commit d17ce86302
22 changed files with 8199 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
.gitignore vendored Normal file
View file

@ -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/

216
components/css/styles.css Normal file
View file

@ -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;
}

0
components/footer.js Normal file
View file

26
components/header.js Normal file
View file

@ -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;

10
components/latestepisodes.js Normal file
View file

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

27
components/main.js Normal file
View file

@ -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;

116
components/navbar.js Normal file
View file

@ -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

2
components/showlist.js Normal file
View file

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

3
docker/Dockerfile Normal file
View file

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

9
next.config.js Normal file
View file

@ -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 */
})

7545
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

22
package.json Normal file
View file

@ -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"
}
}

21
pages/_app.js Normal file
View file

@ -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

20
pages/_document.js Normal file
View file

@ -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;

24
pages/index.js Normal file
View file

@ -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

29
pages/news.js Normal file
View file

@ -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

26
pages/news/[slug].js Normal file
View file

@ -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

10
pages/podcasts/[podcast].js Normal file
View file

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

28
pages/podcasts/archived.js Normal file
View file

@ -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

30
pages/podcasts/current.js Normal file
View file

@ -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

10
pages/shows.js Normal file
View file

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

11
pages/shows/show.js Normal file
View file

@ -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