From 230e139e43324b9ebef06ca8f6e13b3d9a7bdc70 Mon Sep 17 00:00:00 2001
From: Yassine Doghri <yassine@doghri.fr>
Date: Mon, 9 Aug 2021 15:56:59 +0000
Subject: [PATCH] feat: make displayed publication time as relative time using
 @github/time-elements

---
 app/Helpers/components_helper.php             | 21 +++++++++++++++++++
 app/Resources/js/admin.ts                     |  1 +
 app/Resources/js/podcast.ts                   |  1 +
 app/Views/admin/episode/publish_edit.php      | 15 ++-----------
 app/Views/podcast/_partials/episode_card.php  |  6 +-----
 .../_partials/episode_preview_card.php        |  8 +------
 app/Views/podcast/_partials/reblog.php        |  6 +-----
 .../_partials/reblog_authenticated.php        |  6 +-----
 app/Views/podcast/_partials/reply.php         |  7 +------
 .../podcast/_partials/reply_authenticated.php |  7 +------
 app/Views/podcast/_partials/status.php        |  6 +-----
 .../_partials/status_authenticated.php        |  6 +-----
 app/Views/podcast/episode.php                 |  8 +------
 app/Views/podcast/episode_authenticated.php   |  8 +------
 package-lock.json                             | 11 ++++++++++
 package.json                                  |  1 +
 16 files changed, 47 insertions(+), 71 deletions(-)

diff --git a/app/Helpers/components_helper.php b/app/Helpers/components_helper.php
index 58f80a3a..fc61c0ca 100644
--- a/app/Helpers/components_helper.php
+++ b/app/Helpers/components_helper.php
@@ -514,3 +514,24 @@ if (! function_exists('audio_player')) {
         CODE_SAMPLE;
     }
 }
+
+// ------------------------------------------------------------------------
+
+if (! function_exists('relative_time')) {
+    function relative_time(Time $time, string $class = ''): string
+    {
+        $translatedDate = lang('Common.mediumDate', [$time]);
+        $datetime = $time->toDateTimeString();
+
+        return <<<CODE_SAMPLE
+            <time-ago class="${class}" datetime="${datetime}">
+                <time
+                    itemprop="published"
+                    datetime="${datetime}"
+                    title="${time}">${translatedDate}</time>
+            </time-ago>
+        CODE_SAMPLE;
+    }
+}
+
+// ------------------------------------------------------------------------
diff --git a/app/Resources/js/admin.ts b/app/Resources/js/admin.ts
index 79f83272..9f9522cb 100644
--- a/app/Resources/js/admin.ts
+++ b/app/Resources/js/admin.ts
@@ -1,4 +1,5 @@
 import "@github/markdown-toolbar-element";
+import "@github/time-elements";
 import ClientTimezone from "./modules/ClientTimezone";
 import Clipboard from "./modules/Clipboard";
 import DateTimePicker from "./modules/DateTimePicker";
diff --git a/app/Resources/js/podcast.ts b/app/Resources/js/podcast.ts
index 67235fe7..f3036ec2 100644
--- a/app/Resources/js/podcast.ts
+++ b/app/Resources/js/podcast.ts
@@ -1,3 +1,4 @@
+import "@github/time-elements";
 import Dropdown from "./modules/Dropdown";
 import Time from "./modules/Time";
 import Toggler from "./modules/Toggler";
diff --git a/app/Views/admin/episode/publish_edit.php b/app/Views/admin/episode/publish_edit.php
index d71485dd..8d273db3 100644
--- a/app/Views/admin/episode/publish_edit.php
+++ b/app/Views/admin/episode/publish_edit.php
@@ -42,12 +42,7 @@
                 <span class="text-sm text-gray-500 truncate">@<?= $podcast
                                                                     ->actor->username ?></span>
             </p>
-            <time class="text-xs text-gray-500" itemprop="published" datetime="<?= $status->published_at->format(
-                                                                                    DateTime::ATOM,
-                                                                                ) ?>" title="<?= $status->published_at ?>"><?= lang(
-                                                            'Common.mediumDate',
-                                                            [$status->published_at],
-                                                        ) ?></time>
+            <?= relative_time($status->published_at, 'text-xs text-gray-500') ?>
         </div>
     </div>
     <div class="px-4 mb-2">
@@ -78,13 +73,7 @@
                     ) ?>
                 </div>
                 <div class="text-xs text-gray-600">
-                    <time itemprop="published" datetime="<?= $episode->published_at->format(
-                                                                DateTime::ATOM,
-                                                            ) ?>" title="<?= $episode->published_at ?>">
-                        <?= lang('Common.mediumDate', [
-                            $episode->published_at,
-                        ]) ?>
-                    </time>
+                    <?= relative_time($episode->published_at) ?>
                     <span class="mx-1">•</span>
                     <time datetime="PT<?= $episode->audio_file_duration ?>S">
                         <?= format_duration($episode->audio_file_duration) ?>
diff --git a/app/Views/podcast/_partials/episode_card.php b/app/Views/podcast/_partials/episode_card.php
index 9da514f0..1aff9de6 100644
--- a/app/Views/podcast/_partials/episode_card.php
+++ b/app/Views/podcast/_partials/episode_card.php
@@ -21,11 +21,7 @@
                     <span class="mx-1">-</span>
                     <?= $episode->title ?>
                 </h2>
-                <time class="text-xs whitespace-nowrap" itemprop="published" datetime="<?= $episode->published_at->format(DateTime::ATOM,) ?>" title="<?= $episode->published_at ?>">
-                    <?= lang('Common.mediumDate', [
-                        $episode->published_at,
-                    ]) ?>
-                </time>
+                <?= relative_time($episode->published_at, 'text-xs whitespace-nowrap') ?>
             </a>
             <div class="flex mt-auto gap-x-4">
                 <?= play_episode_button($episode->id, $episode->image->thumbnail_url, $episode->title, $podcast->title, $episode->audio_file_web_url, $episode->audio_file_mimetype, 'mt-auto') ?>
diff --git a/app/Views/podcast/_partials/episode_preview_card.php b/app/Views/podcast/_partials/episode_preview_card.php
index 15b5292c..25650339 100644
--- a/app/Views/podcast/_partials/episode_preview_card.php
+++ b/app/Views/podcast/_partials/episode_preview_card.php
@@ -19,13 +19,7 @@
                 <span class="mx-1">-</span>
                 <?= $episode->title ?>
             </div>
-            <time
-                class="text-xs"
-                itemprop="published"
-                datetime="<?= $episode->published_at->format(DateTime::ATOM) ?>"
-                title="<?= $episode->published_at ?>">
-                <?= lang('Common.mediumDate', [$episode->published_at]) ?>
-            </time> 
+            <?= relative_time($episode->published_at, 'text-xs whitespace-nowrap') ?>
         </a>
         <?= play_episode_button($episode->id, $episode->image->thumbnail_url, $episode->title, $podcast->title, $episode->audio_file_web_url, $episode->audio_file_mimetype, 'mt-auto') ?>
     </div>
diff --git a/app/Views/podcast/_partials/reblog.php b/app/Views/podcast/_partials/reblog.php
index bcf979ea..2abc307e 100644
--- a/app/Views/podcast/_partials/reblog.php
+++ b/app/Views/podcast/_partials/reblog.php
@@ -25,11 +25,7 @@
             </a>
             <a href="<?= route_to('status', $podcast->handle, $status->id) ?>"
             class="text-xs text-gray-500">
-                <time
-                itemprop="published"
-                datetime="<?= $status->published_at->format(DateTime::ATOM) ?>"
-                title="<?= $status->published_at ?>"
-                ><?= lang('Common.mediumDate', [$status->published_at]) ?></time>
+                <?= relative_time($status->published_at) ?>
             </a>
         </div>
     </header>
diff --git a/app/Views/podcast/_partials/reblog_authenticated.php b/app/Views/podcast/_partials/reblog_authenticated.php
index a4d12387..11c5d301 100644
--- a/app/Views/podcast/_partials/reblog_authenticated.php
+++ b/app/Views/podcast/_partials/reblog_authenticated.php
@@ -25,11 +25,7 @@
             </a>
             <a href="<?= route_to('status', $podcast->handle, $status->id) ?>"
             class="text-xs text-gray-500">
-                <time
-                itemprop="published"
-                datetime="<?= $status->published_at->format(DateTime::ATOM) ?>"
-                title="<?= $status->published_at ?>"
-                ><?= lang('Common.mediumDate', [$status->published_at]) ?></time>
+                <?= relative_time($status->published_at) ?>
             </a>
         </div>
     </header>
diff --git a/app/Views/podcast/_partials/reply.php b/app/Views/podcast/_partials/reply.php
index 8fb48bf8..12977a36 100644
--- a/app/Views/podcast/_partials/reply.php
+++ b/app/Views/podcast/_partials/reply.php
@@ -11,12 +11,7 @@
     ->display_name ?><span class="ml-1 text-sm font-normal text-gray-600">@<?= $reply
     ->actor->username .
     ($reply->actor->is_local ? '' : '@' . $reply->actor->domain) ?></span></a>
-            <time
-            class="flex-shrink-0 ml-auto text-xs text-gray-600"
-            itemprop="published"
-            datetime="<?= $reply->published_at->format(DateTime::ATOM) ?>"
-            title="<?= $reply->published_at ?>"
-            ><?= lang('Common.mediumDate', [$reply->published_at]) ?></time>
+            <?= relative_time($status->published_at, 'flex-shrink-0 ml-auto text-xs text-gray-600') ?>
         </header>
         <p class="mb-2 status-content"><?= $reply->message_html ?></p>
         <?php if ($reply->has_preview_card): ?>
diff --git a/app/Views/podcast/_partials/reply_authenticated.php b/app/Views/podcast/_partials/reply_authenticated.php
index ab264ce5..1d85461c 100644
--- a/app/Views/podcast/_partials/reply_authenticated.php
+++ b/app/Views/podcast/_partials/reply_authenticated.php
@@ -11,12 +11,7 @@
     ->display_name ?><span class="ml-1 text-sm font-normal text-gray-600">@<?= $reply
     ->actor->username .
     ($reply->actor->is_local ? '' : '@' . $reply->actor->domain) ?></span></a>
-            <time
-            class="flex-shrink-0 ml-auto text-xs text-gray-600"
-            itemprop="published"
-            datetime="<?= $reply->published_at->format(DateTime::ATOM) ?>"
-            title="<?= $reply->published_at ?>"
-            ><?= lang('Common.mediumDate', [$reply->published_at]) ?></time>
+            <?= relative_time($status->published_at, 'flex-shrink-0 ml-auto text-xs text-gray-600') ?>
         </header>
         <p class="mb-2 status-content"><?= $reply->message_html ?></p>
         <?php if ($reply->has_preview_card): ?>
diff --git a/app/Views/podcast/_partials/status.php b/app/Views/podcast/_partials/status.php
index 9d3b0f18..21d3d080 100644
--- a/app/Views/podcast/_partials/status.php
+++ b/app/Views/podcast/_partials/status.php
@@ -18,11 +18,7 @@
             </a>
             <a href="<?= route_to('status', $podcast->handle, $status->id) ?>"
             class="text-xs text-gray-500">
-                <time
-                itemprop="published"
-                datetime="<?= $status->published_at->format(DateTime::ATOM) ?>"
-                title="<?= $status->published_at ?>"
-                ><?= lang('Common.mediumDate', [$status->published_at]) ?></time>
+                <?= relative_time($status->published_at) ?>
             </a>
         </div>
     </header>
diff --git a/app/Views/podcast/_partials/status_authenticated.php b/app/Views/podcast/_partials/status_authenticated.php
index 3a1771c9..143be143 100644
--- a/app/Views/podcast/_partials/status_authenticated.php
+++ b/app/Views/podcast/_partials/status_authenticated.php
@@ -18,11 +18,7 @@
             </a>
             <a href="<?= route_to('status', $podcast->handle, $status->id) ?>"
             class="text-xs text-gray-500">
-                <time
-                itemprop="published"
-                datetime="<?= $status->published_at->format(DateTime::ATOM) ?>"
-                title="<?= $status->published_at ?>"
-                ><?= lang('Common.mediumDate', [$status->published_at]) ?></time>
+                <?= relative_time($status->published_at) ?>
             </a>
         </div>
     </header>
diff --git a/app/Views/podcast/episode.php b/app/Views/podcast/episode.php
index 834de56a..5d7fb555 100644
--- a/app/Views/podcast/episode.php
+++ b/app/Views/podcast/episode.php
@@ -59,13 +59,7 @@
                     'text-gray-700',
                 ) ?>
                 <div class="mb-4 text-xs">
-                    <time pubdate datetime="<?= $episode->published_at->format(
-                        DateTime::ATOM,
-                    ) ?>" title="<?= $episode->published_at ?>">
-                        <?= lang('Common.mediumDate', [
-                            $episode->published_at,
-                        ]) ?>
-                    </time>
+                    <?= relative_time($episode->published_at) ?>
                     <span class="mx-1">•</span>
                     <time datetime="PT<?= $episode->audio_file_duration ?>S">
                         <?= format_duration($episode->audio_file_duration) ?>
diff --git a/app/Views/podcast/episode_authenticated.php b/app/Views/podcast/episode_authenticated.php
index 695cddd0..743230cc 100644
--- a/app/Views/podcast/episode_authenticated.php
+++ b/app/Views/podcast/episode_authenticated.php
@@ -59,13 +59,7 @@
                     'text-gray-700',
                 ) ?>
                 <div class="mb-4 text-xs">
-                    <time pubdate datetime="<?= $episode->published_at->format(
-                        DateTime::ATOM,
-                    ) ?>" title="<?= $episode->published_at ?>">
-                        <?= lang('Common.mediumDate', [
-                            $episode->published_at,
-                        ]) ?>
-                    </time>
+                    <?= relative_time($episode->published_at) ?>
                     <span class="mx-1">•</span>
                     <time datetime="PT<?= $episode->audio_file_duration ?>S">
                         <?= format_duration($episode->audio_file_duration) ?>
diff --git a/package-lock.json b/package-lock.json
index 098dd276..605508c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@amcharts/amcharts4": "^4.10.20",
         "@amcharts/amcharts4-geodata": "^4.1.21",
         "@github/markdown-toolbar-element": "^1.5.1",
+        "@github/time-elements": "^3.1.2",
         "@popperjs/core": "^2.9.2",
         "@vime/core": "^5.0.33",
         "choices.js": "^9.0.1",
@@ -1039,6 +1040,11 @@
       "resolved": "https://registry.npmjs.org/@github/markdown-toolbar-element/-/markdown-toolbar-element-1.5.3.tgz",
       "integrity": "sha512-fNgAuHBWWzqxMvkTMM7ijqPryLmnPVOi4OWp8YyUC74YgtJCRvQyL7gl9SzNLMXmGQxiRVIYbUJxa61X1oRObw=="
     },
+    "node_modules/@github/time-elements": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.1.2.tgz",
+      "integrity": "sha512-YVtZVLBikP6I7na22kfB9PKIseISwX41MFJ7lPuNz1VVH2IR5cpRRU6F1X6kcchPChljuvMUR4OiwMWHOJQ8kQ=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -20246,6 +20252,11 @@
       "resolved": "https://registry.npmjs.org/@github/markdown-toolbar-element/-/markdown-toolbar-element-1.5.3.tgz",
       "integrity": "sha512-fNgAuHBWWzqxMvkTMM7ijqPryLmnPVOi4OWp8YyUC74YgtJCRvQyL7gl9SzNLMXmGQxiRVIYbUJxa61X1oRObw=="
     },
+    "@github/time-elements": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.1.2.tgz",
+      "integrity": "sha512-YVtZVLBikP6I7na22kfB9PKIseISwX41MFJ7lPuNz1VVH2IR5cpRRU6F1X6kcchPChljuvMUR4OiwMWHOJQ8kQ=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
diff --git a/package.json b/package.json
index 077fcc01..005821c7 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@amcharts/amcharts4-geodata": "^4.1.21",
     "@amcharts/amcharts4": "^4.10.20",
     "@github/markdown-toolbar-element": "^1.5.1",
+    "@github/time-elements": "^3.1.2",
     "@popperjs/core": "^2.9.2",
     "@vime/core": "^5.0.33",
     "choices.js": "^9.0.1",