Added support for .env.local

Added support for Galleries and Photography page

.gitignore

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

components/css/styles.css

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

components/featureimage.js

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

components/footer.js

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

components/gallerycarousel.js

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

components/gallerylist.js

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

components/gallerypager.js

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

components/main.js

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

components/navbar.js

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

data/external/cms.js

@@ -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()
+}

next.config.js

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

package.json

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

pages/galleries/[gallery].js

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

pages/index.js

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

pages/news.js

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

pages/news/[slug].js

@@ -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,14 +30,14 @@ 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} />
@@ -43,7 +45,7 @@ const Article = ({article_obj, sections, pagedata, stories, serverRuntimeConfig,
         </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>

pages/photography.js

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

pages/podcasts.js

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