From 7b5bed4b60309993b3a0930f96e9c93bc2df4b2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Sko=C5=99epa?= <jakub@skorepa.info>
Date: Mon, 4 Apr 2016 23:14:01 +0200
Subject: [PATCH] Youtube video in image tag
Fixes #31
---
.jshintrc | 2 +-
sitegin/markdown.js | 113 ++++++++++++++++++++++++++----------------
theme/sass/style.scss | 25 +++++++++-
3 files changed, 95 insertions(+), 45 deletions(-)
diff --git a/.jshintrc b/.jshintrc
index f85dbcc8..cb1d5355 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -14,7 +14,7 @@
"maxparams" : 5, // {int} Max number of formal params allowed per function
"maxdepth" : 5, // {int} Max depth of nested blocks (within functions)
"maxstatements" : 40, // {int} Max number statements per function
- "maxcomplexity" : 10, // {int} Max cyclomatic complexity per function
+ "maxcomplexity" : 20, // {int} Max cyclomatic complexity per function
"maxlen" : 120, // {int} Max number of characters per line
// Relaxing
diff --git a/sitegin/markdown.js b/sitegin/markdown.js
index 041d39d6..99daeef2 100644
--- a/sitegin/markdown.js
+++ b/sitegin/markdown.js
@@ -30,6 +30,75 @@ renderer.paragraph = function(text) {
else return '<p>'+text+'</p>\n';
}
+var renderImage = function(href, title, text, curFilename) {
+ var parseParams = function(params) {
+ for(let param of params.split(',')) {
+ param = param.trim();
+ // 123x or x123 or 123x123
+ if(param.match(/[0-9]*x[0-9]+/) || param.match(/[0-9]+x[0-9]*/)) {
+ options.size = param.split('x');
+ if(options.size !== undefined) {
+ if(options.size[0].length > 0) {
+ options.width = options.size[0];
+ }
+ if(options.size.length > 1 && options.size[1].length > 0) {
+ options.height = options.size[1];
+ }
+ }
+ } else if(param == 'nolightbox') {
+ options.nolightbox = true;
+ }
+ }
+ }
+
+ href = href.split(path.sep).join('/');
+ href = href.split(' =');
+ var params = href[1];
+ var options = {};
+
+ if(params) {
+ parseParams(params);
+ }
+ href = href[0];
+ if(href.match('//(www.)?youtube.com/watch') || href.match('//youtu.be/')) {
+ var id;
+ if(href.match('//youtube.com/watch')) {
+ id = href.substr(href.indexOf('v=')+2).split('&')[0];
+ } else {
+ id = href.substr(href.indexOf('.be/')+4).split('?')[0];
+ }
+
+ let out = '<div class="video-container"><div class="videodiv">';
+ out += '<iframe src="https://www.youtube.com/embed/'+id+'" frameborder="0" allowfullscreen></iframe>'
+ out += '</div></div>'
+
+ return out;
+ } else {
+ var rel = path.relative(process.cwd(),path.resolve(curFilename,href));
+
+ var out = '<img src="' + href + '" alt="' + text + '"';
+ if(options.width) {
+ out += ' width="' + options.width + '"';
+ }
+ if(options.height) {
+ out += ' height="' + options.height + '"';
+ }
+ if (title) {
+ out += ' title="' + title + '"';
+ }
+
+ out += '>';
+ if(!options.nolightbox) { // if lightbox
+ var a = '<a href="'+href+'"';
+ a += ' data-lightbox="group"';
+ a += ' data-title="' + text + '"';
+ a += '>';
+ out = a+out+'</a>';
+ }
+ return out;
+ }
+}
+
renderer._link = renderer.link;
marked.setOptions({
@@ -60,49 +129,7 @@ module.exports = function(obj) {
obj.pages.forEach(function(article) {
renderer.image = function(href, title, text) {
- href = href.split(path.sep).join('/');
- href = href.split(' =');
- var params = href[1];
- var options = {};
- if(params) {
- for(let param of params.split(',')) {
- param = param.trim();
- // 123x or x123 or 123x123
- if(param.match(/[0-9]*x[0-9]+/) || param.match(/[0-9]+x[0-9]*/)) {
- options.size = param.split('x');
- } else if(param == 'nolightbox') {
- options.nolightbox = true;
- }
- }
- }
- href = href[0];
- var rel = path.relative(process.cwd(),path.resolve(article.filename,href));
-
- var out = '<img src="' + href + '" alt="' + text + '"';
- if(options.size !== undefined) {
- var size = options.size;
- if(size[0].length > 0) {
- out += ' width="' + size[0] + '"';
- }
- if(size.length > 1 && size[1].length > 0) {
- out += ' height="' + size[1] + '"';
- }
- }
- if (title) {
- out += ' title="' + title + '"';
- }
-
- out += '>';
- if(!options.nolightbox) { // if lightbox
- var full = href;
- var a = '<a href="'+full+'"';
- a += ' data-lightbox="group"';
- a += ' data-title="' + text + '"';
- a += '>';
- out = a+out+'</a>';
- }
-
- return out;
+ return renderImage(href, title, text, article.filename);
};
article.content = marked(article.content, {
diff --git a/theme/sass/style.scss b/theme/sass/style.scss
index 2e64894e..0417327a 100644
--- a/theme/sass/style.scss
+++ b/theme/sass/style.scss
@@ -219,8 +219,8 @@ nav.subnav li {
padding: 0rem 1rem 0rem 0rem;
text-align: justify;
display: block;
- max-width: $p-max-width;
margin: 0 auto;
+ max-width: $p-max-width;
}
table {
max-width: $p-max-width;
@@ -317,6 +317,29 @@ nav.subnav li {
min-width: 100%;
}
}
+
+ .video-container {
+ max-width: $p-max-width;
+ margin: 0 auto;
+ height: initial;
+ padding: 0;
+ }
+
+ .videodiv {
+ width:100%;
+ margin:0 auto;
+ position: relative;
+ padding-bottom: 56.25%; /* 16/9 ratio */
+ height: 0;
+ overflow: hidden;
+ iframe, object, embed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
}
@import "search.scss"
--
GitLab