aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>User Page Test</title>
6 <style>
7 body {
8 font-family: monospace;
9 padding: 2em;
10 max-width: 800px;
11 margin: 0 auto;
12 }
13 .test-section {
14 background: #f5f5f5;
15 padding: 1.5em;
16 margin: 1em 0;
17 border-radius: 4px;
18 }
19 code {
20 background: #fff;
21 padding: 2px 6px;
22 border-radius: 2px;
23 }
24 a {
25 color: rgb(205, 92, 155);
26 text-decoration: none;
27 }
28 a:hover {
29 text-decoration: underline;
30 }
31 h2 {
32 color: rgb(205, 92, 155);
33 }
34 .note {
35 background: #fff3cd;
36 padding: 1em;
37 border-left: 3px solid #ffc107;
38 margin: 1em 0;
39 }
40 iframe {
41 width: 100%;
42 height: 600px;
43 border: 2px solid rgb(205, 92, 155);
44 border-radius: 4px;
45 }
46 </style>
47</head>
48<body>
49 <h1>🧪 User Page Test</h1>
50
51 <div class="note">
52 <strong>Note:</strong> This page tests the user-page.html functionality.
53 The actual page will be served at subdomains like <code>fifi.at.aesthetic.computer</code>
54 </div>
55
56 <h2>Test Instructions</h2>
57
58 <div class="test-section">
59 <h3>1. Local Testing</h3>
60 <p>To test locally, you can:</p>
61 <ul>
62 <li>Run <code>npm run dev:user-pages</code> and open <code>http://localhost:4177/user.html?handle=YOUR_HANDLE</code></li>
63 <li>Open <code>user-page.html</code> directly</li>
64 <li>Use a local server with host override</li>
65 <li>Or use this test page with manual handle input</li>
66 </ul>
67 <p style="margin-top: 0.75em; font-size: 0.9em; opacity: 0.8;">
68 Optional: use <code>scripts/hosts-helper.fish</code> to map a handle to localhost via /etc/hosts.
69 </p>
70 </div>
71
72 <div class="test-section">
73 <h3>2. Test Handle</h3>
74 <p>Enter a handle to test:</p>
75 <input type="text" id="handleInput" value="jeffrey.at.aesthetic.computer"
76 style="width: 100%; padding: 0.5em; font-family: monospace; font-size: 1em; margin-bottom: 1em;">
77 <button onclick="testHandle()"
78 style="padding: 0.5em 1em; font-family: monospace; cursor: pointer; background: rgb(205, 92, 155); color: white; border: none; border-radius: 4px;">
79 Load User Page
80 </button>
81 </div>
82
83 <div class="test-section">
84 <h3>3. API Tests</h3>
85 <p>Test ATProto APIs directly:</p>
86 <button onclick="testResolveHandle()" style="padding: 0.5em 1em; margin: 0.5em; font-family: monospace; cursor: pointer;">
87 Test Resolve Handle
88 </button>
89 <button onclick="testListRecords()" style="padding: 0.5em 1em; margin: 0.5em; font-family: monospace; cursor: pointer;">
90 Test List Records
91 </button>
92 <div id="apiResults" style="margin-top: 1em; padding: 1em; background: white; border-radius: 4px; max-height: 300px; overflow-y: auto; display: none;">
93 <pre id="apiOutput" style="margin: 0; white-space: pre-wrap; word-wrap: break-word; font-size: 0.85em;"></pre>
94 </div>
95 </div>
96
97 <h2>Deployment</h2>
98
99 <div class="test-section">
100 <h3>Deploy to Production</h3>
101 <p>Once testing is complete, deploy with:</p>
102 <pre style="background: white; padding: 1em; border-radius: 4px; overflow-x: auto;">cd /workspaces/aesthetic-computer/at
103./deploy-user-pages.fish</pre>
104 <p>This will update the Caddy configuration and deploy both:</p>
105 <ul>
106 <li><code>landing-page.html</code> → <code>https://at.aesthetic.computer</code></li>
107 <li><code>user-page.html</code> → <code>https://[handle].at.aesthetic.computer</code></li>
108 </ul>
109 </div>
110
111 <h2>Documentation</h2>
112
113 <p>See <a href="USER-PAGES.md">USER-PAGES.md</a> for full documentation including:</p>
114 <ul>
115 <li>Architecture overview</li>
116 <li>API details</li>
117 <li>Troubleshooting guide</li>
118 <li>Future enhancements</li>
119 </ul>
120
121 <script>
122 const PDS_URL = 'https://at.aesthetic.computer';
123
124 async function testResolveHandle() {
125 const handle = document.getElementById('handleInput').value;
126 const resultsDiv = document.getElementById('apiResults');
127 const outputPre = document.getElementById('apiOutput');
128
129 resultsDiv.style.display = 'block';
130 outputPre.textContent = 'Loading...';
131
132 try {
133 const url = `${PDS_URL}/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(handle)}`;
134 console.log('Fetching:', url);
135
136 const response = await fetch(url);
137 const data = await response.json();
138
139 outputPre.textContent = `✅ Resolve Handle Success!\n\nHandle: ${handle}\nDID: ${data.did}\n\nFull Response:\n${JSON.stringify(data, null, 2)}`;
140 } catch (error) {
141 outputPre.textContent = `❌ Error:\n${error.message}\n\n${error.stack}`;
142 }
143 }
144
145 async function testListRecords() {
146 const handle = document.getElementById('handleInput').value;
147 const resultsDiv = document.getElementById('apiResults');
148 const outputPre = document.getElementById('apiOutput');
149
150 resultsDiv.style.display = 'block';
151 outputPre.textContent = 'Resolving handle...';
152
153 try {
154 // First resolve handle to DID
155 const resolveUrl = `${PDS_URL}/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(handle)}`;
156 const resolveResponse = await fetch(resolveUrl);
157 const { did } = await resolveResponse.json();
158
159 outputPre.textContent = `Found DID: ${did}\n\nFetching records...`;
160
161 // Then list records
162 const collection = 'computer.aesthetic.painting';
163 const listUrl = `${PDS_URL}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=${collection}&limit=5`;
164
165 const listResponse = await fetch(listUrl);
166 const data = await listResponse.json();
167
168 outputPre.textContent = `✅ List Records Success!\n\nCollection: ${collection}\nCount: ${data.records?.length || 0}\n\nSample Records:\n${JSON.stringify(data.records?.slice(0, 3), null, 2)}`;
169 } catch (error) {
170 outputPre.textContent = `❌ Error:\n${error.message}\n\n${error.stack}`;
171 }
172 }
173
174 function testHandle() {
175 const handle = document.getElementById('handleInput').value;
176 // For now, just show instructions
177 alert(`To test with handle "${handle}":\n\n1. Deploy to production first\n2. Visit: https://${handle.split('.')[0]}.at.aesthetic.computer\n\nOr continue testing APIs using the buttons above.`);
178 }
179 </script>
180</body>
181</html>