angrybeanie-front-end/pages/index.js

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 { FEEDS, getFeed } from "../lib/rss"

export async function getServerSideProps(context) {
  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
  const res = await fetch(serverRuntimeConfig.base_path +`/api/collections/1`)
  const artdata = await res.json()
  const article = artdata.articles[0]

  const epres = await fetch(serverRuntimeConfig.base_path + '/api/podcasts/episodes/latest/0/1')
  const epdata = await epres.json()

  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]

  const pagedata = {'title': 'Angry Beanie'}

  const tadfeed = FEEDS.find((tadfeed) => tadfeed.name === "tad");
  const tadfullfeed = await getFeed(tadfeed.url)
  const tadfirstitem = tadfullfeed.items[0]
  
  return {
      props: { article, pagedata, episodedata: epdata.episodes, config: serverRuntimeConfig, tadfirstitem, firstimage}, // will be passed to the page component as props
  }
}

function HomePage (props) {
    return (
      <div>
        <Head>
          <title>{props.pagedata.title}</title>
        </Head>
        <div className="container">
          <div className="frontPageImage">
            <img className="header_image img-fluid" src="/images/logo.png" alt="Angry Beanie" />
          </div>
          <div className="card col-sm-3">
            <h3>Latest Blog Post</h3>
            <Link href="/news/[slug]" as={"/news/" + props.article.slug}>{props.article.title}</Link>
            {props.article.abstract}
          </div>
          {props.episodedata.map((episode) => ( 
          <div className="card col-sm-3">
            <h3>Latest Podcast</h3>
            <Link href={episode.show_slug + "/" + episode.episode_slug}>{episode.title}</Link>
            <Image 
              src={props.config.base_path + "/" + episode.logo.src}
              height={episode.logo.height}
              width="100%"
            ></Image>
            <div dangerouslySetInnerHTML={{ __html: episode.episode_lead}}></div>
          </div>
          ))}
          <div className="card col-sm-3">
            <h3>Latest Tech And Disability Post</h3>
            {props.tadfirstitem.title}
          </div>
          <div className="card col-sm-3">
            <h3>Latest Photo</h3>
            <img src={ props.firstimage.media.m } height="100" width="100"></img>
          </div>
        </div>
      </div>
    );
}
  
export default HomePage
Initial commit 2020-12-06 21:49:37 +11:00			`import Layout from "../components/main"`
Initial commit 2021-02-04 14:27:14 +11:00			`import LatestEpisodes from "../components/latestepisodes"`
Initial commit 2020-12-06 21:49:37 +11:00			`import Link from 'next/link'`
Initial commit 2021-02-04 14:27:14 +11:00			`import getConfig from 'next/config'`
Fixed up episode pager, started work on Single top level Podcast Page 2021-09-29 21:25:05 +10:00			`import Head from 'next/head'`
			`import Image from 'next/image';`
			`import { FEEDS, getFeed } from "../lib/rss"`
Initial commit 2020-12-06 21:49:37 +11:00
Initial commit 2021-02-04 14:27:14 +11:00			`export async function getServerSideProps(context) {`
			`const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()`
			const res = await fetch(serverRuntimeConfig.base_path +`/api/collections/1`)
Initial commit 2020-12-06 21:49:37 +11:00			`const artdata = await res.json()`
Fixed up episode pager, started work on Single top level Podcast Page 2021-09-29 21:25:05 +10:00			`const article = artdata.articles[0]`
Initial commit 2020-12-06 21:49:37 +11:00
Fixed up episode pager, started work on Single top level Podcast Page 2021-09-29 21:25:05 +10:00			`const epres = await fetch(serverRuntimeConfig.base_path + '/api/podcasts/episodes/latest/0/1')`
Initial commit 2021-02-04 14:27:14 +11:00			`const epdata = await epres.json()`

Fixed up episode pager, started work on Single top level Podcast Page 2021-09-29 21:25:05 +10: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]`
Initial commit 2021-02-04 14:27:14 +11:00
			`const pagedata = {'title': 'Angry Beanie'}`
Fixed up episode pager, started work on Single top level Podcast Page 2021-09-29 21:25:05 +10:00
			`const tadfeed = FEEDS.find((tadfeed) => tadfeed.name === "tad");`
			`const tadfullfeed = await getFeed(tadfeed.url)`
			`const tadfirstitem = tadfullfeed.items[0]`
Initial commit 2020-12-06 21:49:37 +11:00
			`return {`
Fixed up episode pager, started work on Single top level Podcast Page 2021-09-29 21:25:05 +10:00			`props: { article, pagedata, episodedata: epdata.episodes, config: serverRuntimeConfig, tadfirstitem, firstimage}, // will be passed to the page component as props`
Initial commit 2020-12-06 21:49:37 +11:00			`}`
			`}`

Initial commit 2021-02-04 14:27:14 +11:00			`function HomePage (props) {`
Fixed up episode pager, started work on Single top level Podcast Page 2021-09-29 21:25:05 +10:00			`return (`
			`<div>`
			`<Head>`
			`<title>{props.pagedata.title}</title>`
			`</Head>`
			`<div className="container">`
			`<div className="frontPageImage">`
			`<img className="header_image img-fluid" src="/images/logo.png" alt="Angry Beanie" />`
			`</div>`
			`<div className="card col-sm-3">`
			`<h3>Latest Blog Post</h3>`
			`<Link href="/news/[slug]" as={"/news/" + props.article.slug}>{props.article.title}</Link>`
			`{props.article.abstract}`
			`</div>`
			`{props.episodedata.map((episode) => (`
			`<div className="card col-sm-3">`
			`<h3>Latest Podcast</h3>`
			`<Link href={episode.show_slug + "/" + episode.episode_slug}>{episode.title}</Link>`
			`<Image`
			`src={props.config.base_path + "/" + episode.logo.src}`
			`height={episode.logo.height}`
			`width="100%"`
			`></Image>`
			`<div dangerouslySetInnerHTML={{ __html: episode.episode_lead}}></div>`
			`</div>`
			`))}`
			`<div className="card col-sm-3">`
			`<h3>Latest Tech And Disability Post</h3>`
			`{props.tadfirstitem.title}`
			`</div>`
			`<div className="card col-sm-3">`
			`<h3>Latest Photo</h3>`
			`<img src={ props.firstimage.media.m } height="100" width="100"></img>`
			`</div>`
Latest changes 2021-09-05 16:12:45 +10:00			`</div>`
Fixed up episode pager, started work on Single top level Podcast Page 2021-09-29 21:25:05 +10:00			`</div>`
			`);`
Initial commit 2020-12-06 21:49:37 +11:00			`}`

			`export default HomePage`