angrybeanie-front-end/pages/index.js
2022-09-08 16:42:08 +10:00

138 lines
No EOL
5.4 KiB
JavaScript
Executable file

import Layout from "../components/main"
import LatestEpisodes from "../components/latestepisodes"
import Link from 'next/link'
import getConfig from 'next/config'
import Head from 'next/head'
import Image from 'next/image';
import config from '../data/internal/config';
import { FEEDS, getFeed } from "../lib/rss"
import { generatePodcastFeeds, generateRssFeed } from "../data/internal/feed-generator"
import { generateSitemap } from "../data/internal/sitemap-generator"
import { getLatestPodcastEpisode } from "../data/external/cms"
import { getLatestGalleryImage } from "../data/external/cms"
export async function getStaticProps(context) {
generateRssFeed()
generateRssFeed('tech-and-disability')
generatePodcastFeeds()
generateSitemap()
const { serverRuntimeConfig } = getConfig()
const qs = require('qs')
const query = qs.stringify({
pagination: {
limit: 1
},
populate: {
FeatureImage: '*'
},
sort: ['publishedAt:desc'],
}, {
encodeValuesOnly: true,
})
const res = await fetch(serverRuntimeConfig.base_path +`articles?${query}`, {
headers: new Headers({
'Authorization': serverRuntimeConfig.strapi_token,
'Content-Type': 'application/x-www-form-urlencoded'
})
})
const artdata = await res.json()
const article = artdata.data[0].attributes
const epdata = await getLatestPodcastEpisode()
const firstimage = await getLatestGalleryImage()
const pagedata = {'title': 'Angry Beanie'}
return {
props: { article, pagedata, config: serverRuntimeConfig, firstimage, episodedata: epdata, siteConfig: config},
revalidate: 60 // will be passed to the page component as props
}
}
function HomePage (props) {
return (
<div>
<Head>
<title>{props.pagedata.title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<meta name="description" content="Angry Beanie"></meta>
<meta charSet="utf-8" />
<meta property="og-title" content="Angry Beanie - Home"></meta>
</Head>
<div className="container">
<div className="frontPageImage">
<img className="header_image img-fluid" src="/images/logo.png" alt="Angry Beanie" />
</div>
<div className="row">
<div className="col-sm-4">
<div className="card">
<div className="card-img-top">
{/* <img src={props.episodedata.Logo.data.attributes.url} alt={episode.show} height={props.episodedata.Logo.data.attributes.height}></img> */}
<Image
src={props.config.media_path + props.article.FeatureImage.data.attributes.formats.thumbnail.url}
alt={props.article.Title}
layout="fixed"
height={props.article.FeatureImage.data.attributes.formats.thumbnail.height}
width={props.article.FeatureImage.data.attributes.formats.thumbnail.width}
className="card-img-top"
></Image>
</div>
<div className="card-title">
<h3>Latest Blog Post</h3>
</div>
<div className="card-body">
<Link href="/news/[slug]" as={"/news/" + props.article.Slug}>{props.article.Title}</Link>
<div dangerouslySetInnerHTML={{ __html:props.article.Abstract}}></div>
</div>
</div>
</div>
{props.episodedata.data.map((episode) => (
<div className="col-sm-4">
<div className="card">
<div className="card-img-top">
{/* <img src={props.episodedata.Logo.data.attributes.url} alt={episode.show} height={props.episodedata.Logo.data.attributes.height}></img> */}
<Image
src={props.config.media_path + props.episodedata.Logo.data.attributes.formats.thumbnail.url}
alt={episode.show}
layout="fixed"
height={props.episodedata.Logo.data.attributes.formats.thumbnail.height}
width={props.episodedata.Logo.data.attributes.formats.thumbnail.width}
className="card-img-top"
></Image>
</div>
<div className="card-title">
<h3>Latest Podcast</h3>
</div>
<div className="card-body">
<Link href={"/podcasts/shows/" + props.episodedata.data[0].attributes.podcast_sery.Slug + "/" + props.episodedata.data[0].attributes.Slug}>{props.episodedata.data[0].attributes.Title}</Link>
<div dangerouslySetInnerHTML={{ __html: episode.episode_lead}}></div>
</div>
</div>
</div>
))}
<div className="col-sm-4">
<div className="card">
<div className="card-img-top">
<a href={"/galleryimages/" + props.firstimage.data[0].attributes.Slug}>
<img className="featuredFlickr" src={ props.config.media_path + props.firstimage.data[0].attributes.Image.data.attributes.formats.thumbnail.url }></img>
</a>
</div>
<div className="card-title">
<h3>Latest Photo</h3>
</div>
<div className="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default HomePage