A module for displaying time in a verbose manner

_time_long.scss

// time-long
// a component for verbal timestamps
time-long {
  display: block;
  position: relative;

  svg {
    fill: grey;
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 18px;
  }

  title {
    color: darkgrey;
    display: inline-block;
    font-size: 12pt;
    line-height: 15pt;
    margin-left: 2px;
  }
}

timeLong.js

/**
 * time-long
 * A module for displaying time in a verbose manner
 *
 * USE:
 * <time-long data='ISO 8601 Timestamp'></time-long>
 * <time-long data='ISO 8601 Timestamp' icon='true'></time-long>
 * OR:
 * let timeLong = require('./timeLong')
 * ${timeLong(timestamp)}
 *
 * Required Data:
 * '2015-12-22T18:02:12.405Z'
 *
 * Options:
 * - icon: Boolean - show/hide the calendar icon (default true)
 */
module.exports = function (timestamp, icon = true) {
  const m = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
  const d = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  let t = new Date(timestamp)
  let month = m[t.getMonth()]
  let date = t.getDate()
  let day = d[t.getDay()]
  let hours = t.getHours()
  let hour = (hours > 12) ? hours - 12 : hours
  let ampm = (hours > 12) ? 'pm' : 'am'
  let verb = nth(date)
  let calendar = `
    <svg version="1.1" id="calendar" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
      <rect x="64" y="192" width="384" height="256"/>
      <polygon points="448,96 352,96 352,144 336,144 336,96 176,96 176,144 160,144 160,96 64,96 64,176 448,176 	"/>
      <rect x="160" y="64" width="16" height="32"/>
      <rect x="336" y="64" width="16" height="32"/>
    </svg>`

  function nth(d) {
    if (d > 3 && d < 21) return 'th'

    switch (d % 10) {
      case 1:  return 'st'
      case 2:  return 'nd'
      case 3:  return 'rd'
      default: return 'th'
    }
  }

  return `
  <time-long>
    ${(icon) ? calendar : ''}
    <title>${day}, ${month} ${date}${verb} at ${hour}${ampm}</title>
  </time-long>
  `
};