Creating Disclaimers for Old Blog Posts in Jekyll

While going through my old blog posts, I realized that some of them are getting dated, and that I should set aside time to test and/or update their content if necessary (especially those with technical instructions and command line syntax).

I needed a way to let readers know that, unless otherwise marked as updated, there’s a small chance that instructions and guides contained in older posts may not produce intended results.

The easiest approach I could think of was to use JavaScript to calculate the effective age of a post, and display a message to readers based on how old that post is. I’ll explain how I did this for my own site, and I’m sure you’ll be able to replicate as needed.

Creating DOM Nodes

First, I needed to create a hidden div in Jekyll’s _layouts/post.html template that will store the initial values needed:

<div class="d-none">
  <div id="post-date-unix">{{ page.date | date: "%s" }}</div>
  <div id="post-category">{{ page.categories }}</div>
</div>

In the above markup, the Liquid variable {{ page.date | date: "%s" }} can be used to get the date in UNIX time format.

Also, the Liquid variable {{ page.categories }} can be used to populate the list of categories that Jekyll generates for the blog post. I only need these types of disclaimers for posts in the Guides category of my blog — where code snippets are often present which may become deprecated or non-functional over time.

Finally, I created another div where the message will be shown if the condition is matched:

<p class="d-none" id="post-age-notification"></p>

Since I’m using Bootstrap, I leveraged the class name d-none to toggle hidden items. If you’re not using a framework that offers this, you can add your own class for this purpose using the following CSS syntax:

.d-none {
  display: none;
}

Calculating Post Dates

First, I’ll declare a variable that references the target node containing the HTML message to be displayed:

// <p class="d-none" id="post-age-notification"></p>

let postNotification = document.getElementById('post-age-notification');

Next, I’ll take the value of the UNIX timestamp that Jekyll generated for the blog post and store that in another variable:

// <div id="post-date-unix">987654321098</div>

let postDate = Number(document.getElementById('post-date-unix').innerHTML);

Then, I’ll get the category that Jekyll generated, and store that value in a variable as well:

// <div id="post-category">guides</div>

let postCategory = document.getElementById('post-category').innerHTML.toLowerCase();

The string method toLowerCase() is used to guarantee sanitization of a string that will be used conditionally, which is in itself a JavaScript best-practice anyway.

Next up is the important bit, which is simply calculating the current UNIX timestamp (i.e. the time when the page was loaded), and then subtracting from that value the post’s timestamp (i.e when it was published).

The difference represents the effective age of the post (in seconds), and is stored it its own variable:

let postAge = Math.floor(new Date().getTime()/1000.0) - postDate;

Since the post age is in seconds, further dividing this number by the number of seconds in one month will result in the age of the post in months:

let postAgeMonths = Math.floor(postAge / 2629746);

With those variables and methods called, I can then conditionally show a message to the reader based on the age of the blog post that has been calculated:

if (postCategory.includes('guides') && postAgeMonths > 6) {
  postNotification.classList.remove('d-none');
  postNotification.innerHTML = `This post is around ${postAgeMonths} months old. If any of the information seems outdated or is inaccurate, please <a href="mailto:[email protected]" target="_blank" rel="noopener">drop me an email</a> and I'll be happy to update it.`;

Once the if statement is true, the d-none hidden class will be removed from the target node, thereby making the div element visible, and the text within that element will be updated with whatever message is specified, using the postAgeMonths variable to display the age of the post.

If the conditions for the if statement are falsy, then then nothing will happen (i.e. the target node will remain hidden due to it’s CSS class).

The final JavaScript code should look like this:

// Assign the target node containing the HTML message to a variable
let postNotification = document.getElementById('post-age-notification');

// Read the contents of the 'div' containing the post's UNIX timestamp
let postDate = Number(document.getElementById('post-date-unix').innerHTML);

// Read the contents of the 'div' containing the post's category
let postCategory = document.getElementById('post-category').innerHTML.toLowerCase();

// Get the current age of the post by subtracting the post's timestamp from the current UNIX timestamp when the page is loaded, i.e. right now
let postAge = Math.floor(new Date().getTime()/1000.0) - postDate;

// Calculate the age in months by dividing the post's age by the number of seconds in a month, and rounding it down to an integer
let postAgeMonths = Math.floor(postAge / 2629746);

// If the post age (in months) is greater than 6 (months), then remove the hidden CSS class from the target node, and insert the HTML message
if (postCategory.includes('guides') && postAgeMonths > 6) {
  postNotification.classList.remove('d-none');
  postNotification.innerHTML = `This post is around ${postAgeMonths} months old. If any of the information seems outdated or is inaccurate, please <a href="mailto:[email protected]" target="_blank" rel="noopener">drop me an email</a> and I'll be happy to update it.`;

That file can ideally be saved somewhere with a .js extension and then injected at the bottom of each blog post (to ensure the variables point to DOM elements that have already been rendered and therefore can be read):

<script type="text/javascript" src="/blog/age.js"></script>

Thanks for reading, and I hope you can tweak this technique in your Jekyll blog to give readers an acknowledgement that content within a blog post (or page) may be outdated given the passage of time.

21 Nov 2021 guides