fix(*): use readableDate instead of yearsAgo

Author: timmywil

_includes/milestone-summary.njk

@@ -2,9 +2,9 @@
 
 <div class="milestone-summary">
   {% if milestone.completed != 0 %}
-    <p class="date">Completed {{ milestone.completed | yearsAgo }}</p>
+    <p class="date">Completed {{ milestone.completed | readableDate }}</p>
   {% elif milestone.due != 0 %}
-    <p class="date">Due {{ milestone.due | yearsAgo }}</p>
+    <p class="date">Due {{ milestone.due | readableDate }}</p>
   {% else %}
     <p class="date">No date set</p>
   {% endif %}
@@ -28,4 +28,4 @@
       {{ milestone.description | tracToHTML | safe }}
     </div>
   {% endif %}
-</div>
+</div>

content/attachment.njk

@@ -41,7 +41,7 @@
   <hr>
 
   <div class="attachment-info">
-    <h6>File {{ attachment.filename }}, {{ attachment.size | bytesToKilos }} (added by {{ attachment.author }}, {{ attachment.time | yearsAgo }})</h6>
+    <h6>File {{ attachment.filename }}, {{ attachment.size | bytesToKilos }} (added by {{ attachment.author }}, {{ attachment.time | readableDate }})</h6>
     {% if attachment.description %}
       <p>{{ attachment.description }}</p>
     {% endif %}

content/ticket.njk

@@ -64,12 +64,12 @@
     </h2>
 
     <div class="ticket-dates">
-      <p>Opened {{ ticket.time | yearsAgo }}</p>
+      <p>Opened {{ ticket.time | readableDate }}</p>
       {% if ticket.status == 'closed' and ticket.closedtime %}
-        <p>Closed {{ ticket.closedtime | yearsAgo }}</p>
+        <p>Closed {{ ticket.closedtime | readableDate }}</p>
       {% endif %}
       {% if not ticket.closedtime or ticket.closedtime != ticket.changetime %}
-        <p>Last modified {{ ticket.changetime | yearsAgo }}</p>
+        <p>Last modified {{ ticket.changetime | readableDate }}</p>
       {% endif %}
     </div>
   </div>
@@ -149,7 +149,7 @@
     {% for attachment in ticketAttachments %}
       <li>
         <a href="/attachment/ticket/{{ attachment.id }}/{{ attachment.filename }}/index.html">{{ attachment.filename }}</a> ({{ attachment.size | bytesToKilos }}) - added by {{ attachment.author }}
-        <strong>{{ attachment.time | yearsAgo }}</strong>.<br />
+        <strong>{{ attachment.time | readableDate }}</strong>.<br />
         {{ attachment.description | tracToHTML | safe }}
       </li>
     {% endfor %}
@@ -161,7 +161,7 @@
   {% for change in ticket.changes %}
     <div class="ticket-change flex-column" id="comment:{{ loop.index }}">
       <h3 class="flex-row flex-between-start ticket-change-header">
-        <span>Changed {{ change.time | yearsAgo }} by <span class="author">{{ change.author }}</span></span>
+        <span>Changed {{ change.time | readableDate }} by <span class="author">{{ change.author }}</span></span>
         <a class="ticket-change-link" href="#comment:{{ loop.index }}">comment:{{ loop.index }}</a>
       </h3>
 

eleventy.config.js

@@ -86,16 +86,6 @@ module.exports = function (eleventyConfig) {
   })
 
   // Filters
-  eleventyConfig.addFilter('yearsAgo', (datetime) => {
-    const date = new Date(datetime / 1000)
-    const now = new Date()
-    const years = now.getFullYear() - date.getFullYear()
-    if (years > 0) {
-      return `${years} year${years === 1 ? '' : 's'} ago`
-    }
-    return DateTime.fromJSDate(date, { zone: 'utc' }).toFormat('dd LLLL yyyy')
-  })
-
   eleventyConfig.addFilter('isImage', (filename) => {
     return /\.(jpg|jpeg|png|webp|gif|tiff|avif|svg)$/i.test(filename)
   })
@@ -113,10 +103,11 @@ module.exports = function (eleventyConfig) {
     return `${kilos.toFixed(1)} KB`
   })
 
-  eleventyConfig.addFilter('readableDate', (dateObj, format, zone) => {
+  eleventyConfig.addFilter('readableDate', (datetime, format, zone) => {
     // Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
-    return DateTime.fromJSDate(dateObj, { zone: zone || 'utc' }).toFormat(
-      format || 'dd LLLL yyyy'
+    const date = new Date(datetime / 1000)
+    return DateTime.fromJSDate(date, { zone: zone || 'utc' }).toFormat(
+      format || 'LLLL dd, yyyy hh:mma z'
     )
   })
 

public/css/ticket.css

@@ -39,6 +39,7 @@
 
 .ticket-title {
   border-bottom: 1px solid #bbb;
+  margin-top: 1em;
   padding-bottom: 0.25em;
   font-weight: bold;
   font-size: 1.1875rem;