jekyll-theme-simplix 0.1.0 → 0.2.0

data/_sass/rouge.scss

@@ -0,0 +1,168 @@
+.c, .c1, .cm, .cp, .cpf, .cs, .ge, .ges, .sd {
+	font-style: italic;
+}
+
+.ges, .gh, .gs, .gu, .k, .kc, .kd, .kn, .kp, .kr, .kt, .nb {
+	font-weight: bold;
+}
+
+.gh {
+	text-decoration: underline;
+}
+
+.hll {
+	background: #faf7b3;
+}
+
+.language-diff {
+	.err, .gr {
+		background: none !important;
+		color: inherit;
+	}
+}
+
+.language-md, .language-markdown {
+	.sx {
+		text-decoration: 1px underline;
+	}
+}
+
+@mixin rouge-light {
+	pre code {
+		color: #2b2c28;
+
+		pre.lineno {
+			color: #81868f;
+		}
+
+		.err, .gr {
+			background: #ef3722;
+			color: #fff;
+		}
+
+		.c, .c1, .cm, .cs, .sd, .sh {
+			color: #b7a1e7;
+		}
+
+		.cp, .cpf {
+			color: #c99d91;
+		}
+
+		.gd, .gr, .ne {
+			color: #ef3722;
+		}
+
+		.gi {
+			color: #188a5b;
+		}
+
+		.gp {
+			color: #b7a1e7;
+		}
+
+		.il, .ld, .m, .mf, .mh, .mi, .mo {
+			color: #6dacf8;
+		}
+
+		.k, .kd, .kn, .kr, .nb, .o, .ow, .p, .pi, .se, .sr, .ss {
+			color: #8f61b7;
+		}
+
+		.kc, .kp, .kt {
+			color: #6cb6aa;
+		}
+
+		.l, .s, .s1, .s2, .sb, .sc, .sx {
+			color: #188a5b;
+		}
+
+		.na, .nl, .py {
+			color: #476f95;
+		}
+
+		.nc, .nn, .no, .nv, .si, .vc, .vg, .vi, .vm {
+			color: #b32987;
+		}
+
+		.nf, .ni {
+			color: #ff8531;
+		}
+
+		.nd {
+			color: #877982;
+		}
+
+		.nt {
+			color: #632fb4;
+		}
+	}
+}
+
+@mixin rouge-dark {
+	pre code {
+		pre.lineno {
+			color: #636d75;
+		}
+
+		.err, .gr {
+			background: #ef3722;
+			color: #fff;
+		}
+
+		.c, .c1, .cm, .cs, .sd, .sh {
+			color: #757480;
+		}
+
+		.cp, .cpf {
+			color: #fbdcca;
+		}
+
+		.gd, .gr, .ne {
+			color: #e58173;
+		}
+
+		.gi {
+			color: #43d78e;
+		}
+
+		.gp {
+			color: #b7a1e7;
+		}
+
+		.il, .ld, .m, .mf, .mh, .mi, .mo {
+			color: #87c3ed;
+		}
+
+		.k, .kd, .kn, .kr, .nb, .o, .ow, .p, .pi, .se, .sr, .ss {
+			color: #b5a5e0;
+		}
+
+		.kc, .kp, .kt {
+			color: #4ca0b5;
+		}
+
+		.l, .s, .s1, .s2, .sb, .sc, .sx {
+			color: #a3d6c8;
+		}
+
+		.na, .nl, .py {
+			color: #4ec189;
+		}
+
+		.nc, .nn, .no, .nv, .si, .vc, .vg, .vi, .vm {
+			color: #e0bfff;
+		}
+
+		.nf, .ni {
+			color: #fab4a7;
+		}
+
+		.nd {
+			color: #976d5e;
+		}
+
+		.nt {
+			color: #8b75ec;
+		}
+	}
+}

data/_sass/theme.scss

@@ -0,0 +1,197 @@
+$fade: .7;
+$quote-alert: note tip important warning caution;
+$quote-color-light: #44acff #ffce2e #b153d7 #ff8b5a #ff4400;
+$quote-color-dark: #7ab9f0 #fff370 #de76eb #ffa95a #fa7070;
+$quote-icon: "\e2ce" "\e2dc" "\e15c" "\e4e0" "\e9b8";
+
+@mixin quote($name, $color, $icon) {
+	&.quote__alert-#{$name} {
+		border-color: #{$color} !important;
+
+		> p.quote__alert-title {
+			color: #{$color};
+			font-weight: bold;
+
+			&::before {
+				content: str-insert($icon, " ", 2);
+			}
+		}
+	}
+}
+
+@mixin theme-light {
+	$bg: white;
+
+	background: $bg;
+
+	&.main__bg-fill .home__content, &.main__bg-fill .post__content {
+		background: rgba($bg, $fade);
+	}
+
+	.page__header {
+		border-bottom: 1px solid #ddd;
+	}
+
+	[role="main"] {
+		h1, h2 {
+			border-bottom: 1px solid #ddd;
+		}
+
+		blockquote {
+			border: 1px solid #ddd;
+			@for $i from 1 through length($quote-alert) {
+				@include quote(nth($quote-alert, $i), nth($quote-color-light, $i), nth($quote-icon, $i));
+			}
+		}
+
+		hr {
+			background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgMzIiPjxwYXRoIGQ9Ik0wIDE1aDM2OHYySDBabTQzMiAwaDM2OHYySDQzMloiLz48Y2lyY2xlIGN4PSI0MDAiIGN5PSI4IiByPSI0Ii8+PGNpcmNsZSBjeD0iMzkyIiBjeT0iMjQiIHI9IjQiLz48Y2lyY2xlIGN4PSI0MDgiIGN5PSIyNCIgcj0iNCIvPjwvc3ZnPg==") no-repeat center;
+		}
+
+		table:not(.rouge-table) {
+			th {
+				border-bottom: 2px solid #aaa !important;
+			}
+
+			th, td {
+				border: 1px solid #888;
+			}
+
+			th, tr:nth-child(even of :has(td)) td {
+				background: #e9ecef5d;
+			}
+		}
+
+		pre {
+			background: #f1f3f58d;
+			border: 1px solid #ddd;
+		}
+	}
+
+	.post__header > p a, [role="main"] a, footer a {
+		color: #444;
+		text-decoration: underline 1px solid #444;
+
+		&:visited {
+			color: #b136e2;
+			text-decoration: #b136e2;
+		}
+
+		&.footnote, &.reversefootnote {
+			color: #1975d2;
+		}
+	}
+
+	&:not(.main__bg_fill) footer {
+		border-top: 1px solid #ddd;
+	}
+
+	&.main__bg-fill footer {
+		border-top: none;
+	}
+
+	.btn__theme-toggle {
+		border: 2px solid #6bc4ff;
+
+		span.btn__theme-toggle-light {
+			background: #1e91d6;
+		}
+	}
+
+	.btn__scroll-up button {
+		border: 1px solid #a6c8ff;
+	}
+}
+
+@mixin theme-dark {
+	$bg: #242124;
+
+	background: $bg;
+	color: #f0ffff;
+
+	&.main__bg-fill .home__content, &.main__bg-fill .post__content {
+		background: rgba($bg, $fade);
+	}
+
+	.page__header {
+		border-bottom: 1px solid #444;
+	}
+
+	[role="main"] {
+		h1, h2 {
+			border-bottom: 1px solid #444;
+		}
+
+		blockquote {
+			border: 1px solid #444;
+			@for $i from 1 through length($quote-alert) {
+				@include quote(nth($quote-alert, $i), nth($quote-color-dark, $i), nth($quote-icon, $i));
+			}
+		}
+
+		hr {
+			background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgMzIiPjxwYXRoIGQ9Ik0wIDE1aDM2OHYySDBabTQzMiAwaDM2OHYySDQzMloiIGZpbGw9IiNhYWEiLz48Y2lyY2xlIGN4PSI0MDAiIGN5PSI4IiByPSI0IiBmaWxsPSIjYWFhIi8+PGNpcmNsZSBjeD0iMzkyIiBjeT0iMjQiIHI9IjQiIGZpbGw9IiNhYWEiLz48Y2lyY2xlIGN4PSI0MDgiIGN5PSIyNCIgcj0iNCIgZmlsbD0iI2FhYSIvPjwvc3ZnPg==") no-repeat center;
+		}
+
+		table:not(.rouge-table) {
+			th {
+				border-bottom: 2px solid #ddd !important;
+			}
+
+			th, td {
+				border: 1px solid #aaa;
+			}
+
+			th, tr:nth-child(even of :has(td)) td {
+				background: #43434f9c;
+			}
+		}
+
+		pre {
+			background: #3e3d537b;
+			border: 1px solid #444;
+
+			.code__top * {
+				color: #f0ffff;
+			}
+		}
+	}
+
+	.post__header > p a, [role="main"] a, footer a {
+		color: #bac8ff;
+		text-decoration: underline 1px solid;
+
+		&:visited {
+			color: #df9fe6;
+		}
+
+		&.footnote, &.reversefootnote {
+			color: #ffaa6e;
+		}
+	}
+
+	&:not(.main__bg-fill) footer {
+		border-top: 1px solid #444;
+		color: white;
+	}
+
+	&.main__bg-fill footer {
+		border-top: none;
+	}
+
+	.btn__theme-toggle {
+		border: 2px solid #898886;
+
+		span.btn__theme-toggle-dark {
+			background: #6d6f6f;
+
+			i, span {
+				color: white;
+			}
+		}
+	}
+
+	.btn__scroll-up button {
+		border: 1px solid #f0f9fb;
+	}
+}

data/assets/script.js

@@ -0,0 +1,201 @@
+(function() {
+	"use strict";
+
+	// Initialize polyfill for IE
+	const iedoc = document.documentMode;
+	NodeList.prototype.filter = Array.prototype.filter;
+	if(iedoc) NodeList.prototype.forEach = Array.prototype.forEach, Element.prototype.closest = function(s) {
+		let e = this;
+		while(e) {
+			e = e.parentElement;
+			if(!e || e.msMatchesSelector(s)) return e;
+		}
+	};
+
+	// Initialize page theme
+	let th = document.querySelector(".btn__theme-toggle"), th_dark = window.matchMedia("(prefers-color-scheme: dark)"), th_match = th_dark && th_dark.matches, th_val = sessionStorage.getItem("theme"), th_ev = function(v) {
+		const t = (th_match = v) ? "dark" : "light";
+		document.body.id = "main__theme-" + t;
+		sessionStorage.setItem("theme", t);
+	};
+	if(th_dark) th_dark.onchange = function() {th_ev(th_dark.matches)};
+	th.onclick = function() {th_ev(!th_match)};
+	document.body.id = "main__theme-" + (th_val == "dark" || th_val == "light" ? th_val : th_match ? "dark" : "light");
+
+	// Initialize navigation menu
+	const nav = document.querySelector("nav"), nav_btn = nav.querySelector("button"), nav_links = nav.querySelector(".nav__links"), nav_ev = function() {if(nav.classList.contains("nav__multi")) nav_btn.innerHTML = nav.classList.toggle("nav__open") ? "\ue4f6 Close" : "\ue2f0 Menu"};
+	nav.style.display = "flex";
+	nav_btn.onclick = function() {
+		nav_ev();
+		navigator.userAgentData.mobile && history.pushState(null, null, window.location.pathname);
+	};
+	nav_links.onclick = function(e) {e.target.tagName != "a" && nav_ev()};
+	navigator.userAgentData && navigator.userAgentData.mobile ? window.onpopstate = nav_ev : nav_links.addEventListener("wheel", function(e) {
+		if(window.innerWidth >= 768) {
+			e.preventDefault();
+			nav_links.scrollLeft += e.deltaY;
+		}
+	});
+
+	// Initialize \"Scroll to top\" button
+	function scroll_ev() {
+		const e = document.querySelector("header"), r = e.getBoundingClientRect(), h = window.innerHeight;
+		if(document.body.clientHeight > h && (r.bottom <= h * .2) != document.body.classList.contains("main__scroll-down")) document.body.classList.toggle("main__scroll-down");
+	}
+	window.onscroll = scroll_ev;
+	window.onresize = scroll_ev;
+	if(window.screen.orientation) window.screen.orientation.onchange = scroll_ev;
+
+	// Add miscellaneous things to HTML elements
+	const link = function(a) {
+		const e = new RegExp("^((https?|mailto|tel):)?\\/*(.+@)?(www\\.)?([a-z\\d.-]+)?.*$", "gi").exec(a.href);
+		if(e && e[5] != location.hostname) a.target = "_blank";
+	}, ic = {
+		note: "info",
+		tip: "lightbulb",
+		important: "chat",
+		warning: "warning",
+		caution: "siren"
+	};
+	document.querySelectorAll("a").forEach(link);
+	document.querySelectorAll("a.footnote").forEach(function(f) {f.innerText = "[" + f.innerText + "]"});
+	document.querySelectorAll("a.reversefootnote").forEach(function(r) {r.innerHTML = "<i class=\"ph ph-arrow-u-up-left\"></i>"});
+	document.querySelectorAll("blockquote").forEach(function(b) {
+		const e = b.firstElementChild;
+		if(e) {
+			const r = new RegExp("^\\[!(note|tip|important|warning|caution)\\]($| )", "i").exec(e.innerText.trim());
+			if(r) {
+				b.classList.add("quote__alert-" + r[1].toLowerCase());
+				b.insertAdjacentHTML("afterbegin", "<p class=\"quote__alert-title\">" + r[1].charAt(0).toUpperCase() + r[1].slice(1).toLowerCase() + "</p>");
+				e.innerHTML = e.innerHTML.replace(new RegExp("^\\[!(note|tip|important|warning|caution)\\]", "i"), "").trim();
+			}
+		}
+	});
+	document.querySelectorAll("details").forEach(function(d) {
+		let s = d.querySelector("summary");
+		if(!s) {
+			s = document.createElement("summary");
+			d.insertBefore(s, d.firstChild);
+		}
+		s.insertAdjacentHTML("afterbegin", "<i class=\"ph ph-caret-right\"></i>");
+		if(iedoc) s.onclick = function() {d.open = !d.hasAttribute("open")};
+	});
+
+	document.querySelectorAll("pre").filter(function(e) {for(let i = 0, ch = e.children[i]; i < e.children.length; i++, ch = e.children[i]) if(ch.tagName == "CODE") return true; return false}).forEach(function(pre) {
+		const code = (pre.closest("figure.highlight") ? pre.querySelector("table.rouge-table td.code > pre") : pre.querySelector("code")).textContent, code_par = pre.closest("div.highlighter-rouge") || pre.querySelector("code"), code_lang_regex = code_par.classList.length > 0 ? new RegExp("^language-(.+)$").exec(code_par.classList[0]) : null, code_lang = code_lang_regex && code_lang_regex.length > 1 ? code_lang_regex[1] : "plaintext";
+
+		const code_top = document.createElement("div");
+		code_top.className = "code__top";
+		code_top.insertAdjacentHTML("afterbegin", "<span>" + code_lang + "</span>");
+
+		const code_copy = document.createElement("button"), code_copy_reset = function() {
+			code_copy.className = "";
+			code_copy.innerText = "\ue1ca";
+			code_copy.title = "Copy";
+		}, code_copy_ev = function(b) {
+			const c = b ? "code__copy-ok" : "code__copy-bad";
+			code_copy.classList.toggle(c);
+			code_copy.classList.toggle("code__copy-na");
+			code_copy.innerText = b ? "\ue182" : "\ue4f6";
+			code_copy.title = b ? "Copied!" : "Error!";
+			setTimeout(code_copy_reset, 1500);
+		};
+		code_copy_reset();
+		code_copy.onclick = function() {if(!this.classList.contains("code__copy-na")) iedoc ? window.clipboardData.setData("Text", code) : navigator.clipboard.writeText(code).then(function() {code_copy_ev(true)}, function() {code_copy_ev(false)})};
+
+		if(!iedoc) {
+			// Initialize HTML/Markdown/ABCJS/Mermaid code preview
+			let abc = 0, preview_init = function(e) {
+				const code_preview = document.createElement("button");
+				code_preview.innerText = "\ue220";
+				code_preview.title = "Show source code/ preview";
+				code_preview.onclick = function() {this.innerText = pre.classList.toggle("code__preview") ? "\ue1bc" : "\ue220"};
+				code_top.appendChild(code_preview);
+
+				if(!e) e = document.createElement("div");
+				e.classList.add("code__preview-container");
+				pre.appendChild(e);
+				return e;
+			}, str64_encoder = new TextEncoder(), str64 = function(s) {return btoa(String.fromCharCode.apply(null, pako.deflate(str64_encoder.encode(s), {level: 9}))).replace(new RegExp("\\+", "g"), "-").replace(new RegExp("\\/", "g"), "_")}, min_opts = {
+				minifyCSS: true,
+				minifyJS: true,
+				removeComments: true,
+				collapseWhitespace: true,
+				conservativeCollapse: false,
+				preserveLineBreaks: false
+			};
+			switch(code_lang) {
+			case "html":
+				const f = document.createElement("iframe");
+				HTMLMinifier.minify(code, min_opts).then(function(t) {f.srcdoc = t});
+				preview_init(f).onload = function() {this.contentDocument.querySelectorAll("a").forEach(function(a) {a.target = "_blank", a.rel = "noopener noreferrer"})};
+				break;
+
+			case "md":
+			case "markdown":
+				const d = document.createElement("div");
+				HTMLMinifier.minify(DOMPurify.sanitize(marked.parse(code)), min_opts).then(function(t) {d.innerHTML = t});
+				d.querySelectorAll("a").forEach(link);
+				preview_init(d);
+				break;
+
+			case "abc":
+			case "abcjs":
+				const id = (++abc).toString();
+				preview_init(null).innerHTML = "<div id=\"paper" + id + "\"></div><div id=\"audio" + id + "\" class=\"synth\"></div>";
+				const p = ABCJS.renderAbc("paper" + id, code, {responsive: "resize"})[0];
+
+				if(ABCJS.synth.supportsAudio()) {
+					const c = new ABCJS.synth.SynthController();
+					c.load("#audio" + id, null, {
+						displayPlay: true,
+						displayProgress: true,
+						displayClock: true
+					});
+					c.disable(true);
+	
+					const a = new ABCJS.synth.CreateSynth();
+					a.init({visualObj: p}).then(function() {c.setTune(p, true)});
+				}
+				break;
+
+			case "mermaid":
+			case "mmd":
+				const img_mmd = document.createElement("img");
+				img_mmd.src = "https://kroki.io/mermaid/svg/" + str64(code);
+				preview_init(img_mmd);
+				break;
+
+			case "plantuml":
+			case "puml":
+			case "uml":
+				const img_uml = document.createElement("img");
+				img_uml.src = "https://kroki.io/plantuml/svg/" + str64(code);
+				preview_init(img_uml);
+
+			}
+		}
+
+		code_top.appendChild(code_copy);
+		pre.insertBefore(code_top, pre.firstChild);
+	});
+
+	if(!iedoc) {
+		// Render KaTeX expressions and Mermaid graphs
+		document.querySelectorAll(".abcjs-inline-audio .abcjs-btn").forEach(function(i) {i.innerHTML = ""});
+		renderMathInElement(document.querySelector('[role="main"]'), {
+			delimiters: [
+				{left: "$$", right: "$$", display: true},
+				{left: "$", right: "$", display: false},
+				{left: "\\(", right: "\\)", display: false},
+				{left: "\\[", right: "\\]", display: true},
+				{left: "\\begin{equation}", right: "\\end{equation}", display: true},
+				{left: "\\begin{align}", right: "\\end{align}", display: true},
+				{left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
+				{left: "\\begin{gather}", right: "\\end{gather}", display: true},
+				{left: "\\begin{CD}", right: "\\end{CD}", display: true}
+			],
+			throwOnError: true
+		});
+	}
+})();

data/assets/style.scss

@@ -0,0 +1,19 @@
+---
+---
+
+@import "main";
+@import "theme";
+@import "rouge";
+@import "abcjs";
+
+body#main__theme-light {
+	@include theme-light;
+	@include rouge-light;
+	@include abcjs-light;
+}
+
+body#main__theme-dark {
+	@include theme-dark;
+	@include rouge-dark;
+	@include abcjs-dark;
+}

data/posts.html

@@ -0,0 +1,23 @@
+---
+layout: page
+title: Posts listing
+permalink: /posts
+---
+
+{% if site.posts.size > 0 %}
+	<h3>Individual posts</h3>
+	<p>Some posts listed here may not belong to a specific tag or category.</p>
+	{% include list-post.html posts=site.posts %}
+{% else %}
+	<p>There aren't any posts on this website.</p>
+{% endif %}
+
+{% if site.tags.size > 0 and site['jekyll-archives'].enabled == 'all' or site['jekyll-archives'].enabled contains 'tags' %}
+	<h3>Tags</h3>
+	{% include list-group.html dir='tag' group=site.tags icon='tag-simple' %}
+{% endif %}
+
+{% if site.categories.size > 0 and site['jekyll-archives'].enabled == 'all' or site['jekyll-archives'].enabled contains 'categories' %}
+	<h3>Categories</h3>
+	{% include list-group.html dir='category' group=site.categories icon='folder-simple' %}
+{% endif %}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-simplix
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - lithier94675
@@ -40,7 +40,27 @@ dependencies:
 executables: []
 extensions: []
 extra_rdoc_files: []
-files: []
+files:
+- 404.md
+- LICENSE
+- README.md
+- _includes/footer.html
+- _includes/head.html
+- _includes/list-group.html
+- _includes/list-post.html
+- _includes/ui.html
+- _layouts/archive.html
+- _layouts/default.html
+- _layouts/home.html
+- _layouts/page.html
+- _layouts/post.html
+- _sass/abcjs.scss
+- _sass/main.scss
+- _sass/rouge.scss
+- _sass/theme.scss
+- assets/script.js
+- assets/style.scss
+- posts.html
 homepage: https://lithier94675.github.io/jekyll-theme-simplix
 licenses:
 - CC0-1.0