feat(theme): allow customizing last updated date time format options (#2332)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

docs/reference/default-theme-config.md

@@ -292,21 +292,41 @@ export interface EditLink {
 }
 ```
 
-## lastUpdatedText
+## lastUpdated
 
-- Type: `string`
+- Type: `LastUpdatedOptions`
-- Default: `Last updated`
 
-The prefix text showing right before the last updated time.
+Allows customization for the last updated text and date format.
 
 ```ts
 export default {
   themeConfig: {
-    lastUpdatedText: 'Updated Date'
+    lastUpdated: {
+      text: 'Updated at',
+      formatOptions: {
+        dateStyle: 'full',
+        timeStyle: 'medium'
+      }
+    }
   }
 }
 ```
 
+```ts
+export interface LastUpdatedOptions {
+  /**
+   * @default 'Last updated'
+   */
+  text?: string
+
+  /**
+   * @default
+   * { dateStyle: 'short',  timeStyle: 'short' }
+   */
+  formatOptions?: Intl.DateTimeFormatOptions
+}
+```
+
 ## algolia
 
 - Type: `AlgoliaSearch`

docs/reference/default-theme-last-updated.md

@@ -20,3 +20,4 @@ lastUpdated: false
 ---
 ```
 
+Also refer [Default Theme: Last Updated](./default-theme-last-updated#last-updated) for more details. Any truthy value at theme-level will also enable the feature unless explicitly disabled at site or page level.

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

@@ -2,7 +2,7 @@
 import { ref, computed, watchEffect, onMounted } from 'vue'
 import { useData } from '../composables/data'
 
-const { theme, page, lang } = useData()
+const { theme, page } = useData()
 
 const date = computed(() => new Date(page.value.lastUpdated!))
 const isoDatetime = computed(() => date.value.toISOString())
@@ -12,14 +12,20 @@ const datetime = ref('')
 // potential differences in timezones of the server and clients
 onMounted(() => {
   watchEffect(() => {
-    datetime.value = date.value.toLocaleString(lang.value)
+    datetime.value = new Intl.DateTimeFormat(
+      undefined,
+      theme.value.lastUpdated?.formatOptions ?? {
+        dateStyle: 'short',
+        timeStyle: 'short'
+      }
+    ).format(date.value)
   })
 })
 </script>
 
 <template>
   <p class="VPLastUpdated">
-    {{ theme.lastUpdatedText || 'Last updated' }}:
+    {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
     <time :datetime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>

src/node/config.ts

@@ -105,7 +105,8 @@ export async function resolveConfig(
     logger,
     tempDir: resolve(root, '.temp'),
     markdown: userConfig.markdown,
-    lastUpdated: userConfig.lastUpdated,
+    lastUpdated:
+      userConfig.lastUpdated ?? !!userConfig.themeConfig?.lastUpdated,
     vue: userConfig.vue,
     vite: userConfig.vite,
     shouldPreload: userConfig.shouldPreload,

types/default-theme.d.ts

@@ -25,8 +25,7 @@ export namespace DefaultTheme {
     outline?: Outline | Outline['level'] | false
 
     /**
-     * @deprecated
+     * @deprecated Use `outline.label` instead.
-     * Use `outline.label` instead.
      *
      * @default 'On this page'
      */
@@ -58,12 +57,16 @@ export namespace DefaultTheme {
     editLink?: EditLink
 
     /**
+     * @deprecated Use `lastUpdated.text` instead.
+     *
      * Set custom last updated text.
      *
      * @default 'Last updated'
      */
     lastUpdatedText?: string
 
+    lastUpdated?: LastUpdatedOptions
+
     /**
      * Set custom prev/next labels.
      */
@@ -349,4 +352,24 @@ export namespace DefaultTheme {
     code: string
     placement: string
   }
+
+  // last updated --------------------------------------------------------------
+
+  export interface LastUpdatedOptions {
+    /**
+     * Set custom last updated text.
+     *
+     * @default 'Last updated'
+     */
+    text?: string
+
+    /**
+     * Set options for last updated time formatting.
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
+     *
+     * @default
+     * { dateStyle: 'short', timeStyle: 'short' }
+     */
+    formatOptions?: Intl.DateTimeFormatOptions
+  }
 }