include episode thumbnails. closes #74.

bradgarropy · Mar 1, 2020 · 1cff5ef · 1cff5ef
1 parent 6699826
commit 1cff5ef
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 20 deletions.
diff --git a/src/components/Episodes.js b/src/components/Episodes.js
@@ -1,29 +1,44 @@
 import React from "react"
+import Img from "gatsby-image"
 import PropType from "prop-types"
+import styled from "styled-components"
+
+const StyledEpisodes = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+`
 
 const Episodes = ({episodes}) => {
     return (
-        <>
-            <h1>episodes</h1>
+        <StyledEpisodes>
+            {episodes.map((episode, index) => {
+                const {videoId, title, description} = episode
+                const thumbnail = episode.localThumbnail.childImageSharp.fluid
+
+                return (
+                    <article key={index}>
+                        <a
+                            href={`https://youtube.com/watch?v=${videoId}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <Img fluid={thumbnail} />
+                        </a>
 
-            <ul>
-                {episodes.map((episode, index) => {
-                    const {videoId, title} = episode
+                        <a
+                            href={`https://youtube.com/watch?v=${videoId}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <p>{title}</p>
+                        </a>
 
-                    return (
-                        <li key={index}>
-                            <a
-                                href={`https://youtube.com/watch?v=${videoId}`}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                {title}
-                            </a>
-                        </li>
-                    )
-                })}
-            </ul>
-        </>
+                        <p>{description}</p>
+                    </article>
+                )
+            })}
+        </StyledEpisodes>
     )
 }
 

diff --git a/src/hooks/useEpisodes.js b/src/hooks/useEpisodes.js
@@ -7,6 +7,14 @@ const useEpisodes = ({limit = 0} = {}) => {
                 nodes {
                     title
                     videoId
+                    description
+                    localThumbnail {
+                        childImageSharp {
+                            fluid(maxWidth: 700) {
+                                ...GatsbyImageSharpFluid
+                            }
+                        }
+                    }
                 }
             }
         }
@@ -20,6 +28,11 @@ const useEpisodes = ({limit = 0} = {}) => {
         episodes = episodes.slice(0, limit)
     }
 
+    // truncate description
+    episodes.forEach(
+        episode => (episode.description = episode.description.split("---")[0]),
+    )
+
     return episodes
 }
 

diff --git a/src/pages/episodes.js b/src/pages/episodes.js
@@ -5,14 +5,15 @@ import Episodes from "../components/Episodes"
 import {Meta, Twitter, Facebook} from "../components/SEO"
 
 const EpisodesPage = () => {
-    const episodes = useEpisodes()
+    const episodes = useEpisodes({limit: 5})
 
     return (
         <Container>
             <Meta title="episodes" />
             <Facebook />
             <Twitter />
 
+            <h1>episodes</h1>
             <Episodes episodes={episodes} />
         </Container>
     )

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -25,6 +25,7 @@ const IndexPage = () => {
             </Section>
 
             <Section color="red">
+                <h1>episodes</h1>
                 <Episodes episodes={episodes} />
                 <Link to="/episodes">see more</Link>
             </Section>