Published info for Articles and small css changes

components/css/styles.css

@@ -289,4 +289,8 @@
     padding: 10px;
     width: 100%;
     position: relative;
+  }
+
+  .transcript {
+    text-align: justify;
   }

components/featureimage.js

@@ -11,7 +11,7 @@ return (
             height={400}
             width={800}
             priority={true}
-            alt={imagedata.Title}
+            alt={imagedata.name}
         />
     </div>
 );

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

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

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