1---
 2import { articleConfig, siteConfig } from '@/config';
 3import { default as MetaList, type MetaItem } from '@components/widgets/MetaList.astro';
 4import { getCategoryUrl, getTagUrl } from '@utils/content-utils';
 5import { t } from '@utils/i18n';
 6import type { HTMLAttributes } from 'astro/types';
 7
 8interface Props extends HTMLAttributes<'div'> {
 9  title: string;
10  publishedAt?: Date;
11  category?: string;
12  tags?: string[];
13  wordCount?: number;
14  readingTime?: number;
15  lang?: string;
16  class?: string;
17}
18
19const {
20  title,
21  publishedAt,
22  category,
23  tags,
24  wordCount,
25  readingTime,
26  lang,
27  class: className,
28  ...rest
29} = Astro.props;
30
31const metas: MetaItem[] = [
32  publishedAt && {
33    icon: 'material-symbols:calendar-clock-outline-rounded',
34    title: t.meta.publishedAt(),
35    text: publishedAt.toLocaleDateString(lang || siteConfig.lang.replace('_', '-')),
36    time: publishedAt,
37  },
38  articleConfig.wordCount && typeof wordCount === 'number'
39    ? {
40        icon: 'material-symbols:docs-rounded',
41        title: t.meta.wordsCount(),
42        text: t.status.wordsCount(wordCount),
43      }
44    : undefined,
45  articleConfig.readingTime && typeof readingTime === 'number'
46    ? {
47        icon: 'material-symbols:nest-clock-farsight-analog-rounded',
48        title: t.meta.readingTime(),
49        text: t.status.readTime(readingTime),
50      }
51    : undefined,
52  category
53    ? {
54        icon: 'material-symbols:category-outline-rounded',
55        title: t.meta.category(),
56        text: category,
57        link: getCategoryUrl(category),
58      }
59    : undefined,
60  tags && tags.length > 0
61    ? {
62        icon: 'material-symbols:tag-rounded',
63        title: t.meta.tags(),
64        group: tags.map((tag) => ({
65          text: tag,
66          link: getTagUrl(tag),
67        })),
68      }
69    : undefined,
70];
71---
72
73<div
74  id="post-info"
75  class:list={['grid grid-rows-[auto_minmax(0,1fr)] space-y-2 max-md:px-3', className]}
76  {...rest}
77>
78  <h1 class="text-3xl font-bold">{title}</h1>
79  <MetaList metas={metas} />
80</div>