feat(app/utils, plugins): normalize dates with improved format (#573)

source/app/metrics/utils.mjs

@@ -101,6 +101,14 @@ export function formatters({timeZone} = {}) {
 
   /**Date formatter */
   format.date = function(string, options) {
+    if (options.date) {
+      delete options.date
+      Object.assign(options, {day:"numeric", month:"short", year:"numeric"})
+    }
+    if (options.time) {
+      delete options.time
+      Object.assign(options, {hour:"2-digit", minute:"2-digit", second:"2-digit"})
+    }
     return new Intl.DateTimeFormat("en-GB", {timeZone, ...options}).format(new Date(string))
   }
 

source/app/web/statics/app.placeholder.js

@@ -1131,6 +1131,14 @@
       return `${text.substring(0, length)}…`
     }
     data.f.date = function(string, options) {
+      if (options.date) {
+        delete options.date
+        Object.assign(options, {day:"numeric", month:"short", year:"numeric"})
+      }
+      if (options.time) {
+        delete options.time
+        Object.assign(options, {hour:"2-digit", minute:"2-digit", second:"2-digit"})
+      }
       return new Intl.DateTimeFormat("en-GB", options).format(new Date(string))
     }
     data.f.license = function(text) {

source/plugins/achievements/index.mjs

@@ -28,7 +28,7 @@ export default async function({login, q, imports, data, computed, graphql, queri
       .map(({title, unlock, ...achievement}) => ({
         prefix:({S:"Master", A:"Super", B:"Great"}[achievement.rank] ?? ""),
         title,
-        unlock:!/invalid date/i.test(unlock) ? `${imports.format.date(unlock, {timeStyle:"short"})} on ${imports.format.date(unlock, {dateStyle:"short"})}` : null,
+        unlock:!/invalid date/i.test(unlock) ? `${imports.format.date(unlock, {time:true})} on ${imports.format.date(unlock, {date:true})}` : null,
         ...achievement,
       }))
       .map(({icon, ...achievement}) => ({icon:icon.replace(/#primary/g, colors[achievement.rank][0]).replace(/#secondary/g, colors[achievement.rank][1]), ...achievement}))

source/plugins/core/index.mjs

@@ -120,7 +120,7 @@ export default async function({login, q}, {conf, data, rest, graphql, plugins, q
   data.meta = {
     version:conf.package.version,
     author:conf.package.author,
-    generated:imports.format.date(new Date(), {dateStyle:"short", timeStyle:"short"})
+    generated:imports.format.date(new Date(), {date:true, time:true})
   }
 
   //Debug flags

source/plugins/music/index.mjs

@@ -164,7 +164,7 @@ export default async function({login, imports, data, q, account}, {enabled = fal
                   name:track.name,
                   artist:track.artists[0].name,
                   artwork:track.album.images[0].url,
-                  played_at:played_at ? `${imports.format.date(played_at, {timeStyle:"short"})} on ${imports.format.date(played_at, {dateStyle:"short"})}` : null,
+                  played_at:played_at ? `${imports.format.date(played_at, {time:true})} on ${imports.format.date(played_at, {date:true})}` : null,
                 }))
                 //Ensure no duplicate are added
                 for (const track of loaded) {

source/plugins/stackoverflow/index.mjs

@@ -89,7 +89,7 @@ const format = {
       accepted,
       comments,
       author,
-      created:imports.format.date(creation_date * 1000, {dateStyle:"short"}),
+      created:imports.format.date(creation_date * 1000, {date:true}),
       link,
       id,
       question_id,
@@ -136,7 +136,7 @@ const format = {
       comments,
       views,
       author,
-      created:imports.format.date(creation_date * 1000, {dateStyle:"short"}),
+      created:imports.format.date(creation_date * 1000, {date:true}),
       link,
       id,
       accepted_answer_id,

source/plugins/tweets/index.mjs

@@ -69,7 +69,7 @@ export default async function({login, imports, data, q, account}, {enabled = fal
 
       //Format text
       console.debug(`metrics/compute/${login}/plugins > tweets > formatting tweet ${tweet.id}`)
-      tweet.createdAt = `${imports.format.date(tweet.created_at, {timeStyle:"short"})} on ${imports.format.date(tweet.created_at, {dateStyle:"short"})}`
+      tweet.createdAt = `${imports.format.date(tweet.created_at, {time:true})} on ${imports.format.date(tweet.created_at, {date:true})}`
       tweet.text = imports.htmlescape(
         //Escape tags
         imports.htmlescape(tweet.text, {"<":true, ">":true})

source/templates/classic/partials/activity.ejs

@@ -169,7 +169,7 @@
                 <% } %>
                 <% if (plugins.activity.timestamps) { %>
                   <div class="timestamp">
-                    <%= f.date(timestamp, {timeStyle:"short", dateStyle:"short", timeZone:config.timezone?.name}) %>
+                    <%= f.date(timestamp, {time:true, date:true, timeZone:config.timezone?.name}) %>
                   </div>
                 <% } %>
               </section>

source/templates/classic/partials/posts.ejs

@@ -23,7 +23,7 @@
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
                   <div class="infos">
                     <div class="left">
-                      <div class="date"><%= f.date(new Date(date), {dateStyle:"short", timeZone:config.timezone?.name}) %></div>
+                      <div class="date"><%= f.date(new Date(date), {date:true, timeZone:config.timezone?.name}) %></div>
                       <% if (plugins.posts.covers) { %>
                         <div class="cover" style="background-image: url(<%= image %>);"></div>
                       <% } %>

source/templates/classic/partials/rss.ejs

@@ -18,7 +18,7 @@
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM4 8a4 4 0 118 0 4 4 0 01-8 0z"></path></svg>
                 <div class="infos">
                   <div class="title"><%= title %></div>
-                  <div class="date"><%= f.date(new Date(date), {dateStyle:"short", timeZone:config.timezone?.name}) %></div>
+                  <div class="date"><%= f.date(new Date(date), {date:true, timeZone:config.timezone?.name}) %></div>
                 </div>
               </div>
             <% } %>

source/templates/markdown/example.md

@@ -14,7 +14,7 @@ See [rendering of this file here](https://github.com/lowlighter/lowlighter/blob/
 * Same formatting helpers available in templates can be used too
 
 ```markdown
-I joined GitHub on `{{ f.date(REGISTRATION_DATE, {dateStyle:"short"}) }}`.
+I joined GitHub on `{{ f.date(REGISTRATION_DATE, {date:true}) }}`.
 I contributed to `{{ REPOSITORIES_CONTRIBUTED_TO }}` repositories and made `{{ COMMITS }}` commits.
 ```
 

source/templates/markdown/partials/activity.ejs

@@ -39,7 +39,7 @@
 * 🚮 Deleted <%= event.ref.type %> `<%= event.ref.name %>` from [<%= repo %>](https://github.com/<%= repo %>)
       <%_ } _%>
       <%_ if (plugins.activity.timestamps) { _%>
-  * *On <%= f.date(timestamp, {timeStyle:"short", dateStyle:"short", timeZone:config.timezone?.name}) %>*
+  * *On <%= f.date(timestamp, {time:true, date:true, timeZone:config.timezone?.name}) %>*
       <%_ } _%>
     <%_ } _%>
   <%_ } else { _%>

source/templates/markdown/partials/posts.ejs

@@ -19,7 +19,7 @@
     <td>
       <%= description %>
       <br>
-      <i>Published on <%= f.date(new Date(date), {dateStyle:"short", timeZone:config.timezone?.name}) %></i>
+      <i>Published on <%= f.date(new Date(date), {date:true, timeZone:config.timezone?.name}) %></i>
     </td>
   </tr>
 </table>
@@ -27,7 +27,7 @@
   <%_ } else if (plugins.posts.list.length) { _%>
     <%_ for (const {title, date, link} of plugins.posts.list) { _%>
 * [<%= title.trim() %>](<%= link %>)
-  * *Published on <%= f.date(new Date(date), {dateStyle:"short", timeZone:config.timezone?.name}) %>*
+  * *Published on <%= f.date(new Date(date), {date:true, timeZone:config.timezone?.name}) %>*
     <%_ } _%>
   <%_ } else { _%>
 No recent posts

source/templates/markdown/partials/rss.ejs

@@ -5,7 +5,7 @@
   <%_ } else if (plugins.rss.feed.length) { _%>
     <%_ for (const {title, link, date} of plugins.rss.feed) { _%>
 * [<%= title %>](<%= link %>)
-  * *Published on <%= f.date(new Date(date), {dateStyle:"short"}) %>*
+  * *Published on <%= f.date(new Date(date), {date:true}) %>*
     <%_ } _%>
   <%_ } else { _%>
 Empty RSS feed

source/templates/repository/partials/activity.ejs

@@ -169,7 +169,7 @@
                 <% } %>
                 <% if (plugins.activity.timestamps) { %>
                   <div class="timestamp">
-                    <%= f.date(timestamp, {timeStyle:"short", dateStyle:"short", timeZone:config.timezone?.name}) %>
+                    <%= f.date(timestamp, {time:true, date:true, timeZone:config.timezone?.name}) %>
                   </div>
                 <% } %>
               </section>

source/templates/repository/partials/rss.ejs

@@ -18,7 +18,7 @@
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM4 8a4 4 0 118 0 4 4 0 01-8 0z"></path></svg>
                 <div class="infos">
                   <div class="title"><%= title %></div>
-                  <div class="date"><%= f.date(new Date(date), {dateStyle:"short", timeZone:config.timezone?.name}) %></div>
+                  <div class="date"><%= f.date(new Date(date), {date:true, timeZone:config.timezone?.name}) %></div>
                 </div>
               </div>
             <% } %>