angrybeanie-front-end/pages/news/[slug].js
James Purser 25e70c36d4 Added Tech and Disability section to navigation and page
Refactored News to use the getAllPosts method in data/external/cms
2022-06-14 20:58:06 +10:00

90 lines
3 KiB
JavaScript
Executable file

import getConfig from 'next/config'
import "../../components/main.js"
import Layout from "../../components/main.js"
import FeatureImage from "../../components/featureimage.js"
import StorySideBar from '../../components/storysidebar.js'
import { getAllPosts } from '../../data/external/cms'
import * as gtag from "../../lib/gtag"
import Image from 'next/image';
import Head from 'next/head'
const Article = ({article_obj, sections, pagedata, stories, serverRuntimeConfig}) => {
if (!article_obj) return null
return ( <Layout sections={sections} pagedata={pagedata}>
<Head>
<meta name="twitter:card" content="summary" key="twcard" />
<meta name="twitter:creator" content="angrybeanie" key="twhandle" />
</Head>
<div className="main_content col-md-9 col-sm-12">
{ article_obj.FeatureImage.data != null &&
<FeatureImage imagedata = {article_obj.FeatureImage.data} basepath = {serverRuntimeConfig.base_path} ></FeatureImage>
}
<h1>{ article_obj.Title }</h1>
<div className="article_body" dangerouslySetInnerHTML={{ __html: article_obj.Body }}></div>
</div>
<StorySideBar stories={stories} />
</Layout>
)
}
export default Article
export async function getStaticPaths() {
const posts = await getAllPosts()
const paths = posts.data.map((post) => ({
params: { slug: post.attributes.Slug },
}))
return {
paths,
fallback: true // false or 'blocking'
};
}
export async function getStaticProps({params}) {
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
const slug = params.slug
const url = serverRuntimeConfig.base_path + 'articles?filters[Slug][$eq]=' + slug + '&populate=*'
const res = await fetch(url, {
headers: new Headers({
'Authorization': serverRuntimeConfig.strapi_token,
'Content-Type': 'application/x-www-form-urlencoded'
})
})
const artdata = await res.json()
const article_obj = artdata.data[0].attributes
const qs = require('qs')
const query = qs.stringify({
pagination: {
limit: 5
},
sort: ['publishedAt:desc']
}, {
encodeValuesOnly: true,
})
const storiesQuery = await fetch(serverRuntimeConfig.base_path + `articles?${query}`, {
headers: new Headers({
'Authorization': serverRuntimeConfig.strapi_token,
'Content-Type': 'application/x-www-form-urlencoded'
})
})
const storydata = await storiesQuery.json()
const stories = storydata.data
const pagedata = {
'title': "Angry Beanie - " + article_obj.Title
}
const secres = await fetch(serverRuntimeConfig.base_path + '/api/sections')
const secdata = await secres.json()
return {
props: { article_obj, sections: secdata, pagedata, stories, serverRuntimeConfig }, // will be passed to the page component as props
revalidate: 60
}
}