Time-Dependent Content

Published: May 30, 2024

Revised: September 12, 2024

Overview

I had a situation where I wanted to be able to update a site in advance of when the new content was supposed to go live. In this particular case, the content was updated about every two weeks and I would get the updates a few days before that. The approach I show in this article uses only Server-Side Includes (SSI) and provides a simple way to do that.

Approach

The main page could look something like this. (Note: I've omitted much of the HTML page since it's not important to the discussion.)

Here's some of the code on index.shtml.

<h1>
   Main Page
</h1>
<p>
   Here's some content for this page.
</p>
      
<!--#config timefmt="%Y%m%d" -->
<!--#set var="today" value="$DATE_LOCAL" -->
<!--#set var="pubDate" value="20240101" -->

<!--#if expr='v("today") >= v("pubDate")' -->
   <p>
   Here's some content that should not be displayed until January 1, 2024.
   </p>
<!--#endif -->

Explanation

Line #8 is an SSI configuration directive and defines the format of the date provided by SSI. %Y gives the year in 4-digits. %m gives the month in 2-digits. And %d gives the day of the month in 2-digits.

Line #9 sets the variable "today," to today's date, the date the page is being accessed.

Line #10 defines the variable "pubDate," the date that the content is supposed to be displayed on and after. This is something that I update at the time I'm updating the content.

Line #12 is the beginning of as SSI if-block and compares the variable, "today" to the variable "pubDate." If it's greater than or equal to that date, then the content contained in the if-bloxk will be display. If not, it won't.

Used on This Site

I use this idea on just about every page on this site. You'll notice that I have a Publication Date at the top of the article, and if I've updated the article since that date a Revised Date is also shown. Whether or not the Revised Date appears is determined by the SSI I've shown in this article, and the code is below.

<!-- Manually set the Published Date -->
<!-- Need two formats, one that's more readable, and one that's an interger for comparison. -->
<!--#set var="published" value="January 4, 2024" -->
<!--#set var="pubDate" value="20240104" -->

<!-- Set the date format to an integer, yyyymmdd, for comparison later. -->
<!--#config timefmt="%Y%m%d" -->
<!-- Get the Last Modified Date from the environmental variable -->
<!--#set var="updated" value="$LAST_MODIFIED" -->

<div class="publishedDate"><strong>Published:</strong> <!--#echo var="published"--></div>

<!-- Change the date to a more readiable format -->
<!--#config timefmt="%B %e, %Y" -->

<!-- Set the Revised date to the last_modified, but now it's in a nicer format. -->
<!--#set var="revised" value="$LAST_MODIFIED" -->

<!--#if expr='v("updated") > v("pubDate")' -->
   <div class="lastRevisionDate"><strong>Revised:</strong> <!--#echo var="revised" --></div>
<!--#endif -->

Other Uses

Now if I can "turn-on" content after a specific date I can also "turn-off" content after a specific date. The code for doing that is straightforward, but I'll show it anyway.

<h1>
   Main Page
</h1>
<p>
   Here's some content for this page.
</p>
      
<!--#config timefmt="%Y%m%d" -->
<!--#set var="today" value="$DATE_LOCAL" -->
<!--#set var="turnOffDate" value="20240101" -->

<!--#if expr='v("today") <= v("turnOffDate")' -->
   <p>
   Here's some content that should be displayed until January 1, 2030.
   </p>
<!--#endif -->

The only real change, besides changing the name of the variable to be more meaningful, is that I'm displaying the content as lonog at the currect date is less that the date (line #12) I want the content to become unavailable.

Building Web Projects