diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index fb91560..f41f6b1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -20,7 +20,7 @@ jobs:
- name: Setup Deno
uses: denoland/setup-deno@v1
with:
- deno-version: v2.0.0
+ deno-version: v2.1.3
- name: Check types
run: deno task check
diff --git a/components/Avatar.tsx b/components/Avatar.tsx
new file mode 100644
index 0000000..a10d95c
--- /dev/null
+++ b/components/Avatar.tsx
@@ -0,0 +1,19 @@
+import { TbBrandBluesky } from '@preact-icons/tb'
+
+export function Avatar(
+ { src, name }: { src?: string; name?: string },
+) {
+ return src
+ ? (
+ 
+ )
+ : (
+
+ {name?.charAt(0).toUpperCase() || }
+
+ )
+}
diff --git a/components/BskyAuthor.tsx b/components/BskyAuthor.tsx
new file mode 100644
index 0000000..b1726ab
--- /dev/null
+++ b/components/BskyAuthor.tsx
@@ -0,0 +1,35 @@
+import { formatDateTime, getTimeAgo } from '../utils/intl.ts'
+
+export function BskyAuthor({ author, indexedAt, postUri }: {
+ author: { handle: string; displayName?: string }
+ indexedAt: string
+ postUri?: string
+}) {
+ return (
+
+ )
+}
diff --git a/components/PostEmbed.tsx b/components/PostEmbed.tsx
new file mode 100644
index 0000000..844da5b
--- /dev/null
+++ b/components/PostEmbed.tsx
@@ -0,0 +1,124 @@
+import type {
+ AppBskyEmbedExternal,
+ AppBskyEmbedImages,
+ AppBskyEmbedRecord,
+ AppBskyEmbedRecordWithMedia,
+ AppBskyEmbedVideo,
+} from '@atproto/api'
+import { Avatar } from './Avatar.tsx'
+import { BskyAuthor } from './BskyAuthor.tsx'
+import { ReactionBar } from './ReactionBar.tsx'
+import { TbArrowUpRight, TbBrandBluesky } from '@preact-icons/tb'
+
+// Type guard to check if the record has a text property
+const hasText = (value: unknown): value is { text: string } =>
+ typeof value === 'object' && value !== null && 'text' in value
+
+function EmbedContent({ postUri }: { postUri: string }) {
+ // Extract the post ID from the URI
+ const postId = postUri.split('/').pop()
+
+ // For AT protocol URIs, we need to extract the DID
+ const match = postUri.match(/at:\/\/([^/]+)\//)
+ const did = match ? match[1] : null
+
+ if (!postId || !did) {
+ console.warn('Invalid post URI:', postUri)
+ return null
+ }
+
+ return (
+
+ View content on
+ Bluesky
+
+ )
+}
+
+function EmbedBskyPost({ embed }: { embed: AppBskyEmbedRecord.View }) {
+ const record = embed.record as AppBskyEmbedRecord.ViewRecord
+
+ return (
+
+
+ {hasText(record.value) && (
+
{record.value.text}
+ )}
+
+ {typeof record.value === 'object' && record.value !== null &&
+ 'embed' in record.value &&
}
+
+
+
+
+
+ Post not found
+
+ )
+ }
+
+ // Handle list view
+ if (
+ typeof embed.record === 'object' && embed.record !== null &&
+ '$type' in embed.record &&
+ embed.record.$type === 'app.bsky.graph.defs#listView'
+ ) {
+ return
+ }
+ return
+ }
+
+ // For all other types of embeds, show a link to view on BlueSky
+ return
+}
diff --git a/components/ReactionBar.tsx b/components/ReactionBar.tsx
new file mode 100644
index 0000000..faf0d5d
--- /dev/null
+++ b/components/ReactionBar.tsx
@@ -0,0 +1,24 @@
+import { ReactionCount } from './ReactionCount.tsx'
+
+export function ReactionBar(
+ { likes, reposts, replies, postUri }: {
+ likes: number
+ reposts: number
+ replies: number
+ postUri: string
+ },
+) {
+ return (
+
+
+
+
+
+ )
+}
diff --git a/components/ReactionCount.tsx b/components/ReactionCount.tsx
new file mode 100644
index 0000000..c4967ca
--- /dev/null
+++ b/components/ReactionCount.tsx
@@ -0,0 +1,28 @@
+import TbHeart from '@preact-icons/tb/TbHeart'
+import TbMessageCircle from '@preact-icons/tb/TbMessageCircle'
+import TbRepeat from '@preact-icons/tb/TbRepeat'
+import { formatCount } from '../utils/intl.ts'
+
+export function ReactionCount(
+ { count, label }: { count: number; label: string },
+) {
+ const Icon = () => {
+ switch (label) {
+ case 'like':
+ return
+ case 'repost':
+ return
+ case 'reply':
+ return
+ default:
+ return null
+ }
+ }
+
+ return (
+
+
+ {formatCount(count)}
+
+ )
+}
diff --git a/components/Reply.tsx b/components/Reply.tsx
new file mode 100644
index 0000000..516cb00
--- /dev/null
+++ b/components/Reply.tsx
@@ -0,0 +1,91 @@
+import type { AppBskyFeedDefs } from '@atproto/api'
+import { AppBskyFeedPost } from '@atproto/api'
+import { Avatar } from './Avatar.tsx'
+import { BskyAuthor } from './BskyAuthor.tsx'
+import { PostEmbed } from './PostEmbed.tsx'
+import { ReactionBar } from './ReactionBar.tsx'
+import { TbArrowUpRight, TbBrandBluesky } from '@preact-icons/tb'
+
+export function Reply(
+ { thread }: {
+ thread: AppBskyFeedDefs.ThreadViewPost
+ },
+) {
+ const post = thread.post
+ const replies =
+ thread.replies?.filter((r): r is AppBskyFeedDefs.ThreadViewPost =>
+ !('notFound' in r) && !('blocked' in r)
+ ).sort((a, b) =>
+ new Date(a.post.indexedAt).getTime() -
+ new Date(b.post.indexedAt).getTime()
+ ) ?? []
+
+ const hasMoreReplies = (post.replyCount ?? 0) > (replies?.length ?? 0)
+ const showThread = replies.length > 0 || hasMoreReplies
+
+ return (
+
+
+
+
+
+
+ {showThread && (
+
+ )}
+
+
+
+
+ {AppBskyFeedPost.isRecord(post.record) ? post.record.text : ''}
+
+ {post.embed &&
}
+
+
+
+
+
+
+ {showThread && (
+
+ )}
+
+ Loading reactions...
+
+ )
+ }
+
+ if (!data) {
+ return null
+ }
+
+ const post = data.post
+ const replies =
+ data.replies?.filter((r): r is AppBskyFeedDefs.ThreadViewPost =>
+ !('notFound' in r) && !('blocked' in r)
+ ) ?? []
+
+ return (
+
+
+
Reactions
+
+
+ Reply on Bluesky{' '}
+
+ here
+ {' '}
+ to join the conversation.
+
+
+ {replies.length > 0 && (
+
+ {replies
+ .sort((a, b) =>
+ new Date(a.post.indexedAt).getTime() -
+ new Date(b.post.indexedAt).getTime()
+ )
+ .map((reply) => )}
+
+ )}
+
+
+
+ )}
)
diff --git a/static/freshblog.css b/static/freshblog.css
index 7d1d078..0bdd8f1 100644
--- a/static/freshblog.css
+++ b/static/freshblog.css
@@ -77,7 +77,7 @@
}
.freshBlog-post-content {
- margin-bottom: 12rem;
+ margin-bottom: 4rem;
}
.freshBlog-post-content .footnotes {
@@ -138,6 +138,10 @@
margin-right: 0.5rem;
}
+.freshBlog-post {
+ margin-bottom: 8rem;
+}
+
.freshBlog-post header {
margin-bottom: 2rem;
}
diff --git a/utils/bluesky.ts b/utils/bluesky.ts
new file mode 100644
index 0000000..6905086
--- /dev/null
+++ b/utils/bluesky.ts
@@ -0,0 +1,20 @@
+import { AtpAgent } from '@atproto/api'
+import type { AppBskyFeedGetPostThread } from '@atproto/api'
+
+const agent = new AtpAgent({
+ service: 'https://public.api.bsky.app',
+})
+
+export async function getPostInteractions(
+ postUri: string,
+): Promise {
+ try {
+ return await agent.getPostThread({
+ uri: postUri,
+ depth: 3,
+ })
+ } catch (error) {
+ console.error('Error fetching BlueSky post:', error)
+ return null
+ }
+}
diff --git a/utils/bsky-uri.ts b/utils/bsky-uri.ts
new file mode 100644
index 0000000..464a098
--- /dev/null
+++ b/utils/bsky-uri.ts
@@ -0,0 +1,52 @@
+import { AtpAgent } from '@atproto/api'
+
+const agent = new AtpAgent({
+ service: 'https://public.api.bsky.app',
+})
+
+function extractPostId(url: string): { handle: string; rkey: string } | null {
+ try {
+ // Handle URLs like https://bsky.app/profile/nrako.bsky.social/post/3kh3gxwn2if2d
+ const match = url.match(/bsky\.app\/profile\/([^/]+)\/post\/([^/]+)/)
+ if (!match) return null
+ return {
+ handle: match[1],
+ rkey: match[2],
+ }
+ } catch {
+ return null
+ }
+}
+
+async function getAtUri(url: string): Promise {
+ const parsed = extractPostId(url)
+ if (!parsed) {
+ console.error('Invalid BlueSky post URL')
+ return null
+ }
+
+ try {
+ const { data: profile } = await agent.getProfile({ actor: parsed.handle })
+ const atUri = `at://${profile.did}/app.bsky.feed.post/${parsed.rkey}`
+ return atUri
+ } catch (error) {
+ console.error('Error fetching BlueSky post:', error)
+ return null
+ }
+}
+
+// CLI entry point
+if (import.meta.main) {
+ const url = Deno.args[0]
+ if (!url) {
+ console.error('Please provide a BlueSky post URL')
+ Deno.exit(1)
+ }
+
+ const atUri = await getAtUri(url)
+ if (atUri) {
+ console.log(atUri)
+ } else {
+ Deno.exit(1)
+ }
+}
diff --git a/utils/intl.ts b/utils/intl.ts
new file mode 100644
index 0000000..154af04
--- /dev/null
+++ b/utils/intl.ts
@@ -0,0 +1,49 @@
+export function formatCount(count: number): string {
+ if (count === 0) return '0'
+
+ return new Intl.NumberFormat('en-US', {
+ notation: 'compact',
+ maximumFractionDigits: 1,
+ }).format(count)
+}
+
+export function getTimeAgo(date: Date) {
+ const now = new Date()
+ const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+ if (diffInSeconds < 30) {
+ return 'now'
+ }
+ if (diffInSeconds < 60) {
+ return `${diffInSeconds}s`
+ }
+ const diffInMinutes = Math.floor(diffInSeconds / 60)
+ if (diffInMinutes < 60) {
+ return `${diffInMinutes}m`
+ }
+ const diffInHours = Math.floor(diffInMinutes / 60)
+ if (diffInHours < 24) {
+ return `${diffInHours}h`
+ }
+ const diffInDays = Math.floor(diffInHours / 24)
+ if (diffInDays < 30) {
+ return `${diffInDays}d`
+ }
+ const diffInMonths = Math.floor(diffInDays / 30)
+ if (diffInMonths < 12) {
+ return `${diffInMonths}mo`
+ }
+ const diffInYears = Math.floor(diffInDays / 365)
+ return `${diffInYears}y`
+}
+
+export function formatDateTime(date: Date) {
+ return new Intl.DateTimeFormat('en', {
+ weekday: 'long',
+ month: 'long',
+ day: 'numeric',
+ year: 'numeric',
+ hour: 'numeric',
+ minute: 'numeric',
+ }).format(date)
+}