···

       
32
       
 
       
          project: "roscoerubin-blog-23"

     

       
33
       
 
       
          entrypoint: "main.ts"

     

       
34
       
 
       
          root: "."

     

       
35
       
-
       
          

     

       
36
       
-
       
          

     

···

       
32
       
 
       
          project: "roscoerubin-blog-23"

     

       
33
       
 
       
          entrypoint: "main.ts"

     

       
34
       
 
       
          root: "."

     

       
0
       
 
       

     

       
0
       
 
       

     

···

       
1
       
-
       
import { AppBskyFeedDefs, AppBskyFeedPost } from 'npm:@atproto/api';

     

       
2
       
 
       


     

       
3
       
 
       
type CommentProps = {

     

       
4
       
 
       
  comment: AppBskyFeedDefs.ThreadViewPost;

     
···

       
12
       
 
       
  if (!AppBskyFeedPost.isRecord(comment.post.record)) return null;

     

       
13
       
 
       
  // filter out replies that match any of the commentFilters, by ensuring they all return false

     

       
14
       
 
       
  if (filters && !filters.every((filter) => !filter(comment))) return null;

     

       
15
       
-
       


     

       
16
       
 
       


     

       
17
       
 
       
  const styles = `

     

       
18
       
 
       
    .container {

     
···

       
173
       
 
       
          target="_blank"

     

       
174
       
 
       
          rel="noreferrer noopener"

     

       
175
       
 
       
        >

     

       
176
       
-
       
          {author.avatar ? (

     

       
177
       
-
       
            <img

     

       
178
       
-
       
              src={comment.post.author.avatar}

     

       
179
       
-
       
              alt="avatar"

     

       
180
       
-
       
              className={avatarClassName}

     

       
181
       
-
       
            />

     

       
182
       
-
       
          ) : (

     

       
183
       
-
       
            <div className={avatarClassName} />

     

       
184
       
-
       
          )}

     

       
185
       
 
       
          <p className="authorName">

     

       
186
       
-
       
            {author.displayName ?? author.handle}{' '}

     

       
187
       
 
       
            <span className="handle">@{author.handle}</span>

     

       
188
       
 
       
          </p>

     

       
189
       
 
       
        </a>

     

       
190
       
 
       
        <a

     

       
191
       
-
       
          href={`https://bsky.app/profile/${author.did}/post/${comment.post.uri

     

       
192
       
-
       
            .split('/')

     

       
193
       
-
       
            .pop()}`}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
194
       
 
       
          target="_blank"

     

       
195
       
 
       
          rel="noreferrer noopener"

     

       
196
       
 
       
        >

     
···

       
272
       
 
       
  if (

     

       
273
       
 
       
    !AppBskyFeedDefs.isThreadViewPost(a) ||

     

       
274
       
 
       
    !AppBskyFeedDefs.isThreadViewPost(b) ||

     

       
275
       
-
       
    !('post' in a) ||

     

       
276
       
-
       
    !('post' in b)

     

       
277
       
 
       
  ) {

     

       
278
       
 
       
    return 0;

     

       
279
       
 
       
  }

     

···

       
1
       
+
       
import { AppBskyFeedDefs, AppBskyFeedPost } from "npm:@atproto/api";

     

       
2
       
 
       


     

       
3
       
 
       
type CommentProps = {

     

       
4
       
 
       
  comment: AppBskyFeedDefs.ThreadViewPost;

     
···

       
12
       
 
       
  if (!AppBskyFeedPost.isRecord(comment.post.record)) return null;

     

       
13
       
 
       
  // filter out replies that match any of the commentFilters, by ensuring they all return false

     

       
14
       
 
       
  if (filters && !filters.every((filter) => !filter(comment))) return null;

     

       
0
       
 
       

     

       
15
       
 
       


     

       
16
       
 
       
  const styles = `

     

       
17
       
 
       
    .container {

     
···

       
172
       
 
       
          target="_blank"

     

       
173
       
 
       
          rel="noreferrer noopener"

     

       
174
       
 
       
        >

     

       
175
       
+
       
          {author.avatar

     

       
176
       
+
       
            ? (

     

       
177
       
+
       
              <img

     

       
178
       
+
       
                src={comment.post.author.avatar}

     

       
179
       
+
       
                alt="avatar"

     

       
180
       
+
       
                className={avatarClassName}

     

       
181
       
+
       
              />

     

       
182
       
+
       
            )

     

       
183
       
+
       
            : <div className={avatarClassName} />}

     

       
184
       
 
       
          <p className="authorName">

     

       
185
       
+
       
            {author.displayName ?? author.handle}{" "}

     

       
186
       
 
       
            <span className="handle">@{author.handle}</span>

     

       
187
       
 
       
          </p>

     

       
188
       
 
       
        </a>

     

       
189
       
 
       
        <a

     

       
190
       
+
       
          href={`https://bsky.app/profile/${author.did}/post/${

     

       
191
       
+
       
            comment.post.uri

     

       
192
       
+
       
              .split("/")

     

       
193
       
+
       
              .pop()

     

       
194
       
+
       
          }`}

     

       
195
       
 
       
          target="_blank"

     

       
196
       
 
       
          rel="noreferrer noopener"

     

       
197
       
 
       
        >

     
···

       
273
       
 
       
  if (

     

       
274
       
 
       
    !AppBskyFeedDefs.isThreadViewPost(a) ||

     

       
275
       
 
       
    !AppBskyFeedDefs.isThreadViewPost(b) ||

     

       
276
       
+
       
    !("post" in a) ||

     

       
277
       
+
       
    !("post" in b)

     

       
278
       
 
       
  ) {

     

       
279
       
 
       
    return 0;

     

       
280
       
 
       
  }

     

···

       
1
       
-
       
import { AppBskyFeedPost, type AppBskyFeedDefs } from 'npm:@atproto/api';

     

       
2
       
 
       


     

       
3
       
 
       
const MinLikeCountFilter = (

     

       
4
       
-
       
  min: number

     

       
5
       
-
       
): ((comment: AppBskyFeedDefs.ThreadViewPost) => boolean) => {

     

       
6
       
 
       
  return (comment: AppBskyFeedDefs.ThreadViewPost) => {

     

       
7
       
 
       
    return (comment.post.likeCount ?? 0) < min;

     

       
8
       
 
       
  };

     

       
9
       
 
       
};

     

       
10
       
 
       


     

       
11
       
 
       
const MinCharacterCountFilter = (

     

       
12
       
-
       
  min: number

     

       
13
       
-
       
): ((comment: AppBskyFeedDefs.ThreadViewPost) => boolean) => {

     

       
14
       
 
       
  return (comment: AppBskyFeedDefs.ThreadViewPost) => {

     

       
15
       
 
       
    if (!AppBskyFeedPost.isRecord(comment.post.record)) {

     

       
16
       
 
       
      return false;

     
···

       
21
       
 
       
};

     

       
22
       
 
       


     

       
23
       
 
       
const TextContainsFilter = (

     

       
24
       
-
       
  text: string

     

       
25
       
-
       
): ((comment: AppBskyFeedDefs.ThreadViewPost) => boolean) => {

     

       
26
       
 
       
  return (comment: AppBskyFeedDefs.ThreadViewPost) => {

     

       
27
       
 
       
    if (!AppBskyFeedPost.isRecord(comment.post.record)) {

     

       
28
       
 
       
      return false;

     
···

       
33
       
 
       
};

     

       
34
       
 
       


     

       
35
       
 
       
const ExactMatchFilter = (

     

       
36
       
-
       
  text: string

     

       
37
       
-
       
): ((comment: AppBskyFeedDefs.ThreadViewPost) => boolean) => {

     

       
38
       
 
       
  return (comment: AppBskyFeedDefs.ThreadViewPost) => {

     

       
39
       
 
       
    if (!AppBskyFeedPost.isRecord(comment.post.record)) {

     

       
40
       
 
       
      return false;

     
···

       
44
       
 
       
  };

     

       
45
       
 
       
};

     

       
46
       
 
       


     

       
47
       
-
       
/* 

     

       
48
       
-
       
* This function allows you to filter out comments based on likes,

     

       
49
       
-
       
* characters, text, pins, or exact matches.

     

       
50
       
-
       
*/

     

       
51
       
 
       
export const Filters: {

     

       
52
       
-
       
  MinLikeCountFilter: (min: number) => (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
53
       
-
       
  MinCharacterCountFilter: (min: number) => (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
54
       
-
       
  TextContainsFilter: (text: string) => (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
55
       
-
       
  ExactMatchFilter: (text: string) => (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
56
       
 
       
  NoLikes: (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
57
       
 
       
  NoPins: (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
58
       
 
       
} = {

     
···

       
61
       
 
       
  TextContainsFilter,

     

       
62
       
 
       
  ExactMatchFilter,

     

       
63
       
 
       
  NoLikes: MinLikeCountFilter(0),

     

       
64
       
-
       
  NoPins: ExactMatchFilter('📌'),

     

       
65
       
 
       
};

     

       
66
       
 
       


     

       
67
       
 
       
export default Filters;

     

···

       
1
       
+
       
import { type AppBskyFeedDefs, AppBskyFeedPost } from "npm:@atproto/api";

     

       
2
       
 
       


     

       
3
       
 
       
const MinLikeCountFilter = (

     

       
4
       
+
       
  min: number,

     

       
5
       
+
       
): (comment: AppBskyFeedDefs.ThreadViewPost) => boolean => {

     

       
6
       
 
       
  return (comment: AppBskyFeedDefs.ThreadViewPost) => {

     

       
7
       
 
       
    return (comment.post.likeCount ?? 0) < min;

     

       
8
       
 
       
  };

     

       
9
       
 
       
};

     

       
10
       
 
       


     

       
11
       
 
       
const MinCharacterCountFilter = (

     

       
12
       
+
       
  min: number,

     

       
13
       
+
       
): (comment: AppBskyFeedDefs.ThreadViewPost) => boolean => {

     

       
14
       
 
       
  return (comment: AppBskyFeedDefs.ThreadViewPost) => {

     

       
15
       
 
       
    if (!AppBskyFeedPost.isRecord(comment.post.record)) {

     

       
16
       
 
       
      return false;

     
···

       
21
       
 
       
};

     

       
22
       
 
       


     

       
23
       
 
       
const TextContainsFilter = (

     

       
24
       
+
       
  text: string,

     

       
25
       
+
       
): (comment: AppBskyFeedDefs.ThreadViewPost) => boolean => {

     

       
26
       
 
       
  return (comment: AppBskyFeedDefs.ThreadViewPost) => {

     

       
27
       
 
       
    if (!AppBskyFeedPost.isRecord(comment.post.record)) {

     

       
28
       
 
       
      return false;

     
···

       
33
       
 
       
};

     

       
34
       
 
       


     

       
35
       
 
       
const ExactMatchFilter = (

     

       
36
       
+
       
  text: string,

     

       
37
       
+
       
): (comment: AppBskyFeedDefs.ThreadViewPost) => boolean => {

     

       
38
       
 
       
  return (comment: AppBskyFeedDefs.ThreadViewPost) => {

     

       
39
       
 
       
    if (!AppBskyFeedPost.isRecord(comment.post.record)) {

     

       
40
       
 
       
      return false;

     
···

       
44
       
 
       
  };

     

       
45
       
 
       
};

     

       
46
       
 
       


     

       
47
       
+
       
/*

     

       
48
       
+
       
 * This function allows you to filter out comments based on likes,

     

       
49
       
+
       
 * characters, text, pins, or exact matches.

     

       
50
       
+
       
 */

     

       
51
       
 
       
export const Filters: {

     

       
52
       
+
       
  MinLikeCountFilter: (

     

       
53
       
+
       
    min: number,

     

       
54
       
+
       
  ) => (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
55
       
+
       
  MinCharacterCountFilter: (

     

       
56
       
+
       
    min: number,

     

       
57
       
+
       
  ) => (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
58
       
+
       
  TextContainsFilter: (

     

       
59
       
+
       
    text: string,

     

       
60
       
+
       
  ) => (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
61
       
+
       
  ExactMatchFilter: (

     

       
62
       
+
       
    text: string,

     

       
63
       
+
       
  ) => (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
64
       
 
       
  NoLikes: (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
65
       
 
       
  NoPins: (comment: AppBskyFeedDefs.ThreadViewPost) => boolean;

     

       
66
       
 
       
} = {

     
···

       
69
       
 
       
  TextContainsFilter,

     

       
70
       
 
       
  ExactMatchFilter,

     

       
71
       
 
       
  NoLikes: MinLikeCountFilter(0),

     

       
72
       
+
       
  NoPins: ExactMatchFilter("📌"),

     

       
73
       
 
       
};

     

       
74
       
 
       


     

       
75
       
 
       
export default Filters;

     

···

       
1
       
-
       
import { AppBskyFeedDefs } from 'npm:@atproto/api';

     

       
2
       
 
       


     

       
3
       
 
       
type PostSummaryProps = {

     

       
4
       
 
       
  postUrl: string;

     
···

       
216
       
 
       
      </a>

     

       
217
       
 
       
      <h2 className="commentsTitle">Comments</h2>

     

       
218
       
 
       
      <p className="replyText">

     

       
219
       
-
       
        Join the conversation by{' '}

     

       
220
       
 
       
        <a

     

       
221
       
 
       
          className="link"

     

       
222
       
 
       
          href={postUrl}

     

···

       
1
       
+
       
import { AppBskyFeedDefs } from "npm:@atproto/api";

     

       
2
       
 
       


     

       
3
       
 
       
type PostSummaryProps = {

     

       
4
       
 
       
  postUrl: string;

     
···

       
216
       
 
       
      </a>

     

       
217
       
 
       
      <h2 className="commentsTitle">Comments</h2>

     

       
218
       
 
       
      <p className="replyText">

     

       
219
       
+
       
        Join the conversation by{" "}

     

       
220
       
 
       
        <a

     

       
221
       
 
       
          className="link"

     

       
222
       
 
       
          href={postUrl}

     

···

       
1
       
-
       
import { siBluesky as BlueskyIcon, siGithub as GithubIcon } from "npm:simple-icons";

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
2
       
 
       
import { useState } from "preact/hooks";

     

       
3
       
 
       
import { env } from "../lib/env.ts";

     

       
4
       
 
       


     
···

       
25
       
 
       
        >

     

       
26
       
 
       
          <path d={BlueskyIcon.path} />

     

       
27
       
 
       
        </svg>

     

       
28
       
-
       
        <span class="opacity-50 group-hover:opacity-100 transition-opacity">Bluesky</span>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
29
       
 
       
        <div class="absolute bottom-0 left-0 w-full h-px bg-current scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out group-hover:origin-left group-data-[hovered=false]:origin-right" />

     

       
30
       
 
       
      </a>

     

       
31
       
 
       
      <a

     
···

       
45
       
 
       
        >

     

       
46
       
 
       
          <path d={GithubIcon.path} />

     

       
47
       
 
       
        </svg>

     

       
48
       
-
       
        <span class="opacity-50 group-hover:opacity-100 transition-opacity">GitHub</span>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
49
       
 
       
        <div class="absolute bottom-0 left-0 w-full h-px bg-current scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out group-hover:origin-left group-data-[hovered=false]:origin-right" />

     

       
50
       
 
       
      </a>

     

       
51
       
 
       
    </footer>

     

···

       
1
       
+
       
import {

     

       
2
       
+
       
  siBluesky as BlueskyIcon,

     

       
3
       
+
       
  siGithub as GithubIcon,

     

       
4
       
+
       
} from "npm:simple-icons";

     

       
5
       
 
       
import { useState } from "preact/hooks";

     

       
6
       
 
       
import { env } from "../lib/env.ts";

     

       
7
       
 
       


     
···

       
28
       
 
       
        >

     

       
29
       
 
       
          <path d={BlueskyIcon.path} />

     

       
30
       
 
       
        </svg>

     

       
31
       
+
       
        <span class="opacity-50 group-hover:opacity-100 transition-opacity">

     

       
32
       
+
       
          Bluesky

     

       
33
       
+
       
        </span>

     

       
34
       
 
       
        <div class="absolute bottom-0 left-0 w-full h-px bg-current scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out group-hover:origin-left group-data-[hovered=false]:origin-right" />

     

       
35
       
 
       
      </a>

     

       
36
       
 
       
      <a

     
···

       
50
       
 
       
        >

     

       
51
       
 
       
          <path d={GithubIcon.path} />

     

       
52
       
 
       
        </svg>

     

       
53
       
+
       
        <span class="opacity-50 group-hover:opacity-100 transition-opacity">

     

       
54
       
+
       
          GitHub

     

       
55
       
+
       
        </span>

     

       
56
       
 
       
        <div class="absolute bottom-0 left-0 w-full h-px bg-current scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out group-hover:origin-left group-data-[hovered=false]:origin-right" />

     

       
57
       
 
       
      </a>

     

       
58
       
 
       
    </footer>

     

···

       
31
       
 
       
  children?: ComponentChildren;

     

       
32
       
 
       
}) {

     

       
33
       
 
       
  const readingTime = getReadingTime(content);

     

       
34
       
-
       
  

     

       
35
       
 
       
  return (

     

       
36
       
 
       
    <Paragraph className={className}>

     

       
37
       
 
       
      {includeAuthor && (

     
···

       
47
       
 
       
      )}

     

       
48
       
 
       
      {createdAt && (

     

       
49
       
 
       
        <>

     

       
50
       
-
       
          <time dateTime={createdAt}>{date(new Date(createdAt))}</time>

     

       
51
       
-
       
          {" "}&middot;{" "}

     

       
52
       
 
       
        </>

     

       
53
       
 
       
      )}

     

       
54
       
-
       
      <span >

     

       
55
       
-
       
        <span style={{ lineHeight: 1, marginRight: '0.25rem' }}>{readingTime} min read</span>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
56
       
 
       
      </span>

     

       
57
       
 
       
      {children}

     

       
58
       
 
       
    </Paragraph>

     

···

       
31
       
 
       
  children?: ComponentChildren;

     

       
32
       
 
       
}) {

     

       
33
       
 
       
  const readingTime = getReadingTime(content);

     

       
34
       
+
       


     

       
35
       
 
       
  return (

     

       
36
       
 
       
    <Paragraph className={className}>

     

       
37
       
 
       
      {includeAuthor && (

     
···

       
47
       
 
       
      )}

     

       
48
       
 
       
      {createdAt && (

     

       
49
       
 
       
        <>

     

       
50
       
+
       
          <time dateTime={createdAt}>{date(new Date(createdAt))}</time>{" "}

     

       
51
       
+
       
          &middot;{" "}

     

       
52
       
 
       
        </>

     

       
53
       
 
       
      )}

     

       
54
       
+
       
      <span>

     

       
55
       
+
       
        <span style={{ lineHeight: 1, marginRight: "0.25rem" }}>

     

       
56
       
+
       
          {readingTime} min read

     

       
57
       
+
       
        </span>

     

       
58
       
 
       
      </span>

     

       
59
       
 
       
      {children}

     

       
60
       
 
       
    </Paragraph>

     

···

       
48
       
 
       
  className,

     

       
49
       
 
       
  ...props

     

       
50
       
 
       
}: h.JSX.HTMLAttributes<HTMLParagraphElement>) {

     

       
51
       
-
       
  return <p className={cx("font-sans text-pretty", className?.toString())} {...props} />;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
52
       
 
       
}

     

       
53
       
 
       


     

       
54
       
-
       
export function Code({ className, ...props }: h.JSX.HTMLAttributes<HTMLElement>) {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
55
       
 
       
  return (

     

       
56
       
 
       
    <code

     

       
57
       
 
       
      className={cx(

     

···

       
48
       
 
       
  className,

     

       
49
       
 
       
  ...props

     

       
50
       
 
       
}: h.JSX.HTMLAttributes<HTMLParagraphElement>) {

     

       
51
       
+
       
  return (

     

       
52
       
+
       
    <p

     

       
53
       
+
       
      className={cx("font-sans text-pretty", className?.toString())}

     

       
54
       
+
       
      {...props}

     

       
55
       
+
       
    />

     

       
56
       
+
       
  );

     

       
57
       
 
       
}

     

       
58
       
 
       


     

       
59
       
+
       
export function Code(

     

       
60
       
+
       
  { className, ...props }: h.JSX.HTMLAttributes<HTMLElement>,

     

       
61
       
+
       
) {

     

       
62
       
 
       
  return (

     

       
63
       
 
       
    <code

     

       
64
       
 
       
      className={cx(

     

···

       
22
       
 
       
  ],

     

       
23
       
 
       
  "imports": {

     

       
24
       
 
       
    "$fresh/": "https://deno.land/x/fresh@1.7.3/",

     

       
0
       
 
       

     

       
0
       
 
       

     

       
25
       
 
       
    "@atcute/whitewind": "npm:@atcute/whitewind@^3.0.1",

     

       
26
       
 
       
    "@deno/gfm": "jsr:@deno/gfm@^0.10.0",

     

       
27
       
 
       
    "@preact-icons/cg": "jsr:@preact-icons/cg@^1.0.13",

     
···

       
31
       
 
       
    "preact/": "https://esm.sh/preact@10.22.0/",

     

       
32
       
 
       
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",

     

       
33
       
 
       
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",

     

       
0
       
 
       

     

       
34
       
 
       
    "tailwindcss": "npm:tailwindcss@3.4.1",

     

       
35
       
 
       
    "tailwindcss/": "npm:/tailwindcss@3.4.1/",

     

       
36
       
 
       
    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",

     

···

       
22
       
 
       
  ],

     

       
23
       
 
       
  "imports": {

     

       
24
       
 
       
    "$fresh/": "https://deno.land/x/fresh@1.7.3/",

     

       
25
       
+
       
    "@atcute/atproto": "npm:@atcute/atproto@^3.0.1",

     

       
26
       
+
       
    "@atcute/client": "npm:@atcute/client@^4.0.1",

     

       
27
       
 
       
    "@atcute/whitewind": "npm:@atcute/whitewind@^3.0.1",

     

       
28
       
 
       
    "@deno/gfm": "jsr:@deno/gfm@^0.10.0",

     

       
29
       
 
       
    "@preact-icons/cg": "jsr:@preact-icons/cg@^1.0.13",

     
···

       
33
       
 
       
    "preact/": "https://esm.sh/preact@10.22.0/",

     

       
34
       
 
       
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",

     

       
35
       
 
       
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",

     

       
36
       
+
       
    "rss": "npm:rss@^1.2.2",

     

       
37
       
 
       
    "tailwindcss": "npm:tailwindcss@3.4.1",

     

       
38
       
 
       
    "tailwindcss/": "npm:/tailwindcss@3.4.1/",

     

       
39
       
 
       
    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",

     

···

       
1
       
-
       
import { useState, useEffect } from 'preact/hooks';

     

       
2
       
-
       
import { AppBskyFeedDefs, type AppBskyFeedGetPostThread } from 'npm:@atproto/api';

     

       
3
       
-
       
import { CommentOptions } from '../components/bsky-comments/types.tsx';

     

       
4
       
-
       
import { PostSummary } from '../components/bsky-comments/PostSummary.tsx';

     

       
5
       
-
       
import { Comment } from '../components/bsky-comments/Comment.tsx';

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
6
       
 
       


     

       
7
       
 
       
const getAtUri = (uri: string): string => {

     

       
8
       
-
       
  if (!uri.startsWith('at://') && uri.includes('bsky.app/profile/')) {

     

       
9
       
 
       
    const match = uri.match(/profile\/([\w:.]+)\/post\/([\w]+)/);

     

       
10
       
 
       
    if (match) {

     

       
11
       
 
       
      const [, did, postId] = match;

     
···

       
16
       
 
       
};

     

       
17
       
 
       


     

       
18
       
 
       
/**

     

       
19
       
-
       
* This component displays a comment section for a post. 

     

       
20
       
-
       
* It fetches the comments for a post and displays them in a threaded format.

     

       
21
       
-
       
*/

     

       
22
       
 
       
export const CommentSection = ({

     

       
23
       
 
       
  uri: propUri,

     

       
24
       
 
       
  author,

     
···

       
26
       
 
       
  commentFilters,

     

       
27
       
 
       
}: CommentOptions): any => {

     

       
28
       
 
       
  const [uri, setUri] = useState<string | null>(null);

     

       
29
       
-
       
  const [thread, setThread] = useState<AppBskyFeedDefs.ThreadViewPost | null>(null);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
30
       
 
       
  const [error, setError] = useState<string | null>(null);

     

       
31
       
 
       
  const [visibleCount, setVisibleCount] = useState(5);

     

       
32
       
 
       


     
···

       
223
       
 
       


     

       
224
       
 
       
  useEffect(() => {

     

       
225
       
 
       
    let isSubscribed = true;

     

       
226
       
-
       
    

     

       
227
       
 
       
    const initializeUri = async () => {

     

       
228
       
 
       
      if (propUri) {

     

       
229
       
 
       
        setUri(propUri);

     
···

       
233
       
 
       
      if (author) {

     

       
234
       
 
       
        try {

     

       
235
       
 
       
          const currentUrl = window.location.href;

     

       
236
       
-
       
          const apiUrl = `https://public.api.bsky.app/xrpc/app.bsky.feed.searchPosts?q=*&url=${encodeURIComponent(

     

       
237
       
-
       
            currentUrl

     

       
238
       
-
       
          )}&author=${author}&sort=top`;

     

       
239
       
-
       
          

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
240
       
 
       
          const response = await fetch(apiUrl);

     

       
241
       
 
       
          const data = await response.json();

     

       
242
       
 
       


     
···

       
245
       
 
       
              const post = data.posts[0];

     

       
246
       
 
       
              setUri(post.uri);

     

       
247
       
 
       
            } else {

     

       
248
       
-
       
              setError('No matching post found');

     

       
249
       
 
       
              if (onEmpty) {

     

       
250
       
-
       
                onEmpty({ code: 'not_found', message: 'No matching post found' });

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
251
       
 
       
              }

     

       
252
       
 
       
            }

     

       
253
       
 
       
          }

     

       
254
       
 
       
        } catch (err) {

     

       
255
       
 
       
          if (isSubscribed) {

     

       
256
       
-
       
            setError('Error fetching post');

     

       
257
       
 
       
            if (onEmpty) {

     

       
258
       
-
       
              onEmpty({ code: 'fetching_error', message: 'Error fetching post' });

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
259
       
 
       
            }

     

       
260
       
 
       
          }

     

       
261
       
 
       
        }

     
···

       
274
       
 
       


     

       
275
       
 
       
    const fetchThreadData = async () => {

     

       
276
       
 
       
      if (!uri) return;

     

       
277
       
-
       
      

     

       
278
       
 
       
      try {

     

       
279
       
 
       
        const thread = await getPostThread(uri);

     

       
280
       
 
       
        if (isSubscribed) {

     
···

       
282
       
 
       
        }

     

       
283
       
 
       
      } catch (err) {

     

       
284
       
 
       
        if (isSubscribed) {

     

       
285
       
-
       
          setError('Error loading comments');

     

       
286
       
 
       
          if (onEmpty) {

     

       
287
       
 
       
            onEmpty({

     

       
288
       
-
       
              code: 'comment_loading_error',

     

       
289
       
-
       
              message: 'Error loading comments',

     

       
290
       
 
       
            });

     

       
291
       
 
       
          }

     

       
292
       
 
       
        }

     
···

       
307
       
 
       
  if (!uri) return null;

     

       
308
       
 
       


     

       
309
       
 
       
  if (error) {

     

       
310
       
-
       
    return <div className="container"><style>{styles}</style><p className="errorText">{error}</p></div>;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
311
       
 
       
  }

     

       
312
       
 
       


     

       
313
       
 
       
  if (!thread) {

     

       
314
       
-
       
    return <div className="container"><style>{styles}</style><p className="loadingText">Loading comments...</p></div>;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
315
       
 
       
  }

     

       
316
       
 
       


     

       
317
       
 
       
  let postUrl: string = uri;

     

       
318
       
-
       
  if (uri.startsWith('at://')) {

     

       
319
       
-
       
    const [, , did, _, rkey] = uri.split('/');

     

       
320
       
 
       
    postUrl = `https://bsky.app/profile/${did}/post/${rkey}`;

     

       
321
       
 
       
  }

     

       
322
       
 
       


     
···

       
328
       
 
       
      </div>

     

       
329
       
 
       
    );

     

       
330
       
 
       
  }

     

       
331
       
-
       
  

     

       
332
       
 
       
  // Safe sort - ensure we're working with valid objects

     

       
333
       
-
       
  const sortedReplies = [...thread.replies].filter(reply => 

     

       
334
       
 
       
    AppBskyFeedDefs.isThreadViewPost(reply)

     

       
335
       
 
       
  ).sort(sortByLikes);

     

       
336
       
 
       


     
···

       
360
       
 
       
  );

     

       
361
       
 
       
};

     

       
362
       
 
       


     

       
363
       
-
       
const getPostThread = async (uri: string): Promise<AppBskyFeedDefs.ThreadViewPost> => {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
364
       
 
       
  const atUri = getAtUri(uri);

     

       
365
       
 
       
  const params = new URLSearchParams({ uri: atUri });

     

       
366
       
 
       


     

       
367
       
 
       
  const res = await fetch(

     

       
368
       
-
       
    'https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?' +

     

       
369
       
 
       
      params.toString(),

     

       
370
       
 
       
    {

     

       
371
       
-
       
      method: 'GET',

     

       
372
       
 
       
      headers: {

     

       
373
       
-
       
        Accept: 'application/json',

     

       
374
       
 
       
      },

     

       
375
       
-
       
      cache: 'no-store',

     

       
376
       
-
       
    }

     

       
377
       
 
       
  );

     

       
378
       
 
       


     

       
379
       
 
       
  if (!res.ok) {

     

       
380
       
 
       
    console.error(await res.text());

     

       
381
       
-
       
    throw new Error('Failed to fetch post thread');

     

       
382
       
 
       
  }

     

       
383
       
 
       


     

       
384
       
 
       
  const data = (await res.json()) as AppBskyFeedGetPostThread.OutputSchema;

     

       
385
       
 
       


     

       
386
       
 
       
  if (!AppBskyFeedDefs.isThreadViewPost(data.thread)) {

     

       
387
       
-
       
    throw new Error('Could not find thread');

     

       
388
       
 
       
  }

     

       
389
       
 
       


     

       
390
       
 
       
  return data.thread;

     
···

       
394
       
 
       
  if (

     

       
395
       
 
       
    !AppBskyFeedDefs.isThreadViewPost(a) ||

     

       
396
       
 
       
    !AppBskyFeedDefs.isThreadViewPost(b) ||

     

       
397
       
-
       
    !('post' in a) ||

     

       
398
       
-
       
    !('post' in b)

     

       
399
       
 
       
  ) {

     

       
400
       
 
       
    return 0;

     

       
401
       
 
       
  }

     

       
402
       
 
       
  const aPost = a as AppBskyFeedDefs.ThreadViewPost;

     

       
403
       
 
       
  const bPost = b as AppBskyFeedDefs.ThreadViewPost;

     

       
404
       
 
       
  return (bPost.post.likeCount ?? 0) - (aPost.post.likeCount ?? 0);

     

       
405
       
-
       
};
     

···

       
1
       
+
       
import { useEffect, useState } from "preact/hooks";

     

       
2
       
+
       
import {

     

       
3
       
+
       
  AppBskyFeedDefs,

     

       
4
       
+
       
  type AppBskyFeedGetPostThread,

     

       
5
       
+
       
} from "npm:@atproto/api";

     

       
6
       
+
       
import { CommentOptions } from "../components/bsky-comments/types.tsx";

     

       
7
       
+
       
import { PostSummary } from "../components/bsky-comments/PostSummary.tsx";

     

       
8
       
+
       
import { Comment } from "../components/bsky-comments/Comment.tsx";

     

       
9
       
 
       


     

       
10
       
 
       
const getAtUri = (uri: string): string => {

     

       
11
       
+
       
  if (!uri.startsWith("at://") && uri.includes("bsky.app/profile/")) {

     

       
12
       
 
       
    const match = uri.match(/profile\/([\w:.]+)\/post\/([\w]+)/);

     

       
13
       
 
       
    if (match) {

     

       
14
       
 
       
      const [, did, postId] = match;

     
···

       
19
       
 
       
};

     

       
20
       
 
       


     

       
21
       
 
       
/**

     

       
22
       
+
       
 * This component displays a comment section for a post.

     

       
23
       
+
       
 * It fetches the comments for a post and displays them in a threaded format.

     

       
24
       
+
       
 */

     

       
25
       
 
       
export const CommentSection = ({

     

       
26
       
 
       
  uri: propUri,

     

       
27
       
 
       
  author,

     
···

       
29
       
 
       
  commentFilters,

     

       
30
       
 
       
}: CommentOptions): any => {

     

       
31
       
 
       
  const [uri, setUri] = useState<string | null>(null);

     

       
32
       
+
       
  const [thread, setThread] = useState<AppBskyFeedDefs.ThreadViewPost | null>(

     

       
33
       
+
       
    null,

     

       
34
       
+
       
  );

     

       
35
       
 
       
  const [error, setError] = useState<string | null>(null);

     

       
36
       
 
       
  const [visibleCount, setVisibleCount] = useState(5);

     

       
37
       
 
       


     
···

       
228
       
 
       


     

       
229
       
 
       
  useEffect(() => {

     

       
230
       
 
       
    let isSubscribed = true;

     

       
231
       
+
       


     

       
232
       
 
       
    const initializeUri = async () => {

     

       
233
       
 
       
      if (propUri) {

     

       
234
       
 
       
        setUri(propUri);

     
···

       
238
       
 
       
      if (author) {

     

       
239
       
 
       
        try {

     

       
240
       
 
       
          const currentUrl = window.location.href;

     

       
241
       
+
       
          const apiUrl =

     

       
242
       
+
       
            `https://public.api.bsky.app/xrpc/app.bsky.feed.searchPosts?q=*&url=${

     

       
243
       
+
       
              encodeURIComponent(

     

       
244
       
+
       
                currentUrl,

     

       
245
       
+
       
              )

     

       
246
       
+
       
            }&author=${author}&sort=top`;

     

       
247
       
+
       


     

       
248
       
 
       
          const response = await fetch(apiUrl);

     

       
249
       
 
       
          const data = await response.json();

     

       
250
       
 
       


     
···

       
253
       
 
       
              const post = data.posts[0];

     

       
254
       
 
       
              setUri(post.uri);

     

       
255
       
 
       
            } else {

     

       
256
       
+
       
              setError("No matching post found");

     

       
257
       
 
       
              if (onEmpty) {

     

       
258
       
+
       
                onEmpty({

     

       
259
       
+
       
                  code: "not_found",

     

       
260
       
+
       
                  message: "No matching post found",

     

       
261
       
+
       
                });

     

       
262
       
 
       
              }

     

       
263
       
 
       
            }

     

       
264
       
 
       
          }

     

       
265
       
 
       
        } catch (err) {

     

       
266
       
 
       
          if (isSubscribed) {

     

       
267
       
+
       
            setError("Error fetching post");

     

       
268
       
 
       
            if (onEmpty) {

     

       
269
       
+
       
              onEmpty({

     

       
270
       
+
       
                code: "fetching_error",

     

       
271
       
+
       
                message: "Error fetching post",

     

       
272
       
+
       
              });

     

       
273
       
 
       
            }

     

       
274
       
 
       
          }

     

       
275
       
 
       
        }

     
···

       
288
       
 
       


     

       
289
       
 
       
    const fetchThreadData = async () => {

     

       
290
       
 
       
      if (!uri) return;

     

       
291
       
+
       


     

       
292
       
 
       
      try {

     

       
293
       
 
       
        const thread = await getPostThread(uri);

     

       
294
       
 
       
        if (isSubscribed) {

     
···

       
296
       
 
       
        }

     

       
297
       
 
       
      } catch (err) {

     

       
298
       
 
       
        if (isSubscribed) {

     

       
299
       
+
       
          setError("Error loading comments");

     

       
300
       
 
       
          if (onEmpty) {

     

       
301
       
 
       
            onEmpty({

     

       
302
       
+
       
              code: "comment_loading_error",

     

       
303
       
+
       
              message: "Error loading comments",

     

       
304
       
 
       
            });

     

       
305
       
 
       
          }

     

       
306
       
 
       
        }

     
···

       
321
       
 
       
  if (!uri) return null;

     

       
322
       
 
       


     

       
323
       
 
       
  if (error) {

     

       
324
       
+
       
    return (

     

       
325
       
+
       
      <div className="container">

     

       
326
       
+
       
        <style>{styles}</style>

     

       
327
       
+
       
        <p className="errorText">{error}</p>

     

       
328
       
+
       
      </div>

     

       
329
       
+
       
    );

     

       
330
       
 
       
  }

     

       
331
       
 
       


     

       
332
       
 
       
  if (!thread) {

     

       
333
       
+
       
    return (

     

       
334
       
+
       
      <div className="container">

     

       
335
       
+
       
        <style>{styles}</style>

     

       
336
       
+
       
        <p className="loadingText">Loading comments...</p>

     

       
337
       
+
       
      </div>

     

       
338
       
+
       
    );

     

       
339
       
 
       
  }

     

       
340
       
 
       


     

       
341
       
 
       
  let postUrl: string = uri;

     

       
342
       
+
       
  if (uri.startsWith("at://")) {

     

       
343
       
+
       
    const [, , did, _, rkey] = uri.split("/");

     

       
344
       
 
       
    postUrl = `https://bsky.app/profile/${did}/post/${rkey}`;

     

       
345
       
 
       
  }

     

       
346
       
 
       


     
···

       
352
       
 
       
      </div>

     

       
353
       
 
       
    );

     

       
354
       
 
       
  }

     

       
355
       
+
       


     

       
356
       
 
       
  // Safe sort - ensure we're working with valid objects

     

       
357
       
+
       
  const sortedReplies = [...thread.replies].filter((reply) =>

     

       
358
       
 
       
    AppBskyFeedDefs.isThreadViewPost(reply)

     

       
359
       
 
       
  ).sort(sortByLikes);

     

       
360
       
 
       


     
···

       
384
       
 
       
  );

     

       
385
       
 
       
};

     

       
386
       
 
       


     

       
387
       
+
       
const getPostThread = async (

     

       
388
       
+
       
  uri: string,

     

       
389
       
+
       
): Promise<AppBskyFeedDefs.ThreadViewPost> => {

     

       
390
       
 
       
  const atUri = getAtUri(uri);

     

       
391
       
 
       
  const params = new URLSearchParams({ uri: atUri });

     

       
392
       
 
       


     

       
393
       
 
       
  const res = await fetch(

     

       
394
       
+
       
    "https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?" +

     

       
395
       
 
       
      params.toString(),

     

       
396
       
 
       
    {

     

       
397
       
+
       
      method: "GET",

     

       
398
       
 
       
      headers: {

     

       
399
       
+
       
        Accept: "application/json",

     

       
400
       
 
       
      },

     

       
401
       
+
       
      cache: "no-store",

     

       
402
       
+
       
    },

     

       
403
       
 
       
  );

     

       
404
       
 
       


     

       
405
       
 
       
  if (!res.ok) {

     

       
406
       
 
       
    console.error(await res.text());

     

       
407
       
+
       
    throw new Error("Failed to fetch post thread");

     

       
408
       
 
       
  }

     

       
409
       
 
       


     

       
410
       
 
       
  const data = (await res.json()) as AppBskyFeedGetPostThread.OutputSchema;

     

       
411
       
 
       


     

       
412
       
 
       
  if (!AppBskyFeedDefs.isThreadViewPost(data.thread)) {

     

       
413
       
+
       
    throw new Error("Could not find thread");

     

       
414
       
 
       
  }

     

       
415
       
 
       


     

       
416
       
 
       
  return data.thread;

     
···

       
420
       
 
       
  if (

     

       
421
       
 
       
    !AppBskyFeedDefs.isThreadViewPost(a) ||

     

       
422
       
 
       
    !AppBskyFeedDefs.isThreadViewPost(b) ||

     

       
423
       
+
       
    !("post" in a) ||

     

       
424
       
+
       
    !("post" in b)

     

       
425
       
 
       
  ) {

     

       
426
       
 
       
    return 0;

     

       
427
       
 
       
  }

     

       
428
       
 
       
  const aPost = a as AppBskyFeedDefs.ThreadViewPost;

     

       
429
       
 
       
  const bPost = b as AppBskyFeedDefs.ThreadViewPost;

     

       
430
       
 
       
  return (bPost.post.likeCount ?? 0) - (aPost.post.likeCount ?? 0);

     

       
431
       
+
       
};

     

···

       
42
       
 
       
              </a>

     

       
43
       
 
       
              <div class="h-4 w-px bg-slate-200 dark:bg-slate-700"></div>

     

       
44
       
 
       
              <div class="text-base flex items-center gap-7">

     

       
45
       
-
       
                <a 

     

       
46
       
-
       
                  href="/" 

     

       
47
       
-
       
                  class="relative group" 

     

       
48
       
 
       
                  data-current={isActive("/")}

     

       
49
       
 
       
                  data-hovered={blogHovered}

     

       
50
       
 
       
                  onMouseEnter={() => setBlogHovered(true)}

     

···

       
42
       
 
       
              </a>

     

       
43
       
 
       
              <div class="h-4 w-px bg-slate-200 dark:bg-slate-700"></div>

     

       
44
       
 
       
              <div class="text-base flex items-center gap-7">

     

       
45
       
+
       
                <a

     

       
46
       
+
       
                  href="/"

     

       
47
       
+
       
                  class="relative group"

     

       
48
       
 
       
                  data-current={isActive("/")}

     

       
49
       
 
       
                  data-hovered={blogHovered}

     

       
50
       
 
       
                  onMouseEnter={() => setBlogHovered(true)}

     

···

       
7
       
 
       
  uri: string;

     

       
8
       
 
       
}

     

       
9
       
 
       


     

       
10
       
-
       
export default function PostList({ posts: initialPosts }: { posts: PostRecord[] }) {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
11
       
 
       
  const posts = useSignal(initialPosts);

     

       
12
       
 
       


     

       
13
       
 
       
  useEffect(() => {

     

···

       
7
       
 
       
  uri: string;

     

       
8
       
 
       
}

     

       
9
       
 
       


     

       
10
       
+
       
export default function PostList(

     

       
11
       
+
       
  { posts: initialPosts }: { posts: PostRecord[] },

     

       
12
       
+
       
) {

     

       
13
       
 
       
  const posts = useSignal(initialPosts);

     

       
14
       
 
       


     

       
15
       
 
       
  useEffect(() => {

     

···

       
1
       
 
       
import { bsky } from "./bsky.ts";

     

       
2
       
 
       
import { env } from "./env.ts";

     

       
3
       
 
       


     

       
4
       
-
       
import { type ComAtprotoRepoListRecords } from "npm:@atcute/client/lexicons";

     

       
5
       
 
       
import { type ComWhtwndBlogEntry } from "@atcute/whitewind";

     

       
0
       
 
       

     

       
6
       
 
       


     

       
7
       
 
       
export async function getPosts() {

     

       
8
       
 
       
  const posts = await bsky.get("com.atproto.repo.listRecords", {

     

       
9
       
 
       
    params: {

     

       
10
       
-
       
      repo: env.NEXT_PUBLIC_BSKY_DID,

     

       
11
       
 
       
      collection: "com.whtwnd.blog.entry",

     

       
12
       
 
       
      // todo: pagination

     

       
13
       
 
       
    },

     

       
14
       
 
       
  });

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
15
       
 
       
  return posts.data.records.filter(

     

       
16
       
 
       
    drafts,

     

       
17
       
 
       
  ) as (ComAtprotoRepoListRecords.Record & {

     
···

       
28
       
 
       
export async function getPost(rkey: string) {

     

       
29
       
 
       
  const post = await bsky.get("com.atproto.repo.getRecord", {

     

       
30
       
 
       
    params: {

     

       
31
       
-
       
      repo: env.NEXT_PUBLIC_BSKY_DID,

     

       
32
       
 
       
      rkey: rkey,

     

       
33
       
 
       
      collection: "com.whtwnd.blog.entry",

     

       
34
       
 
       
    },

     

···

       
1
       
 
       
import { bsky } from "./bsky.ts";

     

       
2
       
 
       
import { env } from "./env.ts";

     

       
3
       
 
       


     

       
4
       
+
       
import { type ActorIdentifier } from "npm:@atcute/lexicons";

     

       
5
       
 
       
import { type ComWhtwndBlogEntry } from "@atcute/whitewind";

     

       
6
       
+
       
import { type ComAtprotoRepoListRecords } from "npm:@atcute/atproto";

     

       
7
       
 
       


     

       
8
       
 
       
export async function getPosts() {

     

       
9
       
 
       
  const posts = await bsky.get("com.atproto.repo.listRecords", {

     

       
10
       
 
       
    params: {

     

       
11
       
+
       
      repo: env.NEXT_PUBLIC_BSKY_DID as ActorIdentifier,

     

       
12
       
 
       
      collection: "com.whtwnd.blog.entry",

     

       
13
       
 
       
      // todo: pagination

     

       
14
       
 
       
    },

     

       
15
       
 
       
  });

     

       
16
       
+
       
  

     

       
17
       
+
       
  if ('error' in posts.data) {

     

       
18
       
+
       
    throw new Error(posts.data.error);

     

       
19
       
+
       
  }

     

       
20
       
+
       


     

       
21
       
 
       
  return posts.data.records.filter(

     

       
22
       
 
       
    drafts,

     

       
23
       
 
       
  ) as (ComAtprotoRepoListRecords.Record & {

     
···

       
34
       
 
       
export async function getPost(rkey: string) {

     

       
35
       
 
       
  const post = await bsky.get("com.atproto.repo.getRecord", {

     

       
36
       
 
       
    params: {

     

       
37
       
+
       
      repo: env.NEXT_PUBLIC_BSKY_DID as ActorIdentifier,

     

       
38
       
 
       
      rkey: rkey,

     

       
39
       
 
       
      collection: "com.whtwnd.blog.entry",

     

       
40
       
 
       
    },

     

···

       
1
       
-
       
import { CredentialManager, XRPC } from "npm:@atcute/client";

     

       
2
       
 
       


     

       
3
       
 
       
import { env } from "./env.ts";

     

       
4
       
 
       


     

       
5
       
-
       
const handler = new CredentialManager({

     

       
6
       
-
       
  service: env.NEXT_PUBLIC_BSKY_PDS,

     

       
7
       
-
       
  fetch,

     

       
8
       
 
       
});

     

       
9
       
-
       
export const bsky = new XRPC({ handler });

     

···

       
1
       
+
       
import { Client, simpleFetchHandler } from "@atcute/client";

     

       
2
       
 
       


     

       
3
       
 
       
import { env } from "./env.ts";

     

       
4
       
 
       


     

       
5
       
+
       
const handler = simpleFetchHandler({

     

       
6
       
+
       
  service: env.NEXT_PUBLIC_BSKY_PDS

     

       
0
       
 
       

     

       
7
       
 
       
});

     

       
8
       
+
       
export const bsky = new Client({ handler });

     

···

       
111
       
 
       
    <>

     

       
112
       
 
       
      <Head>

     

       
113
       
 
       
        <title>{post.value.title} — knotbin</title>

     

       
114
       
-
       
        <meta name="description" content={post.value.subtitle || "by Roscoe Rubin-Rottenberg"} />

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
115
       
 
       
        {/* Merge GFM's default styles with our dark-mode overrides */}

     

       
116
       
 
       
        <style

     

       
117
       
 
       
          dangerouslySetInnerHTML={{ __html: CSS + transparentDarkModeCSS }}

     

···

       
111
       
 
       
    <>

     

       
112
       
 
       
      <Head>

     

       
113
       
 
       
        <title>{post.value.title} — knotbin</title>

     

       
114
       
+
       
        <meta

     

       
115
       
+
       
          name="description"

     

       
116
       
+
       
          content={post.value.subtitle || "by Roscoe Rubin-Rottenberg"}

     

       
117
       
+
       
        />

     

       
118
       
 
       
        {/* Merge GFM's default styles with our dark-mode overrides */}

     

       
119
       
 
       
        <style

     

       
120
       
 
       
          dangerouslySetInnerHTML={{ __html: CSS + transparentDarkModeCSS }}

     

···

       
21
       
 
       
  });

     

       
22
       
 
       


     

       
23
       
 
       
  for (const post of posts) {

     

       
24
       
-
       
    const description = post.value.subtitle 

     

       
25
       
 
       
      ? `${post.value.subtitle}\n\n${await unified()

     

       
26
       
-
       
          .use(remarkParse)

     

       
27
       
-
       
          .use(remarkRehype)

     

       
28
       
-
       
          .use(rehypeFormat)

     

       
29
       
-
       
          .use(rehypeStringify)

     

       
30
       
-
       
          .process(post.value.content)

     

       
31
       
-
       
          .then((v) => v.toString())}`

     

       
32
       
 
       
      : await unified()

     

       
33
       
-
       
          .use(remarkParse)

     

       
34
       
-
       
          .use(remarkRehype)

     

       
35
       
-
       
          .use(rehypeFormat)

     

       
36
       
-
       
          .use(rehypeStringify)

     

       
37
       
-
       
          .process(post.value.content)

     

       
38
       
-
       
          .then((v) => v.toString());

     

       
39
       
 
       


     

       
40
       
 
       
    rss.item({

     

       
41
       
 
       
      title: post.value.title ?? "Untitled",

     

···

       
21
       
 
       
  });

     

       
22
       
 
       


     

       
23
       
 
       
  for (const post of posts) {

     

       
24
       
+
       
    const description = post.value.subtitle

     

       
25
       
 
       
      ? `${post.value.subtitle}\n\n${await unified()

     

       
26
       
+
       
        .use(remarkParse)

     

       
27
       
+
       
        .use(remarkRehype)

     

       
28
       
+
       
        .use(rehypeFormat)

     

       
29
       
+
       
        .use(rehypeStringify)

     

       
30
       
+
       
        .process(post.value.content)

     

       
31
       
+
       
        .then((v) => v.toString())}`

     

       
32
       
 
       
      : await unified()

     

       
33
       
+
       
        .use(remarkParse)

     

       
34
       
+
       
        .use(remarkRehype)

     

       
35
       
+
       
        .use(rehypeFormat)

     

       
36
       
+
       
        .use(rehypeStringify)

     

       
37
       
+
       
        .process(post.value.content)

     

       
38
       
+
       
        .then((v) => v.toString());

     

       
39
       
 
       


     

       
40
       
 
       
    rss.item({

     

       
41
       
 
       
      title: post.value.title ?? "Untitled",

     

···

       
1
       
-
       
@import url('https://api.fonts.coollabs.io/css2?family=Inter:wght@400;700&display=swap');

     

       
2
       
-
       
@import url('https://api.fonts.coollabs.io/css2?family=Libre+Bodoni:ital,wght@0,400;0,700;1,400&display=swap');

     

       
3
       
 
       
@font-face {

     

       
4
       
-
       
  font-family: 'Berkeley Mono';

     

       
5
       
-
       
  src: url('/path/to/local/fonts/BerkeleyMono-Regular.woff2') format('woff2'),

     

       
6
       
-
       
       url('/path/to/local/fonts/BerkeleyMono-Regular.woff') format('woff');

     

       
0
       
 
       

     

       
7
       
 
       
  font-weight: 400;

     

       
8
       
 
       
  font-style: normal;

     

       
9
       
 
       
}

     
···

       
18
       
 
       
}

     

       
19
       
 
       


     

       
20
       
 
       
:root {

     

       
21
       
-
       
  --font-sans: 'Inter', sans-serif;

     

       
22
       
-
       
  --font-serif: 'Libre Bodoni', serif;

     

       
23
       
-
       
  --font-mono: 'Berkeley Mono', monospace;

     

       
24
       
 
       
}

     

       
25
       
 
       


     

       
26
       
-
       
.font-sans { font-family: var(--font-sans); }

     

       
27
       
-
       
.font-serif { font-family: var(--font-serif); }

     

       
28
       
-
       
.font-mono { font-family: var(--font-mono); }

     

       
29
       
-
       
.font-serif-italic { font-family: var(--font-serif); font-style: italic;}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
30
       
 
       


     

       
31
       
 
       
/*

     

       
32
       
 
       
  The default border color has changed to `currentColor` in Tailwind CSS v4,

     

···

       
1
       
+
       
@import url("https://api.fonts.coollabs.io/css2?family=Inter:wght@400;700&display=swap");

     

       
2
       
+
       
@import url("https://api.fonts.coollabs.io/css2?family=Libre+Bodoni:ital,wght@0,400;0,700;1,400&display=swap");

     

       
3
       
 
       
@font-face {

     

       
4
       
+
       
  font-family: "Berkeley Mono";

     

       
5
       
+
       
  src:

     

       
6
       
+
       
    url("/path/to/local/fonts/BerkeleyMono-Regular.woff2") format("woff2"),

     

       
7
       
+
       
    url("/path/to/local/fonts/BerkeleyMono-Regular.woff") format("woff");

     

       
8
       
 
       
  font-weight: 400;

     

       
9
       
 
       
  font-style: normal;

     

       
10
       
 
       
}

     
···

       
19
       
 
       
}

     

       
20
       
 
       


     

       
21
       
 
       
:root {

     

       
22
       
+
       
  --font-sans: "Inter", sans-serif;

     

       
23
       
+
       
  --font-serif: "Libre Bodoni", serif;

     

       
24
       
+
       
  --font-mono: "Berkeley Mono", monospace;

     

       
25
       
 
       
}

     

       
26
       
 
       


     

       
27
       
+
       
.font-sans {

     

       
28
       
+
       
  font-family: var(--font-sans);

     

       
29
       
+
       
}

     

       
30
       
+
       
.font-serif {

     

       
31
       
+
       
  font-family: var(--font-serif);

     

       
32
       
+
       
}

     

       
33
       
+
       
.font-mono {

     

       
34
       
+
       
  font-family: var(--font-mono);

     

       
35
       
+
       
}

     

       
36
       
+
       
.font-serif-italic {

     

       
37
       
+
       
  font-family: var(--font-serif);

     

       
38
       
+
       
  font-style: italic;

     

       
39
       
+
       
}

     

       
40
       
 
       


     

       
41
       
 
       
/*

     

       
42
       
 
       
  The default border color has changed to `currentColor` in Tailwind CSS v4,