Monorepo for Aesthetic.Computer
aesthetic.computer
feat: sort bar on papers site — top hits, newly updated, recently added
Added pill-style sort buttons above the papers grid. Default sort is "top hits" (by view count from paper-hit API). Also sorts by "newly updated" (last build time) and "recently added" (creation date). Papers now carry data-created and data-updated attributes for client-side sorting.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+95
-40
+2
-1
papers/cli.mjs
+2
-1
papers/cli.mjs
···
502
502
const createdStr = p.created ? fmtDate(p.created) : "";
503
503
const revStr = p.revisions > 0 ? `r${p.revisions}` : "";
504
504
const tKey = translationKey(p.dir);
505
+
const updatedISO = p.mtime.toISOString();
505
506
papersHtml += `
506
-
<div class="p" data-paper-id="${tKey}"${hasCards ? "" : ` data-no-cards="1"`}${p.psycho ? ` data-psycho="1"` : ""}>
507
+
<div class="p" data-paper-id="${tKey}"${hasCards ? "" : ` data-no-cards="1"`}${p.psycho ? ` data-psycho="1"` : ""} data-created="${p.created || ""}" data-updated="${updatedISO}">
507
508
<div class="title"><a href="/${p.siteName}.pdf" data-base="/${p.siteName}">${p.title}</a></div>
508
509
<div class="detail">${detail}</div>
509
510
<div class="meta-row"><span class="created" title="Created">${createdStr}</span><span class="revisions" title="Revisions">${revStr}</span><span class="updated" title="Last updated">${fmtTime(p.mtime)}</span></div>
+93
-39
system/public/papers.aesthetic.computer/index.html
+93
-39
system/public/papers.aesthetic.computer/index.html
···
157
157
.sub { color: var(--dim); font-size: 0.8em; margin-bottom: 0.6em; }
158
158
.sub a { color: var(--cyan); text-decoration: none; }
159
159
160
+
/* Sort bar */
161
+
.sort-bar {
162
+
display: flex;
163
+
gap: 4px;
164
+
margin-bottom: 0.8em;
165
+
font-size: 11px;
166
+
flex-wrap: wrap;
167
+
}
168
+
.sort-btn {
169
+
cursor: pointer;
170
+
background: none;
171
+
border: 1px solid var(--box-border);
172
+
color: var(--dim);
173
+
font-family: inherit;
174
+
font-size: inherit;
175
+
padding: 3px 10px;
176
+
border-radius: 12px;
177
+
transition: all 0.15s;
178
+
user-select: none;
179
+
}
180
+
.sort-btn:hover { border-color: var(--pink); color: var(--text); }
181
+
.sort-btn.active { background: var(--pink); color: var(--bg); border-color: var(--pink); font-weight: 600; }
182
+
160
183
/* Papers grid */
161
184
.papers-grid {
162
185
display: grid;
···
427
450
428
451
<div class="sub">@jeffrey — <a href="https://orcid.org/0009-0007-4460-4913">ORCID 0009-0007-4460-4913</a></div>
429
452
453
+
<div class="sort-bar" id="sortBar">
454
+
<button class="sort-btn active" data-sort="hits">top hits</button>
455
+
<button class="sort-btn" data-sort="updated">newly updated</button>
456
+
<button class="sort-btn" data-sort="created">recently added</button>
457
+
</div>
458
+
430
459
<!-- papers-start -->
431
460
432
-
<div class="p" data-paper-id="ac">
461
+
<div class="p" data-paper-id="ac" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.646Z">
433
462
<div class="title"><a href="/aesthetic-computer-26-arxiv.pdf" data-base="/aesthetic-computer-26-arxiv">Aesthetic Computer '26</a></div>
434
463
<div class="detail">A Mobile-First Runtime for Creative Computing · arXiv 5pp</div>
435
464
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
436
465
</div>
437
466
438
-
<div class="p" data-paper-id="kidlisp">
467
+
<div class="p" data-paper-id="kidlisp" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.648Z">
439
468
<div class="title"><a href="/kidlisp-26-arxiv.pdf" data-base="/kidlisp-26-arxiv">KidLisp '26</a></div>
440
469
<div class="detail">A Minimal Lisp for Generative Art on a Social Platform · arXiv 6pp</div>
441
470
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
442
471
</div>
443
472
444
-
<div class="p" data-paper-id="plork">
473
+
<div class="p" data-paper-id="plork" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.649Z">
445
474
<div class="title"><a href="/plorking-the-planet-26-arxiv.pdf" data-base="/plorking-the-planet-26-arxiv">PLOrk'ing the Planet</a></div>
446
475
<div class="detail">Laptop Orchestras, PLOrk Heritage, and Aesthetic Computer · arXiv</div>
447
476
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
448
477
</div>
449
478
450
-
<div class="p" data-paper-id="os">
479
+
<div class="p" data-paper-id="os" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.648Z">
451
480
<div class="title"><a href="/ac-native-os-26-arxiv.pdf" data-base="/ac-native-os-26-arxiv">AC Native OS</a></div>
452
481
<div class="detail">A Bare-Metal Creative Computing Operating System · arXiv 5pp</div>
453
482
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
454
483
</div>
455
484
456
-
<div class="p" data-paper-id="api">
485
+
<div class="p" data-paper-id="api" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.647Z">
457
486
<div class="title"><a href="/piece-api-26-arxiv.pdf" data-base="/piece-api-26-arxiv">From setup() to boot()</a></div>
458
487
<div class="detail">Processing at the Core of the Piece API · arXiv 7pp</div>
459
488
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
460
489
</div>
461
490
462
-
<div class="p" data-paper-id="who-pays">
491
+
<div class="p" data-paper-id="who-pays" data-created="2026-03-27" data-updated="2026-03-27T15:38:44.649Z">
463
492
<div class="title"><a href="/who-pays-for-creative-tools-26-arxiv.pdf" data-base="/who-pays-for-creative-tools-26-arxiv">Who Pays for Creative Tools?</a></div>
464
493
<div class="detail">Funding, Burnout, and Survival in Open-Source Creative Computing · arXiv 5pp</div>
465
494
<div class="meta-row"><span class="created" title="Created">03/27</span><span class="revisions" title="Revisions">r1</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
466
495
</div>
467
496
468
-
<div class="p" data-paper-id="pieces">
497
+
<div class="p" data-paper-id="pieces" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.649Z">
469
498
<div class="title"><a href="/pieces-not-programs-26-arxiv.pdf" data-base="/pieces-not-programs-26-arxiv">Pieces Not Programs</a></div>
470
499
<div class="detail">The Piece as a Unit of Creative Cognition · arXiv 4pp</div>
471
500
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
472
501
</div>
473
502
474
-
<div class="p" data-paper-id="notepat">
503
+
<div class="p" data-paper-id="notepat" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.648Z">
475
504
<div class="title"><a href="/notepat-26-arxiv.pdf" data-base="/notepat-26-arxiv">notepat.com</a></div>
476
505
<div class="detail">From Keyboard Toy to System Front Door · arXiv 5pp</div>
477
506
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
478
507
</div>
479
508
480
-
<div class="p" data-paper-id="goodiepal">
509
+
<div class="p" data-paper-id="goodiepal" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.648Z">
481
510
<div class="title"><a href="/radical-computer-art-26-arxiv.pdf" data-base="/radical-computer-art-26-arxiv">Radical Computer Art</a></div>
482
511
<div class="detail">Goodiepalian Approaches in Aesthetic Computer · arXiv 5pp</div>
483
512
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
484
513
</div>
485
514
486
-
<div class="p" data-paper-id="whistlegraph">
515
+
<div class="p" data-paper-id="whistlegraph" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.649Z">
487
516
<div class="title"><a href="/whistlegraph-26-arxiv.pdf" data-base="/whistlegraph-26-arxiv">Whistlegraph</a></div>
488
517
<div class="detail">Drawing, Singing, and the Graphic Score as Viral Form · arXiv 4pp</div>
489
518
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
490
519
</div>
491
520
492
-
<div class="p" data-paper-id="complex">
521
+
<div class="p" data-paper-id="complex" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.649Z">
493
522
<div class="title"><a href="/sucking-on-the-complex-26-arxiv.pdf" data-base="/sucking-on-the-complex-26-arxiv">Sucking on the Complex</a></div>
494
523
<div class="detail">Platform Hegemony, Critique-as-Content, and Anti-Environments · arXiv 5pp</div>
495
524
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
496
525
</div>
497
526
498
-
<div class="p" data-paper-id="dead-ends">
527
+
<div class="p" data-paper-id="dead-ends" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.647Z">
499
528
<div class="title"><a href="/dead-ends-26-arxiv.pdf" data-base="/dead-ends-26-arxiv">Vestigial Features</a></div>
500
529
<div class="detail">Dormant Paths, Evolutionary Branches, and Abandoned Approaches · arXiv 4pp</div>
501
530
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
502
531
</div>
503
532
504
-
<div class="p" data-paper-id="folk-songs">
533
+
<div class="p" data-paper-id="folk-songs" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.649Z">
505
534
<div class="title"><a href="/folk-songs-26-arxiv.pdf" data-base="/folk-songs-26-arxiv">Playable Folk Songs</a></div>
506
535
<div class="detail">Oral Tradition Meets the Browser Keyboard · arXiv</div>
507
536
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
508
537
</div>
509
538
510
-
<div class="p" data-paper-id="archaeology">
539
+
<div class="p" data-paper-id="archaeology" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.647Z">
511
540
<div class="title"><a href="/repo-archaeology-26-arxiv.pdf" data-base="/repo-archaeology-26-arxiv">Repository Archaeology</a></div>
512
541
<div class="detail">Tracing the Evolution of AC Through Its Git History · arXiv 3pp · <a href="/ac-repo-archaeology">interactive timeline</a></div>
513
542
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
514
543
</div>
515
544
516
-
<div class="p" data-paper-id="network-audit">
545
+
<div class="p" data-paper-id="network-audit" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.648Z">
517
546
<div class="title"><a href="/network-audit-26-arxiv.pdf" data-base="/network-audit-26-arxiv">Network Audit</a></div>
518
547
<div class="detail">Who Uses Aesthetic Computer and What Do They Make? · arXiv 4pp</div>
519
548
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
520
549
</div>
521
550
522
-
<div class="p" data-paper-id="kidlisp-ref">
551
+
<div class="p" data-paper-id="kidlisp-ref" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.648Z">
523
552
<div class="title"><a href="/kidlisp-reference-26-arxiv.pdf" data-base="/kidlisp-reference-26-arxiv">KidLisp Language Reference</a></div>
524
553
<div class="detail">118 Built-ins in 12 Categories · arXiv 4pp</div>
525
554
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
526
555
</div>
527
556
528
-
<div class="p" data-paper-id="diversity">
557
+
<div class="p" data-paper-id="diversity" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.647Z">
529
558
<div class="title"><a href="/citation-diversity-audit-26.pdf" data-base="/citation-diversity-audit-26">Citation Diversity Audit</a></div>
530
559
<div class="detail">Diversity and Inclusion in AC Paper Citations · 4pp</div>
531
560
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
532
561
</div>
533
562
534
-
<div class="p" data-paper-id="open-schools">
563
+
<div class="p" data-paper-id="open-schools" data-created="" data-updated="2026-03-27T15:38:44.651Z">
535
564
<div class="title"><a href="/open-schools-26-arxiv.pdf" data-base="/open-schools-26-arxiv">Get Closed Source Out of Schools</a></div>
536
565
<div class="detail"></div>
537
566
<div class="meta-row"><span class="created" title="Created"></span><span class="revisions" title="Revisions"></span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
538
567
</div>
539
568
540
-
<div class="p" data-paper-id="futures">
569
+
<div class="p" data-paper-id="futures" data-created="2026-03-20" data-updated="2026-03-27T15:38:44.651Z">
541
570
<div class="title"><a href="/five-years-from-now-26-arxiv.pdf" data-base="/five-years-from-now-26-arxiv">Five Years from Now</a></div>
542
571
<div class="detail"></div>
543
572
<div class="meta-row"><span class="created" title="Created">03/20</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
544
573
</div>
545
574
546
-
<div class="p" data-paper-id="calarts" data-psycho="1">
575
+
<div class="p" data-paper-id="calarts" data-psycho="1" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.651Z">
547
576
<div class="title"><a href="/calarts-callouts-papers-26-arxiv.pdf" data-base="/calarts-callouts-papers-26-arxiv">CalArts, Callouts, and Papers</a></div>
548
577
<div class="detail"></div>
549
578
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
550
579
</div>
551
580
552
-
<div class="p" data-paper-id="identity">
581
+
<div class="p" data-paper-id="identity" data-created="2026-03-27" data-updated="2026-03-27T15:38:44.651Z">
553
582
<div class="title"><a href="/handle-identity-atproto-26-arxiv.pdf" data-base="/handle-identity-atproto-26-arxiv">Handle Identity on the AT Protocol</a></div>
554
583
<div class="detail"></div>
555
584
<div class="meta-row"><span class="created" title="Created">03/27</span><span class="revisions" title="Revisions">r1</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
556
585
</div>
557
586
558
-
<div class="p" data-paper-id="ucla-arts">
587
+
<div class="p" data-paper-id="ucla-arts" data-created="2026-03-27" data-updated="2026-03-27T15:38:44.651Z">
559
588
<div class="title"><a href="/ucla-arts-funding-26-arxiv.pdf" data-base="/ucla-arts-funding-26-arxiv">Two Departments, One Building</a></div>
560
589
<div class="detail"></div>
561
590
<div class="meta-row"><span class="created" title="Created">03/27</span><span class="revisions" title="Revisions">r1</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
562
591
</div>
563
592
564
-
<div class="p" data-paper-id="kidlisp-cards">
593
+
<div class="p" data-paper-id="kidlisp-cards" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.649Z">
565
594
<div class="title"><a href="/kidlisp-cards-26-arxiv.pdf" data-base="/kidlisp-cards-26-arxiv">KidLisp Cards</a></div>
566
595
<div class="detail"></div>
567
596
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
568
597
</div>
569
598
570
-
<div class="p" data-paper-id="score-analysis">
599
+
<div class="p" data-paper-id="score-analysis" data-created="2026-03-21" data-updated="2026-03-27T15:38:44.650Z">
571
600
<div class="title"><a href="/reading-the-score-26-arxiv.pdf" data-base="/reading-the-score-26-arxiv">Reading the Score</a></div>
572
601
<div class="detail"></div>
573
602
<div class="meta-row"><span class="created" title="Created">03/21</span><span class="revisions" title="Revisions">r2</span><span class="updated" title="Last updated">Mar 27 08:38</span></div>
···
959
988
});
960
989
});
961
990
962
-
// Sort papers by hit count (most read first) and show counts
991
+
// === SORTING ===
992
+
let hitTotals = {};
993
+
994
+
function sortPapers(mode) {
995
+
const container = document.querySelector('.p')?.parentElement;
996
+
if (!container) return;
997
+
const papers = [...container.querySelectorAll('.p')];
998
+
999
+
papers.sort((a, b) => {
1000
+
if (mode === 'hits') {
1001
+
return (hitTotals[b.dataset.paperId] || 0) - (hitTotals[a.dataset.paperId] || 0);
1002
+
} else if (mode === 'updated') {
1003
+
const ta = a.dataset.updated ? new Date(a.dataset.updated).getTime() : 0;
1004
+
const tb = b.dataset.updated ? new Date(b.dataset.updated).getTime() : 0;
1005
+
return tb - ta;
1006
+
} else if (mode === 'created') {
1007
+
const ca = a.dataset.created || '0';
1008
+
const cb = b.dataset.created || '0';
1009
+
return cb.localeCompare(ca);
1010
+
}
1011
+
return 0;
1012
+
});
1013
+
for (const p of papers) container.appendChild(p);
1014
+
}
1015
+
1016
+
// Sort bar clicks
1017
+
document.querySelectorAll('.sort-btn').forEach(btn => {
1018
+
btn.addEventListener('click', () => {
1019
+
document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
1020
+
btn.classList.add('active');
1021
+
sortPapers(btn.dataset.sort);
1022
+
});
1023
+
});
1024
+
1025
+
// Fetch hit counts, inject into meta rows, then apply default sort
963
1026
(async () => {
964
1027
try {
965
1028
const res = await fetch('https://aesthetic.computer/api/paper-hit');
966
1029
if (!res.ok) return;
967
1030
const { stats } = await res.json();
968
-
// Aggregate hits per paper (combine pdf + cards formats)
969
-
const totals = {};
970
1031
for (const s of stats) {
971
1032
const id = s._id.paper;
972
-
totals[id] = (totals[id] || 0) + s.count;
1033
+
hitTotals[id] = (hitTotals[id] || 0) + s.count;
973
1034
}
974
1035
const container = document.querySelector('.p')?.parentElement;
975
1036
if (!container) return;
976
-
const papers = [...container.querySelectorAll('.p')];
977
-
// Inject hit counts into meta rows
978
-
for (const p of papers) {
1037
+
for (const p of container.querySelectorAll('.p')) {
979
1038
const id = p.dataset.paperId;
980
-
const count = totals[id] || 0;
1039
+
const count = hitTotals[id] || 0;
981
1040
const metaRow = p.querySelector('.meta-row');
982
1041
if (metaRow && count > 0) {
983
1042
const span = document.createElement('span');
···
987
1046
metaRow.prepend(span);
988
1047
}
989
1048
}
990
-
// Sort descending by hits
991
-
papers.sort((a, b) => {
992
-
const ha = totals[a.dataset.paperId] || 0;
993
-
const hb = totals[b.dataset.paperId] || 0;
994
-
return hb - ha;
995
-
});
996
-
for (const p of papers) container.appendChild(p);
1049
+
// Apply default sort (top hits)
1050
+
sortPapers('hits');
997
1051
} catch {}
998
1052
})();
999
1053