Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
HTML
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>User Page Test</title> <style> body { font-family: monospace; padding: 2em; max-width: 800px; margin: 0 auto; } .test-section { background: #f5f5f5; padding: 1.5em; margin: 1em 0; border-radius: 4px; } code { background: #fff; padding: 2px 6px; border-radius: 2px; } a { color: rgb(205, 92, 155); text-decoration: none; } a:hover { text-decoration: underline; } h2 { color: rgb(205, 92, 155); } .note { background: #fff3cd; padding: 1em; border-left: 3px solid #ffc107; margin: 1em 0; } iframe { width: 100%; height: 600px; border: 2px solid rgb(205, 92, 155); border-radius: 4px; } </style></head><body> <h1>🧪 User Page Test</h1> <div class="note"> <strong>Note:</strong> This page tests the user-page.html functionality. The actual page will be served at subdomains like <code>fifi.at.aesthetic.computer</code> </div>
<h2>Test Instructions</h2> <div class="test-section"> <h3>1. Local Testing</h3> <p>To test locally, you can:</p> <ul> <li>Run <code>npm run dev:user-pages</code> and open <code>http://localhost:4177/user.html?handle=YOUR_HANDLE</code></li> <li>Open <code>user-page.html</code> directly</li> <li>Use a local server with host override</li> <li>Or use this test page with manual handle input</li> </ul> <p style="margin-top: 0.75em; font-size: 0.9em; opacity: 0.8;"> Optional: use <code>scripts/hosts-helper.fish</code> to map a handle to localhost via /etc/hosts. </p> </div>
<div class="test-section"> <h3>2. Test Handle</h3> <p>Enter a handle to test:</p> <input type="text" id="handleInput" value="jeffrey.at.aesthetic.computer" style="width: 100%; padding: 0.5em; font-family: monospace; font-size: 1em; margin-bottom: 1em;"> <button onclick="testHandle()" style="padding: 0.5em 1em; font-family: monospace; cursor: pointer; background: rgb(205, 92, 155); color: white; border: none; border-radius: 4px;"> Load User Page </button> </div>
<div class="test-section"> <h3>3. API Tests</h3> <p>Test ATProto APIs directly:</p> <button onclick="testResolveHandle()" style="padding: 0.5em 1em; margin: 0.5em; font-family: monospace; cursor: pointer;"> Test Resolve Handle </button> <button onclick="testListRecords()" style="padding: 0.5em 1em; margin: 0.5em; font-family: monospace; cursor: pointer;"> Test List Records </button> <div id="apiResults" style="margin-top: 1em; padding: 1em; background: white; border-radius: 4px; max-height: 300px; overflow-y: auto; display: none;"> <pre id="apiOutput" style="margin: 0; white-space: pre-wrap; word-wrap: break-word; font-size: 0.85em;"></pre> </div> </div>
<h2>Deployment</h2> <div class="test-section"> <h3>Deploy to Production</h3> <p>Once testing is complete, deploy with:</p> <pre style="background: white; padding: 1em; border-radius: 4px; overflow-x: auto;">cd /workspaces/aesthetic-computer/at./deploy-user-pages.fish</pre> <p>This will update the Caddy configuration and deploy both:</p> <ul> <li><code>landing-page.html</code> → <code>https://at.aesthetic.computer</code></li> <li><code>user-page.html</code> → <code>https://[handle].at.aesthetic.computer</code></li> </ul> </div>
<h2>Documentation</h2> <p>See <a href="USER-PAGES.md">USER-PAGES.md</a> for full documentation including:</p> <ul> <li>Architecture overview</li> <li>API details</li> <li>Troubleshooting guide</li> <li>Future enhancements</li> </ul>
<script> const PDS_URL = 'https://at.aesthetic.computer';
async function testResolveHandle() { const handle = document.getElementById('handleInput').value; const resultsDiv = document.getElementById('apiResults'); const outputPre = document.getElementById('apiOutput'); resultsDiv.style.display = 'block'; outputPre.textContent = 'Loading...';
try { const url = `${PDS_URL}/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(handle)}`; console.log('Fetching:', url); const response = await fetch(url); const data = await response.json(); outputPre.textContent = `✅ Resolve Handle Success!\n\nHandle: ${handle}\nDID: ${data.did}\n\nFull Response:\n${JSON.stringify(data, null, 2)}`; } catch (error) { outputPre.textContent = `❌ Error:\n${error.message}\n\n${error.stack}`; } }
async function testListRecords() { const handle = document.getElementById('handleInput').value; const resultsDiv = document.getElementById('apiResults'); const outputPre = document.getElementById('apiOutput'); resultsDiv.style.display = 'block'; outputPre.textContent = 'Resolving handle...';
try { // First resolve handle to DID const resolveUrl = `${PDS_URL}/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(handle)}`; const resolveResponse = await fetch(resolveUrl); const { did } = await resolveResponse.json(); outputPre.textContent = `Found DID: ${did}\n\nFetching records...`;
// Then list records const collection = 'computer.aesthetic.painting'; const listUrl = `${PDS_URL}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=${collection}&limit=5`; const listResponse = await fetch(listUrl); const data = await listResponse.json(); 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)}`; } catch (error) { outputPre.textContent = `❌ Error:\n${error.message}\n\n${error.stack}`; } }
function testHandle() { const handle = document.getElementById('handleInput').value; // For now, just show instructions 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.`); } </script></body></html>