refactor: styles and format

docs/.vitepress/config.ts

@@ -4,6 +4,7 @@ export default defineConfig({
   lang: 'en-US',
   title: 'VitePress',
   description: 'Vite & Vue powered static site generator.',
+
   lastUpdated: true,
 
   themeConfig: {

docs/config/app-configs.md

@@ -152,7 +152,7 @@ export default {
 - Type: `boolean`
 - Default: `false`
 
-Use git commit to get the timestamp. Some themes may use it.
+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 {

docs/config/theme-configs.md

@@ -33,21 +33,6 @@ export default {
 }
 ```
 
-## lastUpdated
-
-- Type: `string`
-- Default: `Last Updated`
-
-The Last Updated prompt text.
-
-```ts
-export default {
-  themeConfig: {
-    lastUpdated: 'Updated Date'
-  }
-}
-```
-
 ## footer
 
 - Type: `Footer`
@@ -72,6 +57,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,7 +5,7 @@ import { useEditLink } from '../composables/edit-link'
 import { usePrevNext } from '../composables/prev-next'
 import VPIconEdit from './icons/VPIconEdit.vue'
 import VPLink from './VPLink.vue'
-import VPLastUpdated from './VPLastUpdated.vue'
+import VPDocFooterLastUpdated from './VPDocFooterLastUpdated.vue'
 
 const { theme, page, frontmatter } = useData()
 
@@ -22,7 +22,10 @@ const control = usePrevNext()
           {{ editLink.text }}
         </VPLink>
       </div>
-      <VPLastUpdated v-if="page.lastUpdated"/>
+
+      <div class="last-updated">
+        <VPDocFooterLastUpdated v-if="page.lastUpdated" />
+      </div>
     </div>
 
     <div class="prev-next">
@@ -48,23 +51,28 @@ const control = usePrevNext()
 }
 
 .edit-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  line-height: 20px;
-  font-size: 14px;
-  font-weight: 500;
+  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;
   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>

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

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watchEffect } from 'vue'
-import { useData } from 'vitepress'
-
-const { theme, page } = useData()
-const date = new Date(page.value.lastUpdated!)
-const isoDatetime = date.toISOString()
-const datetime = ref('')
-
-onMounted(() => {
-  watchEffect(() => {
-    // locale string might be different based on end user
-    // and will lead to potential hydration mismatch if calculated at build time
-    datetime.value = date.toLocaleString(window.navigator.language)
-  })
-})
-</script>
-
-<template>
-  <div>
-    {{ theme.lastUpdated ?? 'Last Updated' }}:
-    <time :datatime="isoDatetime">
-      {{ datetime }}
-    </time>
-  </div>
-</template>

types/default-theme.d.ts

@@ -24,11 +24,11 @@ export namespace DefaultTheme {
     editLink?: EditLink
 
     /**
-     * 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").
+     * Set custom last updated text.
+     *
+     * @default 'Last updated'
      */
-    lastUpdated?: string | boolean
+    lastUpdatedText?: string
 
     /**
      * The social links to be displayed at the end of the nav bar. Perfect for