Add yt shortcode

config.toml

@@ -95,6 +95,7 @@ watch = true
 	hrefTargetBlank = true
   angledQuotes = false
   latexDashes = true
+  extensions = ["hardLineBreak"]
 
 [taxonomies]
   tag = "tags"

content/test.md

@@ -0,0 +1,8 @@
+---
+title: Testing Shortcodes
+date: 2017-03-19
+description: Just a testing page to show the team.
+draft: false
+---
+
+{{< yt id="n7_y4jiQCIo" description="A video of breakdancing power moves" >}}

layouts/shortcodes/yt.html

@@ -0,0 +1,11 @@
+<div class="video-wrapper" data-streaming="youtube" data-videoid="{{.Get "id"}}" >
+	<i class="icon-video-play-button shortcode"></i>
+	{{if (.Get "thumbnail")}}
+	<div style="background-image:url(/images/videothumbnails/{{.Get "thumbnail"}})" alt="YouTube Thumbnail" class="video-thumbnail"></div>
+	{{else}}
+	<div style="background-image:url(//img.youtube.com/vi/{{.Get "id"}}/0.jpg)" alt="YouTube Thumbnail" class="video-thumbnail"></div>
+	{{end}}
+</div>
+{{ if (.Get "description") }}
+<div class="video-description">{{ .Get "description" | markdownify }}</div>
+{{ end }}

pipeline/js/scripts/video-thumbnail-switch.js

@@ -0,0 +1,34 @@
+(function() {
+  let allVids = document.querySelectorAll('.video-thumbnail,.icon-video-play-button.shortcode');
+  if (allVids.length > 0) {
+    for (var i = 0; i < allVids.length; i++) {
+      allVids[i].addEventListener('click', vidSwitch, false);
+    }
+  }
+  function vidSwitch(evt) {
+    var vidItem = evt.target,
+      vidParent = vidItem.parentNode,
+      clickedClass = vidItem.className,
+      iframe = document.createElement('iframe'),
+      //assign theService to the provider added, but set to lower case to control for youtube, YouTube, etc.
+      theService = vidItem.parentNode.dataset.streaming.toLowerCase(),
+      theVideoId = vidItem.parentNode.dataset.videoid;
+    if (theService == "youtube") {
+      console.log(theVideoId);
+      iframe.setAttribute('src', '//www.youtube.com/embed/' + theVideoId + '?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=1&showinfo=0&rel=0&vq=hd1080');
+      console.log(iframe);
+    } else if (theService == "vimeo") {
+      iframe.setAttribute('src', '//player.vimeo.com/video/' + theVideoId + '?autoplay=1&title=0&byline=0&portrait=0');
+    } else {
+      console.log("If you are getting this error in the console, it is probably a sign that the youtube or vimeo api has changed.");
+    }
+    //The parameters for the video embed are set to show video controls but disallow related information at the video's end.
+    iframe.setAttribute('frameborder', '0');
+    iframe.setAttribute('class', 'video-iframe');
+    if (clickedClass === "video-thumbnail" || clickedClass === "icon-video-play-button shortcode") {
+      vidParent.querySelector('.icon-video-play-button').remove();
+      vidParent.querySelector('.video-thumbnail').remove();
+      vidParent.appendChild(iframe);
+    }
+  }
+})();

pipeline/scss/base/_fontello.scss

@@ -109,5 +109,6 @@
 .icon-thumbs-down:before { content: '\e810'; } /* '' */
 .icon-thumbs-up:before { content: '\e80f'; } /* '' */
 .icon-twitter:before { content: '\f099'; } /* '' */
+.icon-video-play-button:before { content: '\f16a'; } /* '' */
 .icon-wercker:before { content: '\e809'; } /* '' */
 .icon-windows:before { content: '\f17a'; } /* '' */

pipeline/scss/components/_video.scss

@@ -0,0 +1,104 @@
+//From the awesome Chris Coyier here: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
+
+.video-wrapper,
+.iframe-wrapper {
+  transition: all .3s ease-in-out;
+  position: relative;
+  padding-bottom: 56.25%;
+  /* 16:9 */
+  padding-top: 0px;
+  height: 0;
+  clear: both;
+  cursor: pointer;
+  margin-bottom: 1em;
+}
+
+.iframe-wrapper,
+iframe[src*="soundcloud.com"] {
+  @include card(2);
+}
+
+.video-wrapper {
+  &:hover,
+  &:active,
+  &:focus {
+    filter: grayscale(0%);
+    cursor: pointer;
+  }
+}
+
+.video-wrapper iframe,
+.iframe-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin-bottom: 0em;
+}
+
+.video-thumbnail {
+  transition: all .3s ease-in-out;
+  width: 100%;
+  min-height: 100%;
+  clear: both;
+  display: block;
+  z-index: 1;
+  padding-bottom: 56.25%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  cursor: pointer;
+  position: relative;
+   filter: grayscale(100%);
+  &:hover {
+    filter: grayscale(0%);
+  }
+}
+
+.icon-video-play-button.shortcode {
+  font-family: "fontello";
+  font-size: 3.8em;
+  color: #bb0000;
+  border-radius: 30px;
+  z-index: 2;
+  @include centerer;
+  &:hover + .video-thumbnail {
+    filter: grayscale(0%);
+  }
+}
+
+.video-wrapper:after {
+  display: block;
+  width: 100%;
+  margin-bottom: 1em;
+}
+
+.video-wrapper {
+  + h3,
+  + h4,
+  + p {
+    margin-top: 1em;
+  }
+}
+
+.video-wrapper + h3 {
+  margin-bottom: 0px;
+  margin-top: .5em;
+}
+
+h3 + .video-wrapper, h4 + .video-wrapper {
+  margin-top:1em;
+}
+
+.video-description {
+  width: 100%;
+  text-align: center;
+  font-size: .8em;
+  margin-top: 0px;
+  color: lighten($base-font-color, 15%);
+  > p {
+    margin-top: 1em;
+    font-style: italic;
+  }
+}

pipeline/scss/style.scss

@@ -1,6 +1,5 @@
 @import 'bourbon/bourbon';
 // @import 'vendor/flexboxgrid';
-
 //variables and abstracts
 @import 'variables';
 @import 'abstracts/mixins';
@@ -35,21 +34,19 @@
 @import 'components/tables';
 @import 'components/shortcode-examples';
 @import 'components/gopher';
+@import 'components/video';
 
 //vendor
 @import 'vendor/featherlight';
 @import 'vendor/animatecss-truncated';
-
 //major layout parts/chrome
 @import 'layout/site-header';
 @import 'layout/site-navigation';
 @import 'layout/site-content';
 @import 'layout/showcase';
 @import 'layout/site-footer';
-
 //styles for individual pages
 // @import 'pages/homepage';
 @import 'pages/homepage';
 @import 'pages/commands';
-
-@import 'temp';
+@import 'temp';

static/fonts/fontello/fontello.svg

@@ -92,12 +92,16 @@
 
 <glyph glyph-name="html" unicode="&#xf13b;" d="M631 517l9 98h-494l26-298h342l-12-128-110-29-110 29-7 78h-97l12-155 202-55h2v0l200 55 28 304h-359l-8 101h376z m-631 262h786l-72-803-322-90-321 90z" horiz-adv-x="785.7" />
 
+<glyph glyph-name="video-play-button" unicode="&#xf16a;" d="M397 221l270 139-270 141v-280z m103 481q94 0 181-3t128-5l41-2q0 0 9-1t13-2 13-2 16-5 16-7 17-11 16-15q4-3 9-10t16-33 15-56q4-36 7-76t3-64v-98q1-81-10-162-4-30-14-55t-18-35l-8-9q-7-8-16-15t-17-10-16-7-16-5-13-2-13-2-9-1q-140-11-350-11-115 2-201 4t-111 4l-28 3-20 2q-20 3-30 5t-29 12-31 23q-4 3-9 10t-16 33-15 56q-4 36-7 76t-3 64v98q-1 81 10 162 4 31 14 55t18 35l8 9q8 9 16 15t17 11 16 7 16 5 13 2 13 2 9 1q140 10 350 10z" horiz-adv-x="1000" />
+
 <glyph glyph-name="apple" unicode="&#xf179;" d="M777 172q-21-70-68-139-72-110-144-110-27 0-78 18-48 18-84 18-34 0-79-19-45-19-74-19-85 0-168 145-82 146-82 281 0 127 63 208 63 81 159 81 40 0 98-17 58-17 77-17 25 0 80 19 57 19 97 19 66 0 119-36 29-20 58-56-44-37-64-66-36-52-36-115 0-69 38-125t88-70z m-209 655q0-34-17-76-16-42-52-77-30-30-60-40-20-7-58-10 2 83 44 143 41 60 139 83 1-2 2-6t1-6q0-2 0-6t1-5z" horiz-adv-x="785.7" />
 
 <glyph glyph-name="windows" unicode="&#xf17a;" d="M381 289v-364l-381 53v311h381z m0 414v-367h-381v315z m548-414v-439l-507 70v369h507z m0 490v-443h-507v373z" horiz-adv-x="928.6" />
 
 <glyph glyph-name="linux" unicode="&#xf17c;" d="M370 621q-6-1-9-6t-4-5q-3-1-3 2 0 7 10 9h6z m49-8q-3-1-7 4t-10 2q14 6 18-1 2-3-1-5z m-196-238q-3 0-4-2t-2-7-3-8-6-7q-5-6 0-7 2 0 7 4t7 10q0 2 1 4t1 4 1 2 0 2v2t-1 1-1 2z m477-201q0 10-31 24 2 8 4 15t3 15 2 12 0 12 0 11-2 12-3 12-2 14-4 14q-5 27-26 58t-40 42q13-11 32-47 48-90 30-155-6-22-28-23-17-2-21 10t-5 47-6 60q-5 21-11 38t-11 25-9 14-7 8-4 4q-8 35-17 58t-17 31-13 19-8 22q-3 12 3 30t2 27-24 14q-9 2-25 10t-20 9q-4 1-6 15t4 28 20 15q21 2 29-16t2-33q-6-10-1-15t17 0q7 2 7 20v21q-3 17-8 28t-11 17-13 8-15 4q-60-4-50-74 0-9-1-9-5 5-16 6t-19 0-8 3q0 31-9 50t-25 19q-15 0-23-16t-10-33q0-8 2-20t8-21 8-8q6 2 9 8 2 5-4 4-4 0-8 8t-6 19q0 12 5 21t19 8q10 0 15-12t6-22-1-12q-12-9-17-16-5-7-16-13t-11-7q-7-8-9-16t4-10q8-4 14-10t9-11 11-7 19-4q27-1 57 8 1 1 13 4t19 6 17 7 12 10q5 8 11 5 2-2 3-5t-1-7-10-5q-11-3-31-12t-25-11q-25-11-40-13-14-3-44 1-5 1-5-1t10-10q14-13 37-13 10 1 20 4t20 8 19 10 17 9 13 7 10 1 5-6q0-1-1-2t-2-3-3-3-5-2-5-3-5-3-6-2q-15-8-37-25t-38-24-27 0q-12 6-35 41-12 17-14 12-1-2-1-6 0-14-8-31t-16-31-12-33 6-35q-13-3-35-50t-26-79q-1-10-1-38t-3-33q-4-14-16-2-18 17-20 53-1 15 2 31 2 10-1 10-1-1-2-3-20-36 6-92 3-7 14-16t13-11q11-13 58-51t52-42q9-9 10-22t-8-24-25-13q4-8 16-24t15-31 4-39q26 13 4 51-2 5-6 9t-5 7-1 3q2 3 7 6t11-2q26-29 93-20 74 9 99 49 13 21 19 17 6-4 5-30 0-13-13-51-5-13-3-21t14-8q1 10 8 43t7 50q1 12-3 41t-5 54 13 39q9 10 29 10 0 21 19 30t40 6 34-13z m-351 462q2 9-1 17t-6 8q-5 1-5-4 1-3 2-3 6 0 4-9-1-11 5-11 1 0 1 2z m234-110q-1 4-3 6t-8 3-8 3q-3 2-5 5t-4 4-3 4-2 2-3-1q-7-9 4-24t22-18q5 0 8 5t2 11z m-99 119q0 6-3 11t-6 7-5 1q-3 0-5-1t0-2 3-2q8-2 10-17 0-2 5 1 1 1 1 2z m30 130q0 1-1 3t-5 3-6 4q-8 8-13 8-5 0-7-4t0-7 0-7q-1-3-4-6t-3-5 2-5q2-2 4 0t6 5 9 5q0 1 5 1t8 1 5 4z m315-749q11-6 18-13t6-14-1-12-9-13-13-10-17-11-17-9-18-9-15-7q-21-11-48-31t-42-36q-9-9-38-11t-50 8q-10 5-16 13t-9 15-13 11-26 5q-24 0-72 0-11 0-32 0t-32-2q-25 0-45-8t-30-17-24-16-30-6q-16 0-62 17t-81 24q-11 2-29 5t-28 5-22 6-18 8-10 11q-5 12 4 37t10 30q1 9-2 23t-6 23-2 21 6 15q7 6 31 8t34 6q17 10 23 20t7 28q12-41-18-59-18-11-46-8-19 1-24-6-7-8 3-32 1-3 4-10t5-10 2-9 1-13q0-8-9-27t-8-27q1-9 20-14 12-4 47-11t56-11q13-3 41-12t46-13 31-2q24 3 36 15t13 27-4 33-11 29-11 20q-67 106-94 135-38 42-63 23-6-5-9 8-1 9-1 21 1 16 6 29t13 26 13 24q4 12 14 40t17 43 17 35 21 30q62 79 70 108-7 63-9 173-1 51 13 85t59 58q22 12 58 12 30 1 59-7t50-24q32-23 51-67t17-83q-3-53 16-119 19-63 75-122 30-33 55-91t33-106q5-28 3-48t-7-30-11-13q-5-1-13-10t-15-20-23-19-34-8q-10 1-17 3t-13 8-7 8-7 12-5 11q-12 20-23 16t-15-27 4-54q11-39 0-109-5-36 10-56t41-19 47 20q33 28 50 37t58 24q30 10 43 20t10 20-14 16-28 13q-19 6-28 27t-8 40 8 27q1-18 5-32t8-23 11-15 12-11 12-7 9-6z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="bug" unicode="&#xf188;" d="M911 314q0-14-11-25t-25-10h-125q0-96-37-162l116-117q10-11 10-25t-10-25q-10-11-25-11t-25 11l-111 110q-3-3-8-7t-24-16-36-21-46-16-54-7v500h-71v-500q-29 0-57 7t-49 19-36 22-25 18l-8 8-102-116q-11-12-27-12-13 0-24 9-11 10-11 25t8 26l113 127q-32 63-32 153h-125q-15 0-25 10t-11 25 11 25 25 11h125v164l-97 97q-11 10-11 25t11 25 25 10 25-10l97-97h471l96 97q11 10 25 10t26-10 10-25-10-25l-97-97v-164h125q15 0 25-11t11-25z m-268 322h-357q0 74 52 126t126 52 127-52 52-126z" horiz-adv-x="928.6" />
+
 <glyph glyph-name="file-pdf" unicode="&#xf1c1;" d="M819 638q16-16 27-42t11-50v-642q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h500q22 0 49-11t42-27z m-248 136v-210h210q-5 17-12 23l-175 175q-6 7-23 12z m215-853v572h-232q-23 0-38 16t-16 37v233h-429v-858h715z m-287 331q18-14 47-31 33 4 65 4 82 0 99-27 9-13 1-29 0-1-1-1l-1-2v0q-3-21-39-21-27 0-64 11t-73 29q-123-13-219-46-85-146-135-146-8 0-15 4l-14 7q0 0-3 2-6 6-4 20 5 23 32 51t73 54q8 5 13-3 1-1 1-2 29 47 60 110 38 76 58 146-13 46-17 89t4 71q6 22 23 22h12q13 0 20-8 10-12 5-38-1-3-2-4 0-2 0-5v-17q-1-68-8-107 31-91 82-133z m-321-229q29 13 76 88-29-22-49-47t-27-41z m222 513q-9-23-2-73 1 4 4 24 0 2 4 24 1 3 3 5-1 0-1 1-1 1-1 2 0 12-7 20 0-1 0-1v-2z m-70-368q76 30 159 45-1 0-7 5t-9 8q-43 37-71 98-15-48-46-110-17-31-26-46z m361 9q-13 13-78 13 42-16 69-16 8 0 10 1 0 0-1 2z" horiz-adv-x="857.1" />
 
 <glyph glyph-name="git" unicode="&#xf1d3;" d="M332 5q0 56-92 56-88 0-88-58 0-57 96-57 84 0 84 59z m-33 422q0 34-17 56t-49 23q-69 0-69-81 0-75 69-75 66 0 66 77z m150 180v-112q-20-7-44-13 9-24 9-47 0-70-41-120t-110-63q-22-5-33-15t-11-33q0-17 13-28t32-18 44-12 48-15 44-21 32-35 13-55q0-170-203-170-38 0-72 7t-65 23-49 46-18 71q0 92 102 125v3q-38 22-38 70 0 61 35 76v3q-40 13-66 60t-27 93q0 77 53 129t131 51q54 0 100-26 54 0 121 26z m178-491h-124q2 25 2 74v340q0 53-2 72h124q-3-19-3-69v-343q0-49 3-74z m335 124v-110q-40-22-97-22-35 0-60 12t-39 27-22 44-10 51-2 58v196h1v2q-4 0-11 0t-10 1q-12 0-33-3v106h54v42q0 30-4 50h127q-3-23-3-92h95v-106q-8 0-24 1t-24 1h-47v-204q0-73 48-73 34 0 61 19z m-321 528q0-32-22-57t-54-24q-32 0-54 24t-23 57q0 33 22 57t55 25q33 0 54-25t22-57z" horiz-adv-x="1000" />