feat: add "last updated" feature

src/client/theme-default/components/EditLink.vue

@@ -28,14 +28,9 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.edit-link {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  overflow: auto;
-}
-
 .link {
   display: inline-block;
+  font-size: 1rem;
   font-weight: 500;
   color: var(--c-text-light);
 }

src/client/theme-default/components/LastUpdated.vue

@@ -0,0 +1,67 @@
+<template>
+  <p v-if="hasLastUpdated" class="last-updated">
+    <span class="prefix">{{ prefix }}:</span>
+    <span class="datetime">{{ datetime }}</span>
+  </p>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import { useSiteDataByRoute, usePageData } from 'vitepress'
+
+export default defineComponent({
+  setup() {
+    const site = useSiteDataByRoute()
+    const page = usePageData()
+
+    const hasLastUpdated = computed(() => {
+      const lu = site.value.themeConfig.lastUpdated
+
+      return lu !== undefined && lu !== false
+    })
+
+    const prefix = computed(() => {
+      const p = site.value.themeConfig.lastUpdated
+
+      return p === true ? 'Last Updated' : p
+    })
+
+    const datetime = computed(() => {
+      return new Date(page.value.lastUpdated).toLocaleString('en-US')
+    })
+
+    return {
+      hasLastUpdated,
+      prefix,
+      datetime
+    }
+  }
+})
+</script>
+
+<style scoped>
+.last-updated {
+  display: inline-block;
+  margin: 0;
+  line-height: 1.4;
+  font-size: .9rem;
+  color: var(--c-text-light);
+}
+
+@media (min-width: 960px) {
+  .last-updated {
+    font-size: 1rem;
+  }
+}
+
+.prefix {
+  display: inline-block;
+  font-weight: 500;
+}
+
+.datetime {
+  display: inline-block;
+  margin-left: 6px;
+  font-weight: 400;
+}
+</style>

src/client/theme-default/components/Page.vue

@@ -6,7 +6,8 @@
       <Content />
     </div>
 
-    <EditLink />
+    <PageFooter />
+
     <NextAndPrevLinks />
 
     <slot name="bottom" />
@@ -15,12 +16,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import EditLink from './EditLink.vue'
+import PageFooter from './PageFooter.vue'
 import NextAndPrevLinks from './NextAndPrevLinks.vue'
 
 export default defineComponent({
   components: {
-    EditLink,
+    PageFooter,
     NextAndPrevLinks
   }
 })

src/client/theme-default/components/PageFooter.vue

@@ -0,0 +1,49 @@
+<template>
+  <footer class="page-footer">
+    <div class="edit">
+      <EditLink />
+    </div>
+    <div class="updated">
+      <LastUpdated />
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import EditLink from './EditLink.vue'
+import LastUpdated from './LastUpdated.vue'
+
+export default defineComponent({
+  components: {
+    EditLink,
+    LastUpdated
+  }
+})
+</script>
+
+<style scoped>
+.page-footer {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  overflow: auto;
+}
+
+@media (min-width: 960px) {
+  .page-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.updated {
+  padding-top: 4px;
+}
+
+@media (min-width: 960px) {
+  .updated {
+    padding-top: 0;
+  }
+}
+</style>

src/client/theme-default/config.ts

@@ -51,7 +51,13 @@ export namespace DefaultTheme {
      */
     editLinkText?: string
 
+    /**
+     * Show last updated time at the bottom of the page. Defaults to `false`.
+     * If given a string, it will be displayed as a prefix (default value:
+     * "Last Updated").
+     */
     lastUpdated?: string | boolean
+
     prevLink?: boolean
     nextLink?: boolean
   }