Skip to content

Commit 4f717e4

Browse files
melvincarvalhomelvincarvalho
committed
Add 5 more project pages: NDK, Snort, Pleroma, Pixelfed, Mashlib
New projects: - NDK: Nostr Development Kit for building applications - Snort: Feature-packed Nostr web client - Pleroma: Lightweight ActivityPub server - Pixelfed: Federated image sharing (Instagram alternative) - Mashlib: Solid data browser and UI library Total pages: ~68
1 parent 583771c commit 4f717e4

6 files changed

Lines changed: 1261 additions & 0 deletions

File tree

‎docs/projects/mashlib/index.md‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
---
2+
title: Mashlib
3+
description: Solid data browser and UI library
4+
---
5+
6+
# Mashlib
7+
8+
**The Solid data browser.** A complete web-based operating system for personal data.
9+
10+
## Overview
11+
12+
Mashlib (mashlib.js) is the core library powering SolidOS — the data browser that lets you view, edit, and interact with any data in your Solid pod. It's both a standalone application and an embeddable library for Solid apps.
13+
14+
## Key Features
15+
16+
### Universal Data Browser
17+
18+
```
19+
┌─────────────────────────────────────────────────────────┐
20+
│ Mashlib Data Browser │
21+
├─────────────────────────────────────────────────────────┤
22+
│ Address: https://pod.example/alice/ │
23+
├─────────────────────────────────────────────────────────┤
24+
│ │
25+
│ 📁 alice/ │
26+
│ ├── 📁 contacts/ │
27+
│ │ ├── 👤 bob.ttl │
28+
│ │ └── 👤 carol.ttl │
29+
│ ├── 📁 documents/ │
30+
│ │ └── 📄 notes.md │
31+
│ ├── 📋 profile/card │
32+
│ └── ⚙️ settings/ │
33+
│ │
34+
│ [View as: Table | Outline | Raw | Source] │
35+
│ │
36+
└─────────────────────────────────────────────────────────┘
37+
```
38+
39+
### Pane System
40+
41+
Mashlib uses "panes" — specialized viewers for different data types:
42+
43+
| Pane | Data Types |
44+
|------|------------|
45+
| **Folder** | Containers, file listings |
46+
| **Profile** | WebID, FOAF profiles |
47+
| **Contacts** | Address books (vCard) |
48+
| **Chat** | Long chat, IRC-style |
49+
| **Meeting** | Scheduling, attendees |
50+
| **Issue** | Bug tracking |
51+
| **Slideshow** | Presentations |
52+
| **Source** | Raw RDF/Turtle |
53+
| **Image** | Photos, graphics |
54+
| **Video** | Media playback |
55+
56+
### Component Architecture
57+
58+
```
59+
┌─────────────────────────────────────────────────────┐
60+
│ Mashlib │
61+
├─────────────────────────────────────────────────────┤
62+
│ ┌─────────────────────────────────────────────────┐│
63+
│ │ solid-panes ││
64+
│ │ (Specialized viewers for data types) ││
65+
│ └─────────────────────────────────────────────────┘│
66+
│ ┌─────────────────────────────────────────────────┐│
67+
│ │ solid-ui ││
68+
│ │ (UI widgets and form builders) ││
69+
│ └─────────────────────────────────────────────────┘│
70+
│ ┌─────────────────────────────────────────────────┐│
71+
│ │ solid-logic ││
72+
│ │ (Core business logic) ││
73+
│ └─────────────────────────────────────────────────┘│
74+
│ ┌─────────────────────────────────────────────────┐│
75+
│ │ pane-registry ││
76+
│ │ (Pane loading and management) ││
77+
│ └─────────────────────────────────────────────────┘│
78+
└─────────────────────────────────────────────────────┘
79+
```
80+
81+
### The Databrowser Hack
82+
83+
How Mashlib works with conventional browsers:
84+
85+
```
86+
1. User navigates to:
87+
https://pod.example/data.ttl
88+
89+
2. Browser sends Accept: text/html
90+
91+
3. Server detects non-RDF-aware browser
92+
93+
4. Server returns databrowser.html:
94+
<script src="mashlib.js"></script>
95+
96+
5. Mashlib loads and re-requests:
97+
Accept: text/turtle
98+
99+
6. Data renders in appropriate pane
100+
```
101+
102+
This lets any web browser become a data browser.
103+
104+
## Usage
105+
106+
### As Standalone App
107+
108+
Try it at [solidos.github.io/mashlib/dist/browse.html](https://solidos.github.io/mashlib/dist/browse.html)
109+
110+
### Embedded in HTML
111+
112+
```html
113+
<!DOCTYPE html>
114+
<html>
115+
<head>
116+
<script src="https://solidcommunity.net/mashlib.js"></script>
117+
<link rel="stylesheet" href="https://solidcommunity.net/mashlib.css">
118+
</head>
119+
<body>
120+
<div id="databrowser"></div>
121+
<script>
122+
const subject = panes.UI.store.sym('https://pod.example/alice/profile/card#me');
123+
panes.runDataBrowser(document.getElementById('databrowser'), subject);
124+
</script>
125+
</body>
126+
</html>
127+
```
128+
129+
### As NPM Package
130+
131+
```bash
132+
npm install mashlib
133+
```
134+
135+
```javascript
136+
import { store, UI, authn } from 'mashlib';
137+
138+
// Authenticate
139+
await authn.checkSession();
140+
141+
// Load and display data
142+
const doc = store.sym('https://pod.example/data.ttl');
143+
await store.fetcher.load(doc);
144+
```
145+
146+
### In Electron App
147+
148+
Mashlib can power native desktop apps:
149+
150+
```javascript
151+
const { app, BrowserWindow } = require('electron');
152+
153+
function createWindow() {
154+
const win = new BrowserWindow({
155+
width: 1200,
156+
height: 800,
157+
webPreferences: {
158+
nodeIntegration: false
159+
}
160+
});
161+
162+
win.loadFile('databrowser.html');
163+
}
164+
165+
app.whenReady().then(createWindow);
166+
```
167+
168+
## Building Custom Panes
169+
170+
Create specialized views for your data:
171+
172+
```javascript
173+
// my-pane.js
174+
const myPane = {
175+
icon: '📊',
176+
name: 'My Custom Pane',
177+
178+
// When to show this pane
179+
label: function(subject, context) {
180+
const dominated = context.session && context.session.paneRegistry;
181+
if (subject.value.endsWith('.csv')) {
182+
return 'CSV Viewer';
183+
}
184+
return null;
185+
},
186+
187+
// Render the pane
188+
render: function(subject, context) {
189+
const div = context.dom.createElement('div');
190+
// Build your UI here
191+
return div;
192+
}
193+
};
194+
195+
// Register
196+
panes.register(myPane);
197+
```
198+
199+
## Core Repositories
200+
201+
| Repository | Purpose |
202+
|------------|---------|
203+
| [mashlib](https://github.com/SolidOS/mashlib) | Main bundle |
204+
| [solid-ui](https://github.com/SolidOS/solid-ui) | UI widgets |
205+
| [solid-panes](https://github.com/SolidOS/solid-panes) | Pane collection |
206+
| [solid-logic](https://github.com/SolidOS/solid-logic) | Business logic |
207+
| [pane-registry](https://github.com/SolidOS/pane-registry) | Pane management |
208+
209+
## Development
210+
211+
```bash
212+
# Clone all repos
213+
git clone https://github.com/SolidOS/mashlib.git
214+
cd mashlib
215+
216+
# Install dependencies
217+
npm install
218+
219+
# Build
220+
npm run build
221+
222+
# Development server
223+
npm run dev
224+
```
225+
226+
### CDN Deployment
227+
228+
Mashlib is served from Solid servers:
229+
230+
```
231+
https://solidcommunity.net/mashlib.js
232+
https://solidcommunity.net/mashlib.min.js
233+
https://solidcommunity.net/mashlib.css
234+
```
235+
236+
## Philosophy
237+
238+
> The data browser should be a complete web-based operating system for any new computer or data store. Users should be able to work local-first. The UI should accommodate a wide range of devices, screen sizes, bandwidth.
239+
240+
Unlike typical native apps, mashlib is deeply interconnected — data from different applications interlinks naturally to solve real-life problems.
241+
242+
## Links
243+
244+
- **Live Demo:** [solidos.github.io/mashlib/dist/browse.html](https://solidos.github.io/mashlib/dist/browse.html)
245+
- **GitHub:** [SolidOS/mashlib](https://github.com/SolidOS/mashlib)
246+
- **npm:** [mashlib](https://www.npmjs.com/package/mashlib)
247+
248+
## See Also
249+
250+
- [SolidOS](/projects/solidos) — Full data browser application
251+
- [Solid Protocol](/protocols/solid) — The protocol
252+
- [rdflib.js](/projects/rdflib-js) — RDF library used by mashlib
253+
- [solid-client](/projects/solid-client) — Higher-level Solid library

0 commit comments

Comments
 (0)