Monorepo for Aesthetic.Computer
aesthetic.computer
1/*
2 * USER PAGE VISUAL MOCKUP
3 *
4 * This shows what https://fifi.at.aesthetic.computer will look like
5 * when a user visits their personal ATProto data page.
6 */
7
8/*
9╔═══════════════════════════════════════════════════════════════════╗
10║ at ← (clickable, goes back) ║
11╠═══════════════════════════════════════════════════════════════════╣
12║ ║
13║ @fifi.at.aesthetic.computer ║
14║ did:plc:abc123xyz456def789ghi012jkl345 ║
15║ ║
16║ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐║
17║ │ 37 total │ │ 15 paintings│ │ 18 moods │ │ 4 pieces │║
18║ │ records │ │ │ │ │ │ │║
19║ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘║
20║ ║
21╠═══════════════════════════════════════════════════════════════════╣
22║ ║
23║ [All 37] [Paintings 15] [Moods 18] [Pieces 4] ║
24║ ───────────────────────────────────────────────────────────── ║
25║ ║
26║ ┌─────────────────────────────────────────────────────────┐ ║
27║ │ 🎨 PAINTING Oct 20, 2025 3:45 PM │ ║
28║ ├─────────────────────────────────────────────────────────┤ ║
29║ │ │ ║
30║ │ ┌──────────────────────────┐ │ ║
31║ │ │ │ │ ║
32║ │ │ [Painting Thumbnail] │ │ ║
33║ │ │ 400x400 pixels │ │ ║
34║ │ │ │ │ ║
35║ │ └──────────────────────────┘ │ ║
36║ │ │ ║
37║ │ Slug: 2023.10.20.15.30.45 │ ║
38║ │ Code: #abc123 │ ║
39║ │ │ ║
40║ │ ───────────────────────────────────────────────────── │ ║
41║ │ rkey: 3jzx7k2m4n5 • ref: 65f3d2c1a8b9e4f5a6b7c8d9 │ ║
42║ │ │ ║
43║ │ View on pdsls.dev → │ ║
44║ └─────────────────────────────────────────────────────────┘ ║
45║ ║
46║ ┌─────────────────────────────────────────────────────────┐ ║
47║ │ 💭 MOOD Oct 19, 2025 2:15 PM │ ║
48║ ├─────────────────────────────────────────────────────────┤ ║
49║ │ │ ║
50║ │ "Feeling creative today! Just finished a new piece │ ║
51║ │ that combines geometric patterns with organic forms. │ ║
52║ │ Really excited about where this is going..." │ ║
53║ │ │ ║
54║ │ ───────────────────────────────────────────────────── │ ║
55║ │ rkey: 5pzn8r3q4t6 • ref: 65f3d2c1a8b9e4f5a6b7c8d7 │ ║
56║ │ │ ║
57║ │ View on pdsls.dev → │ ║
58║ └─────────────────────────────────────────────────────────┘ ║
59║ ║
60║ ┌─────────────────────────────────────────────────────────┐ ║
61║ │ 🎨 PAINTING Oct 18, 2025 11:20 AM │ ║
62║ ├─────────────────────────────────────────────────────────┤ ║
63║ │ │ ║
64║ │ ┌──────────────────────────┐ │ ║
65║ │ │ │ │ ║
66║ │ │ [Painting Thumbnail] │ │ ║
67║ │ │ 400x400 pixels │ │ ║
68║ │ │ │ │ ║
69║ │ └──────────────────────────┘ │ ║
70║ │ │ ║
71║ │ Slug: 2023.10.18.11.20.15 │ ║
72║ │ Code: #def456 │ ║
73║ │ │ ║
74║ │ ───────────────────────────────────────────────────── │ ║
75║ │ rkey: 2hwy6j1l3m4 • ref: 65f3d2c1a8b9e4f5a6b7c8d8 │ ║
76║ │ │ ║
77║ │ View on pdsls.dev → │ ║
78║ └─────────────────────────────────────────────────────────┘ ║
79║ ║
80║ (continues with more records...) ║
81║ ║
82╠═══════════════════════════════════════════════════════════════════╣
83║ ║
84║ ← Back to at.aesthetic.computer ║
85║ ║
86║ Powered by AT Protocol ║
87║ ║
88╚═══════════════════════════════════════════════════════════════════╝
89*/
90
91/*
92 * COLOR SCHEME
93 *
94 * Light Mode:
95 * Background: #f5f5f5 (light gray)
96 * Cards: white
97 * Primary: rgb(205, 92, 155) (pink)
98 * Text: #000
99 *
100 * Dark Mode:
101 * Background: rgb(40, 35, 45) (dark purple-gray)
102 * Cards: rgba(255, 255, 255, 0.05) (translucent white)
103 * Primary: rgb(205, 92, 155) (pink)
104 * Text: rgba(255, 255, 255, 0.9)
105 */
106
107/*
108 * INTERACTIONS
109 *
110 * Hover Effects:
111 * - Cards lift slightly (2px) with shadow
112 * - Links turn pink
113 * - Tabs highlight on hover
114 *
115 * Click Behaviors:
116 * - Tabs switch active state and filter records
117 * - "View on pdsls.dev" opens in new tab
118 * - Header "at" link goes back to landing page
119 * - Images can be clicked (future: lightbox)
120 */
121
122/*
123 * RESPONSIVE BEHAVIOR
124 *
125 * Desktop (>1200px):
126 * - Max width container centered
127 * - Cards in full width grid
128 * - All stats visible in row
129 *
130 * Tablet (600-1200px):
131 * - Flexible width
132 * - Stats wrap to multiple rows
133 * - Cards adjust width
134 *
135 * Mobile (<600px):
136 * - Full width
137 * - Stats stack vertically
138 * - Tabs stack/scroll
139 * - Reduced font sizes
140 * - Images scale to fit
141 */
142
143/*
144 * LOADING STATES
145 *
146 * Initial Load:
147 * Shows: "🔍 Loading ATProto records..."
148 * Duration: ~500-1500ms
149 *
150 * Error State:
151 * Shows: "❌ Error: [message]"
152 * Examples:
153 * - Invalid subdomain format
154 * - Handle not found
155 * - Failed to resolve DID
156 * - Network error
157 *
158 * Empty State:
159 * Shows: "No records found" (per tab)
160 * When: User has no records of that type
161 */
162
163/*
164 * TAB BEHAVIOR
165 *
166 * All Tab (Default):
167 * Shows all records from all collections
168 * Sorted by date (newest first)
169 * Badge shows total count
170 *
171 * Collection Tabs:
172 * Only show if collection has records
173 * Filter to show only that type
174 * Badge shows count for that type
175 * Examples:
176 * - Paintings: Shows paintings with thumbnails
177 * - Moods: Shows mood text posts
178 * - Pieces: Shows code pieces
179 * - KidLisp: Shows kidlisp programs
180 */
181
182/*
183 * CARD ANATOMY
184 *
185 * Header:
186 * - Type badge (left): "PAINTING", "MOOD", etc.
187 * - Date (right): "Oct 20, 2025 3:45 PM"
188 *
189 * Content:
190 * - Varies by type:
191 * • Painting: Image + slug + code
192 * • Mood: Text content
193 * • Piece/KidLisp: Code or JSON
194 *
195 * Footer:
196 * - Metadata: rkey, ref (if present)
197 * - Link: "View on pdsls.dev →"
198 */
199
200/*
201 * DATA FLOW
202 *
203 * 1. Page loads → Extract handle from URL
204 * fifi.at.aesthetic.computer → "fifi.at.aesthetic.computer"
205 *
206 * 2. Resolve handle to DID
207 * API: com.atproto.identity.resolveHandle
208 * Result: did:plc:abc123...
209 *
210 * 3. Fetch records for each collection (parallel)
211 * API: com.atproto.repo.listRecords
212 * Collections:
213 * - computer.aesthetic.painting
214 * - computer.aesthetic.mood
215 * - computer.aesthetic.piece
216 * - computer.aesthetic.kidlisp
217 *
218 * 4. Render records in tabbed interface
219 * - Sort by date (newest first)
220 * - Load images from blob storage
221 * - Create interactive cards
222 *
223 * 5. User can:
224 * - Switch tabs to filter
225 * - Click links to inspect records
226 * - View images
227 * - Copy DID/rkeys
228 */
229
230/*
231 * FUTURE ENHANCEMENTS
232 *
233 * Authentication (Phase 1):
234 * - Detect if user is logged in
235 * - Show admin controls if owner
236 * - Allow editing/deleting records
237 *
238 * Customization (Phase 2):
239 * - Custom themes
240 * - Profile pictures
241 * - Bio/description
242 * - Featured records
243 *
244 * Advanced Features (Phase 3):
245 * - Search within records
246 * - Date range filtering
247 * - Export functionality
248 * - Embed pieces/kidlisp
249 * - Social graph viz
250 */
251
252/*
253 * ACCESSIBILITY
254 *
255 * - Semantic HTML5 elements
256 * - ARIA labels where needed
257 * - Keyboard navigation support
258 * - High contrast in dark mode
259 * - Readable font sizes
260 * - Alt text for images (future)
261 */
262
263/*
264 * PERFORMANCE
265 *
266 * First Load:
267 * - Static HTML: ~17KB
268 * - CSS inline: ~2KB
269 * - JavaScript inline: ~5KB
270 * - Total: ~24KB
271 *
272 * API Calls:
273 * - Resolve handle: ~200ms
274 * - List records: ~300-500ms per collection
275 * - Parallel fetching: ~500-800ms total
276 *
277 * Images:
278 * - Lazy loaded from blob storage
279 * - Cached by browser
280 * - Progressive loading
281 *
282 * Total Time to Interactive:
283 * - ~1-2 seconds
284 */
285
286/*
287 * BROWSER SUPPORT
288 *
289 * Required:
290 * - ES6+ JavaScript
291 * - Fetch API
292 * - CSS Grid
293 * - CSS Flexbox
294 *
295 * Tested on:
296 * ✓ Chrome 90+
297 * ✓ Firefox 88+
298 * ✓ Safari 14+
299 * ✓ Edge 90+
300 *
301 * Not supported:
302 * ✗ IE11
303 * ✗ Old mobile browsers
304 */