jekyll-sharp-styleguide 0.1.0

data/assets/img/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/assets/img/favicons/mstile-150x150.png"/>
+            <TileColor>#00aba9</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

data/assets/img/favicons/safari-pinned-tab.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="800.000000pt" height="800.000000pt" viewBox="0 0 800.000000 800.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M560 7976 c-103 -31 -141 -49 -220 -101 -140 -93 -263 -252 -314
+-407 l-26 -77 0 -3386 0 -3386 26 -77 c38 -114 96 -206 193 -303 129 -128 267
+-200 441 -228 91 -15 6589 -15 6680 0 174 28 312 100 441 228 97 97 155 189
+193 303 l26 77 0 3386 0 3386 -26 77 c-38 114 -96 206 -193 303 -97 97 -186
+154 -306 196 l-80 28 -3380 2 -3380 2 -75 -23z m4385 -1225 c272 -61 502 -178
+715 -363 230 -199 429 -502 529 -804 170 -510 110 -1079 -160 -1529 -138 -230
+-380 -458 -602 -566 -37 -19 -65 -39 -63 -45 2 -6 266 -455 585 -998 320 -543
+581 -989 581 -991 0 -3 -249 -5 -553 -5 l-554 0 -529 890 -529 890 -502 0
+-503 0 0 -890 0 -890 -505 0 -505 0 0 2665 0 2666 1248 -4 1247 -3 100 -23z"/>
+<path d="M3360 5010 l0 -860 668 0 c715 0 724 1 825 51 209 105 370 368 407
+663 16 123 8 282 -20 396 -53 219 -209 431 -395 535 -129 72 -97 69 -827 73
+l-658 3 0 -861z"/>
+</g>
+</svg>

data/assets/img/favicons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/assets/img/favicons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/img/favicons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

data/assets/js/copycode.js

@@ -0,0 +1,49 @@
+// get the list of all highlight code blocks
+const highlights = document.querySelectorAll('pre');
+
+highlights.forEach((pre) => {
+	// create the copy button
+	const copy = document.createElement('button');
+	copy.innerHTML = 'Copy';
+	// add the event listener to each click
+	copy.addEventListener('click', handleCopyClick);
+	// append the copy button to each code block
+	pre.append(copy);
+});
+
+const copyToClipboard = (str) => {
+	const el = document.createElement('textarea'); // Create a <textarea> element
+	el.value = str; // Set its value to the string that you want copied
+	el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof
+	el.style.position = 'absolute';
+	el.style.left = '-9999px'; // Move outside the screen to make it invisible
+	document.body.appendChild(el); // Append the <textarea> element to the HTML document
+	const selected =
+		document.getSelection().rangeCount > 0 // Check if there is any content selected previously
+			? document.getSelection().getRangeAt(0) // Store selection if found
+			: false; // Mark as false to know no selection existed before
+	el.select(); // Select the <textarea> content
+	document.execCommand('copy'); // Copy - only works as a result of a user action (e.g. click events)
+	document.body.removeChild(el); // Remove the <textarea> element
+	if (selected) {
+		// If a selection existed before copying
+		document.getSelection().removeAllRanges(); // Unselect everything on the HTML document
+		document.getSelection().addRange(selected); // Restore the original selection
+	}
+};
+
+function handleCopyClick(evt) {
+	// get the children of the parent element
+	const {children} = evt.target.parentElement;
+	// grab the first element (we append the copy button on afterwards, so the first will be the code element)
+	// destructure the innerText from the code block
+	const {innerText} = Array.from(children)[0];
+	// copy all of the code to the clipboard
+	copyToClipboard(innerText);
+	// Change the button's text to "Copied"
+	this.textContent = 'Copied';
+	// Change back the button text to "Copy" after 2 sec
+	setTimeout(() => {
+		this.textContent = 'Copy';
+	}, 2000);
+}

data/assets/js/loader.js

@@ -0,0 +1,11 @@
+document.body.addEventListener("touchmove", preventDefault, { passive: false });
+window.addEventListener("load", function () {
+	//document.getElementById("loader").style.display = "none";
+	$("#loader").fadeOut(700);
+	document.body.removeEventListener("touchmove", preventDefault, {
+		passive: false,
+	});
+});
+function preventDefault(e) {
+	e.preventDefault();
+}

data/assets/js/main.js

@@ -0,0 +1,60 @@
+jQuery(document).ready(function ($) {
+// ==================================================================================
+
+    // Creates an image lightbox
+    $(function () {
+        var lightbox = $("#lightbox");
+        lightbox.hide();
+        $(".allow-lightbox").click(function () {
+            var src = $(this).attr("src");
+            $("body").addClass("lightbox-opened");
+            lightbox.fadeIn().css("display", "flex");
+            lightbox.find("img").attr("src", src);
+        });
+        $("#lightbox .close").click(function () {
+            lightbox.fadeOut();
+            $("body").removeClass("lightbox-opened");
+        });
+    });
+
+    // Select field placeholder color
+    $(function(){
+        function select_placeholder() {
+        $("select").each(function () {
+            var select_val = $(this).val();
+            if (select_val != "") {
+                $(this).removeClass("select-placeholder");
+            } else {
+                $(this).addClass("select-placeholder");
+            }
+            });
+        }
+        $(document).on("change", "select", function () {
+            select_placeholder();
+        });
+        select_placeholder();
+    });
+
+    // Initialize tooltips on icons
+    $(function (){
+        $('.icons-list i').simpletooltip({
+            color: 'white',
+        });
+    });
+
+    // Make anchor headings hash in url
+    $(function () {
+        $("h2, h3, h4").each(function () {
+            var str = $(this).text().toLowerCase().replace(/\s+/g, "-");
+            //str.toString().replace(/\s+/g, "-");
+            $(this).attr("id", str);
+            $(this).prepend('<a class="anchor"><i class="feather-link"></i></a>');
+        });
+        $(".anchor").click(function (e) {
+            window.location.hash = $(this).parent().attr("id");
+            e.preventDefault();
+        });
+    });
+
+// ==================================================================================
+});

data/assets/js/tooltip.js

@@ -0,0 +1,492 @@
+/**
+ * Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily
+ * v1.3.0
+ *
+ * 2014 Carlos Sanz Garcia
+ * Distributed under GPL-3.0 license
+ *
+ * http://not-only-code.github.com/Simpletooltip
+ */
+
+ (function (a) {
+	'use strict';
+	var b,
+		c = null;
+	b = function (a) {
+		if (a === undefined || typeof a !== 'object') {
+			return;
+		}
+		this.$el = a.$el || null;
+		this.$tooltip = null;
+		this.$arrow = null;
+		this.margins = {
+			border: 6,
+			top: 15,
+			right: 15,
+			bottom: 15,
+			left: 15,
+		};
+		this.settings = {};
+		this.themes = {};
+		if (
+			!this.isJqueryObject(this.$el) ||
+			this.$el
+				.data()
+				.hasOwnProperty('simpletooltipInstanced')
+		) {
+			return;
+		}
+		this.title = this.$el.attr('title');
+		if (this.title === undefined || !this.title.length) {
+			return;
+		}
+		this.$el.attr('title', '');
+		this.setOptions(a.settings);
+		this.setTooltip();
+		this.initialize();
+		this.$el.data('simpletooltip-instanced', '1');
+		return this;
+	};
+	b.defaults = {
+		position: 'top',
+		color: '#DDDDDD',
+		background_color: '#222222',
+		border_width: 0,
+		arrow_width: 6,
+		padding: {
+			width: 8,
+			height: 6,
+		},
+		max_width: 200,
+		fade: true,
+	};
+	b.themes = {
+		dark: {
+			color: '#CCCCCC',
+			background_color: '#222222',
+			border_color: '#111111',
+			border_width: 4,
+		},
+		gray: {
+			color: '#434343',
+			background_color: '#DCDCDC',
+			border_color: '#BABABA',
+			border_width: 4,
+		},
+		white: {
+			color: '#6D7988',
+			background_color: '#CCDEF2',
+			border_color: '#FFFFFF',
+			border_width: 4,
+		},
+		blue: {
+			color: '#FFFFFF',
+			background_color: '#0088BE',
+			border_color: '#00669C',
+			border_width: 4,
+		},
+	};
+	b.templates = {
+		tooltip: '<div class="simple-tooltip"></div>',
+		arrow: '<span class="arrow">&nbsp;</span>',
+	};
+	b.prototype.isJqueryObject = function (a) {
+		return (
+			a !== null &&
+			a !== undefined &&
+			typeof a === 'object' &&
+			a.jquery !== undefined
+		);
+	};
+	b.prototype.setTooltip = function () {
+		if (
+			this.isJqueryObject(this.$tooltip) &&
+			this.isJqueryObject(this.$arrow)
+		) {
+			return;
+		}
+		this.$tooltip = a(b.templates.tooltip);
+		this.$tooltip.html(this.title);
+		this.$tooltip.addClass(this.getAttribute('position'));
+		this.$arrow = a(b.templates.arrow);
+		this.$tooltip.append(this.$arrow);
+		return this.$tooltip;
+	};
+	b.prototype.setOptions = function (c) {
+		if (c === undefined || typeof c !== 'object') {
+			return;
+		}
+		this.settings = a.extend(b.defaults, c);
+		if (
+			this.settings['themes'] !== undefined &&
+			typeof this.settings.themes === 'object'
+		) {
+			this.themes = a.extend(
+				b.themes,
+				this.settings.themes
+			);
+			delete this.settings.themes;
+		}
+		if (this.themes[this.settings.theme] !== undefined) {
+			this.settings = a.extend(
+				this.settings,
+				this.themes[this.settings.theme]
+			);
+		}
+	};
+	b.prototype.initialize = function () {
+		this.$el.on(
+			'mouseenter',
+			{
+				that: this,
+			},
+			this.mouseOver
+		);
+		this.$el.on(
+			'mouseleave',
+			{
+				that: this,
+			},
+			this.mouseOut
+		);
+		this.$el.attr('title', '');
+	};
+	b.prototype.getAttribute = function (a) {
+		var b = 'simpletooltip-' + a.replace('_', '-'),
+			c;
+		if (this.$el.data(b) !== undefined) {
+			return this.$el.data(b);
+		}
+		if (
+			(c = this.$el.data('simpletooltip-theme')) !==
+			undefined
+		) {
+			if (
+				this.themes[c] !== undefined &&
+				this.themes[c][a] !== undefined
+			) {
+				return this.themes[c][a];
+			}
+		}
+		if (this.settings[a] !== undefined) {
+			return this.settings[a];
+		}
+		return false;
+	};
+	b.prototype.mouseOver = function (a) {
+		var b = a.data.that;
+		if (b.$tooltip.parent().length) {
+			return a;
+		}
+		c.append(b.$tooltip);
+		b.$tooltip.hide();
+		b.styleTooltip();
+		if (b.getAttribute('fade')) {
+			b.$tooltip.delay(180).fadeIn(200);
+		} else {
+			b.$tooltip.show();
+		}
+		return a;
+	};
+	b.prototype.mouseOut = function (a) {
+		var b = a.data.that;
+		if (!b.$tooltip.parent().length) {
+			return a;
+		}
+		if (!b.$tooltip.css('opacity')) {
+			b.$tooltip.remove();
+			return a;
+		}
+		if (b.getAttribute('fade')) {
+			b.$tooltip
+				.clearQueue()
+				.stop()
+				.fadeOut(100, function () {
+					b.$tooltip.remove();
+				});
+		} else {
+			b.$tooltip.remove();
+		}
+		return a;
+	};
+	b.prototype.styleTooltip = function () {
+		if (
+			!this.isJqueryObject(this.$el) ||
+			!this.isJqueryObject(this.$tooltip)
+		) {
+			return;
+		}
+		var b = this.$el.offset(),
+			c = this.getAttribute('background_color'),
+			d = this.getAttribute('border_color');
+		if (!this.isJqueryObject(this.$arrow)) {
+			this.$arrow = this.$tooltip.find(' > .arrow');
+		}
+		var e = this.getAttribute('border_width');
+		e =
+			!d || typeof e === 'boolean' || e === 'none'
+				? 0
+				: Number(e);
+		var f = !e || !d ? c : d;
+		var g = Math.round((this.settings.arrow_width * 3) / 4),
+			h = -parseInt(this.settings.arrow_width * 2 + e, 10),
+			i = -parseInt(g * 2 + e, 10);
+		var j = {
+			maxWidth: this.getAttribute('max_width'),
+			backgroundColor: c,
+			color: this.getAttribute('color'),
+			borderColor: d,
+			borderWidth: e,
+		};
+		switch (this.getAttribute('position')) {
+			case 'top-right':
+				b.top -= parseInt(
+					this.$tooltip.outerHeight() + this.margins.bottom,
+					10
+				);
+				b.left += parseInt(
+					this.$el.outerWidth() -
+						this.margins.right -
+						this.margins.border,
+					10
+				);
+				this.$arrow.css({
+					left: this.settings.padding.width - e,
+					borderWidth: g,
+					bottom: i,
+					borderTopColor: f,
+					borderLeftColor: f,
+				});
+				break;
+
+			case 'right-top':
+				b.top -= parseInt(
+					this.$tooltip.outerHeight() - this.margins.bottom,
+					10
+				);
+				b.left += parseInt(
+					this.$el.outerWidth() + this.margins.right,
+					10
+				);
+				this.$arrow.css({
+					bottom: this.settings.padding.height - e,
+					borderWidth: g,
+					left: i,
+					borderRightColor: f,
+					borderBottomColor: f,
+				});
+				break;
+
+			case 'right':
+				b.top += parseInt(
+					(this.$el.outerHeight() -
+						this.$tooltip.outerHeight()) /
+						2,
+					10
+				);
+				b.left += parseInt(
+					this.$el.outerWidth() + this.margins.right,
+					10
+				);
+				this.$arrow.css({
+					left: h,
+					borderRightColor: f,
+					marginTop: -this.settings.arrow_width,
+				});
+				break;
+
+			case 'right-bottom':
+				b.top += parseInt(
+					this.$el.outerHeight() - this.margins.bottom,
+					10
+				);
+				b.left += parseInt(
+					this.$el.outerWidth() + this.margins.right,
+					10
+				);
+				this.$arrow.css({
+					top: this.settings.padding.height - e,
+					borderWidth: g,
+					left: i,
+					borderRightColor: f,
+					borderTopColor: f,
+				});
+				break;
+
+			case 'bottom-right':
+				b.top += parseInt(
+					this.$el.outerHeight() + this.margins.bottom,
+					10
+				);
+				b.left += parseInt(
+					this.$el.outerWidth() -
+						this.margins.right -
+						this.margins.border,
+					10
+				);
+				this.$arrow.css({
+					left: this.settings.padding.width - e,
+					borderWidth: g,
+					top: i,
+					borderBottomColor: f,
+					borderLeftColor: f,
+				});
+				break;
+
+			case 'bottom':
+				b.top += parseInt(
+					this.$el.outerHeight() + this.margins.bottom,
+					10
+				);
+				b.left += parseInt(
+					(this.$el.outerWidth() -
+						this.$tooltip.outerWidth()) /
+						2,
+					10
+				);
+				this.$arrow.css({
+					top: h,
+					marginLeft: -this.settings.arrow_width,
+					borderBottomColor: f,
+				});
+				break;
+
+			case 'bottom-left':
+				b.top += parseInt(
+					this.$el.outerHeight() + this.margins.bottom,
+					10
+				);
+				b.left -= parseInt(
+					this.$tooltip.outerWidth() -
+						this.margins.left -
+						this.margins.border,
+					10
+				);
+				this.$arrow.css({
+					right: this.settings.padding.width - e,
+					borderWidth: g,
+					top: i,
+					borderBottomColor: f,
+					borderRightColor: f,
+				});
+				break;
+
+			case 'left-bottom':
+				b.top += parseInt(
+					this.$el.outerHeight() - this.margins.bottom,
+					10
+				);
+				b.left -= parseInt(
+					this.$tooltip.outerWidth() + this.margins.left,
+					10
+				);
+				this.$arrow.css({
+					top: this.settings.padding.height - e,
+					borderWidth: g,
+					right: i,
+					borderLeftColor: f,
+					borderTopColor: f,
+				});
+				break;
+
+			case 'left':
+				b.top += parseInt(
+					(this.$el.outerHeight() -
+						this.$tooltip.outerHeight()) /
+						2,
+					10
+				);
+				b.left -= parseInt(
+					this.$tooltip.outerWidth() + this.margins.left,
+					10
+				);
+				this.$arrow.css({
+					right: h,
+					borderLeftColor: f,
+					marginTop: -this.settings.arrow_width,
+				});
+				break;
+
+			case 'left-top':
+				b.top -= parseInt(
+					this.$tooltip.outerHeight() - this.margins.bottom,
+					10
+				);
+				b.left -= parseInt(
+					this.$tooltip.outerWidth() + this.margins.left,
+					10
+				);
+				this.$arrow.css({
+					bottom: this.settings.padding.height - e,
+					borderWidth: g,
+					right: i,
+					borderLeftColor: f,
+					borderBottomColor: f,
+				});
+				break;
+
+			case 'top-left':
+				b.top -= parseInt(
+					this.$tooltip.outerHeight() + this.margins.bottom,
+					10
+				);
+				b.left -= parseInt(
+					this.$tooltip.outerWidth() - this.margins.left,
+					10
+				);
+				this.$arrow.css({
+					right: this.settings.padding.width - e,
+					borderWidth: g,
+					bottom: i,
+					borderTopColor: f,
+					borderRightColor: f,
+				});
+				break;
+
+			default:
+				b.top -= parseInt(
+					this.$tooltip.outerHeight() + this.margins.top,
+					10
+				);
+				b.left += parseInt(
+					(this.$el.outerWidth() -
+						this.$tooltip.outerWidth()) /
+						2,
+					10
+				);
+				this.$arrow.css({
+					bottom: h,
+					borderTopColor: f,
+					marginLeft: -this.settings.arrow_width,
+				});
+		}
+		this.$tooltip.css(
+			a.extend(j, {
+				top: b.top,
+				left: b.left,
+			})
+		);
+	};
+	a.fn.simpletooltip = function (c) {
+		return this.each(function () {
+			var d = a(this);
+			if (
+				!d.data().hasOwnProperty('simpletooltipInstanced')
+			) {
+				var e = {
+					$el: d,
+				};
+				if (c !== undefined && typeof c === 'object') {
+					e.settings = c;
+				}
+				new b(e);
+			}
+		});
+	};
+	a(window).on('load', function () {
+		c = a('body');
+		a('[data-simpletooltip="init"]').each(function () {
+			a(this).simpletooltip();
+		});
+	});
+})(jQuery);