James Purser
95d82dba8f
Adding OG meta tags to articles and podcast episode Refactoring featureimage to use smaller images
69 lines
No EOL
3.3 KiB
JavaScript
Executable file
69 lines
No EOL
3.3 KiB
JavaScript
Executable file
import { useRouter } from 'next/router'
|
|
import getConfig from 'next/config'
|
|
import Layout from "../../../components/main.js"
|
|
import * as gtag from "../../../lib/gtag"
|
|
import AudioPlayer from "react-h5-audio-player";
|
|
import 'react-h5-audio-player/lib/styles.css';
|
|
import EpisodeSideBar from "../../../components/episodesidebar"
|
|
import { getPodcastEpisode, getPodcastSeriesEpisodes } from '../../../data/external/cms.js';
|
|
import Head from "next/head"
|
|
import config from "../../../data/internal/config"
|
|
|
|
|
|
export async function getServerSideProps(context) {
|
|
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
|
|
const slug = context.params.episode
|
|
|
|
const secres = await fetch(serverRuntimeConfig.base_path + '/api/sections')
|
|
const secdata = await secres.json()
|
|
|
|
const episode = await getPodcastEpisode(slug)
|
|
|
|
const sepisodes = await getPodcastSeriesEpisodes(episode.data[0].attributes.podcast_sery.data.attributes.Slug, 5, 0)
|
|
|
|
const audiodata = {
|
|
audio_path: serverRuntimeConfig.audio_path,
|
|
audio_mp3: episode.data[0].attributes.Audio_MP3.data.attributes
|
|
}
|
|
|
|
const pagedata = {
|
|
'title': 'Angry Beanie - ' + episode.data[0].attributes.Title
|
|
}
|
|
|
|
return {
|
|
props: { pagedata, sections: secdata, episode, audiodata, sepisodes, config }
|
|
}
|
|
}
|
|
|
|
const Episode = ( props ) => {
|
|
return (<Layout
|
|
pagedata={props.pagedata}
|
|
sections={props.sections}
|
|
episode={props.episode}
|
|
audiodata={props.audiodata}
|
|
sepdata={props.sepisodes}>
|
|
<Head>
|
|
<meta name="twitter:card" content={ props.episode.Description } key="twcard" />
|
|
<meta name="twitter:creator" content="angrybeanie" key="twhandle" />
|
|
<meta name="og:url" content={props.config.siteURL + "/podcasts/shows/" + props.episode.data[0].attributes.podcast_sery.data.attributes.Slug + "/" + props.episode.data[0].attributes.Slug}></meta>
|
|
<meta name="og:type" content="podcast"></meta>
|
|
<meta name="og:title" content={ props.episode.data[0].attributes.Title } key="title"></meta>
|
|
<meta name="og:description" content={ props.episode.data[0].attributes.Body } key="description"></meta>
|
|
</Head>
|
|
<h1>{props.episode.data[0].attributes.Title}</h1>
|
|
<div className="main_content col-md-9 col-sm-12">
|
|
<AudioPlayer
|
|
src={props.audiodata.audio_mp3.url}
|
|
onPlay={e => gtag.event({action: "play", category:"audio", label: "audio started", value: props.audiodata.audio_mp3})}
|
|
onPause={e => gtag.event({action: "pause", category:"audio", label: "audio paused", value: props.audiodata.audio_mp3})}
|
|
onEnded={e => gtag.event({action: "end", category:"audio", label: "audio ended", value: props.audiodata.audio_mp3})}
|
|
/>
|
|
<div className="article_body" dangerouslySetInnerHTML={{ __html: props.episode.data[0].attributes.Description}} />
|
|
<h3>Transcript</h3>
|
|
<div className="transcript" dangerouslySetInnerHTML={{ __html: props.episode.data[0].attributes.Transcript}}></div>
|
|
</div>
|
|
<EpisodeSideBar epdata={props.sepisodes}></EpisodeSideBar>
|
|
</Layout>)
|
|
}
|
|
|
|
export default Episode |