From a42403f3e5665ad23606b8f17bf66796c804c76a Mon Sep 17 00:00:00 2001
From: James Purser <james@angrybeanie.com>
Date: Sat, 20 May 2023 16:54:03 +1000
Subject: [PATCH] Added a 404 and 500 page. Updated references to legacy image
 component

---
 data/external/cms.js                  |  75 ++++++++++++++
 pages/404.js                          |   3 +
 pages/500.js                          |   3 +
 pages/galleryimages/[galleryImage].js |   4 +-
 pages/index_old.js                    | 138 ++++++++++++++++++++++++++
 pages/news/[slug].js                  |   2 +-
 pages/podcasts.js                     |   2 +-
 7 files changed, 223 insertions(+), 4 deletions(-)
 create mode 100644 pages/404.js
 create mode 100644 pages/500.js
 create mode 100644 pages/index_old.js

diff --git a/data/external/cms.js b/data/external/cms.js
index 6e57651..7ff48df 100755
--- a/data/external/cms.js
+++ b/data/external/cms.js
@@ -406,4 +406,79 @@ export const getPodcastList = async (podcastStatus) => {
     })
 
     return await currpodcastres.json()
+}
+
+export const getLatestContent = async () => {
+    const { serverRuntimeConfig } = getConfig()
+    const qs = require('qs')
+    
+    const newsQuery = qs.stringify({
+        filters: {
+            status: {
+                $eq: true
+            },
+            pagination: {
+                page: 1,
+                pageSize: 1
+            }
+        },
+        populate: '*'
+    }, {
+        encodeValuesOnly: true,
+    })
+
+    const latestNews = await fetch(serverRuntimeConfig.base_path + `articles?${newsQuery}`, {
+        headers: new Headers({
+          'Authorization': serverRuntimeConfig.strapi_token,
+          'Content-Type': 'application/x-www-form-urlencoded'
+        })
+    })
+
+    const galleryImageQuery = qs.stringify({
+        filters: {
+            status: {
+                $eq: true
+            },
+            pagination: {
+                page: 1,
+                pageSize: 1
+            }
+        },
+        populate: '*'
+    }, {
+        encodeValuesOnly: true,
+    })
+
+    const latestGalleryImages = await fetch(serverRuntimeConfig.base_path + `gallery_images?${galleryImageQuery}`, {
+        headers: new Headers({
+          'Authorization': serverRuntimeConfig.strapi_token,
+          'Content-Type': 'application/x-www-form-urlencoded'
+        })
+    })
+
+    const podcastEpisodeQuery = qs.stringify({
+        filters: {
+            status: {
+                $eq: true
+            },
+            pagination: {
+                page: 1,
+                pageSize: 1
+            }
+        },
+        populate: '*'
+    }, {
+        encodeValuesOnly: true,
+    })
+
+    const latestPodcastEpisodes = await fetch(serverRuntimeConfig.base_path + `podcast_episode?${podcastEpisodeQuery}`, {
+        headers: new Headers({
+          'Authorization': serverRuntimeConfig.strapi_token,
+          'Content-Type': 'application/x-www-form-urlencoded'
+        })
+    })
+
+    const combined = latestNews
+
+    return combined
 }
\ No newline at end of file
diff --git a/pages/404.js b/pages/404.js
new file mode 100644
index 0000000..f35ec37
--- /dev/null
+++ b/pages/404.js
@@ -0,0 +1,3 @@
+export default function Custom404() {
+    return <h1>500 - Server-side error occurred</h1>
+}
\ No newline at end of file
diff --git a/pages/500.js b/pages/500.js
new file mode 100644
index 0000000..79519a6
--- /dev/null
+++ b/pages/500.js
@@ -0,0 +1,3 @@
+export default function Custom500() {
+  return <h1>500 - Server-side error occurred</h1>
+}
diff --git a/pages/galleryimages/[galleryImage].js b/pages/galleryimages/[galleryImage].js
index 5b9d8c2..e8f97ae 100755
--- a/pages/galleryimages/[galleryImage].js
+++ b/pages/galleryimages/[galleryImage].js
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import getConfig from 'next/config'
 import "../../components/main.js"
 import Layout from "../../components/main.js"
@@ -28,7 +28,7 @@ const galleryImage = ({pagedata, imageDetails, basepath, config} ) => {
         <div className="main_content col-sm-12">
             <Image 
                 src={basepath + imageDetails.data[0].attributes.Image.data.attributes.formats.large.url}
-                layout="responsive"
+                layout="intrinsic"
                 width={imageDetails.data[0].attributes.Image.data.attributes.formats.large.width}
                 height={imageDetails.data[0].attributes.Image.data.attributes.formats.large.height}
                 ></Image>
diff --git a/pages/index_old.js b/pages/index_old.js
new file mode 100644
index 0000000..91c3f14
--- /dev/null
+++ b/pages/index_old.js
@@ -0,0 +1,138 @@
+import Layout from "../components/main"
+import LatestEpisodes from "../components/latestepisodes"
+import Link from 'next/link'
+import getConfig from 'next/config'
+import Head from 'next/head'
+import Image from 'next/image';
+import config from '../data/internal/config';
+import { FEEDS, getFeed } from "../lib/rss"
+import { generatePodcastFeeds, generateRssFeed } from "../data/internal/feed-generator"
+import { generateSitemap } from "../data/internal/sitemap-generator"
+import { getLatestPodcastEpisode } from "../data/external/cms"
+import { getLatestGalleryImage } from "../data/external/cms"
+
+export async function getStaticProps(context) {
+  generateRssFeed()
+  generateRssFeed('tech-and-disability')
+  generatePodcastFeeds()
+  generateSitemap()
+  const { serverRuntimeConfig } = getConfig()
+
+  const qs = require('qs')
+  const query = qs.stringify({
+      pagination: {
+          limit: 1
+      },
+      populate: {
+        FeatureImage: '*'
+      },
+      sort: ['publishedAt:desc'],
+  }, {
+      encodeValuesOnly: true,
+  })
+
+  const res = await fetch(serverRuntimeConfig.base_path +`articles?${query}`, {
+    headers: new Headers({
+      'Authorization': serverRuntimeConfig.strapi_token,
+      'Content-Type': 'application/x-www-form-urlencoded'
+    })
+  })
+  const artdata = await res.json()
+
+  const article = artdata.data[0].attributes
+
+  const epdata = await getLatestPodcastEpisode()
+
+  const firstimage = await getLatestGalleryImage()
+
+  const pagedata = {'title': 'Angry Beanie'}
+  
+  return {
+      props: { article, pagedata, config: serverRuntimeConfig, firstimage, episodedata: epdata, siteConfig: config},
+      revalidate: 60 // will be passed to the page component as props
+  }
+}
+
+function HomePage (props) {
+    return (
+      <div>
+        <Head>
+          <title>{props.pagedata.title}</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
+          <meta name="description" content="Angry Beanie"></meta>
+          <meta charSet="utf-8" />
+          <meta property="og-title" content="Angry Beanie - Home"></meta>
+        </Head>
+        <div className="container">
+          <div className="frontPageImage">
+            <img className="header_image img-fluid" src="/images/logo.png" alt="Angry Beanie" />
+          </div>
+          <div className="row">
+          <div className="col-sm-4">
+            <div className="card">
+            <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.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}
+                width={props.article.FeatureImage.data.attributes.formats.thumbnail.width}
+                className="card-img-top"
+                ></Image> 
+              </div>
+              <div className="card-title">
+                <h3>Latest Blog Post</h3>
+              </div>
+              <div className="card-body">
+                <Link href="/news/[slug]" as={"/news/" + props.article.Slug}>{props.article.Title}</Link>
+                <div dangerouslySetInnerHTML={{ __html:props.article.Abstract}}></div>
+              </div>
+            </div>
+          </div>
+          {props.episodedata.data.map((episode) => ( 
+          <div className="col-sm-4">
+            <div className="card">
+              <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.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}
+                width={props.episodedata.Logo.data.attributes.formats.thumbnail.width}
+                className="card-img-top"
+                ></Image> 
+              </div>
+              <div className="card-title">
+                <h3>Latest Podcast</h3>
+              </div>
+              <div className="card-body">
+                <Link href={"/podcasts/shows/" + props.episodedata.data[0].attributes.podcast_sery.Slug + "/" + props.episodedata.data[0].attributes.Slug}>{props.episodedata.data[0].attributes.Title}</Link>
+                <div dangerouslySetInnerHTML={{ __html: episode.episode_lead}}></div>
+              </div>
+            </div>
+          </div>
+          ))}
+          <div className="col-sm-4">
+            <div className="card">
+              <div className="card-img-top">
+                <a href={"/galleryimages/" + props.firstimage.data[0].attributes.Slug}>
+                    <img className="featuredFlickr" src={ props.config.media_path + props.firstimage.data[0].attributes.Image.data.attributes.formats.thumbnail.url }></img>
+                </a>
+              </div>
+              <div className="card-title">
+                <h3>Latest Photo</h3>
+              </div>
+              <div className="card-body">
+                
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      </div>
+    );
+}
+  
+export default HomePage
\ No newline at end of file
diff --git a/pages/news/[slug].js b/pages/news/[slug].js
index 53b069c..4b34615 100755
--- a/pages/news/[slug].js
+++ b/pages/news/[slug].js
@@ -6,7 +6,7 @@ import StorySideBar from '../../components/storysidebar.js'
 import PublishedInfo from '../../components/publishedinfo.js'
 import { getAllPosts, getSinglePost } from '../../data/external/cms'
 import * as gtag from "../../lib/gtag"
-import Image from 'next/image';
+import Image from "next/legacy/image";
 import Head from 'next/head'
 import config from "../../data/internal/config"
 
diff --git a/pages/podcasts.js b/pages/podcasts.js
index 1f8a19b..704442b 100755
--- a/pages/podcasts.js
+++ b/pages/podcasts.js
@@ -2,7 +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';
+import Image from "next/legacy/image";
 import { getPodcastList } from "../data/external/cms.js";
 
 export async function getServerSideProps(context) {