Skip to content

feat: nav header on data-browser pages - #23

Merged
melvincarvalho merged 1 commit into
gh-pagesfrom
feat-data-browser-nav
May 16, 2026
Merged

melvincarvalho merged 1 commit into
gh-pagesfrom
feat-data-browser-nav

Conversation

@melvincarvalho

Copy link
Copy Markdown
Contributor

Summary

The data-browser previously dropped the user on a wall of rendered JSON-LD with no navigation chrome. Now every resource our browser renders gets 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.

Implementation

`data-browser.js` grows by ~540 bytes (988 → 1528). New module:

```js
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 = '

' + (up ? `↑ Up` : '') + 'HomeAccountDocs';
```

CSS for `.jspod-nav` is in the same injected style block (same overall card + cream visual language as the rest of jspod's pages).

Test plan

  • `node --check data-browser.js` — syntax OK
  • Up calculation correct for: `/`, `/profile/`, `/public/`, `/public/links.jsonld`
  • After merge + publish 0.0.25: visit `/profile/` — nav strip should appear above the JSON-LD with all four links; Up should go to `/`

Bumps jspod to 0.0.25.

Refs #1

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant