Hide Edited Date if longer than a specific period

Interesting question, thanks! I am also glad to see the results.

Regards, Stephan

Hey Kelly,

To customize the display of the "last edited" date based on how long ago an article was edited, you'd need to implement logic that compares the current date to the article's `edited_at` date and decide whether or not to display the "last edited" information based on this comparison.

Unfortunately, Handlebars (the templating language used in Zendesk Guide themes) lacks the built-in logic to directly perform date comparisons or arithmetic. Your current code snippet shows a conditional check to see if the `created_at` and `edited_at` timestamps are the same, and if they are, it only displays the creation date. If not, it shows that the article was updated and displays the `edited_at` date.

To achieve what you're looking for, you'll need a workaround because of Handlebars' limitations. One approach is to use JavaScript to dynamically check the `edited_at` date and compare it to the current date to determine if the difference exceeds your specified threshold (e.g., 30 days, a year). If the article was edited within your desired timeframe, you would then display the "last edited" date; if not, you wouldn't display it.

Here's a basic outline of how you could implement this:

1. **Modify your article template to include the `edited_at` date in a data attribute**: This step makes the `edited_at` date available to your JavaScript code.

   <div class="article-updated-at" data-edited-at="{{article.edited_at}}">
       {{#is article.created_at article.edited_at}}
           {{date article.created_at timeago=true}}
       {{else}}
           {{t 'updated'}} <span class="edited-date">{{date article.edited_at timeago=true}}</span>
       {{/is}}
   </div>

2. **Add JavaScript to your theme's script file**: This script will compare the current date with the `edited_at` date and hide the "last edited" date if it exceeds your specified period.

   document.addEventListener("DOMContentLoaded", function() {
       var articles = document.querySelectorAll('.article-updated-at');
       articles.forEach(function(article) {
           var editedAt = article.getAttribute('data-edited-at');
           if (editedAt) {
               var editedDate = new Date(editedAt);
               var now = new Date();
               var diffTime = Math.abs(now - editedDate);
               var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
               if (diffDays > 30) { // Replace 30 with the number of days you're interested in
                   article.querySelector('.edited-date').style.display = 'none';
               }
           }
       });
   });

This JavaScript snippet does the following:
- Waits for the document to be fully loaded.
- Selects all elements with the class `.article-updated-at` and iterates over them.
- For each element, it retrieves the `data-edited-at` attribute, which contains the article's last edited date.
- It then compares this date with the current date to calculate the difference in days.
- If this difference exceeds your specified threshold (30 days in the example), it hides the "last edited" text by setting its display style to 'none'.

Remember, this approach requires basic familiarity with JavaScript and understanding how to modify your Zendesk Guide theme. Always test changes in a safe environment before applying them to your live Help Center.  Hope this helps!

Brandon