add bluesky comments

src/components/BigBlogEntry.astro

@@ -0,0 +1,42 @@
+---
+import { BASE } from "../config.json";
+import FormattedDate from "./FormattedDate.astro";
+import Tag from "./Tag.astro";
+import HeroImage from "./HeroImage.astro";
+
+const { title, description, pubDate, slug, heroImage, tags } = Astro.props;
+---
+
+<article
+  class="relative isolate flex flex-col gap-8 lg:flex-row group md:grid md:grid-cols-2 mt-8"
+>
+  <div class="relative aspect-[16/9] lg:w-full lg:shrink-0">
+    <HeroImage image={heroImage} />
+  </div>
+  <div class="h-full flex flex-col justify-center">
+    <div class="flex items-center gap-x-4 text-xs">
+      <time datetime="2020-03-16" class="text-base-500">
+        <FormattedDate date={pubDate} />
+      </time>
+      {tags?.map((tag: string) => <Tag {tag} />)}
+    </div>
+    <div class="max-w-xl">
+      <div
+        class="mt-3 text-xl md:text-2xl font-bold leading-6 text-base-900 dark:text-base-50"
+      >
+        <a href={BASE + `/posts/${slug}/`}>
+          <span class="absolute inset-0"></span>
+          {title}
+        </a>
+
+        <div
+          class="absolute -inset-2 md:-inset-4 rounded-2xl opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100 bg-base-200/50 dark:bg-base-800/50 -z-10 transition-all duration-150"
+        >
+        </div>
+      </div>
+      <p class="mt-5 text-sm leading-6 text-base-600 dark:text-base-400">
+        {description}
+      </p>
+    </div>
+  </div>
+</article>

src/components/BlogEntry.astro

@@ -1,36 +1,15 @@
 ---
 import { BASE } from "../config.json";
 import FormattedDate from "./FormattedDate.astro";
-import { Image } from "astro:assets";
-import type { ImageMetadata } from "astro";
 import Tag from "./Tag.astro";
+import HeroImage from "./HeroImage.astro";
 
 const { title, description, pubDate, slug, heroImage, tags } = Astro.props;
-
-const images = import.meta.glob<{ default: ImageMetadata }>(
-  "/src/assets/*.{jpeg,jpg,png,gif}"
-);
-
-// replace ../.. with src in heroImage
-let replacedHero = heroImage.replace("../..", "/src");
-
-if (!images[replacedHero])
-  throw new Error(
-    `"${replacedHero}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`
-  );
 ---
 
 <article class="relative isolate flex flex-col gap-8 lg:flex-row group">
   <div class="relative aspect-[16/9] lg:w-64 lg:shrink-0">
-    <Image
-      src={images[replacedHero]()}
-      alt=""
-      class="absolute inset-0 h-full w-full rounded-2xl bg-base-50 dark:bg-base-900 object-cover"
-    />
-    <div
-      class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-base-900/10 dark:ring-base-100/10"
-    >
-    </div>
+    <HeroImage image={heroImage} />
   </div>
   <div>
     <div class="flex items-center gap-x-4 text-xs">

src/components/HeroImage.astro

@@ -0,0 +1,27 @@
+---
+import { Image } from "astro:assets";
+
+const { image } = Astro.props;
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  "/src/assets/*.{jpeg,jpg,png,gif}"
+);
+
+// replace ../.. with src in image
+let replacedImage = image.replace("../..", "/src");
+
+if (!images[replacedImage])
+  throw new Error(
+    `"${replacedImage}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`
+  );
+---
+
+<Image
+  src={images[replacedImage]()}
+  alt=""
+  class="absolute inset-0 h-full w-full rounded-2xl bg-base-50 dark:bg-base-900 object-cover"
+/>
+
+<div
+  class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-base-900/10 dark:ring-base-100/10"
+>
+</div>

src/components/bluesky/Comment.svelte

@@ -12,10 +12,10 @@
   const { comment, depth = 0 } = $props();
 </script>
 
-<div class="border-l dark:border-base-800 border-base-300 pl-6">
+<div class="border-l dark:border-base-800 border-base-300 pl-3">
   <div class="mt-2 pb-2">
     <div
-      class="text-sm text-base-600 dark:text-base-500 flex items-center -ml-9"
+      class="text-sm text-base-600 dark:text-base-500 flex items-center -ml-6"
     >
       <Avatar
         src={comment.post.author.avatar}

src/components/bluesky/Comments.svelte

@@ -1,42 +1,45 @@
 <script lang="ts">
-	import { onMount } from "svelte";
-	import { atUriToPostUri, getUserPosts, getLikes, getPost, getComments } from "./utils";
-	import { cn } from "src/utils";
-	import Comment from "./Comment.svelte";
-  
-	let { uri, likesCount, likesData, user, comments } = $props();
-  
-	let postUri = $state(uri);
-  
-	onMount(async () => {
-	  if (!uri && user) {
-		let posts = await getUserPosts(user);
-  
-		const url = window.location.href;
-  
-		// @ts-expect-error: weird type fuckery
-		const post = posts.find((post) => post.post.embed?.external?.uri === url);
-  
-		if (post) {
-		  postUri = post.post.uri;
-		  comments = await getComments(post.post.uri);
-		}
-	  } else if (uri) {  
-		comments = await getComments(uri);
-	  }
-
-	  console.log(comments);
-	});
-  </script>
-
-  <div class="not-prose mt-8">
-
+  import { onMount } from "svelte";
+  import { getUserPosts, getComments, getCommentCount } from "./utils";
+  import Comment from "./Comment.svelte";
+
+  let { uri, user, comments } = $props();
+
+  let postUri = $state(uri);
+
+  onMount(async () => {
+    if (!uri && user) {
+      let posts = await getUserPosts(user);
+
+      const url = window.location.href;
+
+      // @ts-expect-error: weird type fuckery
+      const post = posts.find((post) => post.post.embed?.external?.uri === url);
+
+      if (post) {
+        postUri = post.post.uri;
+        comments = await getComments(post.post.uri);
+      }
+    } else if (uri) {
+      comments = await getComments(uri);
+    }
+
+    console.log(comments);
+  });
+</script>
+
+<div class="not-prose mt-8">
   {#if comments.length > 0}
-	<div>
-		{#each comments as comment}
-			<Comment comment={comment} />
-		{/each}
-	</div>
+    <div class="text-sm text-base-950 dark:text-base-100 font-semibold">
+      {getCommentCount(comments)} comments, sorted by newest first
+    </div>
   {/if}
 
-</div>
+  {#if comments.length > 0}
+    <div class="pt-4">
+      {#each comments as comment}
+        <Comment {comment} />
+      {/each}
+    </div>
+  {/if}
+</div>

src/components/bluesky/Likes.svelte

@@ -7,7 +7,7 @@
 
   let postUri = $state(uri);
   let postLikesCount = $state(likesCount);
-  let postLikesData = $state(likesData.filter((like) => like.actor.avatar));
+  let postLikesData = $state(likesData.filter((like: any) => like.actor.avatar));
 
   onMount(async () => {
     if (!uri && user) {
@@ -41,9 +41,8 @@
 
 {#if postUri}
   <div class="not-prose flex flex-col mt-8 gap-4">
-
     <div class="text-sm text-base-950 dark:text-base-100 font-semibold">
-      {postLikesCount} like{postLikesCount === 1 ? "" : "s"} on bluesky
+      {postLikesCount} like{postLikesCount === 1 ? "" : "s"}
     </div>
 
     <div class="isolate flex -space-x-2 overflow-hidden px-4 flex-wrap">

src/components/bluesky/utils.ts

@@ -215,4 +215,15 @@ export function numberToHumanReadable(number: number) {
 	  return `${Math.floor(number / 1000)}k`;
 	}
 	return `${Math.floor(number / 1000000)}m`;
-  }
+  }
+
+export function getCommentCount(comments: { replies?: any}[]) {
+  // recursively check for replies and add them up
+  let count = comments.length;
+  for(const comment of comments) {
+    if(comment.replies?.length) {
+      count += getCommentCount(comment.replies);
+    }
+  }
+  return count;
+}

src/config.json

@@ -21,7 +21,6 @@
     "BLUESKY_URL": "https://bsky.app/profile/flo-bit.dev"
   },
   "BLUESKY_IDENTIFIER": "flo-bit.dev",
-  "MANUAL_SITE_BASE": true,
   "SITE": "https://flo-bit.dev",
   "BASE": "/blog-template"
 }

src/content/blog/comments-via-bluesky.mdx

@@ -0,0 +1,34 @@
+---
+title: "Showing comments using Bluesky"
+description: "showing comments on your blog posts using bluesky"
+pubDate: "Dec 02 2024"
+published: true
+heroImage: "/src/assets/blog-placeholder-1.jpg"
+tags: ["setup"]
+---
+
+You can also show comments on your blog posts using bluesky.
+
+## How it works
+
+Set the `BLUESKY_IDENTIFIER` in your `src/config.json` file to your bluesky handle (without the `@`).
+
+Then just post a link to your blog post on bluesky and comments will be shown on your blog posts, looking something like this:
+
+<div class="max-w-md rounded-xl overflow-hidden border border-base-200 dark:border-base-800 shadow-lg not-prose">
+	![showing comments]($assets/comments.png)
+</div>
+
+Note that no "add comment" link is shown if there is no post on bluesky linking to your blog post.
+
+Comments are both server-side rendered on build and updated on the client when you navigate to the page 
+(so they work without javascript, but might be a bit outdated).
+
+If you post a link to your blog post on bluesky, likes will also be shown (see [likes via bluesky](../likes-via-bluesky)). 
+If you don't want to show likes, you can disable them using the `disableLikes` option in your post options.
+
+```yml
+disableLikes: true
+```
+
+See a live example below:

src/content/blog/configuring-the-blog.md → src/content/blog/configuring-the-blog.mdx

@@ -7,14 +7,24 @@ heroImage: "/src/assets/blog-placeholder-1.jpg"
 tags: ["setup"]
 ---
 
-Editing the code: Change the values in `src/config.json` to configure the blog to your liking, see below for more information.
+Change the values in `src/config.json` to configure the blog to your liking, see below for more information.
 
-Editing using [pagecms](https://next.pagescms.org): After having logged in and opened your repository, click on "Website Configuration" and fill out the form, changing the values to your liking. Click "Save" to apply the changes (takes about 1 minute to deploy).
+## SITE
+
+- set this to your blog url, e.g. `https://flo-bit.dev`
+
+## BASE
+
+- set this to the base path of your blog, e.g. `/blog-template`
 
 ## SITE_TITLE
 
 - will be shown in the title and meta tags and og image
 
+## SITE_NAME
+
+- will be shown in the header, leave blank to hide
+
 ## SITE_DESCRIPTION
 
 - will be shown in the meta tags
@@ -51,6 +61,10 @@ Editing using [pagecms](https://next.pagescms.org): After having logged in and o
   one of 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
   'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'
 
+## BLUESKY_IDENTIFIER
+
+- set this to your bluesky handle, e.g. `flo-bit.dev` (without the `@`) will be used to show likes and comments on your blog posts from bluesky
+
 ## SOCIAL MEDIA LINKS
 
 - set any of these to '' to hide the respective icon in the footer
@@ -62,17 +76,5 @@ Editing using [pagecms](https://next.pagescms.org): After having logged in and o
 - LINKEDIN_URL
 - YOUTUBE_URL
 - SUBSTACK_URL
+- BLUESKY_URL
 - EMAIL
-
-## MANUAL_SITE_BASE
-
-- set this to true if you want to manually set the site and base url
-  (e.g. when not deploying to github pages)
-
-## SITE
-
-- will be set automatically when deploying to github pages
-
-## BASE
-
-- will be set automatically when deploying to github pages

src/content/blog/features.md → src/content/blog/features.mdx

@@ -20,4 +20,4 @@ tags: []
 - ✅ Tag your posts
 - ✅ Super easy to deploy as a static site
 - ✅ Includes some prebuilt components for you to use
-- ✅ Easy to edit using [pagecms](https://pagescms.org) (see [how to use](posts/how-to-use))
+- ✅ Likes and comments via bluesky