demos for spacedust
bad-example.com
whoami component
somehow not the worst
+1
-2
atproto-notifications/index.html
+1
-2
atproto-notifications/index.html
···
2
2
<html lang="en">
3
3
<head>
4
4
<meta charset="UTF-8" />
5
-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
-
<title>Vite + React + TS</title>
6
+
<title>atproto notifications</title>
8
7
</head>
9
8
<body>
10
9
<div id="root"></div>
+11
-4
atproto-notifications/src/App.tsx
+11
-4
atproto-notifications/src/App.tsx
···
1
1
import { useLocalStorage } from "@uidotdev/usehooks";
2
2
import { HostContext } from './context'
3
-
import { Hello } from './components/Hello';
3
+
import { WhoAmI } from './components/WhoAmI';
4
4
import './App.css'
5
5
6
6
function App() {
···
11
11
<HostContext.Provider value={host}>
12
12
<h1>🎇 atproto notifications demo</h1>
13
13
14
-
{user === null && (
15
-
<Hello onSetUser={setUser} />
16
-
)}
14
+
{user === null
15
+
? (
16
+
<WhoAmI onSetUser={setUser} />
17
+
)
18
+
: (
19
+
<>
20
+
<p>hi {user.handle}</p>
21
+
<button onClick={() => setUser(null)}>clear</button>
22
+
</>
23
+
)}
17
24
</HostContext.Provider>
18
25
)
19
26
}
-15
atproto-notifications/src/components/Hello.tsx
-15
atproto-notifications/src/components/Hello.tsx
···
1
-
import { useState } from 'react';
2
-
3
-
export function Hello({ onSetUser }) {
4
-
const [userVal, setUserVal] = useState('');
5
-
return (
6
-
<div className="hello card">
7
-
<label>
8
-
<input />
9
-
</label>
10
-
<button onClick={() => {}}>
11
-
count is
12
-
</button>
13
-
</div>
14
-
);
15
-
}
+41
atproto-notifications/src/components/WhoAmI.tsx
+41
atproto-notifications/src/components/WhoAmI.tsx
···
1
+
import { useRef, useEffect } from 'react';
2
+
3
+
export function WhoAmI({ onSetUser, origin = 'http://127.0.0.1:9997' }) {
4
+
const frameRef = useRef(null);
5
+
6
+
useEffect(() => {
7
+
function handleMessage(ev) {
8
+
if (
9
+
ev.source !== frameRef.current?.contentWindow ||
10
+
ev.origin !== origin
11
+
) return;
12
+
onSetUser(ev.data);
13
+
}
14
+
15
+
console.log('ready');
16
+
window.addEventListener('message', handleMessage);
17
+
return () => {
18
+
console.log('byeeeeeeeeeeeee');
19
+
window.removeEventListener('message', handleMessage);
20
+
}
21
+
}, []);
22
+
23
+
return (
24
+
<iframe
25
+
src={`${origin}/prompt`}
26
+
ref={frameRef}
27
+
id="whoami"
28
+
style={{
29
+
border: 'none',
30
+
boxSizing: 'border-box',
31
+
display: 'block',
32
+
colorScheme: 'none',
33
+
}}
34
+
allowtransparency="true"
35
+
height="160"
36
+
width="320"
37
+
>
38
+
Ooops, failed to load the login helper
39
+
</iframe>
40
+
);
41
+
}