← back to Paul Conrad Cartoons Shadowman
add viewer (filter panel, sort+density grid, detail modal) and placeholder dataset
0c8b77ddcfd44820bfcf26b2fb5c95493efc84ff · 2026-09-24 12:28:51 -0700 · Steve
Files touched
A data/cartoons.jsonA package-lock.jsonA public/app.jsA public/index.htmlA public/style.css
Diff
commit 0c8b77ddcfd44820bfcf26b2fb5c95493efc84ff
Author: Steve <steve@designerwallcoverings.com>
Date: Thu Sep 24 12:28:51 2026 -0700
add viewer (filter panel, sort+density grid, detail modal) and placeholder dataset
---
data/cartoons.json | 44 +++
package-lock.json | 832 +++++++++++++++++++++++++++++++++++++++++++++++++++++
public/app.js | 221 ++++++++++++++
public/index.html | 56 ++++
public/style.css | 250 ++++++++++++++++
5 files changed, 1403 insertions(+)
diff --git a/data/cartoons.json b/data/cartoons.json
new file mode 100644
index 0000000..77471ad
--- /dev/null
+++ b/data/cartoons.json
@@ -0,0 +1,44 @@
+{
+ "generated_note": "Placeholder seed — to be replaced by merged research fan-out results.",
+ "records": [
+ {
+ "title": "1964 Pulitzer Prize for Editorial Cartooning",
+ "date": "1964",
+ "publication": "Denver Post",
+ "subject": "Pulitzer Prize citation (specific cartoon not yet confirmed)",
+ "award": "Pulitzer Prize for Editorial Cartooning 1964",
+ "record_type": "documented",
+ "image": null,
+ "image_url": null,
+ "image_source": null,
+ "rights_note": "Placeholder — pending research fan-out results",
+ "citation_url": "https://www.pulitzer.org/prize-winners-by-year/1964"
+ },
+ {
+ "title": "1971 Pulitzer Prize for Editorial Cartooning",
+ "date": "1970",
+ "publication": "Los Angeles Times",
+ "subject": "Pulitzer Prize citation (specific cartoon not yet confirmed)",
+ "award": "Pulitzer Prize for Editorial Cartooning 1971",
+ "record_type": "documented",
+ "image": null,
+ "image_url": null,
+ "image_source": null,
+ "rights_note": "Placeholder — pending research fan-out results",
+ "citation_url": "https://www.pulitzer.org/prize-winners-by-year/1971"
+ },
+ {
+ "title": "1984 Pulitzer Prize for Editorial Cartooning",
+ "date": "1984",
+ "publication": "Los Angeles Times",
+ "subject": "Pulitzer Prize citation (specific cartoon not yet confirmed)",
+ "award": "Pulitzer Prize for Editorial Cartooning 1984",
+ "record_type": "documented",
+ "image": null,
+ "image_url": null,
+ "image_source": null,
+ "rights_note": "Placeholder — pending research fan-out results",
+ "citation_url": "https://www.pulitzer.org/prize-winners-by-year/1984"
+ }
+ ]
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..6628916
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,832 @@
+{
+ "name": "paul-conrad-cartoons",
+ "version": "0.1.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "paul-conrad-cartoons",
+ "version": "0.1.0",
+ "dependencies": {
+ "express": "^4.19.2"
+ }
+ },
+ "node_modules/accepts": {
+ "version": "1.3.8",
+ "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+ "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+ "license": "MIT",
+ "dependencies": {
+ "mime-types": "~2.1.34",
+ "negotiator": "0.6.3"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/array-flatten": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+ "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+ "license": "MIT"
+ },
+ "node_modules/body-parser": {
+ "version": "1.20.8",
+ "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.8.tgz",
+ "integrity": "sha512-JNcyFQ64OiijEkPzUBTCe+hyPXUD/3LEldGQ6iF5LR1w00mx9o7xtDWHXBY2iItjdCFGoilOLNQbH943ut7pHA==",
+ "license": "MIT",
+ "dependencies": {
+ "bytes": "~3.1.2",
+ "content-type": "~1.0.5",
+ "debug": "2.6.9",
+ "depd": "2.0.0",
+ "destroy": "~1.2.0",
+ "http-errors": "~2.0.1",
+ "iconv-lite": "~0.4.24",
+ "on-finished": "~2.4.1",
+ "qs": "~6.16.0",
+ "raw-body": "~2.5.3",
+ "type-is": "~1.6.18",
+ "unpipe": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8",
+ "npm": "1.2.8000 || >= 1.4.16"
+ }
+ },
+ "node_modules/bytes": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+ "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/call-bind-apply-helpers": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+ "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "function-bind": "^1.1.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/call-bound": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+ "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.2",
+ "get-intrinsic": "^1.3.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/content-disposition": {
+ "version": "0.5.4",
+ "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+ "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+ "license": "MIT",
+ "dependencies": {
+ "safe-buffer": "5.2.1"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/content-type": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+ "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/cookie": {
+ "version": "0.7.2",
+ "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+ "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/cookie-signature": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
+ "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
+ "license": "MIT"
+ },
+ "node_modules/debug": {
+ "version": "2.6.9",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+ "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+ "license": "MIT",
+ "dependencies": {
+ "ms": "2.0.0"
+ }
+ },
+ "node_modules/depd": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+ "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/destroy": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+ "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8",
+ "npm": "1.2.8000 || >= 1.4.16"
+ }
+ },
+ "node_modules/dunder-proto": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+ "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.1",
+ "es-errors": "^1.3.0",
+ "gopd": "^1.2.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/ee-first": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+ "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+ "license": "MIT"
+ },
+ "node_modules/encodeurl": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+ "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/es-define-property": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+ "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/es-errors": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+ "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/es-object-atoms": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+ "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/escape-html": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+ "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+ "license": "MIT"
+ },
+ "node_modules/etag": {
+ "version": "1.8.1",
+ "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+ "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/express": {
+ "version": "4.22.3",
+ "resolved": "https://registry.npmjs.org/express/-/express-4.22.3.tgz",
+ "integrity": "sha512-Bdcs4+3qlpVlx2NRn6fgX2Ue2/gGRaPeawebgclM0ERSCqDpA+owF1fdPwjJUTAJWMTuAaxjDf+hzb0/4eKvvw==",
+ "license": "MIT",
+ "dependencies": {
+ "accepts": "~1.3.8",
+ "array-flatten": "1.1.1",
+ "body-parser": "~1.20.5",
+ "content-disposition": "~0.5.4",
+ "content-type": "~1.0.4",
+ "cookie": "~0.7.1",
+ "cookie-signature": "~1.0.6",
+ "debug": "2.6.9",
+ "depd": "2.0.0",
+ "encodeurl": "~2.0.0",
+ "escape-html": "~1.0.3",
+ "etag": "~1.8.1",
+ "finalhandler": "~1.3.1",
+ "fresh": "~0.5.2",
+ "http-errors": "~2.0.0",
+ "merge-descriptors": "1.0.3",
+ "methods": "~1.1.2",
+ "on-finished": "~2.4.1",
+ "parseurl": "~1.3.3",
+ "path-to-regexp": "~0.1.13",
+ "proxy-addr": "~2.0.7",
+ "qs": "~6.16.0",
+ "range-parser": "~1.2.1",
+ "safe-buffer": "5.2.1",
+ "send": "~0.19.0",
+ "serve-static": "~1.16.2",
+ "setprototypeof": "1.2.0",
+ "statuses": "~2.0.1",
+ "type-is": "~1.6.18",
+ "utils-merge": "1.0.1",
+ "vary": "~1.1.2"
+ },
+ "engines": {
+ "node": ">= 0.10.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/finalhandler": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
+ "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
+ "license": "MIT",
+ "dependencies": {
+ "debug": "2.6.9",
+ "encodeurl": "~2.0.0",
+ "escape-html": "~1.0.3",
+ "on-finished": "~2.4.1",
+ "parseurl": "~1.3.3",
+ "statuses": "~2.0.2",
+ "unpipe": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/forwarded": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+ "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/fresh": {
+ "version": "0.5.2",
+ "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+ "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/function-bind": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+ "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/get-intrinsic": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+ "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.2",
+ "es-define-property": "^1.0.1",
+ "es-errors": "^1.3.0",
+ "es-object-atoms": "^1.1.1",
+ "function-bind": "^1.1.2",
+ "get-proto": "^1.0.1",
+ "gopd": "^1.2.0",
+ "has-symbols": "^1.1.0",
+ "hasown": "^2.0.2",
+ "math-intrinsics": "^1.1.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/get-proto": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+ "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+ "license": "MIT",
+ "dependencies": {
+ "dunder-proto": "^1.0.1",
+ "es-object-atoms": "^1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/gopd": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+ "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/has-symbols": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+ "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/hasown": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+ "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+ "license": "MIT",
+ "dependencies": {
+ "function-bind": "^1.1.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/http-errors": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+ "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+ "license": "MIT",
+ "dependencies": {
+ "depd": "~2.0.0",
+ "inherits": "~2.0.4",
+ "setprototypeof": "~1.2.0",
+ "statuses": "~2.0.2",
+ "toidentifier": "~1.0.1"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/iconv-lite": {
+ "version": "0.4.24",
+ "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+ "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+ "license": "MIT",
+ "dependencies": {
+ "safer-buffer": ">= 2.1.2 < 3"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/inherits": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+ "license": "ISC"
+ },
+ "node_modules/ipaddr.js": {
+ "version": "1.9.1",
+ "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+ "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
+ "node_modules/math-intrinsics": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+ "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/media-typer": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+ "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/merge-descriptors": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+ "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/methods": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+ "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/mime": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+ "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+ "license": "MIT",
+ "bin": {
+ "mime": "cli.js"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/mime-db": {
+ "version": "1.52.0",
+ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+ "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/mime-types": {
+ "version": "2.1.35",
+ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+ "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+ "license": "MIT",
+ "dependencies": {
+ "mime-db": "1.52.0"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/ms": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+ "license": "MIT"
+ },
+ "node_modules/negotiator": {
+ "version": "0.6.3",
+ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+ "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/object-inspect": {
+ "version": "1.13.4",
+ "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+ "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/on-finished": {
+ "version": "2.4.1",
+ "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+ "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+ "license": "MIT",
+ "dependencies": {
+ "ee-first": "1.1.1"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/parseurl": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+ "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/path-to-regexp": {
+ "version": "0.1.13",
+ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz",
+ "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==",
+ "license": "MIT"
+ },
+ "node_modules/proxy-addr": {
+ "version": "2.0.8",
+ "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.8.tgz",
+ "integrity": "sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ==",
+ "license": "MIT",
+ "dependencies": {
+ "forwarded": "0.2.0",
+ "ipaddr.js": "1.9.1"
+ },
+ "engines": {
+ "node": ">= 0.10"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/qs": {
+ "version": "6.16.0",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.16.0.tgz",
+ "integrity": "sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==",
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "es-define-property": "^1.0.1",
+ "side-channel": "^1.1.1"
+ },
+ "engines": {
+ "node": ">=0.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/range-parser": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+ "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/raw-body": {
+ "version": "2.5.3",
+ "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
+ "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
+ "license": "MIT",
+ "dependencies": {
+ "bytes": "~3.1.2",
+ "http-errors": "~2.0.1",
+ "iconv-lite": "~0.4.24",
+ "unpipe": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/safe-buffer": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+ "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/feross"
+ },
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/feross"
+ },
+ {
+ "type": "consulting",
+ "url": "https://feross.org/support"
+ }
+ ],
+ "license": "MIT"
+ },
+ "node_modules/safer-buffer": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+ "license": "MIT"
+ },
+ "node_modules/send": {
+ "version": "0.19.2",
+ "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
+ "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
+ "license": "MIT",
+ "dependencies": {
+ "debug": "2.6.9",
+ "depd": "2.0.0",
+ "destroy": "1.2.0",
+ "encodeurl": "~2.0.0",
+ "escape-html": "~1.0.3",
+ "etag": "~1.8.1",
+ "fresh": "~0.5.2",
+ "http-errors": "~2.0.1",
+ "mime": "1.6.0",
+ "ms": "2.1.3",
+ "on-finished": "~2.4.1",
+ "range-parser": "~1.2.1",
+ "statuses": "~2.0.2"
+ },
+ "engines": {
+ "node": ">= 0.8.0"
+ }
+ },
+ "node_modules/send/node_modules/ms": {
+ "version": "2.1.3",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+ "license": "MIT"
+ },
+ "node_modules/serve-static": {
+ "version": "1.16.3",
+ "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
+ "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
+ "license": "MIT",
+ "dependencies": {
+ "encodeurl": "~2.0.0",
+ "escape-html": "~1.0.3",
+ "parseurl": "~1.3.3",
+ "send": "~0.19.1"
+ },
+ "engines": {
+ "node": ">= 0.8.0"
+ }
+ },
+ "node_modules/setprototypeof": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+ "license": "ISC"
+ },
+ "node_modules/side-channel": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+ "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "object-inspect": "^1.13.4",
+ "side-channel-list": "^1.0.1",
+ "side-channel-map": "^1.0.1",
+ "side-channel-weakmap": "^1.0.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/side-channel-list": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+ "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "object-inspect": "^1.13.4"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/side-channel-map": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+ "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bound": "^1.0.2",
+ "es-errors": "^1.3.0",
+ "get-intrinsic": "^1.2.5",
+ "object-inspect": "^1.13.3"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/side-channel-weakmap": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+ "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bound": "^1.0.2",
+ "es-errors": "^1.3.0",
+ "get-intrinsic": "^1.2.5",
+ "object-inspect": "^1.13.3",
+ "side-channel-map": "^1.0.1"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/statuses": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+ "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/toidentifier": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+ "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.6"
+ }
+ },
+ "node_modules/type-is": {
+ "version": "1.6.18",
+ "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+ "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+ "license": "MIT",
+ "dependencies": {
+ "media-typer": "0.3.0",
+ "mime-types": "~2.1.24"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/unpipe": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+ "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/utils-merge": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+ "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4.0"
+ }
+ },
+ "node_modules/vary": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+ "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ }
+ }
+}
diff --git a/public/app.js b/public/app.js
new file mode 100644
index 0000000..102661d
--- /dev/null
+++ b/public/app.js
@@ -0,0 +1,221 @@
+// Paul Conrad Cartoons — private catalog viewer.
+// Loads /api/cartoons, renders a filterable/sortable grid with a density slider,
+// both persisted to localStorage. No server-side state beyond the static dataset.
+
+const LS_SORT = 'pcc:sort';
+const LS_DENSITY = 'pcc:density';
+const LS_FILTERS = 'pcc:filters';
+
+let ALL = [];
+let filters = { year: null, publication: null, award: null, subject: null, recordType: null };
+
+function safeGetLS(key, fallback) {
+ try {
+ const v = localStorage.getItem(key);
+ return v === null ? fallback : JSON.parse(v);
+ } catch (e) { return fallback; }
+}
+function safeSetLS(key, val) {
+ try { localStorage.setItem(key, JSON.stringify(val)); } catch (e) { /* ignore */ }
+}
+
+function yearOf(rec) {
+ const d = rec.date || rec.date_range || '';
+ const m = String(d).match(/\d{4}/);
+ return m ? m[0] : 'Unknown';
+}
+
+function normalizeRecords(raw) {
+ return raw.map((r, i) => ({
+ id: r.id || `pc-${i}`,
+ title: r.title || 'Untitled',
+ date: r.date || r.date_range || null,
+ year: yearOf(r),
+ publication: r.publication || null,
+ subject: r.subject || null,
+ award: r.award || null,
+ record_type: r.record_type || 'documented',
+ extent: r.extent || null,
+ image: r.image || null, // local downloaded path, preferred for display
+ image_url: r.image_url || null, // external legitimate source, fallback
+ image_source: r.image_source || null,
+ rights_note: r.rights_note || null,
+ citation_url: r.citation_url || null,
+ }));
+}
+
+function buildFacet(records, field) {
+ const counts = new Map();
+ for (const r of records) {
+ const v = r[field];
+ if (!v) continue;
+ counts.set(v, (counts.get(v) || 0) + 1);
+ }
+ return [...counts.entries()].sort((a, b) => b[1] - a[1] || String(a[0]).localeCompare(String(b[0])));
+}
+
+function applyFilters(records) {
+ const q = document.getElementById('search').value.trim().toLowerCase();
+ return records.filter(r => {
+ if (filters.year && r.year !== filters.year) return false;
+ if (filters.publication && r.publication !== filters.publication) return false;
+ if (filters.award && r.award !== filters.award) return false;
+ if (filters.subject && r.subject !== filters.subject) return false;
+ if (filters.recordType && r.record_type !== filters.recordType) return false;
+ if (q) {
+ const hay = [r.title, r.subject, r.publication, r.award, r.date].filter(Boolean).join(' ').toLowerCase();
+ if (!hay.includes(q)) return false;
+ }
+ return true;
+ });
+}
+
+function sortRecords(records, mode) {
+ const arr = [...records];
+ switch (mode) {
+ case 'year-asc': return arr.sort((a, b) => (a.year > b.year ? 1 : -1));
+ case 'year-desc': return arr.sort((a, b) => (a.year < b.year ? 1 : -1));
+ case 'title-az': return arr.sort((a, b) => a.title.localeCompare(b.title));
+ case 'award-first': return arr.sort((a, b) => (b.award ? 1 : 0) - (a.award ? 1 : 0));
+ case 'newest':
+ default: return arr; // natural/dataset order = "Newest"-equivalent default
+ }
+}
+
+function renderFacetGroup(containerId, field, label) {
+ const el = document.getElementById(containerId);
+ const facet = buildFacet(ALL, field);
+ const rowsHtml = facet.map(([val, count]) => {
+ const activeKey = field === 'record_type' ? 'recordType' : field;
+ const isActive = filters[activeKey] === val;
+ return `<div class="filter-row${isActive ? ' active' : ''}" data-field="${field}" data-value="${encodeURIComponent(val)}">
+ <span>${val === 'documented' ? 'Documented cartoon' : val === 'collection-summary' ? 'Archive collection' : val}</span>
+ <span class="count">${count}</span>
+ </div>`;
+ }).join('');
+ el.innerHTML = `<summary>${label}</summary><div class="rows">${rowsHtml || '<div class="filter-row">— none —</div>'}</div>`;
+ el.querySelectorAll('.filter-row[data-field]').forEach(row => {
+ row.addEventListener('click', () => {
+ const f = row.dataset.field;
+ const v = decodeURIComponent(row.dataset.value);
+ const key = f === 'record_type' ? 'recordType' : f;
+ filters[key] = filters[key] === v ? null : v;
+ safeSetLS(LS_FILTERS, filters);
+ renderAll();
+ });
+ });
+}
+
+function renderFilters() {
+ renderFacetGroup('facet-year', 'year', 'Year');
+ renderFacetGroup('facet-publication', 'publication', 'Publication');
+ renderFacetGroup('facet-award', 'award', 'Award');
+ renderFacetGroup('facet-subject', 'subject', 'Subject');
+ renderFacetGroup('facet-recordtype', 'record_type', 'Record Type');
+}
+
+function cardHtml(r) {
+ const img = r.image || r.image_url;
+ const thumb = img
+ ? `<img src="${img}" alt="${escapeHtml(r.title)}" loading="lazy">`
+ : `<div class="no-img">Not digitized —<br>see archive citation</div>`;
+ const badges = [
+ `<span class="badge ${r.record_type}">${r.record_type === 'documented' ? 'Documented' : 'Archive'}</span>`,
+ r.award ? `<span class="badge award">Pulitzer</span>` : ''
+ ].join('');
+ return `<div class="card" data-id="${r.id}">
+ <div class="thumb">${thumb}</div>
+ <div class="body">
+ <div class="title">${escapeHtml(r.title)}</div>
+ <div class="meta">${escapeHtml(r.date || r.year || '')}${r.publication ? ' · ' + escapeHtml(r.publication) : ''}</div>
+ <div class="badges">${badges}</div>
+ </div>
+ </div>`;
+}
+
+function escapeHtml(s) {
+ return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
+}
+
+function renderGrid() {
+ const sortMode = document.getElementById('sort').value;
+ const filtered = sortRecords(applyFilters(ALL), sortMode);
+ document.getElementById('result-count').textContent = `${filtered.length} of ${ALL.length}`;
+ const gridEl = document.getElementById('grid');
+ gridEl.innerHTML = filtered.length
+ ? filtered.map(cardHtml).join('')
+ : `<div class="empty-note">No cartoons match these filters.</div>`;
+ gridEl.querySelectorAll('.card').forEach(card => {
+ card.addEventListener('click', () => openModal(card.dataset.id));
+ });
+}
+
+function renderAll() {
+ renderFilters();
+ renderGrid();
+}
+
+function openModal(id) {
+ const r = ALL.find(x => x.id === id);
+ if (!r) return;
+ const img = r.image || r.image_url;
+ document.getElementById('modal-body').innerHTML = `
+ <button class="close-x" id="modal-close">×</button>
+ <h2>${escapeHtml(r.title)}</h2>
+ <div class="modal-meta">${escapeHtml(r.date || r.year || '')}${r.publication ? ' · ' + escapeHtml(r.publication) : ''}</div>
+ ${img ? `<img class="modal-img" src="${img}" alt="${escapeHtml(r.title)}">` : ''}
+ <dl>
+ <dt>Subject</dt><dd>${escapeHtml(r.subject || '—')}</dd>
+ <dt>Award</dt><dd>${escapeHtml(r.award || '—')}</dd>
+ <dt>Record type</dt><dd>${r.record_type === 'documented' ? 'Documented cartoon' : 'Archive collection summary'}</dd>
+ ${r.extent ? `<dt>Extent</dt><dd>${escapeHtml(r.extent)}</dd>` : ''}
+ ${r.image_source ? `<dt>Image source</dt><dd>${escapeHtml(r.image_source)}</dd>` : ''}
+ <dt>Citation</dt><dd>${r.citation_url ? `<a href="${r.citation_url}" target="_blank" rel="noopener noreferrer">${escapeHtml(r.citation_url)}</a>` : '—'}</dd>
+ </dl>
+ ${r.rights_note ? `<div class="rights-note">${escapeHtml(r.rights_note)}</div>` : ''}
+ `;
+ document.getElementById('modal-backdrop').classList.add('open');
+ document.getElementById('modal-close').addEventListener('click', closeModal);
+}
+function closeModal() { document.getElementById('modal-backdrop').classList.remove('open'); }
+
+function initControls() {
+ const sortEl = document.getElementById('sort');
+ sortEl.value = safeGetLS(LS_SORT, 'year-asc');
+ sortEl.addEventListener('change', () => { safeSetLS(LS_SORT, sortEl.value); renderGrid(); });
+
+ const densityEl = document.getElementById('density');
+ const savedDensity = safeGetLS(LS_DENSITY, 220);
+ densityEl.value = savedDensity;
+ document.documentElement.style.setProperty('--card-min', savedDensity + 'px');
+ densityEl.addEventListener('input', () => {
+ document.documentElement.style.setProperty('--card-min', densityEl.value + 'px');
+ safeSetLS(LS_DENSITY, densityEl.value);
+ });
+
+ document.getElementById('search').addEventListener('input', renderGrid);
+ document.getElementById('clear-filters').addEventListener('click', () => {
+ filters = { year: null, publication: null, award: null, subject: null, recordType: null };
+ safeSetLS(LS_FILTERS, filters);
+ document.getElementById('search').value = '';
+ renderAll();
+ });
+
+ document.getElementById('modal-backdrop').addEventListener('click', (e) => {
+ if (e.target.id === 'modal-backdrop') closeModal();
+ });
+ document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
+}
+
+async function boot() {
+ filters = safeGetLS(LS_FILTERS, filters);
+ const res = await fetch('/api/cartoons');
+ const raw = await res.json();
+ ALL = normalizeRecords(raw.records || raw);
+ initControls();
+ renderAll();
+}
+
+boot().catch(err => {
+ document.getElementById('grid').innerHTML = `<div class="empty-note">Could not load data/cartoons.json — ${escapeHtml(err.message)}</div>`;
+});
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..543c4cb
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Paul Conrad Cartoons — a private research catalog</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <header class="masthead">
+ <h1>Paul Conrad — Editorial Cartoons</h1>
+ <div class="sub">1924–2010 · Denver Post 1950–1964 · Los Angeles Times 1964–1993 · Three-time Pulitzer Prize winner (1964, 1971, 1984)</div>
+ </header>
+
+ <div class="layout">
+ <aside class="filters">
+ <input class="search" id="search" type="search" placeholder="Search title, subject, date…">
+ <details class="filter-group" id="facet-award" open></details>
+ <details class="filter-group" id="facet-recordtype" open></details>
+ <details class="filter-group" id="facet-publication"></details>
+ <details class="filter-group" id="facet-year"></details>
+ <details class="filter-group" id="facet-subject"></details>
+ <button class="clear-filters" id="clear-filters">Clear all filters</button>
+ </aside>
+
+ <main>
+ <div class="controls">
+ <div>
+ <label for="sort">Sort</label>
+ <select id="sort">
+ <option value="year-asc">Year ↑ (oldest first)</option>
+ <option value="year-desc">Year ↓ (newest first)</option>
+ <option value="title-az">Title A→Z</option>
+ <option value="award-first">Award winners first</option>
+ <option value="newest">Dataset order</option>
+ </select>
+ </div>
+ <div class="density-wrap">
+ <label for="density">Density</label>
+ <input type="range" id="density" min="150" max="340" step="10">
+ </div>
+ <div class="result-count" id="result-count"></div>
+ </div>
+ <div class="grid-wrap">
+ <div class="grid" id="grid"></div>
+ </div>
+ </main>
+ </div>
+
+ <div class="modal-backdrop" id="modal-backdrop">
+ <div class="modal" id="modal-body"></div>
+ </div>
+
+ <script src="app.js"></script>
+</body>
+</html>
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..ac5c3a8
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,250 @@
+:root {
+ --bg: #f7f5f0;
+ --panel-bg: #ffffff;
+ --ink: #1c1a17;
+ --ink-soft: #5a564e;
+ --line: #ddd8cc;
+ --accent: #8a1f11; /* editorial-page red-ink accent */
+ --accent-soft: #c9a97a;
+ --badge-doc: #2c5e3f;
+ --badge-summary: #7a5a1e;
+ --card-bg: #ffffff;
+ --radius: 3px;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ --bg: #17140f;
+ --panel-bg: #221e17;
+ --ink: #ece7db;
+ --ink-soft: #b7ad98;
+ --line: #3a3428;
+ --accent: #e2694f;
+ --accent-soft: #a9895a;
+ --badge-doc: #6fbf8f;
+ --badge-summary: #d9b25f;
+ --card-bg: #221e17;
+ }
+}
+:root[data-theme="dark"] {
+ --bg: #17140f;
+ --panel-bg: #221e17;
+ --ink: #ece7db;
+ --ink-soft: #b7ad98;
+ --line: #3a3428;
+ --accent: #e2694f;
+ --accent-soft: #a9895a;
+ --badge-doc: #6fbf8f;
+ --badge-summary: #d9b25f;
+ --card-bg: #221e17;
+}
+
+* { box-sizing: border-box; }
+body {
+ margin: 0;
+ background: var(--bg);
+ color: var(--ink);
+ font-family: "Georgia", "Iowan Old Style", serif;
+ -webkit-font-smoothing: antialiased;
+}
+
+header.masthead {
+ padding: 22px 20px 14px;
+ border-bottom: 3px solid var(--ink);
+ text-align: center;
+}
+header.masthead h1 {
+ margin: 0;
+ font-size: clamp(24px, 4vw, 38px);
+ letter-spacing: 0.02em;
+ font-weight: 700;
+}
+header.masthead .sub {
+ margin-top: 6px;
+ font-size: 13px;
+ color: var(--ink-soft);
+ font-style: italic;
+}
+
+.layout {
+ display: grid;
+ grid-template-columns: 260px 1fr;
+ gap: 0;
+ min-height: calc(100vh - 90px);
+}
+@media (max-width: 900px) {
+ .layout { grid-template-columns: 1fr; }
+}
+
+/* ---- left filter panel ---- */
+.filters {
+ border-right: 1px solid var(--line);
+ padding: 16px 14px;
+ background: var(--panel-bg);
+}
+.filters .search {
+ width: 100%;
+ padding: 8px 10px;
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ background: var(--bg);
+ color: var(--ink);
+ font-family: inherit;
+ font-size: 14px;
+ margin-bottom: 14px;
+}
+.filter-group {
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ margin-bottom: 10px;
+ overflow: hidden;
+}
+.filter-group summary {
+ cursor: pointer;
+ padding: 8px 10px;
+ font-weight: 700;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ background: var(--bg);
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+}
+.filter-group summary::-webkit-details-marker { display: none; }
+.filter-group summary::after { content: "+"; color: var(--ink-soft); }
+.filter-group[open] summary::after { content: "\2212"; }
+.filter-group .rows { padding: 4px 0; max-height: 220px; overflow-y: auto; }
+.filter-row {
+ display: flex;
+ justify-content: space-between;
+ gap: 8px;
+ padding: 4px 10px;
+ font-size: 12.5px;
+ cursor: pointer;
+ color: var(--ink-soft);
+}
+.filter-row:hover { background: var(--bg); }
+.filter-row.active { color: var(--accent); font-weight: 700; }
+.filter-row .count {
+ background: var(--accent-soft);
+ color: #241a0f;
+ border-radius: 10px;
+ padding: 0 6px;
+ font-size: 10.5px;
+ min-width: 18px;
+ text-align: center;
+}
+.clear-filters {
+ width: 100%;
+ margin-top: 6px;
+ padding: 6px;
+ font-size: 11.5px;
+ border: 1px dashed var(--line);
+ background: none;
+ color: var(--ink-soft);
+ border-radius: var(--radius);
+ cursor: pointer;
+}
+
+/* ---- controls row (sort + density) ---- */
+.controls {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 16px;
+ padding: 14px 20px;
+ border-bottom: 1px solid var(--line);
+ background: var(--panel-bg);
+ position: sticky;
+ top: 0;
+ z-index: 5;
+}
+.controls label { font-size: 12px; color: var(--ink-soft); margin-right: 6px; }
+.controls select {
+ padding: 5px 8px;
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ background: var(--bg);
+ color: var(--ink);
+ font-family: inherit;
+}
+.controls .density-wrap { display: flex; align-items: center; gap: 8px; }
+.controls input[type=range] { width: 130px; }
+.controls .result-count { margin-left: auto; font-size: 12px; color: var(--ink-soft); }
+
+/* ---- grid ---- */
+.grid-wrap { padding: 18px 20px; }
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 220px), 1fr));
+ gap: 16px;
+}
+.card {
+ background: var(--card-bg);
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ overflow: hidden;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ transition: transform .12s ease, box-shadow .12s ease;
+}
+.card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
+.card .thumb {
+ aspect-ratio: 4 / 3;
+ background: var(--bg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ border-bottom: 1px solid var(--line);
+}
+.card .thumb img { width: 100%; height: 100%; object-fit: contain; }
+.card .thumb .no-img {
+ font-size: 11px;
+ color: var(--ink-soft);
+ text-align: center;
+ padding: 10px;
+ font-style: italic;
+}
+.card .body { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
+.card .title { font-weight: 700; font-size: 14px; line-height: 1.25; }
+.card .meta { font-size: 11.5px; color: var(--ink-soft); }
+.card .badges { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
+.badge {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: .04em;
+ padding: 2px 7px;
+ border-radius: 10px;
+ color: #fff;
+}
+.badge.documented { background: var(--badge-doc); }
+.badge.collection-summary { background: var(--badge-summary); }
+.badge.award { background: var(--accent); }
+
+/* ---- detail modal ---- */
+.modal-backdrop {
+ position: fixed; inset: 0; background: rgba(0,0,0,.55);
+ display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50;
+}
+.modal-backdrop.open { display: flex; }
+.modal {
+ background: var(--panel-bg); border-radius: 6px; max-width: 720px; width: 100%;
+ max-height: 88vh; overflow-y: auto; padding: 22px 26px; position: relative;
+}
+.modal .close-x {
+ position: absolute; top: 12px; right: 14px; background: none; border: none;
+ font-size: 22px; cursor: pointer; color: var(--ink-soft);
+}
+.modal h2 { margin: 0 0 4px; font-size: 22px; }
+.modal .modal-meta { color: var(--ink-soft); font-size: 13px; margin-bottom: 12px; }
+.modal .modal-img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
+.modal dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13.5px; margin: 0; }
+.modal dt { color: var(--ink-soft); }
+.modal dd { margin: 0; }
+.modal a { color: var(--accent); }
+.modal .rights-note { font-size: 11.5px; color: var(--ink-soft); font-style: italic; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
+
+.empty-note { padding: 40px; text-align: center; color: var(--ink-soft); font-style: italic; }
← 680341b initial scaffold
·
back to Paul Conrad Cartoons Shadowman
·
compile 38-record research dataset (3 Pulitzers, 22 document add8978 →