Make relative timestamps update automatically

It’s weird to be on a page that says ‘2 seconds ago’ and stays stuck
there.

We don’t want to AJAX the whole page because it would get in the way of
interacting with the list of notifications.

This commit adds the venerable jQuery Timeago[1] plugin to keep the
relative times accurate and fresh.

1. http://timeago.yarp.com/

app/assets/javascripts/main.js

@@ -1,3 +1,5 @@
+$(() => $("time.timeago").timeago());
+
 $(() => GOVUK.modules.start());
 
 $(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));

app/templates/views/api/index.html

@@ -75,7 +75,9 @@
               {{notification.key_name}}
             </div>
             <div class="column-half api-notifications-item-time">
-              {{ notification.created_at|format_delta }}
+              <time class="timeago" datetime="{{ notification.created_at }}">
+                {{ notification.created_at|format_delta }}
+              </time>
             </div>
           </div>
         </summary>

gulpfile.babel.js

@@ -74,7 +74,8 @@ gulp.task('javascripts', () => gulp
     paths.npm + 'hogan.js/dist/hogan-3.0.2.js',
     paths.npm + 'jquery/dist/jquery.min.js',
     paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
-    paths.npm + 'diff-dom/diffDOM.js'
+    paths.npm + 'diff-dom/diffDOM.js',
+    paths.npm + 'timeago/jquery.timeago.js'
   ]))
   .pipe(plugins.concat('all.js'))
   .pipe(gulp.dest(paths.dist + 'javascripts/'))

package.json

@@ -35,7 +35,8 @@
     "gulp-uglify": "1.5.1",
     "hogan": "1.0.2",
     "jquery": "1.11.2",
-    "query-command-supported": "1.0.0"
+    "query-command-supported": "1.0.0",
+    "timeago": "1.5.3"
   },
   "devDependencies": {
     "gulp-css-url-adjuster": "0.2.3",