From f6b8caa229f70ef25adf8ba5481ff9d65f1d3493 Mon Sep 17 00:00:00 2001
From: Adam Coldrick <adam@sotk.co.uk>
Date: Sat, 9 May 2020 20:26:52 +0100
Subject: [PATCH] Add a component for rendering dates

This component uses Luxon to handle date formatting, which is much
cleaner than using the JS Date API without an extra library.
---
 package.json                  |  1 +
 src/components/DateInline.vue | 23 +++++++++++++++++++++++
 yarn.lock                     |  5 +++++
 3 files changed, 29 insertions(+)
 create mode 100644 src/components/DateInline.vue

diff --git a/package.json b/package.json
index 8fff4bf..9dfbca0 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "crypto-js": "^4.0.0",
+    "luxon": "^1.24.1",
     "markdown-it": "^10.0.0",
     "prismjs": "^1.20.0",
     "vue": "^2.6.11",
diff --git a/src/components/DateInline.vue b/src/components/DateInline.vue
new file mode 100644
index 0000000..d845817
--- /dev/null
+++ b/src/components/DateInline.vue
@@ -0,0 +1,23 @@
+<template>
+  <span>
+    {{ datetime.toISODate() }}
+  </span>
+</template>
+
+<script>
+import { DateTime } from 'luxon'
+
+export default {
+  name: 'DateInline',
+  props: ['date'],
+  computed: {
+    datetime () {
+      return DateTime.fromISO(this.date)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/yarn.lock b/yarn.lock
index 1c6c1d1..83303b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6019,6 +6019,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+luxon@^1.24.1:
+  version "1.24.1"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.24.1.tgz#a8383266131ed4eaed4b5f430f96f3695403a52a"
+  integrity sha512-CgnIMKAWT0ghcuWFfCWBnWGOddM0zu6c4wZAWmD0NN7MZTnro0+833DF6tJep+xlxRPg4KtsYEHYLfTMBQKwYg==
+
 make-dir@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"