angrybeanie-front-end/pages/index.js

130 lines
4.8 KiB
JavaScript
Raw Normal View History

2020-12-06 21:49:37 +11:00
import Layout from "../components/main"
2021-02-04 14:27:14 +11:00
import LatestEpisodes from "../components/latestepisodes"
2020-12-06 21:49:37 +11:00
import Link from 'next/link'
2021-02-04 14:27:14 +11:00
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"
2020-12-06 21:49:37 +11:00
export async function getStaticProps(context) {
generateRssFeed()
generateRssFeed('tech-and-disability')
generatePodcastFeeds()
generateSitemap()
const { serverRuntimeConfig, publicRuntimeConfig, strapiConfig } = getConfig()
const qs = require('qs')
const query = qs.stringify({
pagination: {
limit: 1
},
sort: ['publishedAt:desc'],
fields: ['Title', 'Slug', 'Abstract']
}, {
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'
})
})
2020-12-06 21:49:37 +11:00
const artdata = await res.json()
const article = artdata.data[0].attributes
const epdata = await getLatestPodcastEpisode()
console.log(epdata.Logo.data.attributes.height)
2021-02-04 14:27:14 +11:00
const flickr = await fetch('https://www.flickr.com/services/feeds/photos_public.gne?id=25875680@N05&lang=en-us&format=json&nojsoncallback=1')
const flickrdata = await flickr.json()
const firstimage = flickrdata.items[0]
2021-02-04 14:27:14 +11:00
const pagedata = {'title': 'Angry Beanie'}
2020-12-06 21:49:37 +11:00
return {
props: { article, pagedata, config: serverRuntimeConfig, firstimage, episodedata: epdata, siteConfig: config},
revalidate: 60 // will be passed to the page component as props
2020-12-06 21:49:37 +11:00
}
}
2021-02-04 14:27:14 +11:00
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">
</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.siteConfig.siteURL + props.episodedata.Logo.data.attributes.url}
alt={episode.show}
layout="fixed"
height={props.episodedata.Logo.data.attributes.height}
width={props.episodedata.Logo.data.attributes.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={props.firstimage.link} target="_blank">
<img className="featuredFlickr" src={ props.firstimage.media.m }></img>
</a>
</div>
<div className="card-title">
<h3>Latest Photo (clicking on the above will take you to Flickr)</h3>
</div>
<div className="card-body">
</div>
</div>
</div>
2021-09-05 16:12:45 +10:00
</div>
</div>
</div>
);
2020-12-06 21:49:37 +11:00
}
export default HomePage