Skip to content

Commit

Permalink
Cache busting for _sass and individual files (alshedivat#1557)
Browse files Browse the repository at this point in the history
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 <george.gcac@gmail.com>
  • Loading branch information
george-gca authored and adityarauniyar committed Jan 17, 2024
1 parent cf23cac commit fe71797
Show file tree
Hide file tree
Showing 7 changed files with 75 additions and 25 deletions.
2 changes: 1 addition & 1 deletion _includes/audio.html
Original file line number Diff line number Diff line change
@@ -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 %}
Expand Down
27 changes: 13 additions & 14 deletions _includes/figure.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
7 changes: 3 additions & 4 deletions _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
6 changes: 3 additions & 3 deletions _includes/scripts/misc.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion _includes/video.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
5 changes: 3 additions & 2 deletions _layouts/about.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
51 changes: 51 additions & 0 deletions _plugins/cache-bust.rb
Original file line number Diff line number Diff line change
@@ -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)

0 comments on commit fe71797

Please sign in to comment.