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

Added support for .env.local

Browse source 
Added support for Galleries and Photography page
This commit is contained in:
James Purser 2022-07-16 15:34:44 +10:00
parent d95539ede8
commit 347f69637d
20 changed files with 455 additions and 20033 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -18,3 +18,4 @@ yarn-error.log*
public/feed/
public/sitemap*
.env.local

14
components/css/styles.css
View file

@ -44,6 +44,13 @@
font-size: 30px;
}
.page_title {
font-weight: bold;
padding-bottom: 0.5em;
padding-top: 0.5em;
text-align: center;
}
ul .no-style {
list-style-type: none;
}
@ -247,6 +254,7 @@
div .footer {
height: 2rem;
background-color: black;
width: 100%
}
.container {
@ -276,3 +284,9 @@
.featuredFlickr {
padding-top: 30px
}
footer {
padding: 10px;
width: 100%;
position: relative;
}

10
components/featureimage.js
View file

@ -1,16 +1,20 @@
import Image from 'next/image';
const FeatureImage = ({ imagedata, basepath }) => (
const FeatureImage = ({ imagedata, basepath }) => {
const imgSrc = basepath + imagedata.url
console.log(imagedata)
return (
<div className="featuredimage">
<Image
src={"http://localhost:1337" + imagedata.url}
src={imgSrc}
height={400}
width={800}
priority={true}
alt={imagedata.Title}
/>
</div>
);
};
export default FeatureImage

12
components/footer.js
View file

@ -2,7 +2,17 @@
const Footer = () => (
<footer>
Blah
<div className="row">
<div className="col-sm-4">
Contact Angrybeanie
</div>
<div className="col-sm-4">
Support Angrybeanie
</div>
<div className="col-sm-4">
Something else
</div>
</div>
</footer>
)

33
components/gallerycarousel.js Executable file
View file

@ -0,0 +1,33 @@
import Image from 'next/image';
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
const GalleryCarousel = ({galleryImages, basepath}) => {
console.log(galleryImages.data[0])
return(
<Swiper
modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
spaceBetween={50}
slidesPerView={1}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
scrollbar={{ draggable: true }}
>
{galleryImages.data.map(item => (
<SwiperSlide
key={item.attributes.Title}
>
<img
src={basepath + item.attributes.Image.data.attributes.formats.medium.url}
alt={item.attributes.Title}></img>
</SwiperSlide>
))}
</Swiper>
)
}
export default GalleryCarousel

52
components/gallerylist.js Executable file
View file

@ -0,0 +1,52 @@
import ReactPaginate from "react-paginate";
import { useRouter } from "next/router";
import Image from 'next/image';
import { Link } from "react-router-dom";
const GalleryList = ({gallery, basepath}) => {
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>
{gallery.data.map((gall) => {
var image = gall.attributes.gallery_images.data[0].attributes.Image
var imageUrl = basepath + image.data.attributes.formats.small.url
return (
<a href={"/galleries/" + gall.attributes.Slug}>
<div>{gall.attributes.Title}
<Image
src={imageUrl}
layout="responsive"
height={image.data.attributes.formats.small.height}
width={image.data.attributes.formats.small.width}
key={image.data.attributes.id}
className="card-img-top"
alt={gall.attributes.Title}></Image>
</div>
</a>
)
})}
<ReactPaginate
marginPagesDisplayed={2}
pageRangeDisplayed={5}
previousLabel={"previous"}
nextLabel={"next"}
breakLabel={"..."}
initialPage={gallery.meta.pagination.page}
pageCount={gallery.meta.pagination.pageCount}
onPageChange={handlePagination} />
</div>
)
}
export default GalleryList

54
components/gallerypager.js Executable file
View file

@ -0,0 +1,54 @@
import ReactPaginate from "react-paginate";
import { useRouter } from "next/router";
import Image from 'next/image';
import getConfig from 'next/config'
const GalleryPager = ({gallery, basepath}) => {
const router = useRouter()
console.log(gallery)
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="card-columns">
{gallery.data.map((galleryImage) => {
var imageUrl = basepath + galleryImage.attributes.Image.data.attributes.formats.small.url
return (
<div className="card p-3">
<Image
src={imageUrl}
layout="responsive"
height={galleryImage.attributes.Image.data.attributes.formats.small.height}
width={galleryImage.attributes.Image.data.attributes.formats.small.width}
key={galleryImage.attributes.id}
className="card-img-top"
alt={galleryImage.attributes.Title}></Image>
</div>
)})}
</div>
<ReactPaginate
marginPagesDisplayed={2}
pageRangeDisplayed={5}
previousLabel={"previous"}
nextLabel={"next"}
breakLabel={"..."}
initialPage={gallery.page}
pageCount={gallery.meta.pagination.pageCount}
onPageChange={handlePagination} />
</div>
)
}
export default GalleryPager

7
components/main.js
View file

@ -22,7 +22,12 @@ const Layout = (props) => {
<Header />
<div className="container">
<NavBar sections={props.sections}/>
{props.children}
<div className="row">
{props.children}
</div>
<div className="row">
{/* <Footer></Footer> */}
</div>
</div>
</div>

1
components/navbar.js
View file

@ -22,6 +22,7 @@ const NavBar = (props, sections) => {
</NavItem>
<NavDropdown title="Media Projects" className='m-auto'>
<NavDropdown.Item href="/podcasts">Podcasts</NavDropdown.Item>
<NavDropdown.Item href="/photography">Photography</NavDropdown.Item>
</NavDropdown>
<NavItem className="m-auto">
<NavLink href="/tech-and-disability">Tech and Disability</NavLink>

132
data/external/cms.js vendored
View file

@ -219,3 +219,135 @@ export const getLatestPodcastEpisode = async () => {
return res
}
export const getAllGalleries = async(page, limit) => {
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
const qs = require('qs')
var query = qs.stringify({
sort: ['publishedAt:desc'],
pagination: {
page: page,
pageSize: limit
},
populate: {
gallery_images: {
populate: '*'
}
}
})
const galres = await fetch(process.env.API + `galleries?${query}`, {
headers: new Headers({
'Authorization': serverRuntimeConfig.strapi_token,
'Content-Type': 'application/x-www-form-urlencoded'
})
})
return await galres.json()
}
export const getGalleries = async () => {
const { serverRuntimeConfig } = getConfig()
const qs = require('qs')
var query = qs.stringify({
sort: ['publishedAt:desc'],
pagination: {
page: 1,
pageSize: 5,
},
populate: '*'
})
const galres = await fetch(process.env.API + `galleries?${query}`, {
headers: new Headers({
'Authorization': serverRuntimeConfig.strapi_token,
'Content-Type': 'application/x-www-form-urlencoded'
})
})
return await galres.json()
}
export const getGallery = async (gallerySlug) => {
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
const qs = require('qs')
var query = qs.stringify({
filters: {
Slug: {
$eq: gallerySlug
}
},
populate: '*'
})
const galres = await fetch(process.env.API + `galleries?${query}`, {
headers: new Headers({
'Authorization': serverRuntimeConfig.strapi_token,
'Content-Type': 'application/x-www-form-urlencoded'
})
})
return await galres.json()
}
export const getGalleryImages = async (galleryId, page, limit) => {
const { serverRuntimeConfig } = getConfig()
const qs = require('qs')
if (page == null) {
page = 0
}
console.log(page)
var query = qs.stringify({
filters: {
galleries: {
Slug: {
$eq: galleryId
}
}
},
populate: '*',
pagination: {
page: page,
pageSize: limit
}
})
const galres = await fetch(process.env.API + `gallery-images?${query}`, {
headers: new Headers({
'Authorization': serverRuntimeConfig.strapi_token,
'Content-Type': 'application/x-www-form-urlencoded'
})
})
return galres.json()
}
export const getPodcastList = async (podcastStatus) => {
const { serverRuntimeConfig } = getConfig()
const qs = require('qs')
const query = qs.stringify({
filters: {
status: {
$eq: true
}
},
populate: '*'
}, {
encodeValuesOnly: true,
})
const currpodcastres = await fetch(serverRuntimeConfig.base_path + `podcast-series?${query}`, {
headers: new Headers({
'Authorization': serverRuntimeConfig.strapi_token,
'Content-Type': 'application/x-www-form-urlencoded'
})
})
return await currpodcastres.json()
}

3
next.config.js
View file

@ -10,7 +10,8 @@ module.exports = {
// Will only be available on the server side
base_path: 'http://localhost:1337/api/',
audio_path: 'https://audio.angrybeanie.com/',
strapi_token: 'Bearer e555abdbe49a73a84241acdbe90fb18c9d314987f4752e63ce340a307ff07c40a086edb043ef6b8325b46a1dc2d2f0806c507bdbd99b005438c479223388e6997f49bac856df3b9f1a55e159ee15c6e97030e3ac09ec87f8ff411fe14a9a11ae409b034db64fae121e1eada8db9839765555c0c06b341e986be65bb8b2e91eb9'
media_path: process.env.MEDIA_BASE,
strapi_token: process.env.STRAPI_TOKEN
},
images: {
domains: ['www.angrybeanie.com', 'localhost', 'cms.local.angrybeanie.com']

15896
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
package.json
View file

@ -34,6 +34,7 @@
"react-paginate": "^6.5.0",
"react-router-dom": "^5.2.1",
"rss-parser": "^3.12.0",
"sharp": "^0.30.6"
"sharp": "^0.30.6",
"swiper": "^8.3.1"
}
}

41
pages/galleries/[gallery].js Executable file
View file

@ -0,0 +1,41 @@
import "../../components/main.js"
import getConfig from 'next/config'
import Layout from "../../components/main.js"
import { getGallery, getGalleryImages } from "../../data/external/cms.js"
import GalleryPager from "../../components/gallerypager.js"
export async function getServerSideProps(context) {
const gallery = await getGallery(context.params.gallery)
if(context.query.page == null || context.query.page == '0') {
var page = 1;
} else {
var page = Number(context.query.page)
}
const galleryImages = await getGalleryImages(context.params.gallery, page, 9)
const { serverRuntimeConfig } = getConfig()
const pagedata = {
'title': "Angry Beanie - " + gallery.Title
}
return {
props: {pagedata, gallery: gallery.data[0], galleryImages, serverRuntimeConfig},
}
}
const Gallery = ({pagedata, gallery, galleryImages, serverRuntimeConfig}) => {
if (!gallery) return null
console.log(gallery)
return(
<Layout pagedata={pagedata}>
<h1 className="page_title col-sm-12">{gallery.attributes.Title}</h1>
<GalleryPager gallery={galleryImages} basepath={serverRuntimeConfig.media_path}></GalleryPager>
</Layout>
)
}
export default Gallery

6
pages/index.js
View file

@ -15,7 +15,7 @@ export async function getStaticProps(context) {
generateRssFeed('tech-and-disability')
generatePodcastFeeds()
generateSitemap()
const { serverRuntimeConfig, publicRuntimeConfig, strapiConfig } = getConfig()
const { serverRuntimeConfig } = getConfig()
const qs = require('qs')
const query = qs.stringify({
@ -74,7 +74,7 @@ function HomePage (props) {
<div className="card-img-top">
{/* <img src={props.episodedata.Logo.data.attributes.url} alt={episode.show} height={props.episodedata.Logo.data.attributes.height}></img> */}
<Image
src={props.siteConfig.siteURL+props.article.FeatureImage.data.attributes.formats.thumbnail.url}
src={props.config.media_path + props.article.FeatureImage.data.attributes.formats.thumbnail.url}
alt={props.article.Title}
layout="fixed"
height={props.article.FeatureImage.data.attributes.formats.thumbnail.height}
@ -97,7 +97,7 @@ function HomePage (props) {
<div className="card-img-top">
{/* <img src={props.episodedata.Logo.data.attributes.url} alt={episode.show} height={props.episodedata.Logo.data.attributes.height}></img> */}
<Image
src={props.siteConfig.SiteURL+props.episodedata.Logo.data.attributes.formats.thumbnail.url}
src={props.config.media_path + props.episodedata.Logo.data.attributes.formats.thumbnail.url}
alt={episode.show}
layout="fixed"
height={props.episodedata.Logo.data.attributes.formats.thumbnail.height}

2
pages/news.js
View file

@ -26,7 +26,7 @@ export async function getServerSideProps(context) {
function News({ articles, sections, pagedata }) {
return <Layout sections={sections} pagedata={pagedata}>
<h1>NEWS</h1>
<h1 className="page_title col-sm-12">NEWS</h1>
<StoryPager storydata={articles} />
</Layout>
}

12
pages/news/[slug].js
View file

@ -20,6 +20,8 @@ const Article = ({article_obj, sections, pagedata, stories, serverRuntimeConfig,
}
}
var article_desc = article_obj.Abstract.replace(new RegExp('<[^>]*>', 'g'), '')
var rssFeed
if (article_obj.project.data && article_obj.project.data.attributes.HasFeed == true) {
@ -28,22 +30,22 @@ const Article = ({article_obj, sections, pagedata, stories, serverRuntimeConfig,
return ( <Layout sections={sections} pagedata={pagedata}>
<Head>
<meta name="twitter:card" content={ article_obj.Abstract } key="twcard" />
<meta name="twitter:card" content={ article_desc } key="twcard" />
<meta name="twitter:creator" content="angrybeanie" key="twhandle" />
<meta name="og:url" content={config.siteURL + "/news/" + article_obj.Slug}></meta>
<meta name="og:type" content="article"></meta>
<meta name="og:title" content={ article_obj.Title } key="title"></meta>
<meta name="og:description" content={ article_obj.Abstract } key="description"></meta>
<meta name="og:description" content={ article_desc } key="description"></meta>
{ article_obj.FeatureImage.data != null &&
<meta name="og:image" content={featureImage.url}></meta>
<meta name="og:image" content={serverRuntimeConfig.media_path + featureImage.url}></meta>
}
{ article_obj.project.data != null && article_obj.project.data.attributes.HasFeed == true &&
<link rel="alternate" type="application/rss+xml" title={article_obj.project.data.attributes.Title + " Feed"} href={rssFeed} />
<link rel="alternate" type="application/rss+xml" title={article_obj.project.data.attributes.Title + " Feed"} href={rssFeed} />
}
</Head>
<div className="main_content col-md-9 col-sm-12">
{ article_obj.FeatureImage.data != null &&
<FeatureImage imagedata = {featureImage} basepath = {serverRuntimeConfig.base_path} ></FeatureImage>
<FeatureImage imagedata = {featureImage} basepath = {serverRuntimeConfig.media_path} ></FeatureImage>
}
<h1>{ article_obj.Title }</h1>
<div className="article_body" dangerouslySetInnerHTML={{ __html: article_obj.Body }}></div>

40
pages/photography.js Executable file
View file

@ -0,0 +1,40 @@
import Layout from "../components/main.js"
import GalleryList from "../components/gallerylist.js"
import { getAllGalleries } from "../data/external/cms.js"
import getConfig from 'next/config'
export async function getStaticProps({params}) {
const pagedata = {
title: "Angrybeanie - Photography"
}
const gallerylist = await getAllGalleries()
const { serverRuntimeConfig } = getConfig()
return {
props: { pagedata, serverRuntimeConfig, gallerylist }
}
}
const Page = ({pagedata, serverRuntimeConfig, gallerylist}) => {
return(<Layout pagedata={pagedata} serverRuntimeConfig={serverRuntimeConfig} gallerylist={gallerylist}>
<h1 className="page_title col-sm-12">Photography</h1>
<div className="col-sm-12 col-md-6 article_body">
<p>I've always been drawn to photography. As a kid my Dad used to have his own darkroom and I remember the smell
of the chemicals and the wonder as the images went from the slightly disconcerting inverted colours on the negatives
to a full colour explosion on the paper.</p>
<p>I like taking pictures, I love capturing a moment and freezing it in time, so that I can look back and remember, or that I can
share that moment with others.</p>
<p>I'm also learning new things. I'm pushing myself to do more with the camera. Not just the "candid" shots that my family put up with,
but branching out into Macro photography, portraits and street photography.</p>
<p>So here is the space where I post the images I make, and the journey I take in my photography.</p>
</div>
<div className="col-sm-12 col-md-6">
<GalleryList gallery={gallerylist} basepath={serverRuntimeConfig.media_path}></GalleryList>
</div>
</Layout>)
}
export default Page

53
pages/podcasts.js
View file

@ -3,53 +3,43 @@ import Layout from "../components/main.js"
import Link from 'next/link'
import getConfig from 'next/config'
import Image from 'next/image';
import { getPodcastList } from "../data/external/cms.js";
export async function getServerSideProps(context) {
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
const secres = await fetch(serverRuntimeConfig.base_path + `/api/sections`)
const secdata = await secres.json()
const currpodcastres = await fetch(serverRuntimeConfig.base_path + `podcast-series?filters[status][$eq]=true`, {
headers: new Headers({
'Authorization': serverRuntimeConfig.strapi_token,
'Content-Type': 'application/x-www-form-urlencoded'
})
})
const currpodcastdata = await currpodcastres.json()
const currpodcastlist = currpodcastdata.data
const currpodcastlist = await getPodcastList(true)
const archpodcastres = await fetch(serverRuntimeConfig.base_path + `podcast-series?filters[status][$eq]=false`, {
headers: new Headers({
'Authorization': serverRuntimeConfig.strapi_token,
'Content-Type': 'application/x-www-form-urlencoded'
})
})
const archpodcastdata = await archpodcastres.json()
const archpodcastlist = archpodcastdata.data
console.log(currpodcastlist.data[0].attributes.Logo.data.attributes.formats)
const archpodcastlist = await getPodcastList(false)
const episodedata = "hi there"
const pagedata = {'title': 'Angry Beanie - Current Podcast Projects'}
return {
props: { sections : secdata, currpodcastlist, archpodcastlist, episodedata, pagedata, serverRuntimeConfig }, // will be passed to the page component as props
props: { sections : secdata, currpodcastlist: currpodcastlist.data, archpodcastlist, episodedata, pagedata, serverRuntimeConfig }, // will be passed to the page component as props
}
}
const Podcasts = ({sections, currpodcastlist, archpodcastlist, episodedata, pagedata, serverRuntimeConfig}) => (
<Layout sections={sections} episodedata={episodedata} pagedata={pagedata} serverRuntimeConfig>
<h1>Podcasts</h1>
<div className="page_body">Over the years I have made a number of podcasts.</div>
<div className="row">
<h1 className="page_title col-sm-12">Podcasts</h1>
<div className="page_body col-sm-12"><p>Over the years I have made a number of podcasts.</p></div>
<div className="row col-sm-12">
<div className="col-sm-6">
<h2>Current Podcasts</h2>
{currpodcastlist.map((podcast) => (
<div>
{/* <Image
src={serverRuntimeConfig.base_path + "/" + podcast.logo.src}
height={podcast.logo.height}
width={podcast.logo.width}
></Image> */}
<Image
src={serverRuntimeConfig.media_path + "/" + podcast.attributes.Logo.data.attributes.formats.thumbnail.url}
height={podcast.attributes.Logo.data.attributes.formats.thumbnail.height}
width={podcast.attributes.Logo.data.attributes.formats.thumbnail.width}
alt={podcast.attributes.Title}
></Image><br />
<Link href={"/podcasts/shows/" + podcast.attributes.Slug}>{podcast.attributes.Title}</Link></div>
))}
</div>
@ -57,12 +47,13 @@ const Podcasts = ({sections, currpodcastlist, archpodcastlist, episodedata, page
<h2>Archived Podcasts</h2>
{archpodcastlist.map((podcast) => (
<div>
{/* <Image
src={serverRuntimeConfig.base_path + "/" + podcast.logo.src}
height={podcast.logo.height}
width={podcast.logo.width}
></Image> */}
<Link href={"/podcasts/shows/" + podcast.Slug}>{podcast.Title}</Link></div>
<Image
src={serverRuntimeConfig.media_path + "/" + podcast.attributes.Logo.data.attributes.formats.thumbnail.url}
height={podcast.attributes.Logo.data.attributes.formats.thumbnail.height}
width={podcast.attributes.Logo.data.attributes.formats.thumbnail.width}
alt={podcast.attributes.Title}
></Image>
<Link href={"/podcasts/shows/" + podcast.attributes.Slug}>{podcast.attributes.Title}</Link></div>
))}
</div>
</div>

4116
yarn.lock
View file

File diff suppressed because it is too large Load diff