A personal website powered by Astro and ATProto
tynanpurdy.com
1---
2import type { ComWhtwndBlogEntryRecord } from '../../lib/generated/com-whtwnd-blog-entry';
3import { marked } from 'marked';
4
5interface Props {
6 record: ComWhtwndBlogEntryRecord;
7 showTags?: boolean;
8 showTimestamp?: boolean;
9}
10
11const { record, showTags = true, showTimestamp = true } = Astro.props;
12
13const formatDate = (dateString: string) => {
14 return new Date(dateString).toLocaleDateString('en-US', {
15 year: 'numeric',
16 month: 'long',
17 day: 'numeric',
18 });
19};
20
21const published = record.createdAt;
22const isValidDate = published ? !isNaN(new Date(published).getTime()) : false;
23---
24
25<article class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
26 <header class="mb-4">
27 <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
28 {record.title}
29 </h2>
30
31 {showTimestamp && isValidDate && (
32 <div class="text-sm text-gray-500 dark:text-gray-400 mb-3">
33 Published on {formatDate(published!)}
34 </div>
35 )}
36 </header>
37
38 <div class="prose prose-gray dark:prose-invert max-w-none">
39 <div class="text-gray-700 dark:text-gray-300 leading-relaxed">
40 <Fragment set:html={await marked(record.content || '')} />
41 </div>
42 </div>
43</article>