aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1# KidLisp.com Database Integration
2
3## New Feature: Load Saved Code from Database
4
5You can now load saved KidLisp code directly from the database by visiting URLs like:
6
7- `https://kidlisp.com/$46k`
8- `https://kidlisp.com/$code` (any valid code)
9
10This works exactly like `https://aesthetic.computer/$46k`, providing a seamless editing experience for saved KidLisp pieces.
11
12## How It Works
13
14### URL Detection
15
16When you visit `kidlisp.com/$46k`, the JavaScript code:
17
181. **Parses the URL path**: Detects the pattern `/\$([a-zA-Z0-9]+)$` in `window.location.pathname`
192. **Extracts the code**: Gets `46k` from `$46k`
203. **Fetches from database**: Calls `/api/store-kidlisp?code=46k`
214. **Loads into editor**: Sets the retrieved source code in Monaco editor
225. **Triggers preview**: Automatically displays the code in the aesthetic.computer iframe
23
24### Implementation
25
26```javascript
27// Check URL path for a kidlisp code (e.g., /kidlisp-com/$46k or /$46k)
28const urlPath = window.location.pathname;
29const codeMatch = urlPath.match(/\/\$([a-zA-Z0-9]+)$/);
30
31if (codeMatch) {
32 const code = codeMatch[1];
33 console.log(`🔍 Detected kidlisp code in URL: $${code}`);
34
35 // Load code from database
36 loadKidlispFromDatabase(code).then(source => {
37 if (source && editor) {
38 editor.setValue(source);
39 updatePreview();
40 }
41 });
42}
43```
44
45### API Integration
46
47The `loadKidlispFromDatabase` function:
48
49```javascript
50async function loadKidlispFromDatabase(code) {
51 const cleanCode = code.startsWith('$') ? code.substring(1) : code;
52 const isDev = window.location.hostname === 'localhost';
53 const baseUrl = isDev ? 'http://localhost:8888' : 'https://aesthetic.computer';
54 const url = `${baseUrl}/api/store-kidlisp?code=${cleanCode}`;
55
56 const response = await fetch(url);
57 if (response.ok) {
58 const data = await response.json();
59 return data.source;
60 }
61 return null;
62}
63```
64
65## Netlify Redirects
66
67Updated `system/netlify.toml` to handle URL parameters:
68
69```toml
70[[redirects]]
71from = "https://kidlisp.com/*"
72to = "https://aesthetic.computer/kidlisp.com/:splat"
73status = 200
74force = true
75```
76
77This preserves the `/$46k` path when redirecting to the aesthetic.computer hosting.
78
79## Use Cases
80
811. **Share code snippets**: Send someone `https://kidlisp.com/$abc` to show your work
822. **Edit saved pieces**: Load any cached KidLisp code directly into the editor
833. **Browse examples**: Navigate between different saved codes easily
844. **Unified workflow**: Same URL pattern as aesthetic.computer for consistency
85
86## Testing
87
88To test locally:
891. Start the aesthetic.computer dev server (port 8888)
902. Open `http://localhost:8888/kidlisp.com/$46k`
913. The editor should load the code for `$46k` from your local database
92
93## Future Enhancements
94
95- [ ] Add URL update when code changes (autosave)
96- [ ] Add code sharing UI (generate $code from editor)
97- [ ] Add recent codes browser/gallery
98- [ ] Add syntax error highlighting in editor