perf: add `<time>` tag

pull/683/head
Percy Ma 3 years ago committed by GitHub
parent 7210449275
commit 97aafbd0d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -22,9 +22,7 @@ const control = usePrevNext()
{{ editLink.text }} {{ editLink.text }}
</VPLink> </VPLink>
</div> </div>
<div v-if="page.lastUpdated"> <VPLastUpdated v-if="page.lastUpdated"/>
<VPLastUpdated />
</div>
</div> </div>
<div class="prev-next"> <div class="prev-next">

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

Loading…
Cancel
Save