embed latest episode. closes #75.

src/components/YouTube.js

@@ -0,0 +1,27 @@
+import React from "react"
+import PropTypes from "prop-types"
+import styled from "styled-components"
+
+const StyledYouTube = styled.iframe`
+    display: block;
+`
+
+const YouTube = ({id}) => {
+    return (
+        <StyledYouTube
+            title={id}
+            width="560"
+            height="315"
+            src={`https://www.youtube-nocookie.com/embed/${id}`}
+            frameBorder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+        />
+    )
+}
+
+YouTube.propTypes = {
+    id: PropTypes.string.isRequired,
+}
+
+export default YouTube

src/hooks/index.js

@@ -1,6 +1,7 @@
 export {default as useTags} from "./useTags"
 export {default as useAbout} from "./useAbout"
 export {default as usePosts} from "./usePosts"
+export {default as useEpisode} from "./useEpisode"
 export {default as useEpisodes} from "./useEpisodes"
 export {default as usePlaylist} from "./usePlaylist"
 export {default as usePlaylists} from "./usePlaylists"

src/hooks/useEpisode.js

@@ -0,0 +1,36 @@
+import {useStaticQuery, graphql} from "gatsby"
+
+const useEpisode = () => {
+    const query = graphql`
+        {
+            allYoutubeVideo(
+                limit: 1
+                sort: {fields: publishedAt, order: DESC}
+            ) {
+                nodes {
+                    title
+                    videoId
+                    description
+                    localThumbnail {
+                        childImageSharp {
+                            fluid(maxWidth: 700) {
+                                ...GatsbyImageSharpFluid
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    `
+
+    const data = useStaticQuery(query)
+
+    const episode = data.allYoutubeVideo.nodes[0]
+
+    // truncate description
+    episode.description = episode.description.split("---")[0]
+
+    return episode
+}
+
+export default useEpisode

src/hooks/useEpisodes.js

@@ -3,7 +3,7 @@ import {useStaticQuery, graphql} from "gatsby"
 const useEpisodes = ({limit = 0} = {}) => {
     const query = graphql`
         {
-            allYoutubeVideo {
+            allYoutubeVideo(sort: {fields: publishedAt, order: DESC}) {
                 nodes {
                     title
                     videoId

src/hooks/usePosts.js

@@ -5,7 +5,7 @@ const usePosts = ({limit = 0} = {}) => {
         {
             allMarkdownRemark(
                 filter: {fileAbsolutePath: {regex: "/content/posts/"}}
-                sort: {fields: frontmatter___date}
+                sort: {fields: frontmatter___date, order: DESC}
             ) {
                 nodes {
                     frontmatter {

src/pages/index.js

@@ -2,15 +2,15 @@ import React from "react"
 import {Link} from "gatsby"
 import Section from "../styles/Section"
 import Posts from "../components/Posts"
-import Episodes from "../components/Episodes"
+import YouTube from "../components/YouTube"
 import Playlists from "../components/Playlists"
 import {Meta, Twitter, Facebook} from "../components/SEO"
-import {usePosts, useEpisodes, usePlaylists} from "../hooks"
+import {usePosts, useEpisode, usePlaylist} from "../hooks"
 
 const IndexPage = () => {
     const posts = usePosts({limit: 3})
-    const episodes = useEpisodes({limit: 1})
-    const playlists = usePlaylists({name: "Daily Texas Country"})
+    const episode = useEpisode()
+    const playlist = usePlaylist({name: "Daily Texas Country"})
 
     return (
         <>
@@ -26,7 +26,7 @@ const IndexPage = () => {
 
             <Section color="red">
                 <h1>episodes</h1>
-                <Episodes episodes={episodes} />
+                <YouTube id={episode.videoId} />
                 <Link to="/episodes">see more</Link>
             </Section>
 
@@ -35,7 +35,8 @@ const IndexPage = () => {
             </Section>
 
             <Section color="red">
-                <Playlists playlists={playlists} />
+                <h1>playlists</h1>
+                <Playlists playlists={[playlist]} />
                 <Link to="/playlists">see more</Link>
             </Section>
         </>