* Placeholder color contrast @ WCAG 2.0 level AA * Trailing whitespace removed. * Remove redundant labels. * Logo is a link in mobile, if not-embedded; otherwise, span. Fix link labels. * HREF mandatory on A; menu behaves like a popup button. * Hide icons from screen readers. * About icon id keyboard-operarable and is labeled. * Note about inaccessible modal. * Missing closing tag. * Fix nesting/indentation. * Fix nesting/indentation; add missing closing tag. * Trailing whitespace removed. * Don't use NAV landmark for non-nav; add heading for page structure. * Hide icon. * Load archive form's buttons visibly receive keyboard focus. * Trailing whitespace removed. * "Hide" header button is keyboard-operable, and more-verbosely labeled for screenreader users. * Don't use NAV landmark for non-nav; add heading for page structure. * Sort order announced to screen reader users. * Trailing whitespace removed. * Delete button only a button when it can be pressed; announce in progress deletion. * Trailing whitespace removed. * Use a NAV landmark for replay controls. * Remove "menu" role, to avoid having to implement arrow key support https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus * Hide icons. * Label buttons. * Links in disguise as buttons need HREF, and to respond to spacebar. * Re-dub "main menu" to distinguish from replay menu * Replay nav buttons visually get keyboard focus. * Trailing whitespace removed. * Hiding icons; button labels; links-as-buttons are operable. * Use type=search for additional clarity. * Add appropriate landmarks and a heading for structure and clarity. * Tab selection is a nav, and is keyboard operable. * Indentation; missing closing tag. * Trailing whitespace removed. * Title iframe. * Not a navigation. * Per discussion, rename tab to "URLs" (label only; route etc. the same while experimenting). * Announce when expanded/collapsed. * Remove "menu" to avoid having to implement expected keyboard support. * Use correct heading level when in sidebar and when main. * Trailing whitespace removed. * Semantic markup of table; headings and captions; link-buttons are keyboard operable. * Skip links for keyboard users. * Title iframe; hide icon. * Just a list, not an aside. * Not an article. * Remove trailing whitespace. * Make each page in the list a heading. * link-buttons are keyboard operable. * Use semantic list for page list. * Announce changes to search results. * More wayfinding tweaks. * Landmark and heading for replay. * Dynamic page titles. * Remove redundant labels from main landmarks. * additional tweaks after rebase - add 'role' to each of the tabs, dependent if sidebar or not - add 'role=main' for replay - add sr-only headers to each tab * fix typos * remaining tweaks: - url-resources: fix sorter getting moved into notification - url-resources: fix border for mobile view - add screenreader labels to expand/hide buttons * Show hover effect on focus. * Wrap the whole sidebar is role=complementary, including the tab navigation. * Make buttons keyboard operable; fix typos. * Programmatically associate sidebar toggle button with sidebar. * Per discusson, try calling this "URLs" * Different heading levels for sidebar and main. * Announce changes to search results. * Correct dynamic page title, whe not in sidebar. * Remove hyperlink focus decoration; reveal obscured focus indicator. * Focus on replay, when replay changes. * Make buttons keyboard operable. * Move spacebar helper to misc instead of duplicating. * Bump compiled assets. * Use disabled attribute to match css; update label to describe new sidebar. * Adjust replay focus styles. * Adjust replay nav button focus, so visuals onclick in Chrome are less prominent. * Put wordmark with logo on non-embed desktop, so that logo and wordmark make a single link. Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>
ReplayWeb.page
Serverless Web Archive Replay
ReplayWeb.page provides a full web archive replay system running directly in the browser, available at: https://replayweb.page/
For full user docs, see: https://replayweb.page/docs
The ReplayWeb.page App can be downloaded from the Releases page.
Embedding Guide
See the Embedding Guide for more info on embedding web archives in other sites.
What's in this repo
ReplayWeb.page is a static web site / offline web app + Electron app.
This repository contains the frontend UI for the replay system, while the backend is provided via a service worker implementation found at: https://github.com/webrecorder/wabac.js
The frontend is loaded from ui.js, while the backend service/web worker is loaded from sw.js.
This repository contains:
- The built assets for the site hosted at https://replayweb.page/ via GitHub Pages
- The package for npm module: https://www.npmjs.com/package/replaywebpage
- A build system for https://replayweb.page and ReplayWeb.page App.
- Docs hosted at: https://replayweb.page/docs
- App releases at: https://github.com/webrecorder/replayweb.page/releases
How to Use This Repo
ReplayWeb.page is built as a Node package can be installed using yarn:
yarn install
It is also a Jekyll site for use with GitHub pages. Jekyll is only needed to build the docs.
The package provides various commands that can be used with yarn:
-
yarn run start-dev- to run in dev mode with Webpack dev server on port 9990. Autobuilds dev assets. -
yarn run build- to build production assets sw.js, ui.js -
yarn run start-prod- to run production site on port 9990, with previously built assets -
yarn run start-electron- to start electron in dev mode, with previously built assets -
yarn run dist- to build production assets + Electron app (in dist/) -
yarn run build-docs- to build the Jekyll docs (for local use) and run Jekyll. Requires Ruby. -
yarn run start-jekyll- to build Jekyll docs and start Jekyll static server on port 4000.
The static assets are placed in the root index.html, sw.js and ui.js, and can be used with any HTTP server.
For service workers to work, they must be served from either localhost or an HTTPS endpoint.
See the user docs for additional info about using ReplayWeb.page
LICENSE
ReplayWeb.page is made available under the AGPLv3 License.
If you would like to use it under a different license or have a question, please reach out as that may be a possibility.
Contributing and Bug Reports
Contributions are definitely welcome!
As this is still a new project and rapidly evolving, please open an issue first before submitting a pull request.