Cache busting for _sass and individual files (alshedivat#1557)

Addressing alshedivat#1395 but with a different solution from alshedivat#1478, using
semantic versioning based on implementation found
[here](https://distresssignal.org/busting-css-cache-with-jekyll-md5-hash).

Implemented a way of calculating the hash for both a single file or
directory. This way we can calculate the hash for when there is a change
in the `_sass` dir, for example, or in the contents of a single file.

Examples of generated outputs of the plugin:
```
/al-folio/assets/css/main.css?d41d8cd98f00b204e9800998ecf8427e
/al-folio/assets/js/theme.js?96d6b3e1c3604aca8b6134c7afdd5db6
/al-folio/assets/js/dark_mode.js?9b17307bb950ffa2e34be0227f53558f
/al-folio/assets/js/no_defer.js?d633890033921b33e0ceb13d22340a9c
/al-folio/assets/js/common.js?acdb9690d7641b2f8d40529018c71a01
/al-folio/assets/js/copy_code.js?c9d9dd48933de3831b3ee5ec9c209cac
/al-folio/assets/img/prof_pic.jpg?974957d202f671e4fa6700c04e68deae
```

Signed-off-by: George Araujo <[email protected]>

_includes/audio.html

@@ -1,7 +1,7 @@
 <figure>
 
   <audio
-    src="{{ include.path | relative_url }}"
+    src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
     {% if include.class %}class="{{ include.class }}"{% endif %}
     {% if include.alt %}alt="{{ include.alt }}"{% endif %}
     {% if include.title %}title="{{ include.title }}"{% endif %}

_includes/figure.html

@@ -5,30 +5,29 @@
   <picture>
     {% if site.imagemagick.enabled %}
     {% for i in site.imagemagick.widths -%}
-      <source 
+      <source
         class="responsive-img-srcset"
-        media="(max-width: {{ i }}px)" 
+        media="(max-width: {{ i }}px)"
         srcset="{{ img_path | relative_url }}-{{ i }}.webp"
       />
     {% endfor -%}
     {% endif %}
 
     <!-- Fallback to the original file -->
-    <img 
-      src="{{ include.path | relative_url }}"
-      {% if include.class %}class="{{ include.class }}"{% endif %}  
-      {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %} 
-      {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %} 
-      {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %} 
-      {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %} 
-      {% if include.max-width %}max-width="{{ include.max-width }}"{% endif %} 
-      {% if include.max-height %}max-height="{{ include.max-height }}"{% endif %} 
-      {% if include.alt %}alt="{{ include.alt }}"{% endif %} 
-      {% if include.title %}title="{{ include.title }}"{% endif %} 
+    <img
+      src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
+      {% if include.class %}class="{{ include.class }}"{% endif %}
+      {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %}
+      {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %}
+      {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %}
+      {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %}
+      {% if include.max-width %}max-width="{{ include.max-width }}"{% endif %}
+      {% if include.max-height %}max-height="{{ include.max-height }}"{% endif %}
+      {% if include.alt %}alt="{{ include.alt }}"{% endif %}
+      {% if include.title %}title="{{ include.title }}"{% endif %}
       {% if include.zoomable %}data-zoomable{% endif %}
       onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
     />
-
   </picture>
 
   {%- if include.caption -%}<figcaption class="caption">{{ include.caption }}</figcaption>{%- endif %}

_includes/head.html

@@ -27,13 +27,12 @@
     {% elsif site.icon != blank %}
     <link rel="shortcut icon" href="{{ site.icon | prepend: '/assets/img/' | relative_url}}"/>
     {% endif %}
-    <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+    <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url | bust_css_cache }}">
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
 
     <!-- Dark Mode -->
     {% if site.enable_darkmode %}
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jwarby/jekyll-pygments-themes@master/{{ site.highlight_theme_dark | append: '.css' }}" media="none" id="highlight_theme_dark" />
-
-    <script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
-    <script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/theme.js' | relative_url | bust_file_cache }}"></script>
+    <script src="{{ '/assets/js/dark_mode.js' | relative_url | bust_file_cache }}"></script>
     {% endif %}

_includes/scripts/misc.html

@@ -20,6 +20,6 @@
   <script defer src="https://unpkg.com/bootstrap-table@{{ site.bootstrap-table.version }}/dist/bootstrap-table.min.js"></script>
 
   <!-- Load Common JS -->
-  <script src="{{ '/assets/js/no_defer.js' | relative_url }}"></script>
-  <script defer src="{{ '/assets/js/common.js' | relative_url }}"></script>
-  <script defer src="{{ '/assets/js/copy_code.js' | relative_url }}" type="text/javascript"></script>
+  <script src="{{ '/assets/js/no_defer.js' | relative_url | bust_file_cache }}"></script>
+  <script defer src="{{ '/assets/js/common.js' | relative_url | bust_file_cache }}"></script>
+  <script defer src="{{ '/assets/js/copy_code.js' | relative_url | bust_file_cache }}" type="text/javascript"></script>

_includes/video.html

@@ -5,7 +5,7 @@
   {% if extension == "mp4" or extension == "webm" or extension == "ogg" %}
 
   <video
-    src="{{ include.path | relative_url }}"
+  src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
     {% if include.class %}class="{{ include.class }}"{% endif %}
     {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %}
     {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %}

_layouts/about.html

@@ -6,7 +6,7 @@
       <div class="post">
         <header class="post-header">
           <h1 class="post-title">
-           {% if site.title == "blank" -%}<span class="font-weight-bold">{{ site.first_name }}</span> {{ site.middle_name }} {{ site.last_name }}{%- else -%}{{ site.title }}{%- endif %}
+            {% if site.title == "blank" -%}<span class="font-weight-bold">{{ site.first_name }}</span> {{ site.middle_name }} {{ site.last_name }}{%- else -%}{{ site.title }}{%- endif %}
           </h1>
           <p class="desc">{{ page.subtitle }}</p>
         </header>
@@ -26,7 +26,8 @@ <h1 class="post-title">
               {% include figure.html
               path=profile_image_path
               class=profile_image_class
-              alt=page.profile.image -%}
+              alt=page.profile.image
+              cache_bust=true -%}
             {% endif -%}
             {%- if page.profile.address %}
             <div class="address">

_plugins/cache-bust.rb

@@ -0,0 +1,51 @@
+# based on https://distresssignal.org/busting-css-cache-with-jekyll-md5-hash
+# https://gist.github.com/BryanSchuetz/2ee8c115096d7dd98f294362f6a667db
+module Jekyll
+    module CacheBust
+        class CacheDigester
+            require 'digest/md5'
+            require 'pathname'
+
+            attr_accessor :file_name, :directory
+
+            def initialize(file_name:, directory: nil)
+                self.file_name = file_name
+                self.directory = directory
+            end
+
+            def digest!
+                [file_name, '?', Digest::MD5.hexdigest(file_contents)].join
+            end
+
+            private
+
+            def directory_files_content
+                target_path = File.join(directory, '**', '*')
+                Dir[target_path].map{|f| File.read(f) unless File.directory?(f) }.join
+            end
+
+            def file_content
+                local_file_name = file_name.slice((file_name.index('assets/')..-1))
+                File.read(local_file_name)
+            end
+
+            def file_contents
+                is_directory? ? file_content : directory_files_content
+            end
+
+            def is_directory?
+                directory.nil?
+            end
+        end
+
+        def bust_file_cache(file_name)
+            CacheDigester.new(file_name: file_name, directory: nil).digest!
+        end
+
+        def bust_css_cache(file_name)
+            CacheDigester.new(file_name: file_name, directory: 'assets/_sass').digest!
+        end
+    end
+end
+
+Liquid::Template.register_filter(Jekyll::CacheBust)