this repo has no description
clean up into components
+60
-36
+6
-30
src/app/post/[rkey]/page.tsx
+6
-30
src/app/post/[rkey]/page.tsx
···
5
5
import Link from "next/link";
6
6
import { type ComWhtwndBlogEntry } from "@atcute/client/lexicons";
7
7
import { Code as SyntaxHighlighter } from "bright";
8
-
import readingTime from "reading-time";
9
8
import rehypeSanitize from "rehype-sanitize";
10
9
11
-
import me from "#/assets/me_blue_square.jpg";
10
+
import { PostInfo } from "#/components/post-info";
12
11
import { Code, Paragraph, Title } from "#/components/typography";
13
12
import { bsky, MY_DID } from "#/lib/bsky";
14
13
···
67
66
Back
68
67
</Link>
69
68
<Title>{entry.title}</Title>
70
-
<Paragraph>
71
-
<Image
72
-
width={14}
73
-
height={14}
74
-
src={me}
75
-
alt="Samuel's profile picture"
76
-
className="inline rounded-full mr-1 mb-0.5"
77
-
/>
78
-
<a
79
-
href={`https://bsky.app/profile/${MY_DID}`}
80
-
className="hover:underline hover:underline-offset-4"
81
-
>
82
-
Samuel
83
-
</a>{" "}
84
-
{entry.createdAt && (
85
-
<>
86
-
·{" "}
87
-
<time dateTime={entry.createdAt}>
88
-
{date(new Date(entry.createdAt))}
89
-
</time>
90
-
</>
91
-
)}{" "}
92
-
· {readingTime(entry.content).text}
93
-
</Paragraph>
69
+
<PostInfo
70
+
content={entry.content}
71
+
createdAt={entry.createdAt}
72
+
includeAuthor
73
+
/>
94
74
<div className="diagonal-pattern w-full h-3" />
95
75
</div>
96
76
<Markdown
···
171
151
</div>
172
152
);
173
153
}
174
-
175
-
const { format: date } = new Intl.DateTimeFormat("en-GB", {
176
-
dateStyle: "medium",
177
-
});
+49
src/components/post-info.tsx
+49
src/components/post-info.tsx
···
1
+
import { ClockIcon } from "lucide-react";
2
+
import Image from "next/image";
3
+
import readingTime from "reading-time";
4
+
5
+
import me from "#/assets/me_blue_square.jpg";
6
+
import { MY_DID } from "#/lib/bsky";
7
+
import { date } from "#/lib/date";
8
+
9
+
import { Paragraph } from "./typography";
10
+
11
+
export function PostInfo({
12
+
createdAt,
13
+
content,
14
+
includeAuthor = false,
15
+
}: {
16
+
createdAt?: string;
17
+
content: string;
18
+
includeAuthor?: boolean;
19
+
}) {
20
+
return (
21
+
<Paragraph>
22
+
{includeAuthor && (
23
+
<>
24
+
<Image
25
+
width={14}
26
+
height={14}
27
+
src={me}
28
+
alt="Samuel's profile picture"
29
+
className="inline rounded-full mr-1 mb-0.5"
30
+
/>
31
+
<a
32
+
href={`https://bsky.app/profile/${MY_DID}`}
33
+
className="hover:underline hover:underline-offset-4"
34
+
>
35
+
Samuel
36
+
</a>{" "}
37
+
·{" "}
38
+
</>
39
+
)}
40
+
{createdAt && (
41
+
<>
42
+
<time dateTime={createdAt}>{date(new Date(createdAt))}</time> ·{" "}
43
+
</>
44
+
)}
45
+
<ClockIcon className="text-inherit inline size-3.5 mb-0.5" />{" "}
46
+
{readingTime(content).text}
47
+
</Paragraph>
48
+
);
49
+
}
+2
-6
src/components/post-list.tsx
+2
-6
src/components/post-list.tsx
···
1
-
import { ClockIcon } from "lucide-react";
2
1
import Link from "next/link";
3
2
import { type ComWhtwndBlogEntry } from "@atcute/client/lexicons";
4
-
import readingTime from "reading-time";
5
3
6
4
import { bsky, MY_DID } from "#/lib/bsky";
7
5
6
+
import { PostInfo } from "./post-info";
8
7
import { Paragraph, Title } from "./typography";
9
8
10
9
export async function PostList() {
···
30
29
<Title className="text-lg" level="h3">
31
30
{post.title}
32
31
</Title>
33
-
<Paragraph>
34
-
<ClockIcon className="text-inherit inline size-3" />{" "}
35
-
{readingTime(post.content).text}
36
-
</Paragraph>
32
+
<PostInfo content={post.content} createdAt={post.createdAt} />
37
33
</div>
38
34
</article>
39
35
</Link>