worldwideweb 0.0.20 → 0.0.21

package/jsonos/main.cjs

@@ -0,0 +1,291 @@
+#!/usr/bin/env node
+
+const { app, BrowserWindow, Menu, ipcMain, session } = require('electron')
+const path = require('path')
+
+let mainWindow
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: path.join(__dirname, 'preload.js')
+    },
+    titleBarStyle: 'hidden',
+    titleBarOverlay: {
+      color: '#16213e',
+      symbolColor: '#eee',
+      height: 40
+    }
+  })
+
+  // Load the jsonos browser shell
+  mainWindow.loadFile(path.join(__dirname, 'browser.html'))
+
+  // Set up content type handling for RDF/JSON-LD
+  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
+    const contentType = details.responseHeaders['content-type'] ||
+                        details.responseHeaders['Content-Type'] || []
+
+    // Log content types for debugging
+    if (contentType.some(ct => ct.includes('turtle') || ct.includes('json'))) {
+      console.log(`[jsonos] Content-Type: ${contentType} for ${details.url}`)
+    }
+
+    callback({ responseHeaders: details.responseHeaders })
+  })
+
+  const mainMenu = Menu.buildFromTemplate(menuTemplate)
+  Menu.setApplicationMenu(mainMenu)
+}
+
+const menuTemplate = [
+  {
+    label: 'File',
+    submenu: [
+      {
+        label: 'New Window',
+        accelerator: 'CmdOrCtrl+N',
+        click() {
+          createWindow()
+        }
+      },
+      {
+        label: 'Open Location',
+        accelerator: 'CmdOrCtrl+L',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.webContents.executeJavaScript(`
+              document.getElementById('url-bar').focus();
+              document.getElementById('url-bar').select();
+            `)
+          }
+        }
+      },
+      { type: 'separator' },
+      {
+        label: 'Exit',
+        accelerator: 'CmdOrCtrl+Q',
+        click() {
+          app.quit()
+        }
+      }
+    ]
+  },
+  {
+    label: 'Edit',
+    submenu: [
+      { role: 'undo' },
+      { role: 'redo' },
+      { type: 'separator' },
+      { role: 'cut' },
+      { role: 'copy' },
+      { role: 'paste' },
+      { role: 'selectAll' }
+    ]
+  },
+  {
+    label: 'View',
+    submenu: [
+      {
+        label: 'Rendered View',
+        accelerator: 'CmdOrCtrl+1',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.webContents.executeJavaScript(`
+              document.querySelector('[data-view="rendered"]').click();
+            `)
+          }
+        }
+      },
+      {
+        label: 'Raw JSON',
+        accelerator: 'CmdOrCtrl+2',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.webContents.executeJavaScript(`
+              document.querySelector('[data-view="raw"]').click();
+            `)
+          }
+        }
+      },
+      {
+        label: 'Custom View',
+        accelerator: 'CmdOrCtrl+3',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.webContents.executeJavaScript(`
+              document.querySelector('[data-view="custom"]').click();
+            `)
+          }
+        }
+      },
+      { type: 'separator' },
+      {
+        label: 'Toggle Edit Mode',
+        accelerator: 'CmdOrCtrl+E',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.webContents.executeJavaScript(`
+              jsonos.toggleEditMode();
+            `)
+          }
+        }
+      },
+      { type: 'separator' },
+      { role: 'toggleDevTools' },
+      { role: 'togglefullscreen' }
+    ]
+  },
+  {
+    label: 'Navigate',
+    submenu: [
+      {
+        label: 'Back',
+        accelerator: 'CmdOrCtrl+[',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.webContents.executeJavaScript('jsonos.goBack()')
+          }
+        }
+      },
+      {
+        label: 'Forward',
+        accelerator: 'CmdOrCtrl+]',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.webContents.executeJavaScript('jsonos.goForward()')
+          }
+        }
+      },
+      {
+        label: 'Reload',
+        accelerator: 'CmdOrCtrl+R',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.webContents.executeJavaScript(`
+              if (jsonos.currentData && jsonos.currentData['@id']) {
+                LION.cache.delete(jsonos.currentData['@id']);
+                jsonos.navigateWithoutHistory(jsonos.currentData['@id']);
+              }
+            `)
+          }
+        }
+      },
+      { type: 'separator' },
+      {
+        label: 'Home',
+        accelerator: 'CmdOrCtrl+H',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.webContents.executeJavaScript(`
+              jsonos.navigate('https://jsonos.com/');
+            `)
+          }
+        }
+      }
+    ]
+  },
+  {
+    label: 'Solid',
+    submenu: [
+      {
+        label: 'Login...',
+        accelerator: 'CmdOrCtrl+Shift+L',
+        click(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.webContents.executeJavaScript(`
+              document.getElementById('auth-status').click();
+            `)
+          }
+        }
+      },
+      {
+        label: 'My Pod',
+        click(item, focusedWindow) {
+          // TODO: Navigate to user's pod
+        }
+      }
+    ]
+  },
+  {
+    label: 'Help',
+    submenu: [
+      {
+        label: 'About WorldWideWeb',
+        click() {
+          const { dialog } = require('electron')
+          dialog.showMessageBox({
+            type: 'info',
+            title: 'About WorldWideWeb',
+            message: 'WorldWideWeb - jsonos Edition',
+            detail: 'A browser for the decentralized web.\n\n' +
+                    'Built with:\n' +
+                    '• LION (Linked Objects Notation)\n' +
+                    '• jsonos runtime\n' +
+                    '• Solid Protocol\n\n' +
+                    'Inspired by Tim Berners-Lee\'s original WorldWideWeb browser.'
+          })
+        }
+      },
+      {
+        label: 'Learn about Solid',
+        click() {
+          require('electron').shell.openExternal('https://solidproject.org/')
+        }
+      },
+      {
+        label: 'Learn about LION',
+        click() {
+          require('electron').shell.openExternal('https://linkedobjects.org/')
+        }
+      },
+      {
+        label: 'Learn about jsonos',
+        click() {
+          require('electron').shell.openExternal('https://jsonos.com/')
+        }
+      }
+    ]
+  }
+]
+
+// macOS specific menu adjustments
+if (process.platform === 'darwin') {
+  menuTemplate.unshift({
+    label: app.getName(),
+    submenu: [
+      { role: 'about' },
+      { type: 'separator' },
+      { role: 'services' },
+      { type: 'separator' },
+      { role: 'hide' },
+      { role: 'hideOthers' },
+      { role: 'unhide' },
+      { type: 'separator' },
+      { role: 'quit' }
+    ]
+  })
+}
+
+app.whenReady().then(createWindow)
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
+
+// Handle IPC messages from renderer
+ipcMain.handle('get-app-version', () => {
+  return app.getVersion()
+})

package/jsonos/preload.js

@@ -0,0 +1,14 @@
+const { contextBridge, ipcRenderer } = require('electron')
+
+// Expose protected methods to renderer
+contextBridge.exposeInMainWorld('electronAPI', {
+  getAppVersion: () => ipcRenderer.invoke('get-app-version'),
+
+  // Platform info
+  platform: process.platform,
+
+  // Solid authentication helpers (to be expanded)
+  solid: {
+    // Will be populated with Solid auth methods
+  }
+})

package/main.js

@@ -0,0 +1,168 @@
+import { app, BrowserWindow, Menu } from 'electron';
+import { createServer } from 'javascript-solid-server/src/server.js';
+import { readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// Address bar CSS - inspired by solid-docs browser
+const ADDRESS_BAR_CSS = `
+#worldwideweb-nav {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  background: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+#worldwideweb-nav label {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  font-weight: 500;
+}
+#worldwideweb-uri {
+  flex: 1;
+  min-width: 280px;
+  padding: 10px 16px;
+  font-size: 14px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  color: white;
+  outline: none;
+  transition: all 0.2s ease;
+}
+#worldwideweb-uri::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+#worldwideweb-uri:focus {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+#worldwideweb-go {
+  padding: 10px 20px;
+  background: white;
+  color: #7C3AED;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+#worldwideweb-go:hover {
+  background: #f8f8f8;
+  transform: translateY(-1px);
+}
+`;
+
+// Load config
+let config = { port: 3012, width: 1200, height: 800 };
+try {
+  config = JSON.parse(readFileSync(join(__dirname, 'config.json'), 'utf8'));
+} catch (e) {
+  console.log('Using default config');
+}
+
+const PORT = config.port || 3012;
+let mainWindow;
+let server;
+
+async function startJSS() {
+  server = createServer({
+    mashlib: true,
+    mashlibCdn: false,
+    root: config.root || join(__dirname, 'data'),
+    logger: false
+  });
+
+  await server.listen({ port: PORT, host: 'localhost' });
+  console.log(`JSS running at http://localhost:${PORT}`);
+}
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: config.width || 1200,
+    height: config.height || 800,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true
+    }
+  });
+
+  // Simple menu
+  const menu = Menu.buildFromTemplate([
+    {
+      label: 'WorldWideWeb',
+      submenu: [
+        { label: 'Home', click: () => mainWindow.loadURL(`http://localhost:${PORT}/`) },
+        { type: 'separator' },
+        { label: 'Reload', accelerator: 'CmdOrCtrl+R', click: () => mainWindow.reload() },
+        { label: 'DevTools', accelerator: 'F12', click: () => mainWindow.webContents.toggleDevTools() },
+        { type: 'separator' },
+        { label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: () => app.quit() }
+      ]
+    }
+  ]);
+  Menu.setApplicationMenu(menu);
+
+  mainWindow.loadURL(`http://localhost:${PORT}/`);
+
+  // Inject address bar
+  const DEFAULT_URI = 'https://timbl.solidcommunity.net/profile/card#me';
+
+  mainWindow.webContents.on('did-finish-load', () => {
+    mainWindow.webContents.insertCSS(ADDRESS_BAR_CSS);
+    mainWindow.webContents.executeJavaScript(`
+      if (!document.getElementById('worldwideweb-nav')) {
+        const nav = document.createElement('div');
+        nav.id = 'worldwideweb-nav';
+        nav.innerHTML = \`
+          <label>Visiting</label>
+          <input type="text" id="worldwideweb-uri" placeholder="Enter a Solid URI..." value="${DEFAULT_URI}" />
+          <button id="worldwideweb-go">Go</button>
+        \`;
+        document.body.insertBefore(nav, document.body.firstChild);
+
+        const uriInput = document.getElementById('worldwideweb-uri');
+        const goBtn = document.getElementById('worldwideweb-go');
+
+        goBtn.addEventListener('click', () => {
+          window.location.href = uriInput.value;
+        });
+
+        uriInput.addEventListener('keyup', (e) => {
+          if (e.key === 'Enter') window.location.href = uriInput.value;
+        });
+
+        // Auto-navigate to default URI on first load
+        if (window.location.href.endsWith(':${PORT}/') || window.location.href.endsWith(':${PORT}')) {
+          setTimeout(() => {
+            window.location.href = '${DEFAULT_URI}';
+          }, 500);
+        }
+      }
+    `);
+  });
+
+  mainWindow.on('closed', () => { mainWindow = null; });
+}
+
+app.whenReady().then(async () => {
+  await startJSS();
+  createWindow();
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});
+
+app.on('activate', () => {
+  if (mainWindow === null) createWindow();
+});
+
+app.on('before-quit', async () => {
+  if (server) await server.close();
+});

package/package.json

@@ -1,35 +1,29 @@
 {
   "name": "worldwideweb",
-  "version": "0.0.20",
-  "description": "WorldWideWeb browser in JavaScript",
-  "main": "main.cjs",
+  "version": "0.0.21",
+  "description": "WorldWideWeb browser in JavaScript - JSS + mashlib in Electron",
+  "main": "main.js",
+  "bin": {
+    "worldwideweb": "./bin/worldwideweb.js"
+  },
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "electron .",
     "start": "electron ."
   },
-  "bin": {
-    "worldwideweb": "./run.js"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/melvincarvalho/worldwideweb.git"
   },
-  "keywords": [
-    "WorldWideWeb",
-    "Solid"
-  ],
+  "keywords": ["WorldWideWeb", "Solid", "browser", "jss", "mashlib", "electron"],
   "author": "Melvin Carvalho <melvincarvalho@gmail.com> (https://melvincarvalho.com/#me)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/melvincarvalho/worldwideweb/issues"
   },
   "homepage": "https://github.com/melvincarvalho/worldwideweb#readme",
-  "devDependencies": {
-    "electron": "^24.2.0"
-  },
   "dependencies": {
-    "path": "^0.12.7",
-    "url": "^0.11.0"
+    "electron": "^28.0.0",
+    "javascript-solid-server": "^0.0.81",
+    "mashlib-jss": "^0.1.1"
   }
 }