diff --git a/README.md b/README.md index 195976e2..154f47ac 100644 --- a/README.md +++ b/README.md @@ -1,43 +1,42 @@ -# ArchiveWeb.page Interactive Archiving Extension and Desktop App +

+
+ ArchiveWebpage +
+

-

+ArchiveWeb.page is a JavaScript based application for interactive, high-fidelity web archiving that runs directly in the browser. The system can be used as a Chrome/Chromium based browser extension and also as a standalone Electron app. -ArchiveWeb.page is a JavaScript based system for high-fidelity web archiving directly in the browser. -The system can be used as a Chrome/Chromium based browser extension and also as an Electron app. +The system creates, stores, and replays high-fidelity web archives stored directly in the browser's storage (via IndexedDB). -The system creates, stores and replays high-fidelity web archives stored directly in the browser (via IndexedDB). +For more detailed info on how to use the extension and standalone app, see the [ArchiveWeb.page User Guide](https://archiveweb.page/guide). -For more detailed info on how to use the extension (and the app when it is available), see the: [ArchiveWeb.page User Guide](https://archiveweb.page/guide) +The browser extension is available on the [Chrome Web Store](https://chrome.google.com/webstore/detail/webrecorder/fpeoodllldobpkbkabpblcfaogecpndd). -The initial app release is available on the [Releases page](https://github.com/webrecorder/archiveweb.page/releases) +Downloads for the desktop are are available on the [GitHub Releases page](https://github.com/webrecorder/archiveweb.page/releases). -### Architecture +## Architecture The extension makes use of the Chrome debugging protocol to capture and save network traffic, and extends the [ReplayWeb.page](https://github.com/webrecorder/replayweb.page) UI and the [wabac.js](https://github.com/ikreymer/wabac.js) service worker system for replay and storage. -The codebase for the extension and Electron app is shared, but they can be deployed in different ways. +The codebase for the extension and Electron app is shared, but they can both be deployed in different ways. +## Building for Development -### Requirements Building +To develop ArchiveWeb.page, install Node 12+ and Yarn. -To develop ArchiveWeb.page, Node 12+ and Yarn are needed. +### Install the Development Extension -## Using the Extension - -The production version of the extension is published to the [Chrome Web Store](https://chrome.google.com/webstore/detail/webrecorder/fpeoodllldobpkbkabpblcfaogecpndd) - -For development, the extension can be built locally and loaded as an unpacked extension. -If you want to make changes to the extension, it should be installed in this way. +For development, the extension can be built locally and loaded as an unpacked extension. If you want to make changes to the extension, do the following: 1. Clone this repo. Run `yarn install; yarn build-dev`. (You can also run `yarn build` to build the production version but it may be harder to debug). -3. Open the Chrome Extensions page (chrome://extensions). +3. Open the Chrome Extensions page ([chrome://extensions](chrome://extensions)). 4. Choose 'Load Unpacked Extension' and point to the `./dist/ext` directory in your local copy of this repo. 5. Click the extension icon to show the extension popup, start archiving, etc... -### Development Workflow +### Development Workflow (Extension) For development, it is recommended to use the dev build of the extension: @@ -49,10 +48,7 @@ For development, it is recommended to use the dev build of the extension: 4. Click the extension icon to show the extension popup, start recording, etc... The dev build of the extension will be grey to differntiate from the production version. - -## Using the Electron App (in beta) - -The Electron app version is in beta and the latest release can be downloaded from the [Releases page](https://github.com/webrecorder/archiveweb.page/releases) +### Using the Electron App To run the Electron app development build: @@ -63,18 +59,15 @@ To run the Electron app development build: 3. Run ``yarn run start-electron`` to start the app. The Electron App version will open recording in a new window. It is is designed to support Flash, better support for IPFS sharing. -However, it is still in development and may not work yet until the initial release is out. - -### Development workflow +### Development workflow (Electron App) After making changes, rerun ``yarn run build-dev`` and ``yarn run start-electron`` to load the app. -### Standalone Build +## Standalone Build To create a platform-specific binary, run: ``yarn run pack`` The standalone app will then be available in the `./dist/` directory. - diff --git a/assets/awp-logo.svg b/assets/awp-logo.svg deleted file mode 100644 index 1c7c4f8e..00000000 --- a/assets/awp-logo.svg +++ /dev/null @@ -1,85 +0,0 @@ - - diff --git a/assets/btrix-cloud.svg b/assets/btrix-cloud.svg deleted file mode 100644 index 5c7859d7..00000000 --- a/assets/btrix-cloud.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/webrecorder-text.svg b/assets/webrecorder-text.svg deleted file mode 100644 index d9bd8635..00000000 --- a/assets/webrecorder-text.svg +++ /dev/null @@ -1,202 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/wr-logo.svg b/assets/wr-logo.svg deleted file mode 100644 index e8acda3c..00000000 --- a/assets/wr-logo.svg +++ /dev/null @@ -1,85 +0,0 @@ - - diff --git a/build/icon.icns b/build/icon.icns index 49cfce93..029b34ad 100644 Binary files a/build/icon.icns and b/build/icon.icns differ diff --git a/build/icon.ico b/build/icon.ico new file mode 100755 index 00000000..f5c8becc Binary files /dev/null and b/build/icon.ico differ diff --git a/build/icon.png b/build/icon.png index 1a67eea7..917594e5 100644 Binary files a/build/icon.png and b/build/icon.png differ diff --git a/src/assets/brand/archivewebpage-icon-color.svg b/src/assets/brand/archivewebpage-icon-color.svg new file mode 100644 index 00000000..a450d9d1 --- /dev/null +++ b/src/assets/brand/archivewebpage-icon-color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/brand/archivewebpage-lockup-color-dynamic.svg b/src/assets/brand/archivewebpage-lockup-color-dynamic.svg new file mode 100644 index 00000000..c287f429 --- /dev/null +++ b/src/assets/brand/archivewebpage-lockup-color-dynamic.svg @@ -0,0 +1 @@ + diff --git a/src/assets/brand/archivewebpage-lockup-color.svg b/src/assets/brand/archivewebpage-lockup-color.svg new file mode 100644 index 00000000..2a2cf742 --- /dev/null +++ b/src/assets/brand/archivewebpage-lockup-color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/recLogo.svg b/src/assets/icons/recLogo.svg similarity index 100% rename from assets/recLogo.svg rename to src/assets/icons/recLogo.svg diff --git a/src/electron/rec-window.js b/src/electron/rec-window.js index 590f150c..aee3524a 100644 --- a/src/electron/rec-window.js +++ b/src/electron/rec-window.js @@ -8,7 +8,7 @@ import fasLeft from "@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg"; import fasRight from "@fortawesome/fontawesome-free/svgs/solid/arrow-right.svg"; //import fasMenuV from '@fortawesome/fontawesome-free/svgs/solid/ellipsis-v.svg'; -import wrLogo from "../../assets/wr-logo.svg"; +import awpLogo from "../assets/brand/archivewebpage-icon-color.svg"; import "./app-popup"; import { BEHAVIOR_RUNNING } from "../consts"; @@ -141,23 +141,23 @@ class RecWindowUI extends LitElement bottom: 0px; right: 0px; margin-right: -4px; - margin-bottom: -4px; - border: 1px solid black; - border-radius: 3px; + margin-bottom: -3px; + border: 2px solid white; + border-radius: 4px; font-size: 9px; color: white; } .overlay-idle { - background-color: #64e986; + background-color: #4D7C0F; } .overlay-waiting { - background-color: #bb9f08; + background-color: #C5A802; } .overlay-auto { - background-color: #3298dc; + background-color: #0891B2; } `); @@ -198,11 +198,11 @@ class RecWindowUI extends LitElement - + ${this.recording ? html` ${this.autorun ? html`` : !this.numPending ? html` - ` : html` + ✓` : html` ${this.numPending} `}` : ""} diff --git a/src/ext/bg.js b/src/ext/bg.js index 6c9838c9..5ab94c8a 100644 --- a/src/ext/bg.js +++ b/src/ext/bg.js @@ -27,7 +27,7 @@ const disabledCSPTabs = new Set(); // =========================================================================== function main() { - chrome.action.setBadgeBackgroundColor({color: "#64e986"}); + chrome.action.setBadgeBackgroundColor({color: "#4D7C0F"}); chrome.contextMenus.create({"id": "toggle-rec", "title": "Start Recording", "contexts": ["browser_action"]}); chrome.contextMenus.create({"id": "view-rec", "title": "View Web Archives", "contexts": ["all"]}); diff --git a/src/ext/browser-recorder.js b/src/ext/browser-recorder.js index a73b980c..b27b9b9d 100644 --- a/src/ext/browser-recorder.js +++ b/src/ext/browser-recorder.js @@ -186,27 +186,27 @@ class BrowserRecorder extends Recorder { if (this.running) { if (this.behaviorState === BEHAVIOR_RUNNING) { title = "Archiving: Autopilot Running!"; - color = "#3298dc"; - text = " "; + color = "#0891B2"; + text = ""; } else if (this.numPending === 0) { title = "Archiving: No URLs pending, can continue"; - color = "#64e986"; - text = " "; + color = "#4D7C0F"; + text = "✓"; } else { title = `Archiving: ${this.numPending} URLs pending, please wait`; - color = "#bb9f08"; + color = "#C5A802"; text = "" + this.numPending; } } else if (this.failureMsg) { title = "Error: Can't Archive this page"; text = "X"; - color = "#F00"; + color = "#D30808"; } else { title = "Not Archiving"; text = ""; - color = "#64e986"; + color = "#4D7C0F"; } chrome.action.setTitle({title, tabId}); diff --git a/src/popup.js b/src/popup.js index c3a14f05..41c30d94 100644 --- a/src/popup.js +++ b/src/popup.js @@ -12,7 +12,7 @@ import fasCheck from "@fortawesome/fontawesome-free/svgs/solid/check.svg"; import fasX from "@fortawesome/fontawesome-free/svgs/solid/times.svg"; import fasCaretDown from "@fortawesome/fontawesome-free/svgs/solid/caret-down.svg"; -import wrRec from "../assets/recLogo.svg"; +import wrRec from "./assets/icons/recLogo.svg"; import prettyBytes from "pretty-bytes"; diff --git a/src/static/icon-dev.png b/src/static/icon-dev.png index 0b9956d6..d701bf38 100644 Binary files a/src/static/icon-dev.png and b/src/static/icon-dev.png differ diff --git a/src/static/icon.png b/src/static/icon.png index a9e7c7e2..301ae4c1 100644 Binary files a/src/static/icon.png and b/src/static/icon.png differ diff --git a/src/static/replayIcon.png b/src/static/replayIcon.png deleted file mode 100644 index cc565c8c..00000000 Binary files a/src/static/replayIcon.png and /dev/null differ diff --git a/src/ui/app.js b/src/ui/app.js index 4f941002..2fe5e566 100644 --- a/src/ui/app.js +++ b/src/ui/app.js @@ -18,8 +18,9 @@ import "./recordembed"; import { BtrixClient } from "./upload"; -import wrRec from "../../assets/recLogo.svg"; -import wrLogo from "../../assets/awp-logo.svg"; +import wrRec from "../assets/icons/recLogo.svg"; +import awpLogo from "../assets/brand/archivewebpage-icon-color.svg"; +import awpBrandLockupColor from "../assets/brand/archivewebpage-lockup-color.svg"; import prettyBytes from "pretty-bytes"; import { create as createAutoIpfs, DaemonAPI, Web3StorageAPI } from "auto-js-ipfs"; @@ -340,8 +341,9 @@ class ArchiveWebApp extends ReplayWebApp `); } + // HACK: returns the logo requested by ReplayWeb.page's nav as nothing now that the new logo includes both graphics and text. Probably best to refactor this behavior. get mainLogo() { - return wrLogo; + return ""; } renderNavEnd() { @@ -355,11 +357,13 @@ class ArchiveWebApp extends ReplayWebApp renderNavBrand() { return html` - - archive - web.page - Home - `; + `; } renderHomeIndex() { @@ -642,7 +646,7 @@ class ArchiveWebApp extends ReplayWebApp
- +
${this.getDeployType()} v${VERSION}
diff --git a/src/ui/coll-info.js b/src/ui/coll-info.js index c4e2d5f0..e199f374 100644 --- a/src/ui/coll-info.js +++ b/src/ui/coll-info.js @@ -11,11 +11,10 @@ import fasCaretUp from "@fortawesome/fontawesome-free/svgs/solid/caret-up.svg"; import fasShare from "@fortawesome/fontawesome-free/svgs/solid/share.svg"; import fasReshare from "@fortawesome/fontawesome-free/svgs/solid/retweet.svg"; import fasX from "@fortawesome/fontawesome-free/svgs/solid/times.svg"; - -import btrixCloud from "../../assets/btrix-cloud.svg"; +import fasCloudArrowUp from "@fortawesome/fontawesome-free/svgs/solid/cloud-upload-alt.svg"; import { CollInfo } from "replaywebpage"; -import wrRec from "../../assets/recLogo.svg"; +import wrRec from "../assets/icons/recLogo.svg"; const REPLAY_URL = "https://replayweb.page/"; @@ -164,7 +163,7 @@ class WrRecCollInfo extends CollInfo

Actions

- + @@ -289,7 +288,7 @@ class WrRecCollInfo extends CollInfo return html`
- diff --git a/src/ui/coll.js b/src/ui/coll.js index f42b0cf0..04fd2941 100644 --- a/src/ui/coll.js +++ b/src/ui/coll.js @@ -5,7 +5,7 @@ import fasDownload from "@fortawesome/fontawesome-free/svgs/solid/download.svg"; import prettyBytes from "pretty-bytes"; import { Coll } from "replaywebpage"; -import wrRec from "../../assets/recLogo.svg"; +import wrRec from "../assets/icons/recLogo.svg"; //============================================================================ @@ -143,4 +143,4 @@ class WrRecColl extends Coll customElements.define("wr-rec-coll", WrRecColl); -export { WrRecColl }; \ No newline at end of file +export { WrRecColl }; diff --git a/src/ui/recordembed.js b/src/ui/recordembed.js index fa6f5f0a..06996222 100644 --- a/src/ui/recordembed.js +++ b/src/ui/recordembed.js @@ -1,7 +1,7 @@ import { Embed } from "replaywebpage"; -import awpLogo from "../../assets/awp-logo.svg"; +import awpLogo from "../assets/brand/archivewebpage-icon-color.svg"; // =========================================================================== Embed.setDefaultReplayFile("replay.html");