From 568a3126c9424b2debd17fef64b867a6380a3add Mon Sep 17 00:00:00 2001
From: Melvin Carvalho <melvincarvalho@gmail.com>
Date: Sat, 16 May 2026 06:05:20 +0200
Subject: [PATCH] feat: ship a 200-byte data browser, replace mashlib bundle by
 default
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The page is the data. JSS already embeds the resource as JSON-LD in
<script type="application/ld+json" id="dataisland">. The full mashlib
bundle is hundreds of KB just to render that. This change replaces it
with a deliberately tiny ES module that:

- Finds the data island in the served HTML
- Turns every URI into a clickable <a>
- Renders into JSS's <div id="mashlib"> slot

The data is the UI; the URIs are the navigation. Click any link in
the rendered page and you navigate to that Solid resource, which JSS
also serves with the data island wrapper, which our module also
renders. Pure linked-data philosophy.

Files:
- data-browser.js (~180 bytes of runtime code + explanatory comments)
- data-browser.css (~290 bytes of runtime CSS + comments) — system
  font, cream background, soft card, hover-underline links

Hosting:
- Both files are in the npm tarball (files whitelist updated).
- jspod passes --mashlib-module
  https://cdn.jsdelivr.net/npm/jspod@<pkg.version>/data-browser.js
  to JSS. Version-pinned = cache-immortal per version, so a published
  release always loads the matching browser code. JSS auto-fetches
  the .css sibling from moduleUrl.replace(/\.js$/, '.css').
- No new infra; jsdelivr serves npm packages for free.

JSS contract verified locally (Python http.server + JSS in single-
user mode): /public/ responds with the module-mode HTML wrapper,
data island contains the LDP container JSON-LD, all URIs round-trip
through the renderer as <a> tags.

README adds a "The page is the data" section explaining the
philosophy and pointing to the two source files in the package.

Bumps jspod to 0.0.11.

Refs #1
---
 README.md        | 15 ++++++++++++++-
 data-browser.css |  6 ++++++
 data-browser.js  |  5 +++++
 index.js         | 12 +++++++++++-
 package.json     |  6 ++++--
 5 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 data-browser.css
 create mode 100644 data-browser.js

diff --git a/README.md b/README.md
index f6f2f50..bc922c9 100644
--- a/README.md
+++ b/README.md
@@ -190,10 +190,23 @@ Under the hood, jspod runs JavaScriptSolidServer with these options:
 |---------|----------|-------------|
 | **WebSocket Notifications** | `--notifications` | Real-time updates via WebSockets |
 | **Content Negotiation** | `--conneg` | Turtle, JSON-LD, and more |
-| **Single-user Mode** | `--no-multiuser` | One pod per server (use `--multiuser` flag to change) |
+| **Single-user Mode** | `--no-multiuser --single-user` | One pod per server (use `--multiuser` flag to change) |
+| **Identity Provider** | `--idp` | Built-in IDP so the rung-1 sign-in works out of the box |
+| **Tiny Data Browser** | `--mashlib-module` | ~200 bytes of JS + CSS shipped in this npm package, served from jsdelivr. Replaces the full mashlib bundle by default. |
 | **Passkey Auth** | (built-in) | Automatic in JSS - no flag needed |
 | **WebID** | (built-in) | Core Solid protocol feature |
 
+### The page is the data
+
+By default jspod uses a deliberately minimal data browser — a ~200-byte ES module that renders the JSON-LD data island JSS already embeds in each HTML response, with every URI turned into a clickable link. No SPA, no CDN bundle, no parsing — *the page is the data, and the URIs are the navigation*.
+
+The browser source is two files in this npm package:
+
+- [`data-browser.js`](./data-browser.js) — finds `#dataisland`, renders to `#mashlib`, makes URIs clickable
+- [`data-browser.css`](./data-browser.css) — system font, cream background, soft card
+
+JSS loads them from a version-pinned jsdelivr URL: `https://cdn.jsdelivr.net/npm/jspod@<version>/data-browser.js`. Override with `--mashlib-cdn` (full mashlib from CDN) or `--no-mashlib` (raw RDF responses) via your own JSS invocation if you want something else.
+
 ### Default Configuration
 
 ```javascript
diff --git a/data-browser.css b/data-browser.css
new file mode 100644
index 0000000..ecb4fc2
--- /dev/null
+++ b/data-browser.css
@@ -0,0 +1,6 @@
+/* jspod minimal data-browser styles. Auto-loaded by JSS as the .css
+   sibling of data-browser.js (see generateModuleDatabrowserHtml). */
+body{font:14px/1.6 system-ui,-apple-system,sans-serif;margin:2em;color:#222;background:#fafaf8}
+#mashlib pre{padding:1em;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:auto;white-space:pre-wrap;word-break:break-all}
+a{color:#0366d6;text-decoration:none}
+a:hover{text-decoration:underline}
diff --git a/data-browser.js b/data-browser.js
new file mode 100644
index 0000000..522537d
--- /dev/null
+++ b/data-browser.js
@@ -0,0 +1,5 @@
+// jspod minimal data browser — the page is the data. JSS embeds the
+// resource as JSON-LD in #dataisland; this module just makes it visible
+// in #mashlib with clickable URIs. See data-browser.css for the styling.
+const d=document.getElementById('dataisland'),m=document.getElementById('mashlib');
+m.innerHTML=`<pre>${d.textContent.replace(/https?:\/\/[^"\s]+/g,'<a href="$&">$&</a>')}</pre>`
diff --git a/index.js b/index.js
index 97f8982..47bd555 100755
--- a/index.js
+++ b/index.js
@@ -306,6 +306,15 @@ console.log(chalk.cyan('   └─ ') + chalk.white('WebID:      ') + chalk.blue.
 console.log('\n' + chalk.dim('Press ') + chalk.bold.red('Ctrl+C') + chalk.dim(' to stop the server\n'));
 console.log(chalk.yellow('⏳ Initializing server components...\n'));
 
+// Point JSS at jspod's minimal data browser instead of the full mashlib
+// bundle. The page-is-the-data philosophy: JSS already embeds the
+// resource as JSON-LD in #dataisland, so the "browser" only needs to
+// paint that data with clickable URIs (~200 bytes of JS + ~200 bytes
+// of CSS, both shipped in this npm package). Version-pinned jsdelivr
+// URL is immutable per version, so a published jspod release will
+// always load the matching browser code.
+const dataBrowserUrl = `https://cdn.jsdelivr.net/npm/jspod@${pkg.version}/data-browser.js`;
+
 // Build jss arguments
 const jssArgs = [
   'start',
@@ -313,7 +322,8 @@ const jssArgs = [
   '--host', options.host,
   '--root', options.root,
   '--notifications',
-  '--conneg'
+  '--conneg',
+  '--mashlib-module', dataBrowserUrl
 ];
 
 if (options.multiuser) {
diff --git a/package.json b/package.json
index f0514ed..72c8470 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jspod",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "JavaScript Solid Pod - Just works, batteries included",
   "type": "module",
   "main": "index.js",
@@ -8,7 +8,9 @@
     "jspod": "index.js"
   },
   "files": [
-    "index.js"
+    "index.js",
+    "data-browser.js",
+    "data-browser.css"
   ],
   "scripts": {
     "start": "node index.js"