Changed style of welcome page, persist windows on close

Author: RangerMauve

README.md

@@ -47,6 +47,7 @@ PRs for more protocols are welcome.
 - Basic navigation bar (`ctrl+l` to bring into focus)
 - Dev tools (`ctrl+shift+i`)
 - Autocomplete URLs from history (type in the URL bar)
+- Persist open windows when quitting
 - Basic Chrome Extension support (hardcoded into the source for now)
 
 ![Agregore demo](agregore-demo-1.gif)
@@ -75,12 +76,15 @@ This project uses the [StandardJS](https://standardjs.com/) code style. Please f
 		- [x] `ctrl+[` and `ctrl+]` for navigating history
 		- [x] `ctrl+l` for selecting the navigation bar
 	- [ ] saveAs context menu (using fetch and fs.createWriteStream())
-	- [ ] Persist windows on application quit
+	- [x] Persist windows on application quit
 - [ ] fetch API for hyperdrives [GH issue](https://github.com/cliqz-oss/dat-webext/issues/159)
 	- [ ] Creating an archive (scoped to page origin)
 	- [ ] PUT/DELETE methods for files / folders
 	- [ ] Track created archives for origin in a DB
 	- [ ] Access control prompt for writing to origin
+- [ ] Sync folder with hyperdrive
+	- [ ] Sync from folder to hyperdrive
+	- [ ] Sync to folder from hyperdrive
 - [ ] Better browser history
 	- [x] As an extension?
 	- [x] Save history to a DB
@@ -106,6 +110,8 @@ This project uses the [StandardJS](https://standardjs.com/) code style. Please f
 	- [ ] Developer options page
 	- [ ] Track extensions in a DB
 	- [ ] Drag and drop extension folder
+- [ ] Password / Account management for web pages [using native OS APIs](https://github.com/atom/node-keytar)
+- [ ] Private browsing mode
 - [ ] PWA support
 	- [x] Service Workers (Free with Electron)
 	- [ ] Install web page to desktop

app/main.js

@@ -2,7 +2,7 @@ const { app, BrowserWindow, session } = require('electron')
 
 const protocols = require('./protocols')
 const { registerMenu } = require('./menu')
-const { createWindow } = require('./windows')
+const { createWindow, saveOpen, loadFromHistory } = require('./windows')
 const { registerExtensions } = require('./extensions')
 const history = require('./history')
 
@@ -43,6 +43,10 @@ app.on('activate', () => {
   }
 })
 
+app.on('before-quit', () => {
+  saveOpen()
+})
+
 async function onready () {
   const webSession = session.fromPartition(WEB_PARTITION)
 
@@ -56,5 +60,8 @@ async function onready () {
 
   const urls = process.argv.filter((arg) => arg.includes('://'))
   if (urls.length) urls.map(createWindow)
-  else createWindow()
+  else {
+    const opened = await loadFromHistory()
+    if (!opened.length) createWindow()
+  }
 }

app/pages/welcome.html

@@ -8,45 +8,42 @@
 <meta name="mobile-web-app-capable" content="yes">
 
 <style>
-	body {
-		margin: 0 auto;
-		max-width: 666px;
-		padding: 1em;
-	}
-	header {
-		text-align: center;
+	body, html {
+		display: flex;
+		flex: 1;
+		margin: 0px;
+		padding: 0px;
+		width: 100%;
+		height: 100%;
+		flex-direction: column;
+    justify-content: center;
+    align-items: center;
 	}
 	img {
-		width: 8em;
+		width: 40vmin;
+	}
+	a::before, a::after {
+    content: " ⟐ "
+	}
+	a {
+    margin: 0.1em;
 	}
 </style>
 
-<header>
 <img src="agregore-browser://icon.svg" />
 
 <h1>
 Agregore
 </h1>
 
-</header>
-
 <p>
-Check out some of these dweb links.
-</p>
-
-<ul>
- <li>
-	 <a href="hyper://94f0cab7f60fcc2a711df11c85db5e0594d11e8a3efd04a06f46a3c34d03c418/">
+	<a href="hyper://94f0cab7f60fcc2a711df11c85db5e0594d11e8a3efd04a06f46a3c34d03c418/">
 		Mauve's Blog
-	 </a>
- </li>
- <li>
-	 <a href="dat://dat.foundation/">
-		Dat Foundation Blog
-	 </a>
- </li>
-</ul>
-
-<p>
-	Otherwise, try entering a <code>hyper://</code> or <code>dat://</code> URL in the address bar.
+	</a>
+	<a href="dat://dat.foundation/">
+		Dat Foundation
+	</a>
+	<a href="hyper://a8109b835d27c30ad4d55b321dd7c4032c037eaf1f6f2b00de7b03b5a6cc504a/">
+		Hypercore Protocol
+	</a>
 </p>

app/protocols/browser-protocol.js

@@ -18,8 +18,8 @@ module.exports = async function createHandler () {
     const parsed = new URL(url)
     console.debug('Rendering browser page', url)
 
-		const {pathname, hostname} = parsed
-		const toResolve = path.join(hostname, pathname)
+    const { pathname, hostname } = parsed
+    const toResolve = path.join(hostname, pathname)
     try {
       const resolvedPath = await resolveFile(toResolve)
       const statusCode = 200

app/ui/script.js

@@ -46,7 +46,7 @@ frontbutton.addEventListener('click', () => {
 webview.addEventListener('did-start-navigation', ({ detail }) => {
   const url = detail[1]
   const isMainFrame = detail[3]
-  if(!isMainFrame) return
+  if (!isMainFrame) return
   urlbar.value = url
   if (firstLoad && (toNavigate === DEFAULT_PAGE)) {
     urlbar.focus()

app/windows.js

@@ -1,22 +1,28 @@
+const { app } = require('electron')
 const { BrowserWindow } = require('electron')
 const { resolve } = require('path')
 const { headerContextMenu } = require('./ui/context-menus')
+const fs = require('fs-extra')
+const path = require('path')
 
 const MAIN_PAGE = resolve(__dirname, './ui/index.html')
+const PERSIST_FILE = path.join(app.getPath('userData'), 'lastOpened.json')
 
 module.exports = {
-  createWindow
+  createWindow,
+  loadFromHistory,
+  saveOpen
 }
 
+const openWindows = new Set()
+
 function createWindow (url, options = {}) {
   // Create the browser window.
   const win = new BrowserWindow({
-    width: 800,
-    height: 600,
     autoHideMenuBar: true,
     webPreferences: {
       nodeIntegration: true,
-      webviewTag: true
+      webviewTag: false
     },
     show: false,
     ...options
@@ -37,4 +43,48 @@ function createWindow (url, options = {}) {
   if (process.env.MODE === 'debug') {
     win.webContents.openDevTools()
   }
+
+  openWindows.add(win)
+
+  win.once('closed', () => {
+    openWindows.delete(win)
+  })
+}
+
+function saveOpen (file = PERSIST_FILE) {
+  const urls = getToSave()
+
+  fs.outputJsonSync(file, urls)
+}
+
+function getToSave () {
+  const currentlyOpen = [...openWindows]
+
+  const urls = currentlyOpen.map((win) => {
+    const view = win.getBrowserView() || win
+    return view.webContents.getURL()
+  })
+
+  if (urls.length === 1) return []
+  return urls
+}
+
+async function loadFromHistory (file = PERSIST_FILE) {
+  const urls = await getHistory(file)
+
+  for (const url of urls) {
+    createWindow(url)
+  }
+
+  return urls
+}
+
+async function getHistory (file = PERSIST_FILE) {
+  try {
+    const urls = await fs.readJson(file)
+    return urls
+  } catch (e) {
+    console.error(e.stack)
+    return []
+  }
 }