back interdiff of round #3 and #2

Add Bluesky comments to blog posts #1

merged
opened by finxol.io targeting main from feat/add-bsky-comments

Add a bsky post cid to have display comments directly in the blog post

ERROR
.zed/settings.json

Failed to calculate interdiff for this file.

ERROR
app/components/BskyComments.vue

Failed to calculate interdiff for this file.

ERROR
app/pages/posts/[...slug].vue

Failed to calculate interdiff for this file.

ERROR
app/util/atproto.ts

Failed to calculate interdiff for this file.

ERROR
blog.config.ts

Failed to calculate interdiff for this file.

ERROR
content/posts/embracing-atproto-pt-2-tangled-knot.md

Failed to calculate interdiff for this file.

ERROR
content.config.ts

Failed to calculate interdiff for this file.

ERROR
globals.ts

Failed to calculate interdiff for this file.

ERROR
package.json

Failed to calculate interdiff for this file.

ERROR
pnpm-lock.yaml

Failed to calculate interdiff for this file.

ERROR
tsconfig.json

Failed to calculate interdiff for this file.

NEW
app/components/BskyPost.vue
···
···
+
<script setup lang="ts">
+
import type { AppBskyFeedDefs } from "@atcute/bluesky";
+
import { extractPostId } from "~/util/atproto";
+
+
const props = defineProps<{
+
post: AppBskyFeedDefs.ThreadViewPost;
+
depth: number;
+
}>();
+
const { post, depth } = toRefs(props);
+
+
const MAX_DEPTH = 2; // Max number of replies to a reply
+
</script>
+
+
<template>
+
<div v-if="post && depth <= MAX_DEPTH" :class="['mt-6', depth > 0 ? 'ml-10' : '']">
+
<a :href="`https://bsky.app/profile/${post.post.author.handle}`" class="flex items-center gap-2 text-blue-500 hover:underline w-fit">
+
<img :src="post.post.author.avatar" :alt="post.post.author.displayName" class="size-8 rounded-full" />
+
<span>
+
{{ post.post.author.displayName }}
+
</span>
+
</a>
+
<div class="ml-10">{{ post.post.record.text }}</div>
+
<div class="flex items-baseline gap-4 ml-10 mt-2">
+
<p class="text-gray-500 text-sm" title="Replies">
+
<Icon name="ri:reply-line" class="-mb-[2px] mr-1" />
+
{{post.post.replyCount}}
+
</p>
+
<p class="text-gray-500 text-sm" title="Likes">
+
<Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />
+
<span>
+
{{post.post.likeCount}}
+
</span>
+
</p>
+
<p class="text-gray-500 text-sm" title="Bookmarks">
+
<Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />
+
{{post.post.bookmarkCount}}
+
</p>
+
</div>
+
+
<div v-if="post.replies">
+
<div v-if="depth === MAX_DEPTH">
+
<a :href="`https://bsky.app/profile/${post.post.author.handle}/post/${extractPostId(post.post.uri)}`" class="text-gray-500 text-sm flex items-center gap-2 mt-4 ml-10">
+
View more replies on Bluesky
+
<Icon name='ri:arrow-drop-right-line' />
+
</a>
+
</div>
+
<div v-for="reply in post.replies">
+
<BskyPost v-if="reply.$type === 'app.bsky.feed.defs#threadViewPost'" :post="reply" :depth="depth + 1" />
+
</div>
+
</div>
+
</div>
+
</template>
NEW
app/components/ShareActions.vue
···
<template>
<aside
-
class="print:hidden flex flex-row justify-center items-center gap-4 mt-24 md:w-[80%] mx-auto"
>
<div class="h-1 bg-stone-200 dark:bg-stone-700 grow" />
<div class="whitespace-nowrap px-4 flex flex-row items-center gap-4">
···
<template>
<aside
+
class="print:hidden flex flex-row justify-center items-center gap-4 mt-16 md:w-[80%] mx-auto"
>
<div class="h-1 bg-stone-200 dark:bg-stone-700 grow" />
<div class="whitespace-nowrap px-4 flex flex-row items-center gap-4">
NEW
content/posts/blog-template.md
···
tags:
- open source
published: true
---
Are you enjoying this blog?
···
tags:
- open source
published: true
+
bskyCid: 3lqatrbwkjk2a
---
Are you enjoying this blog?
NEW
content/posts/embracing-atproto-pt-1-hosting-pds.md
···
- atproto
- self-hosting
published: true
---
The [Atmosphere Protocol](https://atproto.com/), or atproto for short, is the protocol behind the Bluesky social network.
···
- atproto
- self-hosting
published: true
+
bskyCid: 3lxwbhjz4l22i
---
The [Atmosphere Protocol](https://atproto.com/), or atproto for short, is the protocol behind the Bluesky social network.
NEW
content/posts/extending-openauth.md
···
- auth
- open source
published: true
---
I'm currently building [Karr](https://karr.mobi/?utm_source=finxol-blog&utm_content=openauth-post), an open-source federated carpool platform—it's still very early days, not much there yet.
···
- auth
- open source
published: true
+
bskyCid: 3llnnj4z2xs2u
---
I'm currently building [Karr](https://karr.mobi/?utm_source=finxol-blog&utm_content=openauth-post), an open-source federated carpool platform—it's still very early days, not much there yet.
NEW
deno.jsonc
···
{
"deploy": {
-
"org": "finxol",
-
"app": "blogging"
}
}
···
{
"deploy": {
+
"org": "finxol",
+
"app": "blogging"
}
}