From 7e2c98fd044a7aa51fd4fceef3cb77e5cc84e97f Mon Sep 17 00:00:00 2001
From: Melvin Carvalho <melvincarvalho@gmail.com>
Date: Sat, 16 May 2026 10:45:21 +0200
Subject: [PATCH] feat: nav header on data-browser pages (Up / Home / Account /
 Docs)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously the data-browser dropped the user on a wall of rendered
JSON-LD with no navigation chrome — the only way back was the
browser's back button. Now every resource our browser renders has
a small nav strip above the data:

  [↑ Up]  [Home]  [Account]  [Docs]
  ───────────────────────────
  { ... rendered JSON-LD ... }

- "Up" navigates one path segment higher (e.g. /public/links.jsonld
  → /public/; /profile/ → /). Hidden at the pod root.
- Home, Account, Docs link to the corresponding jspod-owned pages.
- Visually consistent with the cream + card style of welcome.html /
  account.html / signin.html.

Module size: 988 B → 1528 B. Still well under any reasonable budget
for a data browser and a navigation surface combined.

Refs #1
---
 data-browser.js | 13 ++++++++-----
 package.json    |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/data-browser.js b/data-browser.js
index 70258cd..aabb7cc 100644
--- a/data-browser.js
+++ b/data-browser.js
@@ -1,9 +1,12 @@
 // jspod minimal data browser — the page is the data. JSS embeds the
 // resource as JSON-LD in #dataisland; this single module:
 //   1. Injects its own <style> (no separate .css fetch needed)
-//   2. Parses the JSON-LD and pretty-prints with 2-space indent
-//   3. Renders into #mashlib with every URI as a clickable <a>
-// Goal: a baseline mashlib that fits in one file, ~800 bytes total.
-document.head.insertAdjacentHTML('beforeend','<style>body{font:14px/1.6 system-ui,-apple-system,sans-serif;margin:2em;color:#222;background:#f3eee5}#mashlib pre{padding:1.5em;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:auto;white-space:pre-wrap;word-break:break-all}a{color:#0a66c2;text-decoration:none}a:hover{text-decoration:underline}</style>')
+//   2. Renders a small nav (Up / Home / Account / Docs) above the data
+//   3. Parses the JSON-LD and pretty-prints with 2-space indent
+//   4. Renders into #mashlib with every URI as a clickable <a>
+document.head.insertAdjacentHTML('beforeend','<style>body{font:14px/1.6 system-ui,-apple-system,sans-serif;margin:2em;color:#222;background:#f3eee5}#mashlib pre{padding:1.5em;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:auto;white-space:pre-wrap;word-break:break-all;margin:0}a{color:#0a66c2;text-decoration:none}a:hover{text-decoration:underline}.jspod-nav{display:flex;gap:1.2em;margin:0 0 .75em;padding:.6em 1em;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.05);font-size:.9em}.jspod-nav a{font-family:inherit}</style>')
+const p=window.location.pathname
+const up=(p==='/'||!p)?null:(s=>{const i=s.lastIndexOf('/');return i===0?'/':s.slice(0,i)+'/'})(p.replace(/\/$/,''))
+const nav='<nav class="jspod-nav">'+(up?`<a href="${up}" title="One level up">↑ Up</a>`:'')+'<a href="/">Home</a><a href="/account.html">Account</a><a href="/docs.html">Docs</a></nav>'
 const d=JSON.parse(document.getElementById('dataisland').textContent)
-document.getElementById('mashlib').innerHTML='<pre>'+JSON.stringify(d,null,2).replace(/https?:\/\/[^"\s]+/g,'<a href="$&">$&</a>')+'</pre>'
+document.getElementById('mashlib').innerHTML=nav+'<pre>'+JSON.stringify(d,null,2).replace(/https?:\/\/[^"\s]+/g,'<a href="$&">$&</a>')+'</pre>'
diff --git a/package.json b/package.json
index 269f2f0..4cf6f96 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jspod",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "JavaScript Solid Pod - Just works, batteries included",
   "type": "module",
   "main": "index.js",