Add image CDN support & improve image lazy loading

_includes/lozad.html

@@ -2,7 +2,7 @@
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
 
 <script type="text/javascript">
-  const imgs = document.querySelectorAll('#post-wrapper img');
+  const imgs = document.querySelectorAll('.post-content img');
   const observer = lozad(imgs);
   observer.observe();
-</script>
+</script>

_includes/refactor-content.html

@@ -35,5 +35,32 @@
   %}
 {% endif %}
 
+{% if _content contains '<img src="' %}
+
+  {% if site.img_cdn != '' %}
+    {% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
+  {% else %}
+    {% assign img_path_replacement = '<img src="' | append: site.baseurl | append: '/' %}
+  {% endif %}
+
+  {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
+
+  <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+  {% assign lozad = true %}
+  {% assign img_placehodler
+    = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
+
+  {% assign lozad_replacement = '<img src="'
+    | append: img_placehodler
+    | append: '" data-src="' %}
+
+  {% assign _content = _content | replace: '<img src="', lozad_replacement %}
+
+{% endif %}
+
 <!-- return -->
 {{ _content }}
+
+{% if lozad %}
+  {% include lozad.html %}
+{% endif %}

_includes/sidebar.html

@@ -12,10 +12,15 @@
     <div id="avatar">
       <a href="{{ site.baseurl }}/" alt="avatar" class="mx-auto">
         {% assign avatar_url = site.avatar %}
-        {% capture start %}{{ site.avatar | slice: 0 }}{% endcapture %}
-        {% if start == '/' %}
-          {% assign avatar_url = avatar_url | prepend: site.baseurl %}
-        {% endif %}
+
+        {% unless avatar_url contains '://' %}
+          {% if site.img_cdn %}
+            {% assign avatar_url = avatar_url | prepend: site.img_cdn %}
+          {% else %}
+            {% assign avatar_url = avatar_url | relative_url %}
+          {% endif %}
+        {% endunless %}
+
         <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
       </a>
     </div>