feat: add `LastUpdated` support (#668) (#669) (#683)

close #668
close #669 

Co-authored-by: Kia Ishii <kia.king.08@gmail.com>

docs/.vitepress/config.ts

@@ -5,6 +5,8 @@ export default defineConfig({
   title: 'VitePress',
   description: 'Vite & Vue powered static site generator.',
 
+  lastUpdated: true,
+
   themeConfig: {
     nav: nav(),
 

docs/config/app-configs.md

@@ -146,3 +146,16 @@ export default {
   appearance: true
 }
 ```
+
+## lastUpdated
+
+- Type: `boolean`
+- Default: `false`
+
+Use git commit to get the timestamp. This option enables the default theme to display the page's last updated time. You can customize the text via [`themeConfig.lastUpdatedText`](theme-configs#lastupdatedtext) option.
+
+```ts
+export default {
+  lastUpdated: true
+}
+```

docs/config/theme-configs.md

@@ -71,6 +71,21 @@ export interface Footer {
 }
 ```
 
+## lastUpdatedText
+
+- Type: `string`
+- Default: `Last updated`
+
+The prefix text showing right before the last updated time.
+
+```ts
+export default {
+  themeConfig: {
+    lastUpdatedText: 'Updated Date'
+  }
+}
+```
+
 ## carbonAds
 
 - Type: `CarbonAds`

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

@@ -5,8 +5,9 @@ import { useEditLink } from '../composables/edit-link'
 import { usePrevNext } from '../composables/prev-next'
 import VPIconEdit from './icons/VPIconEdit.vue'
 import VPLink from './VPLink.vue'
+import VPDocFooterLastUpdated from './VPDocFooterLastUpdated.vue'
 
-const { theme, frontmatter } = useData()
+const { theme, page, frontmatter } = useData()
 
 const editLink = useEditLink()
 const control = usePrevNext()
@@ -14,11 +15,17 @@ const control = usePrevNext()
 
 <template>
   <footer v-if="control.prev || control.next" class="VPDocFooter">
-    <div v-if="theme.editLink && frontmatter.editLink !== false" class="edit-link">
+    <div class="edit-info">
-      <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
+      <div v-if="theme.editLink && frontmatter.editLink !== false" class="edit-link">
-        <VPIconEdit class="edit-link-icon" />
+        <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
-        {{ editLink.text }}
+          <VPIconEdit class="edit-link-icon" />
-      </VPLink>
+          {{ editLink.text }}
+        </VPLink>
+      </div>
+
+      <div v-if="page.lastUpdated" class="last-updated">
+        <VPDocFooterLastUpdated />
+      </div>
     </div>
 
     <div class="prev-next">
@@ -29,7 +36,7 @@ const control = usePrevNext()
         </a>
       </div>
       <div class="pager" :class="{ 'has-prev': control.prev }">
-        <a v-if="control.next"  class="pager-link next" :href="normalizeLink(control.next.link)">
+        <a v-if="control.next" class="pager-link next" :href="normalizeLink(control.next.link)">
           <span class="desc">Next page</span>
           <span class="title">{{ control.next.text }}</span>
         </a>
@@ -43,18 +50,29 @@ const control = usePrevNext()
   margin-top: 64px;
 }
 
+.edit-info {
+  padding-bottom: 18px;
+}
+
+@media (min-width: 640px) {
+  .edit-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding-bottom: 14px;
+  }
+}
+
 .edit-link {
-  padding-bottom: 14px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 500;
 }
 
 .edit-link-button {
   display: flex;
   align-items: center;
   border: 0;
-  padding: 10px 0;
-  line-height: 20px;
-  font-size: 14px;
-  font-weight: 500;
   color: var(--vp-c-brand);
   transition: color 0.25s;
 }

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref, watchEffect, onMounted } from 'vue'
+import { useData } from 'vitepress'
+
+const { theme, page } = useData()
+
+const date = new Date(page.value.lastUpdated!)
+const isoDatetime = date.toISOString()
+const datetime = ref('')
+
+// set time on mounted hook because the locale string might be different
+// based on end user and will lead to potential hydration mismatch if
+// calculated at build time
+onMounted(() => {
+  watchEffect(() => {
+    datetime.value = date.toLocaleString(window.navigator.language)
+  })
+})
+</script>
+
+<template>
+  <p class="VPLastUpdated">
+    {{ theme.lastUpdatedText ?? 'Last updated' }}:
+    <time :datatime="isoDatetime">{{ datetime }}</time>
+  </p>
+</template>
+
+<style scoped>
+.VPLastUpdated {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+@media (min-width: 640px) {
+  .VPLastUpdated {
+    line-height: 32px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+</style>

types/default-theme.d.ts

@@ -29,6 +29,13 @@ export namespace DefaultTheme {
      */
     editLink?: EditLink
 
+    /**
+     * Set custom last updated text.
+     *
+     * @default 'Last updated'
+     */
+    lastUpdatedText?: string
+
     /**
      * The social links to be displayed at the end of the nav bar. Perfect for
      * placing links to social services such as GitHub, Twitter, Facebook, etc.