This commit is contained in:
eamag 2026-01-25 17:20:40 +01:00
parent 320d0047e9
commit 93f6bc2e55
4 changed files with 244 additions and 242 deletions

View File

@ -5,9 +5,7 @@ import * as Component from "./quartz/components"
export const sharedPageComponents: SharedLayout = { export const sharedPageComponents: SharedLayout = {
head: Component.Head(), head: Component.Head(),
header: [], header: [],
afterBody: [ afterBody: [Component.BlueskyComments()],
Component.BlueskyComments(),
],
footer: Component.Footer({ footer: Component.Footer({
links: { links: {
GitHub: "https://github.com/jackyzha0/quartz", GitHub: "https://github.com/jackyzha0/quartz",

View File

@ -1,4 +1,3 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { classNames } from "../util/lang" import { classNames } from "../util/lang"
// @ts-ignore // @ts-ignore
@ -12,10 +11,18 @@ const BlueskyComments: QuartzComponent = ({ fileData, displayClass }: QuartzComp
} }
return ( return (
<div class={classNames(displayClass, "bluesky-comments-container")} id="bluesky-comments" data-url={blueskyUrl}> <div
class={classNames(displayClass, "bluesky-comments-container")}
id="bluesky-comments"
data-url={blueskyUrl}
>
<h2>Comments</h2> <h2>Comments</h2>
<p class="bluesky-meta"> <p class="bluesky-meta">
Post a reply on <a href={blueskyUrl} target="_blank" rel="noopener noreferrer">Bluesky</a> to join the conversation. Post a reply on{" "}
<a href={blueskyUrl} target="_blank" rel="noopener noreferrer">
Bluesky
</a>{" "}
to join the conversation.
</p> </p>
<div id="bluesky-comments-list"> <div id="bluesky-comments-list">
<p>Loading comments...</p> <p>Loading comments...</p>

View File

@ -1,4 +1,3 @@
document.addEventListener("nav", async () => { document.addEventListener("nav", async () => {
const container = document.getElementById("bluesky-comments") const container = document.getElementById("bluesky-comments")
if (!container) return if (!container) return
@ -31,7 +30,7 @@ function parseBlueskyUrl(url: string) {
async function resolveHandle(handle: string) { async function resolveHandle(handle: string) {
const resolveRes = await fetch( const resolveRes = await fetch(
`https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=${handle}` `https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=${handle}`,
) )
if (!resolveRes.ok) throw new Error("Could not resolve handle") if (!resolveRes.ok) throw new Error("Could not resolve handle")
const { did } = await resolveRes.json() const { did } = await resolveRes.json()
@ -41,7 +40,7 @@ async function resolveHandle(handle: string) {
async function fetchThread(did: string, postId: string) { async function fetchThread(did: string, postId: string) {
const atUri = `at://${did}/app.bsky.feed.post/${postId}` const atUri = `at://${did}/app.bsky.feed.post/${postId}`
const threadRes = await fetch( const threadRes = await fetch(
`https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?uri=${atUri}&depth=10&parentHeight=0` `https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?uri=${atUri}&depth=10&parentHeight=0`,
) )
if (!threadRes.ok) throw new Error("Could not fetch thread") if (!threadRes.ok) throw new Error("Could not fetch thread")
@ -56,9 +55,7 @@ function renderComments(replies: any[]) {
if (replies && replies.length > 0) { if (replies && replies.length > 0) {
commentsList.innerHTML = "" // Clear loading text commentsList.innerHTML = "" // Clear loading text
// Sort by likes // Sort by likes
replies.sort((a: any, b: any) => replies.sort((a: any, b: any) => (b.post.likeCount || 0) - (a.post.likeCount || 0))
(b.post.likeCount || 0) - (a.post.likeCount || 0)
)
replies.forEach((reply: any) => { replies.forEach((reply: any) => {
if (!reply.post) return if (!reply.post) return