Leaflet Blog in Deno Fresh
knotbin.com
1import { date } from "../lib/date.ts";
2import { env } from "../lib/env.ts";
3
4import { Paragraph } from "./typography.tsx";
5import type { ComponentChildren } from "preact";
6
7// Calculate reading time based on content length
8function getReadingTime(content: string): number {
9 const wordsPerMinute = 200;
10 const words = content.trim().split(/\s+/).length;
11 const minutes = Math.max(1, Math.ceil(words / wordsPerMinute));
12 return minutes;
13}
14
15export function PostInfo({
16 createdAt,
17 content,
18 includeAuthor = false,
19 className,
20 children,
21}: {
22 createdAt?: string;
23 content: string;
24 includeAuthor?: boolean;
25 className?: string;
26 children?: ComponentChildren;
27}) {
28 const readingTime = getReadingTime(content);
29
30 return (
31 <Paragraph className={className}>
32 {includeAuthor && (
33 <>
34 <a
35 href={`https://bsky.app/profile/${env.NEXT_PUBLIC_BSKY_DID}`}
36 className="hover:underline hover:underline-offset-4"
37 >
38 Roscoe Rubin-Rottenberg
39 </a>{" "}
40 ·{" "}
41 </>
42 )}
43 {createdAt && (
44 <>
45 <time dateTime={createdAt}>{date(new Date(createdAt))}</time>{" "}
46 ·{" "}
47 </>
48 )}
49 <span>
50 <span style={{ lineHeight: 1, marginRight: "0.25rem" }}>
51 {readingTime} min read
52 </span>
53 </span>
54 {children}
55 </Paragraph>
56 );
57}