Merge pull request #91 from mattstratton/add-video-support#26

Add youtube support for episodes
mattstratton · May 19, 2017 · 4f974b2 · 4f974b2
2 parents 316082d + 114bee1
commit 4f974b2
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 108 deletions.
diff --git a/README.md b/README.md
@@ -114,7 +114,7 @@ I recommend the following permalink settings, although the theme will work just
 
 ### Episodes
 
-Every episode requires a page in the `content/episode` on your site. The command `hugo new episode/myepisod.md` should populate it properly.
+Every episode requires a page in the `content/episode` on your site. The command `hugo new episode/myepisode.md` should populate it properly.
 
 An episode file takes the following structure:
 
@@ -157,7 +157,7 @@ Graphical user interface influencer value proposition startup hackathon iPad ana
 | `podcast_file`     | Yes      | The filename of your episode, relative to the `media_prefix` of your config.toml.                                                                                       | `"arrested-devops-podcast-episode053.mp3"`                                                                                                                                                                                            |
 | `podcast_bytes`    | No       | The length of the podcast file in bytes. This is optional, but iTunes and many other podcast players prefer this to be set.                                             | "23907533"                                                                                                                                                                                                                            |
 | `Title`            | Yes      | The title of the episode.                                                                                                                                               | "Back to School"                                                                                                                                                                                                                      |
-| `youtube`          | No       | The ID of the YouTube video (not the full URL). Currently unusued.                                                                                                      | "8ClZXJsgpHY"
+| `youtube`          | No       | The ID of the YouTube video (not the full URL). This will display the video on the episode page, and if you are using the row layout, it will display for the latest episode.                                                                                                      | "8ClZXJsgpHY"
 
 ### Guests
 

diff --git a/config.codekit3 b/config.codekit3
@@ -2103,7 +2103,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/animated.less",
 		"oF": 0,
 		"oS": 0,
@@ -2120,7 +2120,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/bordered-pulled.less",
 		"oF": 0,
 		"oS": 0,
@@ -2137,7 +2137,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/core.less",
 		"oF": 0,
 		"oS": 0,
@@ -2154,7 +2154,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/fixed-width.less",
 		"oF": 0,
 		"oS": 0,
@@ -2188,7 +2188,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/icons.less",
 		"oF": 0,
 		"oS": 0,
@@ -2205,7 +2205,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/larger.less",
 		"oF": 0,
 		"oS": 0,
@@ -2222,7 +2222,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/list.less",
 		"oF": 0,
 		"oS": 0,
@@ -2239,7 +2239,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/mixins.less",
 		"oF": 0,
 		"oS": 0,
@@ -2256,7 +2256,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/path.less",
 		"oF": 0,
 		"oS": 0,
@@ -2273,7 +2273,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/rotated-flipped.less",
 		"oF": 0,
 		"oS": 0,
@@ -2290,7 +2290,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/screen-reader.less",
 		"oF": 0,
 		"oS": 0,
@@ -2307,7 +2307,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/stacked.less",
 		"oF": 0,
 		"oS": 0,
@@ -2324,7 +2324,7 @@
 		"ie": 1,
 		"iI": 0,
 		"ma": 0,
-		"oA": 1,
+		"oA": 2,
 		"oAP": "\/bower_components\/font-awesome\/less\/variables.less",
 		"oF": 0,
 		"oS": 0,
@@ -4749,6 +4749,24 @@
 		"rFN": 0,
 		"uCM": 0
 		},
+	"\/exampleSite\/content\/episode\/april.md": {
+		"cS": 0,
+		"eF": 1,
+		"eL": 1,
+		"eLB": 0,
+		"ema": 1,
+		"eSQ": 1,
+		"ft": 4096,
+		"oA": 1,
+		"oAP": "\/exampleSite\/content\/episode\/april.html",
+		"oF": 0,
+		"oFM": 0,
+		"oS": 0,
+		"pHT": 0,
+		"pME": 1,
+		"rFN": 0,
+		"uCM": 0
+		},
 	"\/exampleSite\/content\/episode\/aug.md": {
 		"cS": 0,
 		"eF": 1,
@@ -7869,12 +7887,6 @@
 		"oAP": "\/layouts\/partials\/meta.html",
 		"oF": 0
 		},
-	"\/layouts\/partials\/row.html": {
-		"ft": 8192,
-		"oA": 2,
-		"oAP": "\/layouts\/partials\/row.html",
-		"oF": 0
-		},
 	"\/layouts\/partials\/sidebar.html": {
 		"ft": 8192,
 		"oA": 0,
@@ -8041,10 +8053,44 @@
 		"oF": 0,
 		"oS": 0
 		},
-	"\/static\/fonts\/FontAwesome0.otf": {
+	"\/static\/fonts\/fontawesome-webfont.eot": {
+		"ft": 8192,
+		"oA": 2,
+		"oAP": "\/static\/fonts\/fontawesome-webfont.eot",
+		"oF": 0
+		},
+	"\/static\/fonts\/fontawesome-webfont.svg": {
+		"ft": 2097152,
+		"miP": 0,
+		"oA": 2,
+		"oAP": "\/static\/fonts\/fontawesome-webfont.svg",
+		"oF": 0,
+		"opt": 0,
+		"plM": 3758088159,
+		"prP": 0
+		},
+	"\/static\/fonts\/fontawesome-webfont.ttf": {
+		"ft": 8192,
+		"oA": 2,
+		"oAP": "\/static\/fonts\/fontawesome-webfont.ttf",
+		"oF": 0
+		},
+	"\/static\/fonts\/fontawesome-webfont.woff": {
+		"ft": 8192,
+		"oA": 2,
+		"oAP": "\/static\/fonts\/fontawesome-webfont.woff",
+		"oF": 0
+		},
+	"\/static\/fonts\/fontawesome-webfont.woff2": {
+		"ft": 8192,
+		"oA": 2,
+		"oAP": "\/static\/fonts\/fontawesome-webfont.woff2",
+		"oF": 0
+		},
+	"\/static\/fonts\/FontAwesome.otf": {
 		"ft": 8192,
 		"oA": 2,
-		"oAP": "\/static\/fonts\/FontAwesome0.otf",
+		"oAP": "\/static\/fonts\/FontAwesome.otf",
 		"oF": 0
 		},
 	"\/static\/img\/episode\/default-social.jpg": {

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -41,7 +41,7 @@ themesdir = "../.."
 [params]
 site_theme = "orange"
 site_layout = "row"
-enable_jumbo = "true"
+enable_jumbo = "false"
 # about_logo = "/img/hugocast.png"
 copyright_notice = "Copyright 2016 [Matt Stratton](https://www.mattstrattion.io)"
 itunes_subscribe = "http://itunes.apple.com/us/podcast/arrested-devops/id773888088?mt=2&uo=4&at=11lsCi"

diff --git a/exampleSite/content/episode/april.md b/exampleSite/content/episode/april.md
@@ -15,7 +15,7 @@ podcast_file = "arrested-devops-podcast-episode053.mp3"
 podcast_bytes = ""
 tags = []
 title = "April Fools"
-youtube = ""
+youtube = "X56Bt2zDNyA"
 
 +++
 

diff --git a/layouts/episode/single.html b/layouts/episode/single.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 
   <div class="row">
-    <div class="col-md-12">
+    <div class="col">
       <h1>{{ title .Title }}</h1>
       <small>Posted on {{ dateFormat "Monday, Jan 2, 2006" .Date }}</small>
     </div>
@@ -43,21 +43,33 @@ <h1>{{ title .Title }}</h1>
 
     <!-- end square row -->
     {{ end }}
-  <div class="row">
-    <div class="col-md-12 player_row">
-      <audio src="{{ .Site.Params.media_prefix }}{{ .Params.podcast_file }}" preload="auto"/>
+    {{- with .Params.podcast_file -}}
+      <div class="row">
+        <div class="col-md-12 player_row">
+          <audio src="{{ $.Site.Params.media_prefix }}{{ . }}" preload="auto"/>
+        </div>
+      </div>
+    {{- end -}}
+  {{- with .Params.youtube -}}
+    <div class = "row youtube_row">
+      <div class = "col">
+        <div class="embed-responsive embed-responsive-16by9">
+          <iframe class="embed-responsive-item" src="//www.youtube.com/embed/{{ . }}" allowfullscreen></iframe>
+        </div>
+      </div>
     </div>
-  </div>
+  {{- end -}}
+
   <div class="row">
-    <div class="col-md-12">
+    <div class="col">
       <h2>Show Notes</h2>
       {{ .Content }}
     </div>
   </div>
 
   {{ with .Params.guests }}
         <div class="row">
-          <div class="col-md-12">
+          <div class="col">
             <h2>Guests</h2>
           </div>
         </div>