From c05a87b1bafd32582f90dbef9125b22793336dcb Mon Sep 17 00:00:00 2001
From: James Purser <james@angrybeanie.com>
Date: Sat, 11 Feb 2023 16:42:58 +1100
Subject: [PATCH] Published info for Articles and small css changes

---
 components/css/styles.css   |  4 ++++
 components/featureimage.js  |  2 +-
 components/publishedinfo.js | 15 +++++++++++++++
 next.config.js              |  2 +-
 pages/news/[slug].js        |  3 +++
 5 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 components/publishedinfo.js

diff --git a/components/css/styles.css b/components/css/styles.css
index 8f5800b..387b158 100755
--- a/components/css/styles.css
+++ b/components/css/styles.css
@@ -289,4 +289,8 @@
     padding: 10px;
     width: 100%;
     position: relative;
+  }
+
+  .transcript {
+    text-align: justify;
   }
\ No newline at end of file
diff --git a/components/featureimage.js b/components/featureimage.js
index d7669f5..f6b89c9 100755
--- a/components/featureimage.js
+++ b/components/featureimage.js
@@ -11,7 +11,7 @@ return (
             height={400}
             width={800}
             priority={true}
-            alt={imagedata.Title}
+            alt={imagedata.name}
         />
     </div>
 );
diff --git a/components/publishedinfo.js b/components/publishedinfo.js
new file mode 100644
index 0000000..ed99715
--- /dev/null
+++ b/components/publishedinfo.js
@@ -0,0 +1,15 @@
+const PublishedInfo = (publishData) => {
+    console.log(publishData)
+
+    var publishedDate = new Date(publishData.publishData.publishedAt)
+    var updatedDate = new Date(publishData.publishData.updatedAt)
+
+    return (
+        <div className="publishInfo">
+            First Published: {publishedDate.toDateString()}<br />
+            Last Updated: {updatedDate.toDateString()}<br />
+        </div>
+    )
+}
+
+export default PublishedInfo
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 2afb30c..f6a0e48 100755
--- a/next.config.js
+++ b/next.config.js
@@ -15,7 +15,7 @@ module.exports = {
     gtag: process.env.GTAG
   },
   images: {
-    domains: ['www.angrybeanie.com', 'localhost', 'cms.local.angrybeanie.com']
+    domains: ['www.angrybeanie.com', 'localhost', 'cms.local.angrybeanie.com', '127.0.0.1']
   },
   publicRuntimeConfig: {
     analytics_code: process.env.GTAG
diff --git a/pages/news/[slug].js b/pages/news/[slug].js
index eb8c8f1..53b069c 100755
--- a/pages/news/[slug].js
+++ b/pages/news/[slug].js
@@ -3,6 +3,7 @@ import "../../components/main.js"
 import Layout from "../../components/main.js"
 import FeatureImage from "../../components/featureimage.js"
 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';
@@ -17,6 +18,7 @@ const Article = ({article_obj, sections, pagedata, stories, serverRuntimeConfig,
     if (article_obj.FeatureImage.data) {
         if (article_obj.FeatureImage.data.attributes.formats.large) {
             featureImage = article_obj.FeatureImage.data.attributes.formats.large
+            featureImage.name = article_obj.FeatureImage.data.attributes.alternativeText
         } 
     }
 
@@ -48,6 +50,7 @@ const Article = ({article_obj, sections, pagedata, stories, serverRuntimeConfig,
                 <FeatureImage imagedata = {featureImage} basepath = {serverRuntimeConfig.media_path} ></FeatureImage>
             }
             <h1 className="page_title col-sm-12">{ article_obj.Title }</h1>
+            <PublishedInfo publishData={article_obj}></PublishedInfo>
             <div className="article_body" dangerouslySetInnerHTML={{ __html: article_obj.Body }}></div>
         </div>
         <StorySideBar stories={stories} />