3 files changed, 57 insertions, 3 deletions
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 24e7d0189..9a3f6c90b 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -1,16 +1,70 @@
 import emojify from 'mastodon/emoji';
 import { length } from 'stringz';
+import { default as dateFormat } from 'date-fns/format';
+import distanceInWordsStrict from 'date-fns/distance_in_words_strict';
 
 window.jQuery = window.$ = require('jquery');
 require('jquery-ujs');
 require.context('../images/', true);
 
+const parseFormat = (format) => format.replace(/%(\w)/g, (_, modifier) => {
+  switch (modifier) {
+  case '%':
+    return '%';
+  case 'a':
+    return 'ddd';
+  case 'A':
+    return 'ddd';
+  case 'b':
+    return 'MMM';
+  case 'B':
+    return 'MMMM';
+  case 'd':
+    return 'DD';
+  case 'H':
+    return 'HH';
+  case 'I':
+    return 'hh';
+  case 'l':
+    return 'H';
+  case 'm':
+    return 'M';
+  case 'M':
+    return 'mm';
+  case 'p':
+    return 'A';
+  case 'S':
+    return 'ss';
+  case 'w':
+    return 'd';
+  case 'y':
+    return 'YY';
+  case 'Y':
+    return 'YYYY';
+  default:
+    return `%${modifier}`;
+  }
+});
+
 $(() => {
   $.each($('.emojify'), (_, content) => {
     const $content = $(content);
     $content.html(emojify($content.html()));
   });
 
+  $('time[data-format]').each((_, content) => {
+    const $content = $(content);
+    const format = parseFormat($content.data('format'));
+    const formattedDate = dateFormat($content.attr('datetime'), format);
+    $content.text(formattedDate);
+  });
+
+  $('time.time-ago').each((_, content) => {
+    const $content = $(content);
+    const timeAgo = distanceInWordsStrict(new Date(), $content.attr('datetime'), { addSuffix: true });
+    $content.text(timeAgo);
+  });
+
   $('.video-player video').on('click', e => {
     if (e.target.paused) {
       e.target.play();
diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml
index 0b4eeba54..4cf8acb0d 100644
--- a/app/views/stream_entries/_detailed_status.html.haml
+++ b/app/views/stream_entries/_detailed_status.html.haml
@@ -14,7 +14,6 @@
         %a.status__content__spoiler-link{ href: '#' }= t('statuses.show_more')
     %div.e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl?(status.content) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status)
 
-
   - unless status.media_attachments.empty?
     - if status.media_attachments.first.video?
       .video-player
@@ -32,7 +31,7 @@
   %div.detailed-status__meta
     %data.dt-published{ value: status.created_at.to_time.iso8601 }
     = link_to TagManager.instance.url_for(status), class: 'detailed-status__datetime u-url u-uid', target: stream_link_target, rel: 'noopener' do
-      %span= local_time(status.created_at, format: :default)
+      %time{ datetime: status.created_at.iso8601, title: l(status.created_at), data: { format: t('time.formats.default') } }= l(status.created_at)
     ·
     - if status.application
       - if status.application.website.blank?
diff --git a/app/views/stream_entries/_simple_status.html.haml b/app/views/stream_entries/_simple_status.html.haml
index 99acae23d..972f2abdc 100644
--- a/app/views/stream_entries/_simple_status.html.haml
+++ b/app/views/stream_entries/_simple_status.html.haml
@@ -1,7 +1,8 @@
 .status.light
   .status__header
     .status__meta
-      = link_to local_time_ago(status.created_at), TagManager.instance.url_for(status), class: 'status__relative-time u-url u-uid', title: l(status.created_at), target: stream_link_target, rel: 'noopener'
+      = link_to TagManager.instance.url_for(status), class: 'status__relative-time u-url u-uid', target: stream_link_target, rel: 'noopener' do
+        %time.time-ago{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at)
       %data.dt-published{ value: status.created_at.to_time.iso8601 }
 
     = link_to TagManager.instance.url_for(status.account), class: 'status__display-name p-author h-card', target: stream_link_target, rel: 'noopener' do