aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1# KidLisp Feed Feature (`$.mjs`)
2
3## Overview
4The KidLisp Feed is a new piece that displays a live, scrolling feed of recently cached KidLisp codes, similar to the moods feed. Users can discover new code snippets and see what the community is creating.
5
6## Usage
7
8### Accessing the Feed
9- **Via Prompt**: Type `$` in the AC prompt
10- **Via URL**: Navigate to `/$/`
11- **With Limit**: Use `$/30` to show 30 recent codes (default: 30, max: 100)
12- **Scaled**: Use `$:2` for 2x scale display
13
14### Display Format
15```
16Recent KidLisp Codes
17
18$tezz (wipe "blue") (ink "red") (bo... @digitpain 47 hits
19$hello (ink "yellow") (write "hello... @alice 12 hits
20$spiral (repeat 100 (forward 5) (r... @bob 203 hits
21```
22
23## API Endpoint
24
25### New Parameter: `recent`
26Extends the existing `/api/store-kidlisp` endpoint:
27
28```
29GET /api/store-kidlisp?recent=true&limit=30
30```
31
32#### Parameters
33- `recent=true` - Activates recent codes mode
34- `limit=N` - Number of codes to return (default: 50, max: 100)
35
36#### Response Format
37```json
38{
39 "recent": [
40 {
41 "code": "tezz",
42 "source": "(wipe \"blue\") (ink \"red\") (box 10 10 50 50)",
43 "preview": "(wipe \"blue\") (ink \"red\") (bo...",
44 "when": "2025-08-29T10:30:00Z",
45 "hits": 47,
46 "user": "auth0|abc123",
47 "handle": "@digitpain"
48 }
49 ],
50 "count": 25,
51 "limit": 30
52}
53```
54
55## Technical Implementation
56
57### Database Query
58- Uses MongoDB aggregation pipeline with `$lookup` to join handles
59- Sorts by `when` field descending (most recent first)
60- Projects relevant fields and creates handle display names
61- Limits results to prevent excessive queries
62
63### Display Components
64- **Code Name**: `$code` in cyan/blue
65- **Source Preview**: Truncated to ~40 characters in white/gray
66- **Handle**: User handle in purple (like moods)
67- **Hit Count**: Popularity indicator in green
68- **Scrolling**: Continuous vertical scroll like moods feed
69
70### Features
71- **Handle Integration**: Shows `@username` for registered users, "anon" for anonymous
72- **Source Truncation**: Long code gets truncated with "..."
73- **Hit Counter**: Shows popularity/usage of each code
74- **Responsive Overflow**: Text oscillates horizontally when too long
75- **Scalable Display**: Supports 1x and 2x scale modes
76
77## Files Modified/Created
78
79### Modified
80- `/system/netlify/functions/store-kidlisp.mjs`
81 - Added `recent` parameter handling in GET method
82 - Added aggregation pipeline for handle joining
83 - Added source preview generation
84
85### Created
86- `/system/public/aesthetic.computer/disks/$.mjs`
87 - Main feed display piece
88 - Follows moods.mjs pattern for scrolling and rendering
89 - Handles user interaction and display scaling
90
91## Future Enhancements
92- Click interaction to copy codes or navigate to them
93- Relative timestamps ("2h ago", "1d ago")
94- Filtering by popularity or specific users
95- Real-time updates via polling
96- Search functionality within the feed
97
98## Database Schema
99Leverages existing `kidlisp` collection structure:
100- `code`: Short nanoid identifier
101- `source`: Full KidLisp source code
102- `when`: Creation timestamp
103- `hits`: Usage/popularity counter
104- `user`: Optional user ID for handle lookup
105- Joins with `@handles` collection for display names