Scratch space for learning atproto app development
cduck.me
1import { AtUri } from '@atproto/syntax'
2import type { Post } from '#/db/schema'
3import { html } from '../view'
4import { shell } from './shell'
5
6type Props = { posts: Post[]; profile?: { displayName?: string; handle: string } }
7
8export function home(props: Props) {
9 return shell({
10 title: 'Home',
11 content: content(props),
12 })
13}
14
15function content({ posts, profile }: Props) {
16 return html`<div id="root">
17 <h1>Welcome to the Atmosphere</h1>
18 ${
19 profile
20 ? html`<form action="/logout" method="post">
21 <p>
22 Hi, <b>${profile.displayName || profile.handle}</b>. It's pretty special here.
23 <button type="submit">Log out.</button>
24 </p>
25 </form>`
26 : html`<p>
27 It's pretty special here.
28 <a href="/login">Login.</a>
29 </p>`
30 }
31 <ul>
32 ${posts.map((post) => {
33 return html`<li>
34 <a href="${toBskyLink(post.uri)}" target="_blank">🔗</a>
35 ${post.text}
36 </li>`
37 })}
38 </ul>
39 <a href="/">Give me more</a>
40 </div>`
41}
42
43function toBskyLink(uriStr: string) {
44 const uri = new AtUri(uriStr)
45 return `https://bsky.app/profile/${uri.host}/post/${uri.rkey}`
46}