Massive changes to:

- meta tags
- opacity levels
- pagespeed optimization
- enabled more configs, preparing for search functionality

 Changes to be committed:
        modified:   config.toml
        modified:   content/about.md
        modified:   content/posts/rust.md
        modified:   sass/_predefined.scss
        modified:   templates/index.html

1 files changed, 63 insertions, 27 deletions

diff --git a/templates/index.html b/templates/index.html
index c968941..b8af3c2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,37 +10,72 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
 
+    {% set page_title = page.title | default(value=config.title) %}
+    {% set page_description = page.description | default(value=config.description) %}
+    {% set page_url = page.permalink | default(value=config.base_url) %}
+    {% set page_image_src = page.extra.image_src | default(value=config.extra.meta.preview_image_src) %}
+    {% set page_image_alt = page.extra.image_alt | default(value=config.extra.meta.preview_image_alt) %}
+
+    <title>{{ page_title }}</title>
+
+    {% set canonical_url = config.base_url %}
+    {% if page %}
+        {% set canonical_url = page.permalink %}
+    {% elif section %}
+        {% set canonical_url = section.permalink %}
+    {% elif term %}
+        {% set canonical_url = term.permalink %}
+    {% endif %}
+    <link rel="canonical" href="{{ canonical_url }}">
+
     <!-- 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="{{ config.extra.meta.keywords }}">
-    <meta name="title" content="{{ config.title }}">
+    <meta name="description" content="{{ page_description }}">
     <meta name="author" content="{{ config.extra.author.name }}">
 
+
+
     <!--- Many websites use Open Graph so it has become standard to include --->
-    <meta property="og:title" content="{{ config.title }}">
+    <meta property="og:title" content="{{ page_title }}">
     <meta property="og:site_name" content="{{ config.title }}">
-    <meta property="og:description" content="{{ config.description }}">
-    <meta property="og:image" content="{{ config.extra.meta.preview_image_src }}">
-    <meta property="og:image:alt" content="{{ config.extra.meta.preview_image_alt }}">
+    <meta property="og:description" content="{{ page_description }}">
+    <meta property="og:image" content="{{ get_url(path=page_image_src) }}">
+    <meta property="og:image:alt" content="{{ page_image_alt }}">
+
+    <meta property="og:url" content="{{ page_url }}">
+    <meta property="og:type" content="{% if page %}article{% else %}website{% endif %}">
+
+    {# --- START: Add Rich Article Data (if it's a page) --- #}
+    {% if page %}
+        {# Published time in the required ISO 8601 format #}
+        <meta property="article:published_time" content="{{ page.date | date(format="%+") }}">
+
+        {# Author's name #}
+        <meta property="article:author" content="{{ config.extra.author.name }}">
+
+        {# Loop through all the tags for this page #}
+        {% if page.taxonomies and page.taxonomies.tags %}
+            {% for tag in page.taxonomies.tags %}
+                <meta property="article:tag" content="{{ tag }}">
+            {% endfor %}
+        {% endif %}
+    {% endif %}
+    {# --- END: Rich Article Data --- #}
+
 
-    <meta property="og:url" content="{{ config.base_url }}">
-    <meta property="og:type" content="{{ config.extra.meta.website_type }}">
 
     <!--- Below is for twitter general info --->
     <meta name="twitter:domain" content="{{ config.base_url }}">
-    <meta name="twitter:description" content="{{ config.description }}">
-    <meta name="twitter:title" content="{{ config.title }}">
+    <meta name="twitter:description" content="{{ page_description }}">
+    <meta name="twitter:title" content="{{ page_title }}">
 
     <!--- Below is for twitter sharing previews \\ you can test this at https://threadcreator.com/tools/twitter-card-validator --->
     <meta name="twitter:card" content="{{ config.extra.meta.twitter_card }}">
-    <meta name="twitter:image" content="{{ config.extra.meta.preview_image_src }}">
-    <meta name="twitter:image:src" content="{{ config.extra.meta.preview_image_src }}">
-    <meta name="twitter:image:alt" content="{{ config.extra.meta.preview_image_alt }}">
+    <meta name="twitter:image" content="{{ get_url(path=page_image_src) }}">
+    <meta name="twitter:image:src" content="{{ get_url(path=page_image_src) }}">
+    <meta name="twitter:image:alt" content="{{ page_image_alt }}">
 
     <!--- If you have accounts on twitter that are relevant to your site --->
     <meta name="twitter:site" content="{{ config.extra.meta.twitter_creator }}">
@@ -53,17 +88,22 @@
     <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") }}"/>
 
-    <!-- <link rel="manifest" href="{{ get_url(path="site.webmanifest") }}"> PWA + android manifest -->
+    <link rel="shortcut icon" href="{{ get_url(path="favicon.ico") }}"/>
+
     <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 link preview embeds -->
 
-    <link rel="shortcut icon" href="{{ get_url(path="favicon.ico") }}"/>
+    <!--PWA + android manifest-->
+    <link rel="manifest" href="{{ get_url(path="site.webmanifest") }}">
+
+    <!--discord fancy ruler line on the left of link preview embeds-->
+    <meta name="theme-color" content="#828ff9"> <!-- #ace6f0 #828ff9 #e94c80 -->
+
+
 
     <!-- Stylesheets -->
     <!--<link rel="stylesheet" href="{{ get_url(path="style.css") }}"/> old way of doing this, inefficient -->
 
-
     {# 1. Load our single combined critical CSS file. #}
     {% set critical_css = load_data(path="static/css/critical.css", required=false) %}
 
@@ -79,19 +119,15 @@
     <noscript><link rel="stylesheet" href="{{ get_url(path='style.css') }}"></noscript>
     <!-- Stylesheets End -->
 
+
+
     {% if page.extra.math %}
     <!-- Math rendering with KaTeX -->
     <link rel="stylesheet" href="{{ get_url(path="katex/katex.min.css") }}">
     {% endif %}
 
-    {% if page.title %}
-    <title>{{ page.title }}</title>
-    {% else %}
-    <title>{{ config.title }}</title>
-    {% endif %}
-
     {% if config.generate_feeds %}
-    <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path=config.feed_filenames[0], trailing_slash=false) }}">
+    <link rel="alternate" type="application/atom+xml" title="Atom Feed" href="{{ get_url(path=config.feed_filenames[0], trailing_slash=false) }}">
     {% endif %}
 
   </head>