James Purser
95d82dba8f
Adding OG meta tags to articles and podcast episode Refactoring featureimage to use smaller images
112 lines
3.7 KiB
JavaScript
Executable file
112 lines
3.7 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, getSinglePost } from '../../data/external/cms'
|
|
import * as gtag from "../../lib/gtag"
|
|
import Image from 'next/image';
|
|
import Head from 'next/head'
|
|
import config from "../../data/internal/config"
|
|
|
|
const Article = ({article_obj, sections, pagedata, stories, serverRuntimeConfig, config}) => {
|
|
if (!article_obj) return null
|
|
|
|
var featureImage
|
|
|
|
if (article_obj.FeatureImage.data) {
|
|
if (article_obj.FeatureImage.data.attributes.formats.large) {
|
|
featureImage = article_obj.FeatureImage.data.attributes.formats.large
|
|
}
|
|
}
|
|
console.log(article_obj)
|
|
return ( <Layout sections={sections} pagedata={pagedata}>
|
|
<Head>
|
|
<meta name="twitter:card" content={ article_obj.Abstract } 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>
|
|
{ article_obj.FeatureImage.data != null &&
|
|
<meta name="og:image" content={featureImage.url}></meta>
|
|
}
|
|
</Head>
|
|
<div className="main_content col-md-9 col-sm-12">
|
|
{ article_obj.FeatureImage.data != null &&
|
|
<FeatureImage imagedata = {featureImage} 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 conf = config
|
|
const slug = params.slug
|
|
|
|
const article_obj = await getSinglePost(slug)
|
|
|
|
var filters = {};
|
|
|
|
if (article_obj.project.data != null) {
|
|
filters = (
|
|
{
|
|
project: {
|
|
Slug: article_obj.project.data.attributes.Slug
|
|
}
|
|
})
|
|
}
|
|
|
|
const qs = require('qs')
|
|
const query = qs.stringify({
|
|
pagination: {
|
|
limit: 5
|
|
},
|
|
filters,
|
|
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, config }, // will be passed to the page component as props
|
|
revalidate: 60
|
|
}
|
|
}
|
|
|