78 lines
3.4 KiB
JavaScript
78 lines
3.4 KiB
JavaScript
import Head from "next/head";
|
|
import Image from "next/legacy/image";
|
|
import getConfig from 'next/config'
|
|
import "../../../components/main"
|
|
import Layout from "../../../components/main.js"
|
|
import { getAllGalleryImages, getGalleryImage } from "../../../data/external/cms.js";
|
|
import config from "../../../data/internal/config.js"
|
|
|
|
|
|
const galleryImage = ({pagedata, imageDetails, basepath, config} ) => {
|
|
if(!imageDetails) return null
|
|
|
|
let sanitisedDesc = imageDetails.data[0].attributes.Description.replace(/(<([^>]+)>)/gi, "")
|
|
|
|
return (<Layout pagedata={pagedata} imageDetails={imageDetails}>
|
|
<Head>
|
|
<meta name="twitter:card" content="summary_large_image" key="twcard" />
|
|
<meta name="twitter:creator" content="angrybeanie" key="twhandle" />
|
|
<meta name="twitter:site" content="@angrybeanie"></meta>
|
|
<meta name="twitter:title" content={imageDetails.data[0].attributes.Title}></meta>
|
|
<meta name="og:url" content={config.siteURL + "/galleryimages/" + imageDetails.data[0].attributes.Slug}></meta>
|
|
<meta name="og:type" content="article"></meta>
|
|
<meta name="og:title" content={ imageDetails.data[0].attributes.Title } key="title"></meta>
|
|
<meta name="og:description" content={ sanitisedDesc } key="description"></meta>
|
|
<meta name="og:image" content={basepath + imageDetails.data[0].attributes.Image.data.attributes.formats.large.url}></meta>
|
|
<meta name="og:image:alt" content={ sanitisedDesc }></meta>
|
|
</Head>
|
|
<div className="main_content col-sm-12">
|
|
<Image
|
|
src={basepath + imageDetails.data[0].attributes.Image.data.attributes.formats.large.url}
|
|
layout="intrinsic"
|
|
width={imageDetails.data[0].attributes.Image.data.attributes.formats.large.width}
|
|
height={imageDetails.data[0].attributes.Image.data.attributes.formats.large.height}
|
|
alt={imageDetails.data[0].attributes.Image.data.attributes.alternativeText}
|
|
></Image>
|
|
<div className="col-sm-9 article_body">
|
|
<h2>Photo Information</h2>
|
|
<div>
|
|
<p><strong>Title:</strong> {imageDetails.data[0].attributes.Title}</p>
|
|
<p><strong>Gallery:</strong> <a href={"/gallery/" + imageDetails.data[0].attributes.galleries.data[0].attributes.Slug}>{imageDetails.data[0].attributes.galleries.data[0].attributes.Title}</a></p>
|
|
<p dangerouslySetInnerHTML={{ __html: imageDetails.data[0].attributes.Description}}></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>)
|
|
}
|
|
|
|
export default galleryImage
|
|
|
|
export async function getStaticPaths() {
|
|
const posts = await getAllGalleryImages()
|
|
const paths = posts.data.map((post) => ({
|
|
params: { galleryImage: post.attributes.Slug, gallery: post.attributes.galleries.data[0].attributes.Slug },
|
|
}))
|
|
return {
|
|
paths,
|
|
fallback: true // false or 'blocking'
|
|
};
|
|
}
|
|
|
|
export async function getStaticProps (context){
|
|
|
|
const { serverRuntimeConfig } = getConfig()
|
|
|
|
const slug = context.params.galleryImage
|
|
|
|
const galImage = await getGalleryImage(slug)
|
|
|
|
const pagedata = {
|
|
'title': "Angry Beanie - " + galImage.data[0].attributes.Title
|
|
}
|
|
|
|
return {
|
|
props: { pagedata, imageDetails: galImage, basepath: serverRuntimeConfig.media_path, config },
|
|
revalidate: 60
|
|
}
|
|
}
|
|
|