purserj/angrybeanie-front-end
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Adding tech and disability rss link

Browse source 
Adding OG meta tags to articles and podcast episode
Refactoring featureimage to use smaller images
This commit is contained in:
James Purser 2022-07-01 16:43:50 +10:00
parent 307267476c
commit 95d82dba8f
5 changed files with 35 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/featureimage.js
View file

@ -6,8 +6,8 @@ const FeatureImage = ({ imagedata, basepath }) => (
<div className="featuredimage"> <div className="featuredimage">
<Image <Image
src={"http://localhost:1337" + imagedata.url} src={"http://localhost:1337" + imagedata.url}
height={imagedata.height} height={400}
width={imagedata.width} width={800}
priority={true} priority={true}
/> />
</div> </div>

12
components/main.js
View file

@ -7,14 +7,17 @@ import { render } from "less"
import { Route, Switch } from 'react-router'; import { Route, Switch } from 'react-router';
import StorySideBar from "./storysidebar" import StorySideBar from "./storysidebar"
const Layout = (props) => ( const Layout = (props) => {
return (
<div className="Layout"> <div className="Layout">
<Head> <Head>
<title>{props.pagedata.title}</title> <title>{props.pagedata.title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta> <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<meta name="description" content="Angry Beanie"></meta> <meta name="description" content="Angry Beanie" key='description'></meta>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta property="og-title" content={props.pagedata.pageTitle}></meta> <meta property="og:title" content={props.pagedata.title} key='title'></meta>
<link rel="alternate" type="application/rss+xml" title="RSS Feed for AngryBeanie.com" href="/feed/angrybeanie.xml" />
</Head> </Head>
<Header /> <Header />
<div className="container"> <div className="container">
@ -23,6 +26,7 @@ const Layout = (props) => (
</div> </div>
</div> </div>
) )
}
export default Layout export default Layout

17
pages/news/[slug].js
View file

@ -7,8 +7,9 @@ import { getAllPosts, getSinglePost } from '../../data/external/cms'
import * as gtag from "../../lib/gtag" import * as gtag from "../../lib/gtag"
import Image from 'next/image'; import Image from 'next/image';
import Head from 'next/head' import Head from 'next/head'
import config from "../../data/internal/config"
const Article = ({article_obj, sections, pagedata, stories, serverRuntimeConfig}) => { const Article = ({article_obj, sections, pagedata, stories, serverRuntimeConfig, config}) => {
if (!article_obj) return null if (!article_obj) return null
var featureImage var featureImage
@ -18,11 +19,18 @@ const Article = ({article_obj, sections, pagedata, stories, serverRuntimeConfig}
featureImage = article_obj.FeatureImage.data.attributes.formats.large featureImage = article_obj.FeatureImage.data.attributes.formats.large
} }
} }
console.log(article_obj.FeatureImage) console.log(article_obj)
return ( <Layout sections={sections} pagedata={pagedata}> return ( <Layout sections={sections} pagedata={pagedata}>
<Head> <Head>
<meta name="twitter:card" content="summary" key="twcard" /> <meta name="twitter:card" content={ article_obj.Abstract } key="twcard" />
<meta name="twitter:creator" content="angrybeanie" key="twhandle" /> <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> </Head>
<div className="main_content col-md-9 col-sm-12"> <div className="main_content col-md-9 col-sm-12">
{ article_obj.FeatureImage.data != null && { article_obj.FeatureImage.data != null &&
@ -52,6 +60,7 @@ export async function getStaticPaths() {
export async function getStaticProps({params}) { export async function getStaticProps({params}) {
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig() const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
const conf = config
const slug = params.slug const slug = params.slug
const article_obj = await getSinglePost(slug) const article_obj = await getSinglePost(slug)
@ -96,7 +105,7 @@ export async function getStaticProps({params}) {
const secdata = await secres.json() const secdata = await secres.json()
return { return {
props: { article_obj, sections: secdata, pagedata, stories, serverRuntimeConfig }, // will be passed to the page component as props props: { article_obj, sections: secdata, pagedata, stories, serverRuntimeConfig, config }, // will be passed to the page component as props
revalidate: 60 revalidate: 60
} }
} }

12
pages/podcasts/shows/[...episode].js
View file

@ -6,6 +6,8 @@ import AudioPlayer from "react-h5-audio-player";
import 'react-h5-audio-player/lib/styles.css'; import 'react-h5-audio-player/lib/styles.css';
import EpisodeSideBar from "../../../components/episodesidebar" import EpisodeSideBar from "../../../components/episodesidebar"
import { getPodcastEpisode, getPodcastSeriesEpisodes } from '../../../data/external/cms.js'; import { getPodcastEpisode, getPodcastSeriesEpisodes } from '../../../data/external/cms.js';
import Head from "next/head"
import config from "../../../data/internal/config"
export async function getServerSideProps(context) { export async function getServerSideProps(context) {
@ -29,7 +31,7 @@ export async function getServerSideProps(context) {
} }
return { return {
props: { pagedata, sections: secdata, episode, audiodata, sepisodes } props: { pagedata, sections: secdata, episode, audiodata, sepisodes, config }
} }
} }
@ -40,6 +42,14 @@ const Episode = ( props ) => {
episode={props.episode} episode={props.episode}
audiodata={props.audiodata} audiodata={props.audiodata}
sepdata={props.sepisodes}> 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> <h1>{props.episode.data[0].attributes.Title}</h1>
<div className="main_content col-md-9 col-sm-12"> <div className="main_content col-md-9 col-sm-12">
<AudioPlayer <AudioPlayer

2
pages/tech-and-disability.js
View file

@ -34,7 +34,7 @@ export async function getServerSideProps(context) {
function Project({ articles, sections, pagedata, project, rssFeed }) { function Project({ articles, sections, pagedata, project, rssFeed }) {
return <div><Head> return <div><Head>
<link rel="alternate" type="application/rss+xml" title="Example Feed" href={rssFeed} /> <link rel="alternate" type="application/rss+xml" title="Tech and Disability Feed" href={rssFeed} />
</Head> </Head>
<Layout sections={sections} pagedata={pagedata}> <Layout sections={sections} pagedata={pagedata}>
<h1>{project.data[0].attributes.Title}</h1> <h1>{project.data[0].attributes.Title}</h1>