perf: replace luxon with dayjs (#608)

* perf: replace luxon with dayjs

resolves #573

* fix(time): use time tag

* refactor(footer): copy right year time tag

Co-authored-by: Damien Robinson <damien.robinson@xcommedia.com.au>

components/layout/last-modified.vue

@@ -1,56 +1,59 @@
 <template>
   <client-only>
-    <v-col v-if="lastModified" cols="auto">
-      <v-card flat tile color="transparent">
-        <v-card-text class="py-2">
-          <span>Last modified</span>
-          <v-tooltip top>
-            <span>{{ relativeDate }}</span>
-            <template v-slot:activator="{ on, attrs }">
-              <span v-bind="attrs" v-on="on">{{
-                utc
-                  ? new Date(lastModified).toUTCString()
-                  : DateTime.fromISO(lastModified).toRFC2822()
-              }}</span>
-            </template>
-          </v-tooltip>
-        </v-card-text>
-      </v-card>
-    </v-col>
+    <v-card v-if="lastModified" flat tile color="transparent">
+      <v-card-text class="py-2">
+        <span>Last modified</span>
+        <v-tooltip top>
+          <span>{{ relativeDate }}</span>
+          <template v-slot:activator="{ on, attrs }">
+            <time
+              v-bind="attrs"
+              itemprop="dateModified"
+              :content="lastModified.toISOString()"
+              :datetime="lastModified.toISOString()"
+              v-on="on"
+              >{{ lastModified.format(format) }}</time
+            >
+          </template>
+        </v-tooltip>
+      </v-card-text>
+    </v-card>
   </client-only>
 </template>
 
 <script>
-import { DateTime } from 'luxon';
+import * as dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
+
 export default {
   props: {
     utc: Boolean,
+    interval: { type: Number, default: 60000 },
+    format: { type: String, default: 'ddd, DD MMM YYYY HH:mm:ss Z' },
   },
   data() {
     return {
-      DateTime,
-      relativeDate: DateTime.fromISO(this.lastModified).toRelative(),
+      relativeDate: null,
       timer: null,
     };
   },
   computed: {
     lastModified() {
-      const lastModified = process.client ? document.lastModified : null;
-      return new Date(
-        lastModified || this.$config.DATE_GENERATED,
-      ).toISOString();
+      return dayjs(this.$config.DATE_GENERATED);
     },
   },
   created() {
-    this.timer = setInterval(this.toRelativeDate, 1000);
+    this.toRelativeDate();
+    this.timer = setInterval(this.toRelativeDate, this.interval);
   },
   beforeDestroy() {
     clearInterval(this.timer);
   },
   methods: {
     toRelativeDate() {
-      const lastModified = DateTime.fromISO(this.lastModified);
-      this.relativeDate = lastModified.toRelative();
+      this.relativeDate = this.lastModified.fromNow();
     },
   },
 };

components/layout/the-footer.vue

@@ -37,12 +37,14 @@
                 fixed-width
               />
               <span>New Farm, Australia</span>
-              <span>© 2019 | Damien Robinson</span>
+              <span>© <time datetime="2019">2019</time> | Damien Robinson</span>
             </v-card-text>
           </v-card>
         </v-col>
         <v-spacer />
-        <last-modified v-bind="{ utc }" />
+        <v-col cols="auto">
+          <last-modified v-bind="{ utc }" />
+        </v-col>
       </v-row>
     </v-container>
   </v-footer>

package.json

@@ -56,9 +56,9 @@
     "@nuxtjs/pwa": "3.0.2",
     "@nuxtjs/sitemap": "2.4.0",
     "cross-env": "7.0.2",
+    "dayjs": "1.8.36",
     "github-markdown-css": "4.0.0",
     "koa": "2.13.0",
-    "luxon": "1.25.0",
     "mailgo": "0.9.18",
     "nuxt": "2.14.5",
     "nuxt-fontawesome": "0.4.0",

pages/portfolio.vue

@@ -44,15 +44,13 @@
             {{ description }}
           </v-card-text>
           <v-card-text v-if="startDate || endDate">
-            <span v-if="startDate"
-              >{{
-                DateTime.fromISO(startDate).toLocaleString(DateTime.DATE_MED)
-              }}
-            </span>
+            <time v-if="startDate" :datetime="new Date(startDate).toISOString()"
+              >{{ formatDate(startDate) }}
+            </time>
             <span v-if="startDate && endDate">to</span>
-            <span v-if="endDate">{{
-              DateTime.fromISO(endDate).toLocaleString(DateTime.DATE_MED)
-            }}</span>
+            <time v-if="endDate" :datetime="new Date(endDate).toISOString()">{{
+              formatDate(endDate)
+            }}</time>
           </v-card-text>
           <v-card-actions class="mt-auto">
             <v-spacer></v-spacer>
@@ -80,10 +78,9 @@
 
 <script>
 import { mdiWeb, mdiGithub, mdiOpenInNew } from '@mdi/js';
-import { DateTime } from 'luxon';
+import * as dayjs from 'dayjs';
 export default {
   data: () => ({
-    DateTime,
     heading: 'Portfolio',
     description: 'Explore demos and code for my projects.',
     projects: [
@@ -143,6 +140,9 @@ export default {
     ],
   }),
   methods: {
+    formatDate(date) {
+      return dayjs(date).format('MMM D, YYYY');
+    },
     backgroundColor: require.context(
       '~/assets/img/portfolio?lqip-colors',
       false,