Add gist embedding for code snippets
This commit is contained in:
parent
020f67fd30
commit
0b12d81b59
|
@ -12,6 +12,7 @@ g.task 'vendor-scripts', =>
|
|||
g.js [
|
||||
'vendor/bower/jquery/dist/jquery.js',
|
||||
'vendor/bower/bootstrap-sass/assets/javascripts/bootstrap/collapse.js',
|
||||
'scripts/vendor/github-cards.js'
|
||||
'scripts/vendor/gist-embed.js',
|
||||
'scripts/vendor/github-cards.js',
|
||||
'scripts/vendor/tweets.js'
|
||||
], 'vendor.js'
|
||||
|
|
199
scripts/vendor/gist-embed.js
vendored
Normal file
199
scripts/vendor/gist-embed.js
vendored
Normal file
|
@ -0,0 +1,199 @@
|
|||
/*
|
||||
* author: Blair Vanderhoof
|
||||
* https://github.com/blairvanderhoof/gist-embed
|
||||
* version 2.4
|
||||
*/
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
function getLineNumbers(lineRangeString) {
|
||||
var lineNumbers = [], range, lineNumberSections;
|
||||
|
||||
if (typeof lineRangeString === 'number') {
|
||||
lineNumbers.push(lineRangeString);
|
||||
} else {
|
||||
lineNumberSections = lineRangeString.split(',');
|
||||
|
||||
for (var i = 0; i < lineNumberSections.length; i++) {
|
||||
range = lineNumberSections[i].split('-');
|
||||
if (range.length === 2) {
|
||||
for (var j = parseInt(range[0], 10); j <= range[1]; j++) {
|
||||
lineNumbers.push(j);
|
||||
}
|
||||
} else if (range.length === 1) {
|
||||
lineNumbers.push(parseInt(range[0], 10));
|
||||
}
|
||||
}
|
||||
}
|
||||
return lineNumbers;
|
||||
}
|
||||
|
||||
$.fn.gist = function() {
|
||||
return this.each(function() {
|
||||
var $elem = $(this),
|
||||
id,
|
||||
url,
|
||||
file,
|
||||
lines,
|
||||
loading,
|
||||
highlightLines,
|
||||
hideFooterOption,
|
||||
hideLineNumbersOption,
|
||||
showLoading,
|
||||
showSpinner,
|
||||
data = {};
|
||||
|
||||
// make block level so loading text shows properly
|
||||
$elem.css('display', 'block');
|
||||
|
||||
id = $elem.data('gist-id') || '';
|
||||
file = $elem.data('gist-file');
|
||||
hideFooterOption = $elem.data('gist-hide-footer') === true;
|
||||
hideLineNumbersOption = $elem.data('gist-hide-line-numbers') === true;
|
||||
lines = $elem.data('gist-line');
|
||||
highlightLines = $elem.data('gist-highlight-line');
|
||||
showSpinner = $elem.data('gist-show-spinner') === true;
|
||||
if (showSpinner) {
|
||||
showLoading = false;
|
||||
} else {
|
||||
showLoading = $elem.data('gist-show-loading') !== undefined ?
|
||||
$elem.data('gist-show-loading') : true;
|
||||
}
|
||||
|
||||
if (file) {
|
||||
data.file = file;
|
||||
}
|
||||
|
||||
// if the id doesn't exist, then ignore the code block
|
||||
if (!id) {
|
||||
return false;
|
||||
}
|
||||
|
||||
url = 'https://gist.github.com/' + id + '.json';
|
||||
loading = 'Loading gist ' + url + (data.file ? ', file: ' + data.file : '') + '...';
|
||||
|
||||
// loading
|
||||
if (showLoading) {
|
||||
$elem.html(loading);
|
||||
}
|
||||
|
||||
// loading spinner
|
||||
if (showSpinner) {
|
||||
$elem.html('<img style="display:block;margin-left:auto;margin-right:auto" alt="' + loading + '" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif">');
|
||||
}
|
||||
|
||||
// request the json version of this gist
|
||||
$.ajax({
|
||||
url: url,
|
||||
data: data,
|
||||
dataType: 'jsonp',
|
||||
timeout: 10000,
|
||||
success: function(response) {
|
||||
var linkTag,
|
||||
head,
|
||||
lineNumbers,
|
||||
highlightLineNumbers,
|
||||
$responseDiv;
|
||||
|
||||
// the html payload is in the div property
|
||||
if (response && response.div) {
|
||||
// github returns /assets/embed-id.css now, but let's be sure about that
|
||||
if (response.stylesheet) {
|
||||
// github passes down html instead of a url for the stylehsheet now
|
||||
// parse off the href
|
||||
if (response.stylesheet.indexOf('<link') === 0) {
|
||||
response.stylesheet =
|
||||
response.stylesheet
|
||||
.replace(/\\/g,'')
|
||||
.match(/href=\"([^\s]*)\"/)[1];
|
||||
} else if (response.stylesheet.indexOf('http') !== 0) {
|
||||
// add leading slash if missing
|
||||
if (response.stylesheet.indexOf('/') !== 0) {
|
||||
response.stylesheet = '/' + response.stylesheet;
|
||||
}
|
||||
response.stylesheet = 'https://gist.github.com' + response.stylesheet;
|
||||
}
|
||||
}
|
||||
|
||||
// add the stylesheet if it does not exist
|
||||
if (response.stylesheet && $('link[href="' + response.stylesheet + '"]').length === 0) {
|
||||
linkTag = document.createElement('link');
|
||||
head = document.getElementsByTagName('head')[0];
|
||||
|
||||
linkTag.type = 'text/css';
|
||||
linkTag.rel = 'stylesheet';
|
||||
linkTag.href = response.stylesheet;
|
||||
head.insertBefore(linkTag, head.firstChild);
|
||||
}
|
||||
|
||||
// refernce to div
|
||||
$responseDiv = $(response.div);
|
||||
|
||||
// remove id for uniqueness constraints
|
||||
$responseDiv.removeAttr('id');
|
||||
|
||||
$elem.html('').append($responseDiv);
|
||||
|
||||
// option to highlight lines
|
||||
if (highlightLines) {
|
||||
highlightLineNumbers = getLineNumbers(highlightLines);
|
||||
|
||||
// we need to set the line-data td to 100% so the highlight expands the whole line
|
||||
$responseDiv.find('td.line-data').css({
|
||||
'width': '100%'
|
||||
});
|
||||
|
||||
// find all .js-file-line tds (actual code lines) that match the highlightLines and add the highlight class
|
||||
$responseDiv.find('.js-file-line').each(function(index) {
|
||||
if ($.inArray(index + 1, highlightLineNumbers) !== -1) {
|
||||
$(this).css({
|
||||
'background-color': 'rgb(255, 255, 204)'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// if user provided a line param, get the line numbers based on the criteria
|
||||
if (lines) {
|
||||
lineNumbers = getLineNumbers(lines);
|
||||
|
||||
// find all trs containing code lines that don't exist in the line param
|
||||
$responseDiv.find('.js-file-line').each(function(index) {
|
||||
if (($.inArray(index + 1, lineNumbers)) === -1) {
|
||||
$(this).parent().remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// option to remove footer
|
||||
if (hideFooterOption) {
|
||||
$responseDiv.find('.gist-meta').remove();
|
||||
|
||||
// present a uniformed border when footer is hidden
|
||||
$responseDiv.find('.gist-data').css('border-bottom', '0px');
|
||||
$responseDiv.find('.gist-file').css('border-bottom', '1px solid #ddd');
|
||||
}
|
||||
|
||||
// option to remove
|
||||
if (hideLineNumbersOption) {
|
||||
$responseDiv.find('.js-line-number').remove();
|
||||
}
|
||||
|
||||
} else {
|
||||
$elem.html('Failed loading gist ' + url);
|
||||
}
|
||||
},
|
||||
error: function(jqXHR, textStatus) {
|
||||
$elem.html('Failed loading gist ' + url + ': ' + textStatus);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
$(function() {
|
||||
// find all elements containing "data-gist-id" attribute.
|
||||
$('[data-gist-id]').gist();
|
||||
});
|
||||
|
||||
})(jQuery);
|
1
scripts/vendor/gist-embed.min.js
vendored
Normal file
1
scripts/vendor/gist-embed.min.js
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
(function(b){function a(d){var c=[],e,g;if(typeof d==="number"){c.push(d)}else{g=d.split(",");for(var h=0;h<g.length;h++){e=g[h].split("-");if(e.length===2){for(var f=parseInt(e[0],10);f<=e[1];f++){c.push(f)}}else{if(e.length===1){c.push(parseInt(e[0],10))}}}}return c}b.fn.gist=function(){return this.each(function(){var e=b(this),d,c,h,m,k,j,f,g,l,i={};e.css("display","block");d=e.data("gist-id")||"";h=e.data("gist-file");j=e.data("gist-hide-footer")===true;f=e.data("gist-hide-line-numbers")===true;m=e.data("gist-line");k=e.data("gist-highlight-line");l=e.data("gist-show-spinner")===true;if(l){g=false}else{g=e.data("gist-show-loading")!==undefined?e.data("gist-show-loading"):true}if(h){i.file=h}if(!d){return false}c="https://gist.github.com/"+d+".json";loading="Loading gist "+c+(i.file?", file: "+i.file:"")+"...";if(g){e.html(loading)}if(l){e.html('<img style="display:block;margin-left:auto;margin-right:auto" alt="'+loading+'" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif">')}b.ajax({url:c,data:i,dataType:"jsonp",timeout:10000,success:function(p){var s,r,o,q,n;if(p&&p.div){if(p.stylesheet){if(p.stylesheet.indexOf("<link")===0){p.stylesheet=p.stylesheet.replace(/\\/g,"").match(/href=\"([^\s]*)\"/)[1]}else{if(p.stylesheet.indexOf("http")!==0){if(p.stylesheet.indexOf("/")!==0){p.stylesheet="/"+p.stylesheet}p.stylesheet="https://gist.github.com"+p.stylesheet}}}if(p.stylesheet&&b('link[href="'+p.stylesheet+'"]').length===0){s=document.createElement("link");r=document.getElementsByTagName("head")[0];s.type="text/css";s.rel="stylesheet";s.href=p.stylesheet;r.insertBefore(s,r.firstChild)}n=b(p.div);n.removeAttr("id");e.html("").append(n);if(k){q=a(k);n.find("td.line-data").css({width:"100%"});n.find(".js-file-line").each(function(t){if(b.inArray(t+1,q)!==-1){b(this).css({"background-color":"rgb(255, 255, 204)"})}})}if(m){o=a(m);n.find(".js-file-line").each(function(t){if((b.inArray(t+1,o))===-1){b(this).parent().remove()}})}if(j){n.find(".gist-meta").remove();n.find(".gist-data").css("border-bottom","0px");n.find(".gist-file").css("border-bottom","1px solid #ddd")}if(f){n.find(".js-line-number").remove()}}else{e.html("Failed loading gist "+c)}},error:function(n,o){e.html("Failed loading gist "+c+": "+o)}})})};b(function(){b("[data-gist-id]").gist()})})(jQuery);
|
|
@ -43,24 +43,7 @@ Here’s an example of it in action:
|
|||
|
||||
You can also define options when calling the command and skip any or all questions. Running the following would bypass all of the questions and create a new file with no interaction or additional steps.
|
||||
|
||||
```
|
||||
drupalvm-generate \
|
||||
--hostname=example.com \
|
||||
--machine-name=example \
|
||||
--ip-address=192.168.88.88 \
|
||||
--cpus=1 \
|
||||
--memory=512 \
|
||||
--webserver=nginx \
|
||||
--domain=example.com \
|
||||
--path=../site \
|
||||
--destination=/var/www/site \
|
||||
--docroot=/var/www/site/drupal \
|
||||
--drupal-version=8 \
|
||||
--build-makefile=no \
|
||||
--install-site=true \
|
||||
--installed-extras=xdebug,xhprof \
|
||||
--force
|
||||
```
|
||||
<code data-gist-id="24e569577ca4b72f049d" data-gist-file="with-options.sh"></code>
|
||||
|
||||
## Where do I get it?
|
||||
|
||||
|
|
3
styles/components/content-types/_blog-post.sass
Normal file
3
styles/components/content-types/_blog-post.sass
Normal file
|
@ -0,0 +1,3 @@
|
|||
code[data-gist-id]
|
||||
background: transparent
|
||||
padding: 0
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
@import 'base'
|
||||
@import 'components/badges'
|
||||
@import 'components/content-types/blog-post'
|
||||
@import 'components/footer'
|
||||
@import 'components/meetups'
|
||||
@import 'components/testimonials'
|
||||
|
|
Reference in a new issue