LICENSE.md

@@ -0,0 +1,8 @@
+Copyright 2018 Ryan Patterson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

README.md

@@ -10,11 +10,30 @@ Chronicler is an offline-first web browser. Chronicler works as your own persona
 [![Introduction to Chronicler video](https://img.youtube.com/vi/MxEqFmjsZFw/maxresdefault.jpg)](https://youtu.be/MxEqFmjsZFw)
 
 ## Getting Started
-Download the latest version from the [releases page](https://github.com/CGamesPlay/chronicler/releases).
+**macOS:** You can download the latest version from the [releases page](https://github.com/CGamesPlay/chronicler/releases).
 
-**⚠️ Warning:** Chronicler is stable but very early in development. Many features you might expect from a web browser have not yet been implemented. Your feedback is welcomed!
+**Other platforms:** Currently binary releases are published and tested for macOS only. If you are interested in testing another platform, please get in touch!
+
+### ⚠️ Early development warning
+
+Chronicler is functional but very early in development. Many features you might expect from a web browser have not yet been implemented. Your feedback is welcomed! Some features that have not yet been implemented include:
+
+- Keyboard shortcuts for everything (back/forward, open location, new tab).
+- Find in page.
+- Importing and exporting WARC files for interoperability.
+- Collections of pages, to restrict searching and manage disk space.
 
 ### Contributing
 
 Thanks for your interest in contributing! 🙌 There are many ways to contribute to Chronicler. Get started [here](CONTRIBUTING.md).
 
+## Credits
+
+Chronicle is provided under the MIT license and is built using open source software. The `package.json` file lists the software that was used to build Chronicle.
+
+### Inspiration and alternatives
+
+If you like the idea of Chronicler, you might also be interested in:
+
+- [wget](https://www.gnu.org/software/wget/) can [mirror websites](https://www.petekeen.net/archiving-websites-with-wget) with some configuration.
+- [Webrecorder](https://webrecorder.io) provides a cloud-based solution to web archiving, and a separate offline viewer program.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chronicler",
   "description": "An offline-first web browser",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": {
     "name": "Ryan Patterson",
     "email": "ry@cgamesplay.com"
@@ -32,6 +32,7 @@
     "classnames": "^2.2.6",
     "formik": "^1.4.1",
     "into-stream": "^4.0.0",
+    "javascript-time-ago": "^2.0.1",
     "knex": "^0.16.3",
     "objection": "^1.4.0",
     "react": "^16.6.3",

src/main/App.js

@@ -109,6 +109,10 @@ if (process.platform === "darwin") {
   ];
 }
 
+if (isDevelopment) {
+  menuTemplate[2].submenu.push({ role: "toggledevtools" });
+}
+
 export default class App extends EventEmitter {
   id: string;
   chromeHeight: number;
@@ -203,16 +207,17 @@ export default class App extends EventEmitter {
     this.window.webContents.send(CHROME_MESSAGE, { type, payload });
   }
 
-  newTab() {
+  newTab(initialUrl: ?string): Tab {
     const tab = new Tab(this, Tab.nextTabId());
     this.tabs.push(tab);
     this.activeTab = tab;
     tab.on(TAB_UPDATE, this.handleTabUpdate);
     tab.on(TAB_CLOSE, this.handleTabClose);
-    tab.loadURL(newTabUrl);
+    tab.loadURL(initialUrl || newTabUrl);
     tab.setIpcHandler(this.handleContentIpc);
     this.updateActiveTab();
     this.sendChromeMessage(TAB_UPDATE, tab.toJSON());
+    return tab;
   }
 
   isRecording(): boolean {

src/main/ElectronRequestConnector.js

@@ -30,7 +30,14 @@ export default class ElectronRequestConnector {
         if (contentLength > 0) {
           headers = { ...headers, "Content-Length": contentLength };
         }
-        const request = { ...electronRequest, headers, uploadData: stream };
+        // Drop the fragment identifier from the request
+        const url = electronRequest.url.replace(/#.*/, "");
+        const request = {
+          ...electronRequest,
+          url,
+          headers,
+          uploadData: stream,
+        };
         return this.networkAdapter.request(request);
       })
       .then(callback)

src/main/Tab.js

@@ -1,5 +1,5 @@
 // @flow
-import { BrowserView, Menu } from "electron";
+import { BrowserView, Menu, clipboard, shell } from "electron";
 import EventEmitter from "events";
 import * as path from "path";
 
@@ -14,8 +14,8 @@ declare var __static: string;
 type ContextMenuRequest = {
   x: number,
   y: number,
-  linkURL?: string,
-  linkText?: string,
+  linkURL: string,
+  linkText: string,
   pageURL: string,
   frameURL: string,
   srcURL?: string,
@@ -53,6 +53,8 @@ type IpcHandler = (message: any) => Promise<any>;
 
 const chromeErrorUrl = "chrome-error://chromewebdata/";
 
+const dropFragment = (url: string): string => url.replace(/#.*/, "");
+
 // Keeps track of URL and title changes in the context of a single navigation.
 class PageTracker {
   archive: Archive;
@@ -72,7 +74,7 @@ class PageTracker {
   ) {
     this.archive = archive;
     this.collectionId = collectionId;
-    this.rootUrl = rootUrl;
+    this.rootUrl = dropFragment(rootUrl);
     this.currentPageId = this.rootPageId = this.collectionId.then(
       collectionId =>
         this.archive.upsertPage({
@@ -83,7 +85,8 @@ class PageTracker {
     );
   }
 
-  trackInPageNavigation(url: string, title: string) {
+  trackInPageNavigation(originalUrl: string, title: string) {
+    const url = dropFragment(originalUrl);
     this.rootPageId.then(id => {
       this.currentPageId = this.collectionId.then(collectionId =>
         this.archive.upsertPage({
@@ -155,6 +158,7 @@ export default class Tab extends EventEmitter {
       this.handleInPageNavigation,
     );
     this.view.webContents.on("context-menu", this.handleContextMenu);
+    this.view.webContents.on("new-window", this.handleNewWindow);
   }
 
   close() {
@@ -313,6 +317,8 @@ export default class Tab extends EventEmitter {
         .then(({ command, payload }) => {
           if (command === "open-url") {
             this.loadURL(payload);
+          } else if (command === "open-external") {
+            shell.openExternal(payload);
           } else if (command === "start-recording") {
             this.app.handleRequestNetworkMode({ mode: "record" });
           } else {
@@ -325,8 +331,25 @@ export default class Tab extends EventEmitter {
   handleContextMenu = (event: any, request: ContextMenuRequest) => {
     const menu = Menu.buildFromTemplate([
       {
-        label: "Open Developer Tools",
-        click: () => this.openDevTools(),
+        label: "Open Link in New Tab",
+        visible: request.linkURL.length > 0,
+        click: () => this.app.newTab(request.linkURL),
+      },
+      {
+        label: "Open Link in Default Browser",
+        visible: request.linkURL.length > 0,
+        click: () => shell.openExternal(request.linkURL),
+      },
+      { type: "separator" },
+      {
+        label: "Copy Link",
+        visible: request.linkURL.length > 0,
+        click: () => clipboard.writeBookmark(request.linkText, request.linkURL),
+      },
+      { type: "separator" },
+      {
+        label: "Inspect Element",
+        click: () => this.view.webContents.inspectElement(request.x, request.y),
       },
     ]).popup({
       window: this.view,
@@ -335,6 +358,17 @@ export default class Tab extends EventEmitter {
     });
   };
 
+  handleNewWindow = (
+    e: any,
+    url: string,
+    frameName: string,
+    disposition: string,
+  ) => {
+    e.preventDefault();
+    const tab = this.app.newTab(url);
+    e.newGuest = tab.view;
+  };
+
   installIpcServer(webContents: any) {
     const advanceQueue = (arg: any) =>
       webContents.executeJavaScript(

src/main/index.js

@@ -30,6 +30,8 @@ app.on("activate", () => {
   // been closed
   if (mainApp === null) {
     createMainApp();
+  } else {
+    mainApp.window.show();
   }
 });
 

src/renderer/ErrorPage.js

@@ -23,6 +23,11 @@ const ErrorPage = ({ url, code, error, onResolve }: Props) => {
         Go online
       </a>,
     );
+    actions.push(
+      <a onClick={() => onResolve({ command: "open-external", payload: url })}>
+        Open in default browser
+      </a>,
+    );
     actions.push(
       <a
         onClick={() =>

src/renderer/UrlBar.js

@@ -77,16 +77,18 @@ export default class UrlBar extends React.PureComponent<Props, State> {
       if (inputEl) {
         inputEl.value = displayedUrl(this.props.url);
       }
-    } else {
-      this.setState({ isEditing: true });
     }
   };
 
-  handleClick = (event: Event) => {
+  handleChange = (e: Event) => {
+    this.setState({ isEditing: true });
+  };
+
+  handleFocus = (event: Event) => {
     const inputEl = this.urlInput;
     if (!inputEl) return;
     event.preventDefault();
-    inputEl.select();
+    setTimeout(() => inputEl.select(), 10);
   };
 
   handleBlur = (event: Event) => {
@@ -106,7 +108,8 @@ export default class UrlBar extends React.PureComponent<Props, State> {
               "is-primary": this.state.isEditing,
             })}
             onKeyDown={this.handleKeyPress}
-            onClick={this.handleClick}
+            onChange={this.handleChange}
+            onFocus={this.handleFocus}
             onBlur={this.handleBlur}
           />
         </form>

src/renderer/components/Timestamp.js

@@ -1,29 +1,10 @@
 // @flow
 import * as React from "react";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
 
-const relativeString = (msec: number): string => {
-  let secs = msec / 1000;
-  let append = "";
-  if (secs < 0) {
-    append = " ago";
-    secs *= -1;
-  }
-  let approx;
-  if (secs < 60) {
-    approx = "<1m";
-  } else if (secs < 3600) {
-    approx = `${Math.round(secs / 60)}m`;
-  } else if (secs < 86400) {
-    approx = `${Math.round(secs / 3600)}h`;
-  } else if (secs < 604800) {
-    approx = `${Math.round(secs / 86400)}d`;
-  } else if (secs < 22896000) {
-    approx = `${Math.round(secs / 604800)}w`;
-  } else {
-    approx = `${Math.round(secs / 22896000)}y`;
-  }
-  return approx + append;
-};
+TimeAgo.addLocale(en);
+const timeAgo = new TimeAgo("en-US");
 
 type Props = {
   value: string,
@@ -33,9 +14,7 @@ type Props = {
 const Timestamp = ({ value, format }: Props) => {
   const date = new Date(value);
   const formatted =
-    format === "date"
-      ? date.toLocaleDateString()
-      : relativeString(date - new Date());
+    format === "date" ? date.toLocaleDateString() : timeAgo.format(date);
   return <span title={date.toLocaleString()}>{formatted}</span>;
 };
 

yarn.lock

@@ -4225,6 +4225,13 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
+javascript-time-ago@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/javascript-time-ago/-/javascript-time-ago-2.0.1.tgz#11c85cac73f68eebf0256c9b1610e2ce2f429972"
+  integrity sha512-ec5m6x3eh2MloVvSd6Yy9ShqeQmWHl4GaKSZNF4UlRhqGMdxPtsAAjkhUmO/PHk7c13R8yfkSygNZkdi4QpBww==
+  dependencies:
+    relative-time-format "^0.1.3"
+
 js-base64@^2.1.9:
   version "2.4.9"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.9.tgz#748911fb04f48a60c4771b375cac45a80df11c03"
@@ -6295,6 +6302,11 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+relative-time-format@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/relative-time-format/-/relative-time-format-0.1.3.tgz#d50f49d13f97c7f801afba600b1a4a0890755df2"
+  integrity sha512-0O6i4fKjsx8qhz57zorG+LrIDnF9pSvP5s7H9R1Nb5nSqih5dvRyKzNKs6MxhL3bv4iwsz4DuDwAyw+c47QFIA==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"