Evaluate Expirydate with Javascript in real time

For example, if you want to publish Events with HUGO Pages and use expirydate in Frontmatter, the entry disappears only with the next deploy. But with a little javascript you can hide the entry in the list template automatically when the ExpiryDate expires.

<div id="eventlist">
{{ range .Pages }}
  <article data-expirydate="{{ .ExpiryDate.Unix }}">
   <h3>{{ .Title }}</h3>
   <p>...</p>
  </article>
{{ end }}
</div>

<script>
window.addEventListener('DOMContentLoaded', function() {
  let list = document.getElementById("eventlist");
  if (list) {
    let cnt = 0;
    list.querySelectorAll("article").forEach(item => {
      let datetime = item.getAttribute("data-expirydate")*1000;
      let now = Date.now();
      if (datetime < now) {
        item.style.display = 'none';
      } else {
        cnt++;
      }
    });
    if (cnt == 0) {
      list.innerHTML = 'No results';
    }
  }
});
</script> 

The javascript time is based on milliseconds, the Unix time on seconds. Therefore it needs the factor 1000 in the script. Also, the HUGO time may differ from the local user time by a few hours. But since you don’t know in which time zone the user is anyway, it is not worth to correct this. For me it is sufficient if the entry disappears soon.

So, here is an opinion you might not like, but well… anyway:

You are taking a broom, you are sweeping the floor, your are putting the dirt under a rug. But both YOU and ME know, that the dirt is there. It’s under the rug, remember? I saw you do it. GOOGLE knows it too. It sees that there is content that might be hidden visually, but the content is there. Accessibility tools know it. Screen readers will read your hidden content aloud, because there is no ARIA tag that hides the content. It’s that guy that has a body-paint-job done and blends in perfectly with the wallpaper until he moves or breaths out.

It’s hiding in plain sight.

Now I don’t leave my rant without some kind of solution: If you are using a provider that supports webhooks like Netlify, then you could run a daily cronjob or daily triggered hook that deploys every day at midnight your site and all expired posts are gone.

Think about that.

that’s right. But I’m looking for simple solutions that also work on a simple static webspace. Running HUGO based on Git and Netlify is certainly a great thing for high end websites. But for a small OnePage website or a private blog it’s overkill.

My solution closes the gap between the time when a page is outdated and the next deploy. No more and no less.

There is no one solution that fits everyone in every situation. :nerd_face:

No no no, Netlify is never overkill. Especially for a simple single page static site. It’s free, it’s (more or less, looking at Google) always available, it’s fast, it has DNS, it acts as a CDN for your assets, did I say it’s free? It has minification, bundling of page resources. Speed! Speed is ranking. Accessibility is ranking. I put all my playground sites on Netlify, because why not. The moment I need a “serious deployment” I think about where to host it, how to deploy assets.

It’s probably exactly the other way around than you think.

Exchange the Netlify above with Github Pages or any other static site hoster. Most of them offer free packages as long as you have no serious requirements. The only requirement in your specific case is that you need to somehow “trigger” a deploy from the outside.

Your solution might close the gap between deploys, but wait for that moment when you create a site for a customer, then have no contact for a year (no deploys either) and they “use google” and find outdated events. “Customers” tend to misunderstand the issue at hand :slight_smile:

When I hear “simple static website” I think "put it on Netlify or one of the Git hosters pages. Can’t explain it but from experience in the long term if you don’t have regular deploys (in sense of new content) you should find a way to automatically deploy somehow, maybe once a week, and clean up. Self cleaning system.

Other than that: My mantra is “static is the antonym of dynamic”. Just sayin’, *duckandrun*

I am not here in this forum to listen to advertising lectures about third party vendors, but to find and offer help and support for specific problems for HUGO development.

In your enthusiasm, you may find it difficult to understand that other people have different values and priorities. HUGO is a great system – even without Netlify. :wink:

My mantra is: “keep it simple”.

1 Like

Let’s leave it at that.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.