Personal Site
segment and render rich text properly
+29
-2
+29
-2
src/components/home/feeds/Post.astro
+29
-2
src/components/home/feeds/Post.astro
···
2
2
import { docResolver } from "./atproto";
3
3
import { type Blob, type LegacyBlob } from "@atcute/lexicons";
4
4
import { AppBskyFeedPost } from "@atcute/bluesky";
5
+
import { segmentize } from "@atcute/bluesky-richtext-segmenter";
5
6
import BoxTlbr from "/assets/box-tlbr.png";
6
7
import { type Author, understoodDid, type embed } from "./post-types";
7
8
import {
···
100
101
</div>
101
102
<hr />
102
103
<section class="content">
103
-
<div class="post-text">{post.text}</div>
104
-
<div class="embed">{(() => {})()}</div>
104
+
<div>
105
+
<!-- ignore is needed bc otherwise this and
106
+
the anchors have leading/trailing whitespace
107
+
and i cant tell prettier to stop sooo -->
108
+
<!-- prettier-ignore -->
109
+
<div class="post-text">{
110
+
!post.facets
111
+
? post.text
112
+
: segmentize(post.text.trim(), post.facets).map((x) => {
113
+
console.log(x);
114
+
return !x.features
115
+
? x.text
116
+
: x.features.reduce(
117
+
(acc, cur) =>
118
+
cur.$type === "app.bsky.richtext.facet#link" ? (
119
+
<a href={cur.uri}>{acc}</a>
120
+
) : cur.$type === "app.bsky.richtext.facet#mention" ? (
121
+
<a href={`https://deer.social/profile/${cur.did}`}>{acc}</a>
122
+
) : (
123
+
<a href={`https://deer.social/hashtag/${cur.tag}`}>{acc}</a>
124
+
),
125
+
x.text,
126
+
);
127
+
})
128
+
}
129
+
</div>
130
+
<div class="embed">{(() => {})()}</div>
131
+
</div>
105
132
</section>
106
133
</article>
107
134