added facets and markdown rendering

5 files changed, 126 insertions, 2 deletions

diff --git a/backend/notes/app.bsky.feed.post.go b/backend/notes/app.bsky.feed.post.go
index 43929b3..32e7854 100644
--- a/backend/notes/app.bsky.feed.post.go
+++ b/backend/notes/app.bsky.feed.post.go
@@ -13,6 +13,14 @@ type AppBskyFeedPostNote struct {
 	Text         string    `json:"text"`
 	CreatedAt    time.Time `json:"createdAt"`
 	ReplyTo      *string   `json:"replyTo,omitempty"`
+	Facets       []Facet   `json:"facets,omitempty"`
+}
+
+type Facet struct {
+	ByteStart int    `json:"byteStart"`
+	ByteEnd   int    `json:"byteEnd"`
+	Type      string `json:"type"`
+	Value     string `json:"value"` // the link destination, whether url, profile or tag
 }
 
 type AppBskyFeedPostRecord struct {
@@ -25,6 +33,18 @@ type AppBskyFeedPostRecord struct {
 				URI string `json:"uri"`
 			} `json:"parent"`
 		} `json:"reply,omitempty"`
+		Facets []struct {
+			Index struct {
+				ByteStart int `json:"byteStart"`
+				ByteEnd   int `json:"byteEnd"`
+			} `json:"index"`
+			Features []struct {
+				Type string `json:"$type"`
+				URI  string `json:"uri,omitempty"`
+				DID  string `json:"did,omitempty"`
+				Tag  string `json:"tag,omitempty"`
+			} `json:"features"`
+		} `json:"facets,omitempty"`
 	} `json:"value"`
 }
 
@@ -66,6 +86,35 @@ func AppBskyFeedPostFromRecord(record AppBskyFeedPostRecord) (*AppBskyFeedPostNo
 	parts := strings.Split(record.URI, "/") // at://DID/collection/rkey
 	did := parts[2]
 
+	var facets []Facet
+	for _, f := range record.Value.Facets {
+		for _, feature := range f.Features {
+			var value string
+			var facetType string
+
+			switch feature.Type {
+			case "app.bsky.richtext.facet#link":
+				facetType = "link"
+				value = feature.URI
+			case "app.bsky.richtext.facet#mention":
+				facetType = "mention"
+				value = feature.DID
+			case "app.bsky.richtext.facet#tag":
+				facetType = "tag"
+				value = feature.Tag
+			default:
+				continue
+			}
+
+			facets = append(facets, Facet{
+				ByteStart: f.Index.ByteStart,
+				ByteEnd:   f.Index.ByteEnd,
+				Type:      facetType,
+				Value:     value,
+			})
+		}
+	}
+
 	return &AppBskyFeedPostNote{
 		URI:          record.URI,
 		AuthorDID:    did,
@@ -73,5 +122,6 @@ func AppBskyFeedPostFromRecord(record AppBskyFeedPostRecord) (*AppBskyFeedPostNo
 		CreatedAt:    createdAt,
 		Text:         record.Value.Text,
 		ReplyTo:      replyTo,
+		Facets:       facets,
 	}, nil
 }
diff --git a/frontend/bun.lock b/frontend/bun.lock
index bd161f5..4671154 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -4,6 +4,9 @@
   "workspaces": {
     "": {
       "name": "frontend",
+      "dependencies": {
+        "marked": "^17.0.3",
+      },
       "devDependencies": {
         "typescript": "~5.9.3",
         "vite": "^8.0.0-beta.13",
@@ -86,6 +89,8 @@
 
     "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.31.1", "", { "os": "win32", "cpu": "x64" }, "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw=="],
 
+    "marked": ["marked@17.0.3", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-jt1v2ObpyOKR8p4XaUJVk3YWRJ5n+i4+rjQopxvV32rSndTJXvIzuUdWWIy/1pFQMkQmvTXawzDNqOH/CUmx6A=="],
+
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
diff --git a/frontend/package.json b/frontend/package.json
index 8c2ad49..db2c5e9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,5 +14,8 @@
   },
   "overrides": {
     "vite": "^8.0.0-beta.13"
+  },
+  "dependencies": {
+    "marked": "^17.0.3"
   }
 }
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 099193a..f53632c 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,5 +1,58 @@
+import { marked } from 'marked';
 import './style.css'
 
+function renderTextWithFacets(text: string, facets: any[]): string {
+  if (!facets || facets.length === 0) {
+    return text;
+  }
+
+  // convert text to UTF-8 bytes because Bluesky counts bytes in UTF-8
+  const encoder = new TextEncoder();
+  const postBytes = encoder.encode(text);
+
+  // sort facets by start position
+  facets.sort((a, b) => a.byteStart - b.byteStart);
+
+  let result = '';
+  let lastPos = 0;
+
+  const decoder = new TextDecoder();
+  for (const facet of facets) {
+    // add text before this facet
+    const beforeBytes = postBytes.slice(lastPos, facet.byteStart);
+    result += decoder.decode(beforeBytes);
+
+    // add the faceted text as a link
+    const facetBytes = postBytes.slice(facet.byteStart, facet.byteEnd);
+    const facetText = decoder.decode(facetBytes);
+
+    switch (facet.type) {
+      case 'link':
+        result += `<a href="${facet.value}" target="_blank">${facetText}</a>`;
+        break;
+      case 'mention':
+        result += `<a href="https://bsky.app/profile/${facet.value}" target="_blank">${facetText}</a>`;
+        break;
+      case 'tag':
+        result += `<a href="https://bsky.app/hashtag/${facet.value}" target="_blank">#${facetText}</a>`;
+        break;
+      default: // in case Bluesky ever adds other fcaet types
+        result += facetText; // if we don't recognize the type, just add it as plain text
+        break;
+    }
+
+    lastPos = facet.byteEnd;
+  }
+
+  // add remaining text
+  const remainingBytes = postBytes.slice(lastPos);
+  result += decoder.decode(remainingBytes);
+
+  console.log(result);
+
+  return result;
+}
+
 async function main() {
   const app = document.querySelector('#app');
   if (!app) {
@@ -17,12 +70,20 @@ async function main() {
     app.innerHTML = '';
 
     for (const post of posts) {
+      let parsedText = '';
+      if(post.facets && post.facets.length > 0) {
+        parsedText = renderTextWithFacets(post.text || '', post.facets || []);
+      } else {
+        parsedText = post.text;
+      }
+      const postText = marked.parseInline(parsedText, { breaks: true });
+
       const postHTML = `
       <div class="note">
         <img class="note-avatar" src="https://cdn.bsky.app/img/avatar/plain/did:plc:hyyqbqqhpxt2bnn7s2e2iuxd/bafkreidoiynom7v2y5rpsm467l3d2cnr7ozvlfusrchjey3k2jtyquufq4@jpeg" alt="avatar">
         <div class="note-content">
           <div style="font-weight: bold">@${post.authorHandle}</div>
-          <div class="note-text">${post.text || '<br>'}</div>
+          <div class="note-text">${postText || '<br>'}</div>
           <div style="font-size: 12px; color: #888">${new Date(post.createdAt).toLocaleString()}</div>
         </div>
       </div>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 13d2217..549c596 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -60,6 +60,11 @@ h1 {
   white-space: pre-wrap;
 }
 
+.muted {
+  opacity: 0.5;
+  font-size: 12px;
+}
+
 .spinner {
   border: 16px solid #f3f3f3;
   border-top: 16px solid #3498db;
@@ -80,4 +85,4 @@ h1 {
     color: #213547;
     background-color: #ffffff;
   }
-}
\ No newline at end of file
+}