Add "Join Date" to profile, fixes #54

src/intl/en-US.js

@@ -296,9 +296,11 @@ export default {
   statuses: 'Toots',
   follows: 'Follows',
   followers: 'Followers',
+  joined: 'Joined',
   moreOptions: 'More options',
   followersLabel: 'Followed by {count}',
   followingLabel: 'Follows {count}',
+  joinedLabel: 'Joined on {date}',
   followLabel: `Follow {requested, select,
     true {(follow requested)}
     other {}

src/routes/_components/profile/AccountProfileDetails.html

@@ -1,5 +1,15 @@
 <h2 class="sr-only">{intl.statisticsAndMoreOptions}</h2>
 <div class="account-profile-details">
+  <span class="account-profile-details-item"
+    aria-label={joinedLabel}
+  >
+    <span class="account-profile-details-item-datum">
+      {joinDate}
+    </span>
+    <span class="account-profile-details-item-title">
+      {intl.joined}
+    </span>
+  </span>
   <div class="account-profile-details-item">
     <span class="account-profile-details-item-datum">
       {numStatusesDisplay}
@@ -93,6 +103,7 @@ <h2 class="sr-only">{intl.statisticsAndMoreOptions}</h2>
   import { LOCALE } from '../../_static/intl.js'
   import { formatIntl } from '../../_utils/formatIntl.js'
   import { thunk } from '../../_utils/thunk.js'
+  import { shortAbsoluteDateOnlyFormatter } from '../../_utils/formatters.js'
 
   const numberFormat = thunk(() => new Intl.NumberFormat(LOCALE))
 
@@ -114,7 +125,12 @@ <h2 class="sr-only">{intl.statisticsAndMoreOptions}</h2>
       ),
       followingLabel: ({ numFollowing }) => (
         formatIntl('intl.followingLabel', { count: numFollowing })
-      )
+      ),
+      joinedLabel: ({ joinDate }) => (
+        formatIntl('intl.joinedLabel', { date: joinDate })
+      ),
+      createdAtDateTS: ({ account }) => new Date(account.created_at).getTime(),
+      joinDate: ({ createdAtDateTS }) => shortAbsoluteDateOnlyFormatter().format(createdAtDateTS)
     }
   }
 </script>

src/routes/_utils/formatters.js

@@ -42,3 +42,9 @@ export const dayOnlyAbsoluteDateFormatter = thunk(() => safeFormatter(new Intl.D
   month: 'short',
   day: 'numeric'
 })))
+
+export const shortAbsoluteDateOnlyFormatter = thunk(() => safeFormatter(new Intl.DateTimeFormat(LOCALE, {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+})))