This commit is contained in:
maropboia 2024-05-03 11:38:43 +06:00
parent dba89fae95
commit 5b4c22923b

View file

@ -1,40 +1,29 @@
<script setup lang="ts"> <script setup lang="ts">
// Import the 'useData' function from 'vitepress' to access frontmatter data
import { useData } from 'vitepress' import { useData } from 'vitepress'
// Import the 'Authors' component to display the list of authors
import Authors from './components/Authors.vue' import Authors from './components/Authors.vue'
// Define the props that this component accepts, including an array of authors
const props = defineProps<{ const props = defineProps<{
authors: string[] authors?: string[]
}>() }>()
// Define a function to format the raw date string into a more readable format
const formatDate = (raw: string): string => { const formatDate = (raw: string): string => {
// Create a new Date object using the raw date string
const date = new Date(raw) const date = new Date(raw)
// Return the formatted date string using the en-US locale and specifying
// the month and day in short and numeric formats, respectively
return date.toLocaleDateString('en-US', { return date.toLocaleDateString('en-US', {
month: 'short', month: 'short',
day: 'numeric' day: 'numeric'
}) })
} }
// Destructure the 'frontmatter' object from the data returned by the 'useData' function
const { frontmatter } = useData() const { frontmatter } = useData()
</script> </script>
<template> <template>
<!-- Display the title from the frontmatter object -->
<h1>{{ frontmatter.title }}</h1> <h1>{{ frontmatter.title }}</h1>
<div>
<!-- Display the description and formatted date from the frontmatter object --> {{ frontmatter.description }}
<div>{{ frontmatter.description }} {{ formatDate(frontmatter.date) }}</div> <template v-if="frontmatter.date">
{{ formatDate(frontmatter.date) }}
<!-- Render the 'Authors' component, passing in the array of authors as a prop --> </template>
<Authors :authors="props.authors" /> </div>
<Authors v-if="props.authors" :authors="props.authors" />
</template> </template>