frontend/src/main.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import './style.css'

async function main() {
  const app = document.querySelector('#app');
  if (!app) {
    console.error('App container not found');
    throw new Error('App container not found');
  }

  app.innerHTML = '<div class="spinner"></div>';

  try {
    const response = await fetch('http://localhost:8080/api/posts');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    const posts = await response.json();
    app.innerHTML = '';

    for (const post of posts) {
      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 style="font-size: 12px; color: #888">${new Date(post.createdAt).toLocaleString()}</div>
        </div>
      </div>
    `;
      app.innerHTML += postHTML;
    }
  } catch (err) {
    app.innerHTML = `<div style="color: #f88">error loading posts: ${err}</div>`;
  }
}

main();