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
---
 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 +-
 6 files changed, 57 insertions(+), 88 deletions(-)

(limited to 'templates')

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 @@
     </p>
     <div class="banner-404">
         <h1>404</h1>
-        <p>Oops, police door not found…</p>
+        <p>Oops, police door not found...</p>
         <p class="btn-404">
             <a href="{{config.base_url}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>Home</a>
-            <a href='{{config.base_url}}/posts'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>Archives</a>
+            <a href='{{config.base_url}}/posts'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>Archive</a>
         </p>
     </div>
 </div>
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 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
 
-  <meta property="name" content="{{config.title}}"/>
-  <meta property="description" content="{{config.description}}"/>
-
-  <!--- Instructions for web scrapers --->
+  <!-- Instructions for web crawlers -->
   <meta name="robots" content="index, follow">
 
+
+
+  <!--- Below are the meta tags that are important for SEO \\ they are also important for social media sharing embeds --->
   <meta name="description" content="{{config.description}}">
-  <meta name="keywords" content="blog, technology, tech, philosophy, mathematics, artifficial intelligence, programming, linux, unix, void linux">
+  <meta name="keywords" content="blog, technology, science, philosophy, mathematics, artificial intelligence, AI research, machine learning, data science, deep learning, neural networks, Linux, Void Linux, OpenBSD, system administration, open source, FOSS, developer tools, programming, coding, tutorials, programming languages, software development, software engineering, computer science, algorithms, cybersecurity">
   <meta name="title" content="{{config.title}}">
   <meta name="author" content="Iustin Râznic">
 
-  <!--- Many websites use this so it has become almost standard to include --->
-  <meta name="og:site_name" content="Alphara's Blog">
-  <meta name="twitter:domain" property="twitter:domain" content="https://alphara.art">
-  <meta name="og:title" property="og:title" content="Alphara's Blog">
-  <meta name="og:description" content="{{config.description}}">
-  <meta name="twitter:description" property="twitter:description" content="{{config.description}}">
-  <meta name="twitter:title" content="Alphara's Blog">
-
-  <meta name="og:image" content="https://alphara.art/Alphara.png">
-
-  <!--- below is for twitter sharing previews \\ you can test this at cards-dev.twitter.com --->
-  <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:image" property="twitter:image" content="https://alphara.art/Alphara.png">
-  <meta name="twitter:image:src" property="twitter:image:src" content="https://alphara.art/Alphara.png">
-  <meta name="twitter:image:alt" property="twitter:image:alt" content="Alphara's Blog Logo">
-  <meta name="og:image:alt" property="og:image:alt" content="Alphara's Blog Logo">
-
-
+  <!--- Many websites use Open Graph so it has become standard to include --->
+  <meta property="og:title" content="Alphara's Blog">
+  <meta property="og:site_name" content="Alphara's Blog">
+  <meta property="og:description" content="{{config.description}}">
+  <meta property="og:image" content="https://alphara.art/Alphara.png">
+  <meta property="og:image:alt" content="Alphara">
 
   <meta property="og:url" content="https://alphara.art">
   <meta property="og:type" content="blog">
 
+  <!--- Below is for twitter general info --->
+  <meta name="twitter:domain" content="https://alphara.art">
+  <meta name="twitter:description" content="{{config.description}}">
+  <meta name="twitter:title" content="Alphara's Blog">
+
+  <!--- Below is for twitter sharing previews \\ you can test this at https://threadcreator.com/tools/twitter-card-validator --->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:image" content="https://alphara.art/Alphara.png">
+  <meta name="twitter:image:src" content="https://alphara.art/Alphara.png">
+  <meta name="twitter:image:alt" content="Alphara">
+
   <!--- If you have accounts on twitter that are relevant to your site --->
-  <meta name="twitter:site" property="twitter:site" content="@IustinRaznic">
-  <meta name="twitter:creator" property="twitter:creator" content="@IustinRaznic">
+  <meta name="twitter:site" content="@IustinRaznic">
+  <meta name="twitter:creator" content="@IustinRaznic">
 
 
 
+  <!-- Icons and Stylesheets -->
   <link rel="apple-touch-icon" sizes="180x180" href="{{get_url(path="apple-touch-icon.png")}}"/>
   <link rel="icon" type="image/png" sizes="32x32" href="{{get_url(path="favicon-32x32.png")}}"/>
   <link rel="icon" type="image/png" sizes="16x16" href="{{get_url(path="favicon-16x16.png")}}"/>
@@ -52,10 +52,11 @@
   <link rel="manifest" href="{{get_url(path="site.webmanifest")}}">
   <link rel="mask-icon" href="{{get_url(path="safari-pinned-tab.svg")}}" color="#030303">
   <meta name="msapplication-TileColor" content="#603cba">
-  <!--<meta name="theme-color" content="#ffffff"> discord fancy ruler line on the left of embeds -->
+  <!-- <meta name="theme-color" content="#ffffff"> discord fancy ruler line on the left of link preview embeds -->
 
-  <link rel="shortcut icon" href="{{get_url(path="favicon.ico")}}"/> <!--- this is for old browsers that don't support the other icons / bookmarks--->
+  <link rel="shortcut icon" href="{{get_url(path="favicon.ico")}}"/> <!-- this is for old browsers that don't support the other tags -->
 
+  <!-- Stylesheets -->
   <link rel="stylesheet" href="{{get_url(path="style.css")}}"/>
 
   {% if page.title %}
@@ -107,52 +108,24 @@
 
 	<script src="{{get_url(path="js/main.js")}}"></script>
 
-	<!-- Math rendering -->
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
-    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
-        onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>
+	<!-- Math rendering with KaTeX -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
 
-    {% if config.extra.highlightjs.enable %}
-		<link href="https://unpkg.com/highlightjs-badge/highlightjs/styles/{{config.extra.highlightjs.theme}}.css" rel="stylesheet">
-		<!-- https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.1/build/styles/  for min version -->
-		<script src="https://unpkg.com/highlightjs-badge/highlightjs/highlight.pack.js"></script>
-		<script src="https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js"></script>
-		<script>
-			var pres = document.querySelectorAll("pre>code");
-			for (var i = 0; i < pres.length; i++) {
-				hljs.highlightBlock(pres[i]);
-			}
-		</script>
-		{% if config.extra.highlightjs.clipboard %}
-			<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
-			<script>
-				var options = {
-					copyIconClass: "gg-clipboard",
-					checkIconClass: "gg-check"
-				};
-				window.highlightJsBadge(options);
-			</script>
-		{% endif %}
-
-	{% endif %}
-
-	{% if not config.extra.highlightjs.enable %}
-	<script src="{{get_url(path="js/copy.js")}}"></script>
-	{% endif %}
-	<script src="{{get_url(path="js/main.js")}}"></script>
+    <!-- The loading of KaTeX is deferred to speed up page rendering -->
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
 
-    {% block js_footer %}
-    {% endblock js_footer %}
+    <!-- To automatically render math in text elements, include the auto-render extension -->
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
+        onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>
 
 	{% if config.extra.google_analytics.enable %}
     <!-- Global Site Tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id={{ config.extra.google_analytics.id }}"></script>
     <script>
-     window.dataLayer = window.dataLayer || [];
-     function gtag(){dataLayer.push(arguments);}
-     gtag('js', new Date());
-     gtag('config', '{{ config.extra.google_analytics.id }}');
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '{{ config.extra.google_analytics.id }}');
     </script>
     {% endif %}
   </body>
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) %}
 <span class="reading-time" title="Estimated read time">
-  {% if words < 530 %}
+  {% if words < 500 %}
   1 min read
   {% else %}
-  {{ words / 265 | round }} min read
+  {{ words / 250 | round }} min read
   {% endif %}
 </span>
 {% endmacro read_time %}
@@ -13,7 +13,7 @@
   <p>&copy; {{ now() | date(format="%Y") }} <a href="{{ config.base_url }}">{{ config.extra.author.name }}</a>{{ config.extra.footer_copyright | safe }}</p>
   <p>Made with <a href="https://www.getzola.org" target="_blank" rel="noopener">Zola</a> &#183; Theme <a href="https://github.com/VersBinarii/hermit_zola" target="_blank" rel="noopener">Hermit_Zola</a>
 	{% if config.generate_feed %}
-	&#183; <a href="{{ get_url(path=config.feed_filename, trailing_slash=false) }}" target="_blank" title="rss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a>
+    &#183; <a href="{{ get_url(path=config.feed_filename, trailing_slash=false) }}" target="_blank" title="rss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a>
 	{% endif %}
   </p>
 </footer>
@@ -21,8 +21,7 @@
 
 {% macro render_social_icons() %}
 {% for icon in config.extra.hermit_social %}
-<a href="{{ icon.link }}" target="_blank" rel="noopener me"
-   title="{{ icon.name }}">
+<a href="{{ icon.link }}" target="_blank" rel="noopener me" title="{{ icon.name }}">
   {% if icon.name == "codepen" %}
   <svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon><line x1="12" y1="22" x2="12" y2="15.5"></line><polyline points="22 8.5 12 15.5 2 8.5"></polyline><polyline points="2 15.5 12 8.5 22 15.5"></polyline><line x1="12" y1="2" x2="12" y2="8.5"></line></svg>
   {% 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">
           <line x1="3" y1="12" x2="21" y2="12"></line>
           <line x1="3" y1="6" x2="21" y2="6"></line>
           <line x1="3" y1="18" x2="21" y2="18"></line>
@@ -81,9 +80,9 @@
 	</header>
 
 	<div class="content">
-
 	  {{ page.content | safe }}
 	</div>
+
 	<hr class="post-end">
 	<footer class="post-info">
     {% if page.taxonomies and page.taxonomies.tags %}
@@ -105,7 +104,7 @@
     {% if page.extra.toc %}
     <aside id="toc">
         <div id="TableOfContents">
-            <div class="toc-title">Table of content</div>
+            <div class="toc-title">Table of Contents</div>
             <ul>
                 {% for h1 in page.toc %}
                 <li>
@@ -127,20 +126,20 @@
     {% endif %}
 
   <div class="post-nav thin">
-	{% if page.later %}
-	<a class="next-post" href="{{ page.later.permalink }}">
+	{% if page.extra.later %}
+	<a class="next-post" href="{{ page.extra.later.permalink }}">
 	  <span class="post-nav-label">
 		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left">
 		  <line x1="19" y1="12" x2="5" y2="12"></line>
 		  <polyline points="12 19 5 12 12 5"></polyline>
 		</svg>&nbsp;Newer</span><br>
-		<span>{{ page.later.title }}</span>
+		<span>{{ page.extra.later.title }}</span>
 	</a>
 	{% endif %}
-	{% if page.earlier %}
-	<a class="prev-post" href="{{ page.earlier.permalink }}">
+	{% if page.extra.earlier %}
+	<a class="prev-post" href="{{ page.extra.earlier.permalink }}">
 	  <span class="post-nav-label">Older&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span><br>
-	  <span>{{ page.earlier.title }}</span>
+	  <span>{{ page.extra.earlier.title }}</span>
 	</a>
 	{% endif %}
   </div>
@@ -164,7 +163,7 @@
         })();
     </script>
     <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-    {% endif %}
+  {% endif %}
 </main>
 {% endblock main %}
 
diff --git a/templates/section.html b/templates/section.html
index 4759971..2ef9118 100644
--- a/templates/section.html
+++ b/templates/section.html
@@ -32,8 +32,7 @@
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          class="feather feather-menu"
-        >
+          class="feather feather-menu">
           <line x1="3" y1="12" x2="21" y2="12"></line>
           <line x1="3" y1="6" x2="21" y2="6"></line>
           <line x1="3" y1="18" x2="21" y2="18"></line>
diff --git a/templates/tags/single.html b/templates/tags/single.html
index b9b66e7..6037d5d 100644
--- a/templates/tags/single.html
+++ b/templates/tags/single.html
@@ -30,8 +30,7 @@
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          class="feather feather-menu"
-        >
+          class="feather feather-menu">
           <line x1="3" y1="12" x2="21" y2="12"></line>
           <line x1="3" y1="6" x2="21" y2="6"></line>
           <line x1="3" y1="18" x2="21" y2="18"></line>
-- 
cgit v1.2.3