From 2c1b00f3094321ba9fd3121e723823b96dfbc528 Mon Sep 17 00:00:00 2001 From: xAlpharax <42233094+xAlpharax@users.noreply.github.com> Date: Sun, 25 Feb 2024 23:04:38 +0200 Subject: Massive changes - improvements in performance, accesability and SEO as well as best practices Changes to be committed: deleted: static/js/copy.js modified: static/js/main.js modified: config.toml modified: content/posts/code_test.md modified: templates/404.html modified: templates/index.html modified: templates/macros.html modified: templates/page.html modified: templates/section.html modified: templates/tags/single.html --- config.toml | 27 +-- content/posts/code_test.md | 8 + static/js/copy.js | 453 --------------------------------------------- static/js/main.js | 99 ++++------ templates/404.html | 4 +- templates/index.html | 105 ++++------- templates/macros.html | 9 +- templates/page.html | 21 +-- templates/section.html | 3 +- templates/tags/single.html | 3 +- 10 files changed, 112 insertions(+), 620 deletions(-) delete mode 100644 static/js/copy.js diff --git a/config.toml b/config.toml index 729db82..f4137b2 100644 --- a/config.toml +++ b/config.toml @@ -37,7 +37,7 @@ compile_sass = true # When set to "true", the generated HTML files are minified. minify_html = true -# This does the whole example.com/image.jpg url hardlinking thing (supposedly) +# This does the whole example.com/image.jpg url hardlinking thing # When set to "true", files in the `static` directory are hard-linked. Useful for large # static files. Note that for this to work, both `static` and the # output directory need to be on the same filesystem. Note that the theme's `static` @@ -59,22 +59,19 @@ extra_syntaxes = [] [markdown] -# Highlight all code blocks found +# Highlight code blocks highlight_code = true highlight_theme = "base16-ocean-dark" -render_emoji = true # like :smile: and :shrug: +# Emojis like :smile: and :shrug: +render_emoji = true [translations] -# You can put any kind of data in there and it -# will be accessible in all templates +# You can put any kind of data in there and it will be accessible in all templates [extra] -# MathJax / LaTeX rendering support globally (expensive) -# math = true # you should enable this per-page when needed (it also gets automatically checked when detecting \tex stuff) - home_subtitle = "Neural Art at its finest :))" # better title and description footer_copyright = ' · CC BY-NC 4.0' @@ -93,13 +90,10 @@ hermit_social = [ { name = "email", link = "mailto:iustin@alphara.art" } ] -[extra.highlightjs] +[extra.author] -#enable = true -#clipboard = true -#theme = "1337" -# theme = "railscasts" -# theme = "vs2015" +name = "Iustin Râznic" +email = "iustin@alphara.art" [extra.disqus] @@ -123,11 +117,6 @@ hermit_social = [ # to the page front matter # Icon will then appear above the page title that will toggle the ToC -[extra.author] - -name = "Iustin Râznic" -email = "iustin@alphara.art" - [extra.google_analytics] # enable = false diff --git a/content/posts/code_test.md b/content/posts/code_test.md index 761c536..07744f7 100644 --- a/content/posts/code_test.md +++ b/content/posts/code_test.md @@ -9,6 +9,14 @@ tags = ["test", "code"] [extra] disable_comments = true toc = false + +[extra.earlier] +title = "Typography" +permalink = "https://alphara.art/posts/typography" + +[extra.later] +title = "Henlo Internet!" +permalink = "https://alphara.art/posts/how-i-made-this-blog-with-zola/" +++ ```rust diff --git a/static/js/copy.js b/static/js/copy.js deleted file mode 100644 index c34773e..0000000 --- a/static/js/copy.js +++ /dev/null @@ -1,453 +0,0 @@ -/*! - * clipboard.js v2.0.6 - * https://clipboardjs.com/ - * - * Licensed MIT © Zeno Rocha - */ -!(function (t, e) { - "object" == typeof exports && "object" == typeof module ? (module.exports = e()) : "function" == typeof define && define.amd ? define([], e) : "object" == typeof exports ? (exports.ClipboardJS = e()) : (t.ClipboardJS = e()); -})(this, function () { - return ( - (o = {}), - (r.m = n = [ - function (t, e) { - t.exports = function (t) { - var e; - if ("SELECT" === t.nodeName) t.focus(), (e = t.value); - else if ("INPUT" === t.nodeName || "TEXTAREA" === t.nodeName) { - var n = t.hasAttribute("readonly"); - n || t.setAttribute("readonly", ""), t.select(), t.setSelectionRange(0, t.value.length), n || t.removeAttribute("readonly"), (e = t.value); - } else { - t.hasAttribute("contenteditable") && t.focus(); - var o = window.getSelection(), - r = document.createRange(); - r.selectNodeContents(t), o.removeAllRanges(), o.addRange(r), (e = o.toString()); - } - return e; - }; - }, - function (t, e) { - function n() {} - (n.prototype = { - on: function (t, e, n) { - var o = this.e || (this.e = {}); - return (o[t] || (o[t] = [])).push({ fn: e, ctx: n }), this; - }, - once: function (t, e, n) { - var o = this; - function r() { - o.off(t, r), e.apply(n, arguments); - } - return (r._ = e), this.on(t, r, n); - }, - emit: function (t) { - for (var e = [].slice.call(arguments, 1), n = ((this.e || (this.e = {}))[t] || []).slice(), o = 0, r = n.length; o < r; o++) n[o].fn.apply(n[o].ctx, e); - return this; - }, - off: function (t, e) { - var n = this.e || (this.e = {}), - o = n[t], - r = []; - if (o && e) for (var i = 0, a = o.length; i < a; i++) o[i].fn !== e && o[i].fn._ !== e && r.push(o[i]); - return r.length ? (n[t] = r) : delete n[t], this; - }, - }), - (t.exports = n), - (t.exports.TinyEmitter = n); - }, - function (t, e, n) { - var d = n(3), - h = n(4); - t.exports = function (t, e, n) { - if (!t && !e && !n) throw new Error("Missing required arguments"); - if (!d.string(e)) throw new TypeError("Second argument must be a String"); - if (!d.fn(n)) throw new TypeError("Third argument must be a Function"); - if (d.node(t)) - return ( - (s = e), - (f = n), - (u = t).addEventListener(s, f), - { - destroy: function () { - u.removeEventListener(s, f); - }, - } - ); - if (d.nodeList(t)) - return ( - (a = t), - (c = e), - (l = n), - Array.prototype.forEach.call(a, function (t) { - t.addEventListener(c, l); - }), - { - destroy: function () { - Array.prototype.forEach.call(a, function (t) { - t.removeEventListener(c, l); - }); - }, - } - ); - if (d.string(t)) return (o = t), (r = e), (i = n), h(document.body, o, r, i); - throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList"); - var o, r, i, a, c, l, u, s, f; - }; - }, - function (t, n) { - (n.node = function (t) { - return void 0 !== t && t instanceof HTMLElement && 1 === t.nodeType; - }), - (n.nodeList = function (t) { - var e = Object.prototype.toString.call(t); - return void 0 !== t && ("[object NodeList]" === e || "[object HTMLCollection]" === e) && "length" in t && (0 === t.length || n.node(t[0])); - }), - (n.string = function (t) { - return "string" == typeof t || t instanceof String; - }), - (n.fn = function (t) { - return "[object Function]" === Object.prototype.toString.call(t); - }); - }, - function (t, e, n) { - var a = n(5); - function i(t, e, n, o, r) { - var i = function (e, n, t, o) { - return function (t) { - (t.delegateTarget = a(t.target, n)), t.delegateTarget && o.call(e, t); - }; - }.apply(this, arguments); - return ( - t.addEventListener(n, i, r), - { - destroy: function () { - t.removeEventListener(n, i, r); - }, - } - ); - } - t.exports = function (t, e, n, o, r) { - return "function" == typeof t.addEventListener - ? i.apply(null, arguments) - : "function" == typeof n - ? i.bind(null, document).apply(null, arguments) - : ("string" == typeof t && (t = document.querySelectorAll(t)), - Array.prototype.map.call(t, function (t) { - return i(t, e, n, o, r); - })); - }; - }, - function (t, e) { - if ("undefined" != typeof Element && !Element.prototype.matches) { - var n = Element.prototype; - n.matches = n.matchesSelector || n.mozMatchesSelector || n.msMatchesSelector || n.oMatchesSelector || n.webkitMatchesSelector; - } - t.exports = function (t, e) { - for (; t && 9 !== t.nodeType; ) { - if ("function" == typeof t.matches && t.matches(e)) return t; - t = t.parentNode; - } - }; - }, - function (t, e, n) { - "use strict"; - n.r(e); - var o = n(0), - r = n.n(o), - i = - "function" == typeof Symbol && "symbol" == typeof Symbol.iterator - ? function (t) { - return typeof t; - } - : function (t) { - return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t; - }; - function a(t, e) { - for (var n = 0; n < e.length; n++) { - var o = e[n]; - (o.enumerable = o.enumerable || !1), (o.configurable = !0), "value" in o && (o.writable = !0), Object.defineProperty(t, o.key, o); - } - } - function c(t) { - !(function (t, e) { - if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function"); - })(this, c), - this.resolveOptions(t), - this.initSelection(); - } - var l = - ((function (t, e, n) { - return e && a(t.prototype, e), n && a(t, n), t; - })(c, [ - { - key: "resolveOptions", - value: function (t) { - var e = 0 < arguments.length && void 0 !== t ? t : {}; - (this.action = e.action), (this.container = e.container), (this.emitter = e.emitter), (this.target = e.target), (this.text = e.text), (this.trigger = e.trigger), (this.selectedText = ""); - }, - }, - { - key: "initSelection", - value: function () { - this.text ? this.selectFake() : this.target && this.selectTarget(); - }, - }, - { - key: "selectFake", - value: function () { - var t = this, - e = "rtl" == document.documentElement.getAttribute("dir"); - this.removeFake(), - (this.fakeHandlerCallback = function () { - return t.removeFake(); - }), - (this.fakeHandler = this.container.addEventListener("click", this.fakeHandlerCallback) || !0), - (this.fakeElem = document.createElement("textarea")), - (this.fakeElem.style.fontSize = "12pt"), - (this.fakeElem.style.border = "0"), - (this.fakeElem.style.padding = "0"), - (this.fakeElem.style.margin = "0"), - (this.fakeElem.style.position = "absolute"), - (this.fakeElem.style[e ? "right" : "left"] = "-9999px"); - var n = window.pageYOffset || document.documentElement.scrollTop; - (this.fakeElem.style.top = n + "px"), - this.fakeElem.setAttribute("readonly", ""), - (this.fakeElem.value = this.text), - this.container.appendChild(this.fakeElem), - (this.selectedText = r()(this.fakeElem)), - this.copyText(); - }, - }, - { - key: "removeFake", - value: function () { - this.fakeHandler && (this.container.removeEventListener("click", this.fakeHandlerCallback), (this.fakeHandler = null), (this.fakeHandlerCallback = null)), - this.fakeElem && (this.container.removeChild(this.fakeElem), (this.fakeElem = null)); - }, - }, - { - key: "selectTarget", - value: function () { - (this.selectedText = r()(this.target)), this.copyText(); - }, - }, - { - key: "copyText", - value: function () { - var e = void 0; - try { - e = document.execCommand(this.action); - } catch (t) { - e = !1; - } - this.handleResult(e); - }, - }, - { - key: "handleResult", - value: function (t) { - this.emitter.emit(t ? "success" : "error", { action: this.action, text: this.selectedText, trigger: this.trigger, clearSelection: this.clearSelection.bind(this) }); - }, - }, - { - key: "clearSelection", - value: function () { - this.trigger && this.trigger.focus(), document.activeElement.blur(), window.getSelection().removeAllRanges(); - }, - }, - { - key: "destroy", - value: function () { - this.removeFake(); - }, - }, - { - key: "action", - set: function (t) { - var e = 0 < arguments.length && void 0 !== t ? t : "copy"; - if (((this._action = e), "copy" !== this._action && "cut" !== this._action)) throw new Error('Invalid "action" value, use either "copy" or "cut"'); - }, - get: function () { - return this._action; - }, - }, - { - key: "target", - set: function (t) { - if (void 0 !== t) { - if (!t || "object" !== (void 0 === t ? "undefined" : i(t)) || 1 !== t.nodeType) throw new Error('Invalid "target" value, use a valid Element'); - if ("copy" === this.action && t.hasAttribute("disabled")) throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute'); - if ("cut" === this.action && (t.hasAttribute("readonly") || t.hasAttribute("disabled"))) - throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes'); - this._target = t; - } - }, - get: function () { - return this._target; - }, - }, - ]), - c), - u = n(1), - s = n.n(u), - f = n(2), - d = n.n(f), - h = - "function" == typeof Symbol && "symbol" == typeof Symbol.iterator - ? function (t) { - return typeof t; - } - : function (t) { - return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t; - }, - p = function (t, e, n) { - return e && y(t.prototype, e), n && y(t, n), t; - }; - function y(t, e) { - for (var n = 0; n < e.length; n++) { - var o = e[n]; - (o.enumerable = o.enumerable || !1), (o.configurable = !0), "value" in o && (o.writable = !0), Object.defineProperty(t, o.key, o); - } - } - var m = - ((function (t, e) { - if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function, not " + typeof e); - (t.prototype = Object.create(e && e.prototype, { constructor: { value: t, enumerable: !1, writable: !0, configurable: !0 } })), e && (Object.setPrototypeOf ? Object.setPrototypeOf(t, e) : (t.__proto__ = e)); - })(v, s.a), - p( - v, - [ - { - key: "resolveOptions", - value: function (t) { - var e = 0 < arguments.length && void 0 !== t ? t : {}; - (this.action = "function" == typeof e.action ? e.action : this.defaultAction), - (this.target = "function" == typeof e.target ? e.target : this.defaultTarget), - (this.text = "function" == typeof e.text ? e.text : this.defaultText), - (this.container = "object" === h(e.container) ? e.container : document.body); - }, - }, - { - key: "listenClick", - value: function (t) { - var e = this; - this.listener = d()(t, "click", function (t) { - return e.onClick(t); - }); - }, - }, - { - key: "onClick", - value: function (t) { - var e = t.delegateTarget || t.currentTarget; - this.clipboardAction && (this.clipboardAction = null), - (this.clipboardAction = new l({ action: this.action(e), target: this.target(e), text: this.text(e), container: this.container, trigger: e, emitter: this })); - }, - }, - { - key: "defaultAction", - value: function (t) { - return b("action", t); - }, - }, - { - key: "defaultTarget", - value: function (t) { - var e = b("target", t); - if (e) return document.querySelector(e); - }, - }, - { - key: "defaultText", - value: function (t) { - return b("text", t); - }, - }, - { - key: "destroy", - value: function () { - this.listener.destroy(), this.clipboardAction && (this.clipboardAction.destroy(), (this.clipboardAction = null)); - }, - }, - ], - [ - { - key: "isSupported", - value: function (t) { - var e = 0 < arguments.length && void 0 !== t ? t : ["copy", "cut"], - n = "string" == typeof e ? [e] : e, - o = !!document.queryCommandSupported; - return ( - n.forEach(function (t) { - o = o && !!document.queryCommandSupported(t); - }), - o - ); - }, - }, - ] - ), - v); - function v(t, e) { - !(function (t, e) { - if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function"); - })(this, v); - var n = (function (t, e) { - if (!t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - return !e || ("object" != typeof e && "function" != typeof e) ? t : e; - })(this, (v.__proto__ || Object.getPrototypeOf(v)).call(this)); - return n.resolveOptions(e), n.listenClick(t), n; - } - function b(t, e) { - var n = "data-clipboard-" + t; - if (e.hasAttribute(n)) return e.getAttribute(n); - } - e.default = m; - }, - ]), - (r.c = o), - (r.d = function (t, e, n) { - r.o(t, e) || Object.defineProperty(t, e, { enumerable: !0, get: n }); - }), - (r.r = function (t) { - "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(t, "__esModule", { value: !0 }); - }), - (r.t = function (e, t) { - if ((1 & t && (e = r(e)), 8 & t)) return e; - if (4 & t && "object" == typeof e && e && e.__esModule) return e; - var n = Object.create(null); - if ((r.r(n), Object.defineProperty(n, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e)) - for (var o in e) - r.d( - n, - o, - function (t) { - return e[t]; - }.bind(null, o) - ); - return n; - }), - (r.n = function (t) { - var e = - t && t.__esModule - ? function () { - return t.default; - } - : function () { - return t; - }; - return r.d(e, "a", e), e; - }), - (r.o = function (t, e) { - return Object.prototype.hasOwnProperty.call(t, e); - }), - (r.p = ""), - r((r.s = 6)).default - ); - function r(t) { - if (o[t]) return o[t].exports; - var e = (o[t] = { i: t, l: !1, exports: {} }); - return n[t].call(e.exports, e, e.exports, r), (e.l = !0), e.exports; - } - var n, o; -}); diff --git a/static/js/main.js b/static/js/main.js index 6432eae..012df35 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -3,10 +3,10 @@ */ // Throttle -var throttle = (callback, limit) => { +const throttle = (callback, limit) => { let timeoutHandler = null; return () => { - if (timeoutHandler == null) { + if (timeoutHandler === null) { timeoutHandler = setTimeout(() => { callback(); timeoutHandler = null; @@ -16,83 +16,62 @@ var throttle = (callback, limit) => { }; // addEventListener Helper -var listen = (ele, e, callback) => { - if (document.querySelector(ele) !== null) { - document.querySelector(ele).addEventListener(e, callback); +const listen = (selector, eventType, callback) => { + const element = document.querySelector(selector); + if (element) { + element.addEventListener(eventType, callback); } }; // FUNCTIONS // Auto Hide Header -var header = document.getElementById('site-header'); -var lastScrollPosition = window.pageYOffset; +const header = document.getElementById('site-header'); +let lastScrollPosition = window.scrollY; + +const autoHideHeader = () => { + const currentScrollPosition = window.scrollY; + + header.classList.toggle('slideInUp', currentScrollPosition <= lastScrollPosition); + header.classList.toggle('slideOutDown', currentScrollPosition > lastScrollPosition); -var autoHideHeader = () => { - let currentScrollPosition = window.pageYOffset; - if (currentScrollPosition > lastScrollPosition) { - header.classList.remove('slideInUp'); - header.classList.add('slideOutDown'); - } else { - header.classList.remove('slideOutDown'); - header.classList.add('slideInUp'); - } lastScrollPosition = currentScrollPosition; }; // Mobile Menu Toggle -var mobileMenuVisible = false; - -var toggleMobileMenu = () => { - let mobileMenu = document.getElementById('mobile-menu'); - - if (mobileMenuVisible == false) { - mobileMenu.style.animationName = 'bounceInRight'; - mobileMenu.style.webkitAnimationName = 'bounceInRight'; - mobileMenu.style.display = 'block'; - mobileMenuVisible = true; - } else { - mobileMenu.style.animationName = 'bounceOutRight'; - mobileMenu.style.webkitAnimationName = 'bounceOutRight'; - mobileMenuVisible = false; - } +let mobileMenuVisible = false; +const mobileMenu = document.getElementById('mobile-menu'); + +const toggleMobileMenu = () => { + const animationName = mobileMenuVisible ? 'bounceOutRight' : 'bounceInRight'; + mobileMenu.style.animationName = animationName; + mobileMenu.style.display = mobileMenuVisible ? 'none' : 'block'; + mobileMenuVisible = !mobileMenuVisible; }; // Featured Image Toggle -const showImg = () => { - document.querySelector('.bg-img').classList.add('show-bg-img'); +const toggleImg = () => { + document.querySelector('.bg-img').classList.toggle('show-bg-img'); }; -var hideImg = () => { - document.querySelector('.bg-img').classList.remove('show-bg-img'); -}; - -// ToC Toggle -var toggleToc = () => { +// Table of Contents Toggle +const toggleToc = () => { document.getElementById('toc').classList.toggle('show-toc'); }; -if (header !== null) { - const throttledAutoHideHeader = throttle(() => { - autoHideHeader(); - - if (mobileMenuVisible) { - toggleMobileMenu(); - } - }, 250); +// Event Listeners +const setupEventListeners = () => { + if (header) { + const throttledAutoHideHeader = throttle(autoHideHeader, 250); - // Check if showImg function already exists - //const showImg = () => { - // document.querySelector('.bg-img').classList.add('show-bg-img'); - //}; + listen('#menu-btn', 'click', toggleMobileMenu); + listen('#toc-btn', 'click', toggleToc); + listen('#img-btn', 'click', toggleImg); + listen('.bg-img', 'click', toggleImg); - listen('#menu-btn', 'click', toggleMobileMenu); - listen('#toc-btn', 'click', toggleToc); - listen('#img-btn', 'click', showImg); - listen('.bg-img', 'click', hideImg); + window.addEventListener('scroll', throttledAutoHideHeader); + } +}; - window.addEventListener( - 'scroll', - throttledAutoHideHeader - ); -} +// Execute setup function when DOM is fully loaded +document.addEventListener('DOMContentLoaded', setupEventListeners); diff --git a/templates/404.html b/templates/404.html index b044965..1a7cbb3 100644 --- a/templates/404.html +++ b/templates/404.html @@ -11,10 +11,10 @@

diff --git a/templates/index.html b/templates/index.html index 2a9b9a5..90a3f51 100644 --- a/templates/index.html +++ b/templates/index.html @@ -6,45 +6,45 @@ - - - - + + + + - + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - + + + @@ -52,10 +52,11 @@ - + - + + {% if page.title %} @@ -107,52 +108,24 @@ - - - - + + - {% if config.extra.highlightjs.enable %} - - - - - - {% if config.extra.highlightjs.clipboard %} - - - {% endif %} - - {% endif %} - - {% if not config.extra.highlightjs.enable %} - - {% endif %} - + + - {% block js_footer %} - {% endblock js_footer %} + + {% if config.extra.google_analytics.enable %} {% endif %} diff --git a/templates/macros.html b/templates/macros.html index 302bf43..e12a56e 100644 --- a/templates/macros.html +++ b/templates/macros.html @@ -1,9 +1,9 @@ {% macro read_time(words) %} - {% if words < 530 %} + {% if words < 500 %} 1 min read {% else %} - {{ words / 265 | round }} min read + {{ words / 250 | round }} min read {% endif %} {% endmacro read_time %} @@ -13,7 +13,7 @@

© {{ now() | date(format="%Y") }} {{ config.extra.author.name }}{{ config.extra.footer_copyright | safe }}

Made with Zola · Theme Hermit_Zola {% if config.generate_feed %} - · + · {% endif %}

@@ -21,8 +21,7 @@ {% macro render_social_icons() %} {% for icon in config.extra.hermit_social %} - + {% if icon.name == "codepen" %} {% elif icon.name == "facebook" %} diff --git a/templates/page.html b/templates/page.html index 15ccebc..d10adbc 100644 --- a/templates/page.html +++ b/templates/page.html @@ -31,8 +31,7 @@ stroke-width="2" stroke-linecap="round" stroke-linejoin="round" - class="feather feather-menu" - > + class="feather feather-menu"> @@ -81,9 +80,9 @@
- {{ page.content | safe }}
+