From 3ddd96ae1df100951a71ab0b280af9fc9ab4122f Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sat, 21 Nov 2020 15:48:00 -0600
Subject: [PATCH] Add dates to app pages

---
 pages/app/_slug.vue | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/pages/app/_slug.vue b/pages/app/_slug.vue
index 63ad65a..dc2a95b 100644
--- a/pages/app/_slug.vue
+++ b/pages/app/_slug.vue
@@ -24,12 +24,19 @@
                 >{{ (i === 0) ? 'View' : link.label }}</LinkButton>
             </div>
 
-            <div class="report-links py-24 shadow-none">
+            <div class="report-links py-24 text-xs shadow-none">
+                <div v-if="app.lastUpdated">
+                    <time
+                        :datetime="app.lastUpdated.raw"
+                    >
+                        Last Updated {{ lastUpdatedFriendly }}
+                    </time>
+                </div>
                 <!-- https://eric.blog/2016/01/08/prefilling-github-issues/ -->
                 <a
                     :href="`https://github.com/ThatGuySam/doesitarm/issues?q=is%3Aissue+is%3Aopen+${app.name}`"
                     target="_blank"
-                    class="text-xs"
+                    class="underline"
                     rel="noopener"
                 >Report Update</a>
             </div>
@@ -38,6 +45,7 @@
 </template>
 
 <script>
+import parseGithubDate from '~/helpers/parse-github-date'
 import LinkButton from '~/components/link-button.vue'
 import EmailSubscribe from '~/components/email-subscribe.vue'
 import appList from '~/app-list.json'
@@ -55,6 +63,18 @@ export default {
             app: appList.find(app => (app.slug === slug))
         }
     },
+    computed: {
+        lastUpdatedFriendly () {
+
+            if (this.app.lastUpdated === null) return
+
+            const options = { month: "long", day: "numeric", year: "numeric" }
+            const date = new Date(this.app.lastUpdated.raw)
+            const americanDate = new Intl.DateTimeFormat("en-US", options).format(date)
+
+            return americanDate
+        }
+    },
     head() {
         return {
             title: `Does ${this.app.name} work on Apple Silicon?`,