From ed45067c8e960a62befb439f670dd5636740bc0e Mon Sep 17 00:00:00 2001
From: PeterWeckend <pweckend@ualberta.ca>
Date: Fri, 7 May 2021 21:08:58 -0700
Subject: [PATCH 1/2] Added image to episode page, todo: fix css

---
 src/components/Archive/episode.js | 37 +++++++++++++++++++++----------
 src/templates/archive.js          |  3 +++
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/components/Archive/episode.js b/src/components/Archive/episode.js
index b877bc0..d7e0ff2 100644
--- a/src/components/Archive/episode.js
+++ b/src/components/Archive/episode.js
@@ -39,6 +39,7 @@ const ContentContainer = styled.div`
   padding: 25px;
   flex: 1;
   overflow-y: auto;
+  display: flex;
 `
 
 const EpisodeActionButton = styled.a`
@@ -67,13 +68,22 @@ const Heading = styled.h1`
   width: 100%;
 `
 
-const EpisodeContent = styled.div`
+const EpisodeImageDiv = styled.div`
+  width: 100%;
+  margin-right: 25px;
+`
 
+const EpisodeImage = styled.img`
+  width: 100%;
+  height: auto;
+  box-shadow: 0 0 10px #000;
 `
 
+const EpisodeContent = styled.div``
+
 const EpisodeDate = styled.span`
   font-weight: 600;
-  color: ${({ theme }) => theme.textV2}
+  color: ${({ theme }) => theme.textV2};
 `
 
 function getDownloadLink(link) {
@@ -85,11 +95,13 @@ const Episode = ({ episode }) => (
   <Wrapper>
     <Player url={episode.enclosure.url} />
     <ContentContainer>
-      <EpisodeDate>
-        {episode.isoDate}
-      </EpisodeDate>
-      <Heading>{episode.title}</Heading>
-      {/* <EpisodeActionButton
+      <EpisodeImageDiv>
+        <EpisodeImage src={episode.itunes.image} alt={episode.title} />
+      </EpisodeImageDiv>
+      <div>
+        <EpisodeDate>{episode.isoDate}</EpisodeDate>
+        <Heading>{episode.title}</Heading>
+        {/* <EpisodeActionButton
         href={getDownloadLink(episode.enclosure.url)}
         download="download"
       >
@@ -98,11 +110,12 @@ const Episode = ({ episode }) => (
           💾
         </span>
       </EpisodeActionButton> */}
-      <EpisodeContent
-        dangerouslySetInnerHTML={{
-          __html: episode.content,
-        }}
-      />
+        <EpisodeContent
+          dangerouslySetInnerHTML={{
+            __html: episode.content,
+          }}
+        />
+      </div>
     </ContentContainer>
   </Wrapper>
 )
diff --git a/src/templates/archive.js b/src/templates/archive.js
index 9c6a1b2..02c4b44 100644
--- a/src/templates/archive.js
+++ b/src/templates/archive.js
@@ -66,6 +66,9 @@ export const query = graphql`
       enclosure {
         url
       }
+      itunes {
+        image
+      }
     }
   }
 `

From 1b8b4f9477fa0c9ec6318595f876aa69f566e372 Mon Sep 17 00:00:00 2001
From: PeterWeckend <pweckend@ualberta.ca>
Date: Sat, 8 May 2021 15:33:32 -0700
Subject: [PATCH 2/2] Fixing CSS issues

---
 src/components/Archive/episode.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Archive/episode.js b/src/components/Archive/episode.js
index d7e0ff2..602df1a 100644
--- a/src/components/Archive/episode.js
+++ b/src/components/Archive/episode.js
@@ -69,14 +69,17 @@ const Heading = styled.h1`
 `
 
 const EpisodeImageDiv = styled.div`
-  width: 100%;
+  width: 40%;
   margin-right: 25px;
 `
 
 const EpisodeImage = styled.img`
-  width: 100%;
-  height: auto;
   box-shadow: 0 0 10px #000;
+  width: 100%;
+`
+
+const EpisodeContentDiv = styled.div`
+  flex: 1;
 `
 
 const EpisodeContent = styled.div``
@@ -98,7 +101,7 @@ const Episode = ({ episode }) => (
       <EpisodeImageDiv>
         <EpisodeImage src={episode.itunes.image} alt={episode.title} />
       </EpisodeImageDiv>
-      <div>
+      <EpisodeContentDiv>
         <EpisodeDate>{episode.isoDate}</EpisodeDate>
         <Heading>{episode.title}</Heading>
         {/* <EpisodeActionButton
@@ -115,7 +118,7 @@ const Episode = ({ episode }) => (
             __html: episode.content,
           }}
         />
-      </div>
+      </EpisodeContentDiv>
     </ContentContainer>
   </Wrapper>
 )