MKDocs conversion (#278)
Closes #252, Closes #250 ## Changes - ReplayWeb.page uses MKDocs for documentation now! - Requires both [`mkdocs-macros`](https://mkdocs-macros-plugin.readthedocs.io/en/latest/) and [`mkdocs-redirects`] (https://github.com/mkdocs/mkdocs-redirects) plugins to be installed - Redirects existing docs pages to their new locations under either `/embedding` or `/user-guide` - Unused images have been removed - Adds new ReplayWeb.page branding! All pages have received copy edits. All references to future (or previously) planned features have been removed. More major content changes of note are as follows: ### Supported Locations - Made into a page, no longer a table. Locations are either supported or not listed. ### Offline Use - Removes browser cache section, adds improved PWA install and uninstall instructions. - Removes navigation instructions to GitHub's releases section in favour of a link ### Supported Formats - Moved to the User Guide homepage - Updated the format support ### Exploring Archives - Example links for showcasing features have been moved to their respective feature documentation section on this page ### Remove Usage, Examples, and Troubleshooting Pages - Usage content is covered in the user guide index - Troubleshooting content has been added to a question section on the getting started page about WARC vs WACZ. - Examples are now Featured Projects on the docs homepage! ### Build Process - Removes Jekyll & related site assets. - Adds new GitHub action for publishing - Adds a python macro to dynamically load the replayweb.page version from package.json - Relocates replayweb.page site content under /site (including docs) - Some assets (favicon, logo) and sw.js/ui.js automatically copied into /site --------- Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>
This commit is contained in:
Henry Wilkinson
co-authored by
Ilya Kreymer
Ilya Kreymer
parent
d276609ffe
commit
a4de740999
@@ -1,86 +0,0 @@
|
|||||||
name: Deploy Jekyll + Webpack build to Pages
|
|
||||||
|
|
||||||
on:
|
|
||||||
# Runs on pushes targeting the default branch
|
|
||||||
push:
|
|
||||||
branches: ["main"]
|
|
||||||
|
|
||||||
# Allows you to run this workflow manually from the Actions tab
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
pages: write
|
|
||||||
id-token: write
|
|
||||||
|
|
||||||
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
|
|
||||||
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
|
|
||||||
concurrency:
|
|
||||||
group: "pages"
|
|
||||||
cancel-in-progress: false
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
# Build job
|
|
||||||
build:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- name: Checkout
|
|
||||||
uses: actions/checkout@v3
|
|
||||||
- name: Detect package manager
|
|
||||||
id: detect-package-manager
|
|
||||||
run: |
|
|
||||||
if [ -f "${{ github.workspace }}/yarn.lock" ]; then
|
|
||||||
echo "manager=yarn" >> $GITHUB_OUTPUT
|
|
||||||
echo "command=install" >> $GITHUB_OUTPUT
|
|
||||||
echo "runner=yarn" >> $GITHUB_OUTPUT
|
|
||||||
exit 0
|
|
||||||
elif [ -f "${{ github.workspace }}/package.json" ]; then
|
|
||||||
echo "manager=npm" >> $GITHUB_OUTPUT
|
|
||||||
echo "command=ci" >> $GITHUB_OUTPUT
|
|
||||||
echo "runner=npx --no-install" >> $GITHUB_OUTPUT
|
|
||||||
exit 0
|
|
||||||
else
|
|
||||||
echo "Unable to determine package manager"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
- name: Setup Node
|
|
||||||
uses: actions/setup-node@v3
|
|
||||||
with:
|
|
||||||
node-version: "18"
|
|
||||||
cache: ${{ steps.detect-package-manager.outputs.manager }}
|
|
||||||
- name: Setup Pages
|
|
||||||
uses: actions/configure-pages@v3
|
|
||||||
- name: Restore cache
|
|
||||||
uses: actions/cache@v3
|
|
||||||
with:
|
|
||||||
path: |
|
|
||||||
index.html
|
|
||||||
ui.js
|
|
||||||
node_modules/.cache/webpack/
|
|
||||||
key: ${{ runner.os }}-webpack-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('index.html', 'ui.js') }}
|
|
||||||
restore-keys: |
|
|
||||||
${{ runner.os }}-webpack-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
|
|
||||||
- name: Install dependencies
|
|
||||||
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
|
|
||||||
- name: Build with Webpack
|
|
||||||
run: ${{ steps.detect-package-manager.outputs.runner }} build
|
|
||||||
- name: Build with Jekyll
|
|
||||||
uses: actions/jekyll-build-pages@v1
|
|
||||||
with:
|
|
||||||
source: ./
|
|
||||||
destination: ./_site
|
|
||||||
- name: Upload artifact
|
|
||||||
uses: actions/upload-pages-artifact@v2
|
|
||||||
|
|
||||||
# Deployment job
|
|
||||||
deploy:
|
|
||||||
environment:
|
|
||||||
name: github-pages
|
|
||||||
url: ${{ steps.deployment.outputs.page_url }}
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
needs: build
|
|
||||||
steps:
|
|
||||||
- name: Deploy to GitHub Pages
|
|
||||||
id: deployment
|
|
||||||
uses: actions/deploy-pages@v2
|
|
||||||
@@ -2,6 +2,8 @@ name: Playwright Integration
|
|||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
|
paths-ignore:
|
||||||
|
- 'docs/**'
|
||||||
pull_request:
|
pull_request:
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
|
|||||||
@@ -0,0 +1,36 @@
|
|||||||
|
name: site-publish
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
|
paths:
|
||||||
|
- 'site/**'
|
||||||
|
- 'mkdocs/**'
|
||||||
|
|
||||||
|
permissions:
|
||||||
|
contents: write
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
deploy_site:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Check out Git repository
|
||||||
|
uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- name: Install Node.js, NPM and Yarn
|
||||||
|
uses: actions/setup-node@v3
|
||||||
|
with:
|
||||||
|
node-version: 20
|
||||||
|
cache: 'yarn'
|
||||||
|
|
||||||
|
- name: Yarn Install
|
||||||
|
run: yarn install --frozen-lockfile
|
||||||
|
|
||||||
|
- name: Yarn Build
|
||||||
|
run: yarn build
|
||||||
|
|
||||||
|
- uses: actions/setup-python@v4
|
||||||
|
with:
|
||||||
|
python-version: 3.x
|
||||||
|
- run: pip install mkdocs-macros-plugin mkdocs-redirects mkdocs-material
|
||||||
|
- run: cd mkdocs && mkdocs gh-deploy --force
|
||||||
+5
-4
@@ -8,12 +8,13 @@ coverage/
|
|||||||
**/local-examples/
|
**/local-examples/
|
||||||
**/.DS_Store
|
**/.DS_Store
|
||||||
**/.sass-cache/
|
**/.sass-cache/
|
||||||
_data/
|
**/__pycache__/
|
||||||
_site/
|
_genhtml/
|
||||||
dist/
|
dist/
|
||||||
plugins-*/
|
plugins-*/
|
||||||
sw.js
|
site/sw.js
|
||||||
ui.js
|
site/ui.js
|
||||||
|
site/assets/
|
||||||
.jekyll-cache
|
.jekyll-cache
|
||||||
|
|
||||||
ipfs-core.min.js
|
ipfs-core.min.js
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
source 'https://rubygems.org'
|
|
||||||
|
|
||||||
gem "just-the-docs"
|
|
||||||
gem "jekyll-remote-theme"
|
|
||||||
|
|
||||||
|
|
||||||
gem "webrick", "~> 1.8"
|
|
||||||
|
|
||||||
gem "jekyll-include-cache", "~> 0.2.1"
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
GEM
|
|
||||||
remote: https://rubygems.org/
|
|
||||||
specs:
|
|
||||||
addressable (2.8.1)
|
|
||||||
public_suffix (>= 2.0.2, < 6.0)
|
|
||||||
colorator (1.1.0)
|
|
||||||
concurrent-ruby (1.1.10)
|
|
||||||
em-websocket (0.5.3)
|
|
||||||
eventmachine (>= 0.12.9)
|
|
||||||
http_parser.rb (~> 0)
|
|
||||||
eventmachine (1.2.7)
|
|
||||||
ffi (1.15.5)
|
|
||||||
forwardable-extended (2.6.0)
|
|
||||||
http_parser.rb (0.8.0)
|
|
||||||
i18n (1.12.0)
|
|
||||||
concurrent-ruby (~> 1.0)
|
|
||||||
jekyll (4.2.2)
|
|
||||||
addressable (~> 2.4)
|
|
||||||
colorator (~> 1.0)
|
|
||||||
em-websocket (~> 0.5)
|
|
||||||
i18n (~> 1.0)
|
|
||||||
jekyll-sass-converter (~> 2.0)
|
|
||||||
jekyll-watch (~> 2.0)
|
|
||||||
kramdown (~> 2.3)
|
|
||||||
kramdown-parser-gfm (~> 1.0)
|
|
||||||
liquid (~> 4.0)
|
|
||||||
mercenary (~> 0.4.0)
|
|
||||||
pathutil (~> 0.9)
|
|
||||||
rouge (~> 3.0)
|
|
||||||
safe_yaml (~> 1.0)
|
|
||||||
terminal-table (~> 2.0)
|
|
||||||
jekyll-include-cache (0.2.1)
|
|
||||||
jekyll (>= 3.7, < 5.0)
|
|
||||||
jekyll-remote-theme (0.4.3)
|
|
||||||
addressable (~> 2.0)
|
|
||||||
jekyll (>= 3.5, < 5.0)
|
|
||||||
jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
|
|
||||||
rubyzip (>= 1.3.0, < 3.0)
|
|
||||||
jekyll-sass-converter (2.2.0)
|
|
||||||
sassc (> 2.0.1, < 3.0)
|
|
||||||
jekyll-seo-tag (2.8.0)
|
|
||||||
jekyll (>= 3.8, < 5.0)
|
|
||||||
jekyll-watch (2.2.1)
|
|
||||||
listen (~> 3.0)
|
|
||||||
just-the-docs (0.3.3)
|
|
||||||
jekyll (>= 3.8.5)
|
|
||||||
jekyll-seo-tag (~> 2.0)
|
|
||||||
rake (>= 12.3.1, < 13.1.0)
|
|
||||||
kramdown (2.4.0)
|
|
||||||
rexml
|
|
||||||
kramdown-parser-gfm (1.1.0)
|
|
||||||
kramdown (~> 2.0)
|
|
||||||
liquid (4.0.3)
|
|
||||||
listen (3.7.1)
|
|
||||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
|
||||||
rb-inotify (~> 0.9, >= 0.9.10)
|
|
||||||
mercenary (0.4.0)
|
|
||||||
pathutil (0.16.2)
|
|
||||||
forwardable-extended (~> 2.6)
|
|
||||||
public_suffix (5.0.0)
|
|
||||||
rake (13.0.6)
|
|
||||||
rb-fsevent (0.11.2)
|
|
||||||
rb-inotify (0.10.1)
|
|
||||||
ffi (~> 1.0)
|
|
||||||
rexml (3.2.5)
|
|
||||||
rouge (3.30.0)
|
|
||||||
rubyzip (2.3.2)
|
|
||||||
safe_yaml (1.0.5)
|
|
||||||
sassc (2.4.0)
|
|
||||||
ffi (~> 1.9)
|
|
||||||
terminal-table (2.0.0)
|
|
||||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
|
||||||
unicode-display_width (1.8.0)
|
|
||||||
webrick (1.8.1)
|
|
||||||
|
|
||||||
PLATFORMS
|
|
||||||
ruby
|
|
||||||
|
|
||||||
DEPENDENCIES
|
|
||||||
jekyll-include-cache (~> 0.2.1)
|
|
||||||
jekyll-remote-theme
|
|
||||||
just-the-docs
|
|
||||||
webrick (~> 1.8)
|
|
||||||
|
|
||||||
BUNDLED WITH
|
|
||||||
2.2.27
|
|
||||||
@@ -48,8 +48,6 @@ ReplayWeb.page is built as a Node package can be installed using yarn:
|
|||||||
|
|
||||||
`yarn install`
|
`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:
|
The package provides various commands that can be used with yarn:
|
||||||
|
|
||||||
- `yarn start-dev` - to run in dev mode with Webpack dev server on port 9990. Autobuilds dev assets.
|
- `yarn start-dev` - to run in dev mode with Webpack dev server on port 9990. Autobuilds dev assets.
|
||||||
@@ -62,10 +60,6 @@ The package provides various commands that can be used with yarn:
|
|||||||
|
|
||||||
- `yarn dist` - to build production assets + Electron app (in dist/)
|
- `yarn dist` - to build production assets + Electron app (in dist/)
|
||||||
|
|
||||||
- `yarn build-docs` - to build the Jekyll docs (for local use) and run Jekyll. Requires Ruby.
|
|
||||||
|
|
||||||
- `yarn 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.
|
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.
|
For service workers to work, they must be served from either localhost or an HTTPS endpoint.
|
||||||
|
|||||||
-44
@@ -1,44 +0,0 @@
|
|||||||
remote_theme: pmarsceill/just-the-docs
|
|
||||||
#theme: "just-the-docs"
|
|
||||||
|
|
||||||
title: ReplayWeb.Page
|
|
||||||
|
|
||||||
# Enable or disable the site search
|
|
||||||
search_enabled: true
|
|
||||||
|
|
||||||
# Set the search token separator for hyphenated-word search:
|
|
||||||
search_tokenizer_separator: /[\s/]+/
|
|
||||||
|
|
||||||
# Enable or disable heading anchors
|
|
||||||
heading_anchors: true
|
|
||||||
|
|
||||||
# Aux links for the upper right navigation
|
|
||||||
aux_links:
|
|
||||||
"Back to ReplayWeb.page":
|
|
||||||
- "/"
|
|
||||||
|
|
||||||
logo: "/assets/logo.svg"
|
|
||||||
|
|
||||||
plugins:
|
|
||||||
- jekyll-remote-theme
|
|
||||||
|
|
||||||
#baseUrl: '/'
|
|
||||||
|
|
||||||
exclude:
|
|
||||||
- Gemfile
|
|
||||||
- Gemfile.lock
|
|
||||||
- package.json
|
|
||||||
- run.sh
|
|
||||||
- webpack.config.js
|
|
||||||
- yarn-error.log
|
|
||||||
- yarn.lock
|
|
||||||
- local-examples/
|
|
||||||
- build/*.js
|
|
||||||
- build/*.plist
|
|
||||||
- src/
|
|
||||||
- index.js
|
|
||||||
- dist/
|
|
||||||
- node_modules/
|
|
||||||
- plugins-win/
|
|
||||||
- plugins-mac/
|
|
||||||
- plugins-linux/
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
{% if site.logo %}
|
|
||||||
<div class="site-logo"></div>
|
|
||||||
{% endif %}
|
|
||||||
<span class="rwp-logo-font rwp-green">replay</span>
|
|
||||||
<span class="rwp-logo-font rwp-blue">web.page</span>
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
$rwp-green: #55be6f;
|
|
||||||
$rwp-yellow: #f5c71a;
|
|
||||||
$rwp-blue: #4876ff;
|
|
||||||
//$link-color: #27a0ff;
|
|
||||||
$link-color: #384ea2;
|
|
||||||
|
|
||||||
//$content-width: 960px;
|
|
||||||
$nav-width-md: $nav-width;
|
|
||||||
|
|
||||||
.side-bar {
|
|
||||||
@include mq(md) {
|
|
||||||
//max-width: calc(0.5rem + #{$nav-width});
|
|
||||||
max-width: $nav-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-title {
|
|
||||||
padding-right: 1.5rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rwp-logo-font {
|
|
||||||
font-variant-caps: all-small-caps;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rwp-green {
|
|
||||||
color: $rwp-green;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rwp-yellow {
|
|
||||||
color: $rwp-yellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rwp-blue {
|
|
||||||
color: $rwp-blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pad {
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cap-header {
|
|
||||||
padding: 0 0 0 10px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 592 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 825 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 300 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 452 KiB |
@@ -1,34 +0,0 @@
|
|||||||
---
|
|
||||||
layout: page
|
|
||||||
title: Contact
|
|
||||||
nav_order: 7
|
|
||||||
description: Contact Webrecorder
|
|
||||||
permalink: /docs/contact
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# CONTACT US
|
|
||||||
|
|
||||||
We are always trying to improve and we'd appreciate your feedback on how we can make the documentation easy and concise to support your needs! Please contact us in any of the following ways. Looking forward to hearing from you.
|
|
||||||
|
|
||||||
|
|
||||||
### Discuss: Post on our forum
|
|
||||||
We have a forum for all our users!
|
|
||||||
|
|
||||||
Webrecorder users post their questions, insights, and issues on our <a href="https://forum.webrecorder.net/" target="_blank"><b>forum</b></a>. Join the webrecorder community to participate as well!
|
|
||||||
|
|
||||||
If you are running into an issue with the extension, check the forum to see if it has been discussed there already.
|
|
||||||
|
|
||||||
### GitHub: Open an Issue
|
|
||||||
The docs and the code for replayweb.page are both on GitHub.
|
|
||||||
|
|
||||||
- If you found mistake or a bug, please open an issue at [webrecorder/replayweb.page](https://github.com/webrecorder/replayweb.page){:target=_blank}
|
|
||||||
|
|
||||||
|
|
||||||
### Email: Send us a message
|
|
||||||
|
|
||||||
We prefer to discuss issues or bugs on the forum or on github so that others running into the same issues can see the previous discussion.
|
|
||||||
|
|
||||||
For other questions,, you can also reach us by e-mail.
|
|
||||||
|
|
||||||
Send us a message at <info@webrecorder.net> and someone from the Webrecorder team will get back to you.
|
|
||||||
@@ -1,124 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: Configuring Server CORS
|
|
||||||
nav_order: 4
|
|
||||||
permalink: /docs/cors-settings
|
|
||||||
---
|
|
||||||
|
|
||||||
ReplayWeb.page doesn't require any specific server side settings, just the ability to server file and respond to `Range` requests,
|
|
||||||
loading parts of files. It can load files from any web server. However, a common obstacle is configuring CORS settings to give
|
|
||||||
ReplayWeb.page access to the data.
|
|
||||||
|
|
||||||
# Configuring CORS
|
|
||||||
|
|
||||||
Browsers restrict access to files hosted on a different domain than the websites that is trying to load them for security reasons.
|
|
||||||
|
|
||||||
If you are loading web archives hosted on a different domain (for example, S3 or other cloud storage) and your site is hosted on a different domain,
|
|
||||||
the site hosting the file needs to 'allow' the website to load the file using special CORS (Cross-Origin Resource Sharing) headers.
|
|
||||||
|
|
||||||
These settings apply whenever the archive is hosted on a different domain than the viewer, so if you are loading via our main ReplayWeb.page site, you need to grant access to *https://replayweb.page* to load these archives.
|
|
||||||
|
|
||||||
The minimum requirement is to return an `Access-Control-Allow-Origin: https://replayweb.page` and most CORS settings include at least this option.
|
|
||||||
|
|
||||||
## Differences between Chrome and Firefox and Safari
|
|
||||||
|
|
||||||
Unfortunately, different browsers have diverged in how they handle in enforcing the CORS policy.
|
|
||||||
|
|
||||||
At the moment, it seems Firefox and Safari sometimes send a [pre-flight OPTIONS request](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) when handling ReplayWeb.page requests, because the ReplayWeb.page uses the `Range` header.
|
|
||||||
|
|
||||||
Chrome currently considers it a 'safe' header, but the other browsers have not yet made this change.
|
|
||||||
|
|
||||||
To be compatible with all browsers, we recommend including all headers as 'allowed headers' for use with ReplayWeb.page, eg.
|
|
||||||
by setting `Access-Control-Allow-Headers: '*'` as part of the CORS response in addition to `Access-Control-Allow-Origin`.
|
|
||||||
|
|
||||||
The following provides different ways of configuring CORS for different hosting environments.
|
|
||||||
|
|
||||||
|
|
||||||
## S3 and Compatible Configurations
|
|
||||||
|
|
||||||
If you are hosting from S3 or S3-compatible service, here are a few CORS bucket configurations that should work.
|
|
||||||
|
|
||||||
Amazon S3 and other services now support a JSON based bucket policy, as well as an older XML-based policy.
|
|
||||||
|
|
||||||
The below examples provide access to `https://replayweb.page` to load your archive.
|
|
||||||
If you are instead [embedding replayweb.page](./embedding), replace that with the server (origin) of the URL where the `<replay-web-page>` embed is hosted.
|
|
||||||
|
|
||||||
Both JSON and XML options provide a way to specify multiple origins via the JSON list or multiple `<AllowedOrigin>` tags
|
|
||||||
|
|
||||||
### JSON-Based Configuration
|
|
||||||
|
|
||||||
The JSON-based configuration will look as follows:
|
|
||||||
|
|
||||||
```json
|
|
||||||
[
|
|
||||||
{
|
|
||||||
"AllowedOrigins": [
|
|
||||||
"https://replayweb.page"
|
|
||||||
],
|
|
||||||
"AllowedMethods": [
|
|
||||||
"GET",
|
|
||||||
"HEAD"
|
|
||||||
],
|
|
||||||
"AllowedHeaders": [
|
|
||||||
"*"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
### XML-Based Configuration
|
|
||||||
|
|
||||||
|
|
||||||
```xml
|
|
||||||
<CORSConfiguration
|
|
||||||
xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
|
|
||||||
<CORSRule>
|
|
||||||
<AllowedMethod>GET</AllowedMethod>
|
|
||||||
<AllowedMethod>HEAD</AllowedMethod>
|
|
||||||
<AllowedOrigin>https://replayweb.page</AllowedOrigin>
|
|
||||||
<AllowedHeader>*</AllowedHeader>
|
|
||||||
<ExposeHeader>Content-Range</ExposeHeader>
|
|
||||||
<ExposeHeader>Content-Encoding</ExposeHeader>
|
|
||||||
<ExposeHeader>Content-Length</ExposeHeader>
|
|
||||||
</CORSRule>
|
|
||||||
</CORSConfiguration>
|
|
||||||
```
|
|
||||||
|
|
||||||
One way to set this policy is to use the popular [s3cmd](https://s3tools.org/usage) command-line tool:
|
|
||||||
|
|
||||||
1) Paste the above snippet into a file, eg. `cors.xml`
|
|
||||||
2) Be sure to set the 'Allowed Origin' to the site hosting the embed. You can add as many of these as necessary.
|
|
||||||
3) Run `s3cmd setcors ./cors.xml s3://<your-bucket>`
|
|
||||||
|
|
||||||
See the s3cmd docs for how to configure it s3cmd to work with your setup.
|
|
||||||
|
|
||||||
See [S3 Docs](https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html) for more info on how to set this policy.
|
|
||||||
|
|
||||||
Other cloud providers may have a similar settings for configuring CORS.
|
|
||||||
|
|
||||||
## Manual Setup / Nginx
|
|
||||||
|
|
||||||
The recommended setup for nginx is to include the following CORS settings.
|
|
||||||
As above, you can replay `https://replayweb.page` with your domain:
|
|
||||||
|
|
||||||
```nginx
|
|
||||||
location / {
|
|
||||||
if ($request_method = 'OPTIONS') {
|
|
||||||
add_header 'Access-Control-Allow-Origin' 'https://replayweb.page';
|
|
||||||
add_header 'Access-Control-Allow-Methods' 'GET, HEAD, OPTIONS' always;
|
|
||||||
add_header 'Access-Control-Allow-Headers' '*' ;
|
|
||||||
return 204;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($request_method = 'GET') {
|
|
||||||
add_header 'Access-Control-Allow-Origin' 'https://replayweb.page' always;
|
|
||||||
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
|
|
||||||
add_header 'Access-Control-Allow-Headers' '*' always;
|
|
||||||
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
For more examples of CORS configurations for different servers, see: [https://enable-cors.org/](https://enable-cors.org/)
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,186 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: Embedding ReplayWeb.page
|
|
||||||
nav_order: 3
|
|
||||||
permalink: /docs/embedding
|
|
||||||
---
|
|
||||||
## Embedding Web Archives with ReplayWeb.page
|
|
||||||
|
|
||||||
A key goal of ReplayWeb.page is to make embedding web archives into other sites as easy as it is to embed media files like images and PDFs.
|
|
||||||
|
|
||||||
To make this possible ReplayWeb.page provides the `<replay-web-page>` HTML web component to support embedding in the pages where you would like to display web archives. This component works in all modern browsers, and has several configuration options that allow you to control things like the initial URL or snapshot to display from the archive when the component loads. The component allows you to load WACZ files that are created with Webrecorder tools, as well as standalone WARC files.
|
|
||||||
|
|
||||||
For the web component to work you need to load the *frontend* user interface and the *backend* service worker into your web page, and then point a `<replay-web-page>` component at your WACZ file. The *frontend* defines the `<replay-web-page>` web component itself, and the backend service worker is responsible for retrieving data on demand from your web archive file. The backend pulls resources from the WACZ file *on-demand* as they are requested, so full retrieval of the WACZ to the browser is *not* required. The frontend and backend are just static JavaScript assets which you can choose to load from a Content Delivery Network (CDN) or directly from your website if you would like to host them yourself.
|
|
||||||
|
|
||||||
For example, to embed a WACZ web archive stored at `https://replayweb.page/docs/assets/tweet-example.wacz` you first need to add the following snippet to your HTML page to load the user interface and use the `<replay-web-page>` component to point to the WACZ:
|
|
||||||
|
|
||||||
{: .bg-blue-000 .text-grey-lt-000 .cap-header}
|
|
||||||
my-web-archive-embed.html
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.data.package.version }}/ui.js"></script>
|
|
||||||
|
|
||||||
<replay-web-page source="https://replayweb.page/docs/assets/tweet-example.wacz"
|
|
||||||
url="https://oembed.link/https://twitter.com/webrecorder_io/status/1565881026215219200"></replay-web-page>
|
|
||||||
```
|
|
||||||
|
|
||||||
The first line loads version {{ site.data.package.version }} of the ui from the jsDelivr content delivery network. And the second instantiates the ReplayWebPage component using the `source` attribute to point to the location of the WACZ file on the web (in this case published on AWS S3). The `url` attribute is used to indicate what URL to display from the archive after the component loads.
|
|
||||||
|
|
||||||
ReplayWeb.page's backend is a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) which intercepts requests for URLs and looks for them in your WACZ file. Service workers are just JavaScript files, but it is necessary to add a service worker path from where the web archive will be served. This allows the service worker to catch requests only from the scope of the current page. To do this create a subdirectory (eg. `replay/`) and place the following one-line script in it:
|
|
||||||
|
|
||||||
{: .bg-blue-000 .text-grey-lt-000 .cap-header}
|
|
||||||
./replay/sw.js
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
importScripts("https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.data.package.version }}/sw.js");
|
|
||||||
```
|
|
||||||
|
|
||||||
If the HTML snippet was added to `https://my-site.example.com/path/my-web-archive-embed.html`
|
|
||||||
then the `sw.js` should be added such that it is at: `https://my-site.example.com/path/replay/sw.js`.
|
|
||||||
|
|
||||||
That's it! Loading `https://my-site.example.com/path/my-web-archive-embed.html` should now load the web archive.
|
|
||||||
|
|
||||||
Be sure to add width and height styles to the `<replay-web-page>` tag as needed to size the embed.
|
|
||||||
|
|
||||||
You can replace `https://replayweb.page/docs/assets/example.wacz` with any web archive hosted on your site.
|
|
||||||
|
|
||||||
{: .fs-3 .pad .bg-grey-lt-100}
|
|
||||||
If the file is loaded from a different origin, your site must have CORS access to download the web archive.
|
|
||||||
<br>See [CORS restrictions](#cors-restrictions) below for more info.
|
|
||||||
|
|
||||||
### Self Hosting
|
|
||||||
|
|
||||||
Sometimes it can be desirable to *self-host* the user interface, service worker, and WACZ files. This is useful in situations where you want to prevent tracking by CDNs, or to make it easier to host the content in one place without needing to work out the details of Cross Origin Resource Sharing (CORS). Self-hosting is easy if you follow the same steps as above, but instead of loading the JavaScript and WACZ file from external locations you will need to [download](https://www.jsdelivr.com/package/npm/replaywebpage) the `ui.js` and `sw.js` JavaScript files and put them on the same server as the HTML that you are publishing.
|
|
||||||
|
|
||||||
For example if you are publishing a page at `https://my-site.example.com/path/my-web-archive-embed.html` you could adjust the <script> element to load the ui from a location on your website:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script src="ui.js"></script>
|
|
||||||
|
|
||||||
<replay-web-page source="example.wacz" url="https://webrecorder.net"></replay-web-page>
|
|
||||||
```
|
|
||||||
|
|
||||||
The following URLs would then need to resolve correctly:
|
|
||||||
|
|
||||||
* https://my-site.example.com/path/my-web-archive-embed.html
|
|
||||||
* https://my-site.example.com/path/example.wacz
|
|
||||||
* https://my-site.example.com/path/ui.js
|
|
||||||
* https://my-site.example.com/path/replay/sw.js
|
|
||||||
|
|
||||||
If you want to embed more than one web archive on your site it can be helpful to centralise the location of the frontend and backend JavaScript and potentially WACZ files. The <replay-web-page> component has a `replayBase` attribute that lets you define the location to load the `sw.js` service worker from. By default, `replayBase` is set to `./replay/` and so the service worker is loaded from `./replay/sw.js`. For example if you publish your JavaScript files at:
|
|
||||||
|
|
||||||
* https://my-site.example.com/js/ui.js
|
|
||||||
* https://my-site.example.com/js/sw.js
|
|
||||||
* https://my-site.example.com/wacz/example.wacz
|
|
||||||
|
|
||||||
Then you adjust your HTML to reference the new resources:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script src="/js/ui.js"></script>
|
|
||||||
|
|
||||||
<replay-web-page replayBase="/js/" source="/wacz/example.wacz" url="https://webrecorder.net"></replay-web-page>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Embed Modes
|
|
||||||
|
|
||||||
ReplayWeb.page offers a number of different ways to embed the archived content, including with or without the navigation UI, and with a new archival information dropdown. The embed mode can be set via the `embed` property:
|
|
||||||
|
|
||||||
- `default` or not set: Show the replay page and the location bar, allowing navigation to other pages and accessing the page list.
|
|
||||||
|
|
||||||
- `full`: Show the full replayweb.page UI and logo.
|
|
||||||
|
|
||||||
- `replayonly`: Show just the replayed page, and no additional UI or nav bar buttons. Useful for embedding a single page.
|
|
||||||
|
|
||||||
- `replay-with-info`: Show the replayonly mode, but also add an archive info dropdown, which shows a kind of archival 'receipt' with provenance and verification information (new in 1.7.0)
|
|
||||||
|
|
||||||
|
|
||||||
### Examples
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
Here is an example embed added directly to this page, with <code class="language-plaintext highlighter-rouge">replay-with-info</code> embed mode:
|
|
||||||
</summary>
|
|
||||||
|
|
||||||
<script src="../ui.js"></script>
|
|
||||||
|
|
||||||
<replay-web-page style="height: 600px" embed="replay-with-info" replaybase="../" source="./assets/tweet-example.wacz"
|
|
||||||
url="https://oembed.link/https://twitter.com/webrecorder_io/status/1565881026215219200"></replay-web-page>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
For a working example of hosting multiple web archives take a look at our *example-webarchive* [repository](https://github.com/webrecorder/example-webarchive/) and [static website](https://webrecorder.github.io/example-webarchive) which hosted on Github pages. It may give you ideas for how to integrate the ReplayWeb.page component into your site You may also be interested in [Web Replay Gen](https://github.com/webrecorder/web-replay-gen) which is an 11ty based static site builder for a web archive of WACZ files.
|
|
||||||
|
|
||||||
### Embedding Options
|
|
||||||
|
|
||||||
The `<replay-web-page>` tag is a web component that supports a number of additional attributes:
|
|
||||||
|
|
||||||
| Attribute | Description |
|
|
||||||
|:-------------|:-----------------|
|
|
||||||
| `source` | Source URL for the archive file. It should be a URL in one of the [supported formats](/docs/formats) loaded from one of the [support locations](/docs/locations) and is required. |
|
|
||||||
| `url` | The starting URL to load from the archive. If omitted, will start with the page list or URL search view. |
|
|
||||||
| `ts` | The timestamp of the starting URL to load. If omitted, the latest available version is used. |
|
|
||||||
| `deepLink` | if set, allow 'deep linking' to exact pages in the embed, besides the starting URL. |
|
|
||||||
| `embed` | (`default` / `full` / `replayonly` / `replay-with-info` ) - See [Embed Modes](#embed-modes) above.
|
|
||||||
| `swName` | Service Worker filename (default: `sw.js`). Set if using different name, don't include path, only filename |
|
|
||||||
| `replayBase` | Location of the service worker file (eg. sw.js), defaults to `./replay/` as mentioned above, but can be overridden. |
|
|
||||||
| `coll` | Internal id for this collection, usually generated automatically.
|
|
||||||
| `config` | Extra per collection config options (such as custom fuzzy matching rules, TODO add more info!) |
|
|
||||||
| `sandbox` | if set, will iframe in `sandbox`. Provides extra isolation, but prevents PDFs from loading in an embed, and may result in links opening in new windows. |
|
|
||||||
| `noWebWorker`| if set, will not use Web Worker for loading, only Service Worker. May be useful for certain loading edge cases. |
|
|
||||||
| `noCache` | if set, will not cache any loaded content HTTP responses locally, always loading from original source. |
|
|
||||||
| `hideOffscreen` | if set, will unload the embed when it is not visible and reload when scrolled into view. Useful if multiple embeds per-page to avoid loading all at once. |
|
|
||||||
| `newWindowBase` | set base replay URL loaded when a page opens a new window, defaults to `https://replayweb.page/` if `deepLink` not enabled, otherwise, to current page with new link. |
|
|
||||||
| `requireSubdomainIframe` | if set, will only load embed in an iframe loaded from a subdomain, for increased origin isolation. |
|
|
||||||
| `loading="eager"` | if set, will load the entire WACZ file at once (regardless of size), and not attempt on-demand range request loading. |
|
|
||||||
| `useRuffle` | if set, will enable include Ruffle Flash emulator. Must include the `ruffle/` directory in `replayBase`. |
|
|
||||||
|
|
||||||
### Versioning
|
|
||||||
|
|
||||||
Note that the above example uses the paths as, which is a CDN for Javascript packages at a specific version:
|
|
||||||
|
|
||||||
- `https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.data.package.version }}/ui.js`
|
|
||||||
- `https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.data.package.version }}/sw.js`
|
|
||||||
|
|
||||||
These URLs point to a specific version of ReplayWeb.page software released on NPM, eg. `{{ site.data.package.version }}`, meaning that your replay should stay stable, even if ReplayWeb.page is updated.
|
|
||||||
|
|
||||||
Although ReplayWeb.page strives to remain backwards compatible, this addresses any potential issue of older embeds breaking when the replay system is updated.
|
|
||||||
|
|
||||||
You can also use the latest stable release by omitting the version, and the URL will automatically load the latest published release:
|
|
||||||
|
|
||||||
- `https://cdn.jsdelivr.net/npm/replaywebpage/ui.js`
|
|
||||||
- `https://cdn.jsdelivr.net/npm/replaywebpage/sw.js`
|
|
||||||
|
|
||||||
This is not recommended for full production use as this is more likely to break in case there is a breaking change.
|
|
||||||
|
|
||||||
For testing the very latest, it is possible to simply link to replayweb.page itself, eg. `https://replayweb.page/ui.js`
|
|
||||||
and `https://replayweb.page/sw.js` but these are updated the most frequently and more likely to break.
|
|
||||||
|
|
||||||
For production use, it is recommended to use a fixed version and explicitly upgrade as necessary.
|
|
||||||
|
|
||||||
|
|
||||||
## Common Issues
|
|
||||||
|
|
||||||
Below are some possible issues that you may encounter when embedding and possible workarounds.
|
|
||||||
|
|
||||||
|
|
||||||
### Embed is too small / doesn't fill page.
|
|
||||||
|
|
||||||
If the `<replay-web-page>` tag is the only element on a page, and you want it to use the full window width and height, adding the following
|
|
||||||
style should fix the issue:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<style>
|
|
||||||
html, body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Loading Errors
|
|
||||||
|
|
||||||
If you see errors such as `TypeError: failed to load` or similar errors, the issue may have to do with Cross-Origin Resource Sharing (CORS) errors.
|
|
||||||
|
|
||||||
See [CORS Settings](./cors-settings) for more info on how to configure CORS for ReplayWeb.page
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: Examples
|
|
||||||
nav_order: 7
|
|
||||||
parent: Reference
|
|
||||||
permalink: /docs/examples
|
|
||||||
---
|
|
||||||
|
|
||||||
## Examples
|
|
||||||
|
|
||||||
The following examples load a small archive demonstrating the replay and browsing capabilities of ReplayWeb.page:
|
|
||||||
|
|
||||||
- [Browse a Social Media Page](../?source=../examples/netpreserve-twitter.warc#view=replay&url=https://twitter.com/netpreserve){:target="_blank"}
|
|
||||||
|
|
||||||
- [List All Pages](../?source=../examples/netpreserve-twitter.warc#view=pages){:target="_blank"}
|
|
||||||
|
|
||||||
- [Search Pages by containing 'WARC'](../?source=../examples/netpreserve-twitter.warc#view=pages&query=WARC){:target="_blank"}
|
|
||||||
|
|
||||||
- [Search for images](../?source=../examples/netpreserve-twitter.warc#view=resources&currMime=image%2F){:target="_blank"}
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
## Embed Examples
|
|
||||||
|
|
||||||
Here are some additional examples of [embedding ReplayWeb.page](./embedding), hosted separately on [https://webrecorder.net](https://webrecorder.net){:target="_blank"}
|
|
||||||
|
|
||||||
- [Embed Example 1](https://webrecorder.net/embed-demo-1.html){:target="_blank"}
|
|
||||||
|
|
||||||
- [Embed Example 2](https://webrecorder.net/embed-demo-2.html){:target="_blank"}
|
|
||||||
|
|
||||||
|
|
||||||
Next: [Using ReplayWeb.page](./)
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: Exploring Web Archives
|
|
||||||
nav_order: 3
|
|
||||||
parent: Loading Web Archives
|
|
||||||
permalink: /docs/exploring
|
|
||||||
---
|
|
||||||
|
|
||||||
## Exploring Archives (Browse, Search and Replay)
|
|
||||||
|
|
||||||
|
|
||||||
The ReplayWeb.page homepage lists an index of all loaded archives. You can also search by archive title or source
|
|
||||||
and filter by date loaded or title.
|
|
||||||
|
|
||||||
Once loaded, the archive remains cached in the browser for quick access. This view will be unique to your browser.
|
|
||||||
To remove the archive from your browser, click on the 'X'. (Of course, this does not delete the archive from its original location, only your local copy of it)
|
|
||||||
|
|
||||||
### Archive Views
|
|
||||||
|
|
||||||
Although primarily designed for replay, ReplayWeb.page also offers several ways to interact with web archives.
|
|
||||||
|
|
||||||
The archive view presents several tabs:
|
|
||||||
|
|
||||||
- **Story** - This Story view presents lists of curated pages, as developed by the creator of the web archive.
|
|
||||||
This option is only shown if there is a curated story. As curated lists are not a standard part of WARC, only WARCs exported from Webrecorder.io/Conifer can have this option.
|
|
||||||
|
|
||||||
The new [Web Archive Collection (WACZ)](wacz-format) can also include curated lists.
|
|
||||||
|
|
||||||
- **Pages** - The Pages view presents all pages in the web archive. As pages are not a standard part of WARC format,
|
|
||||||
generally only WARCs from Webrecorder.io/Conifer will have pages.
|
|
||||||
|
|
||||||
The new [Web Archive Collection (WACZ)](wacz-format) can also store pages.
|
|
||||||
|
|
||||||
|
|
||||||
- **Page Resources** - This view allows searching the archive by URLs, as well as by common MIME type.
|
|
||||||
|
|
||||||
For many archives with no page or curatorial metadata, this is a way to explore the archive data in more detail.
|
|
||||||
|
|
||||||
This view is available for all archives that only store raw data.
|
|
||||||
|
|
||||||
- **Replay** - The view presents a replay of the archived web content in a mini-browser directly your browser. The view allows entering a URL directly. Clicking on links on any of the other views will switch to the **Replay** view.
|
|
||||||
|
|
||||||
### Search
|
|
||||||
|
|
||||||
Both the Page Resources view provide ways to search the archive directly.
|
|
||||||
|
|
||||||
|
|
||||||
#### Searching Page Resources
|
|
||||||
Page Resources allows searching by URL only, with additional sorting options.
|
|
||||||
Searches can be done by exact url, by url prefix, or by any string contained in the URL.
|
|
||||||
|
|
||||||
The URL Prefix option is best for searching large archives that require on-demand loading.
|
|
||||||
The contains option will not find any URLs that have not yet been loaded.
|
|
||||||
|
|
||||||
|
|
||||||
#### Searching Pages
|
|
||||||
|
|
||||||
The Page view search includes page titles, urls and page full text search, if available.
|
|
||||||
|
|
||||||
ReplayWeb.page will load pre-generated full-text search data pages when loading WACZ files, and will also attempt to generate full-text index from HTML pages when loading WARC files.
|
|
||||||
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
Next: [Sharing Links to Archived Pages](/docs/sharing)
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: 'Supported Formats'
|
|
||||||
nav_order: 3
|
|
||||||
description: 'Supported Formats'
|
|
||||||
permalink: /docs/formats
|
|
||||||
parent: Reference
|
|
||||||
---
|
|
||||||
|
|
||||||
## Supported Formats
|
|
||||||
|
|
||||||
ReplayWeb.Page supports the archive formats listed below.
|
|
||||||
Format is currently determined based on the file extension.
|
|
||||||
|
|
||||||
The `.wacz` refers to the newly proposed [Web Archive Collection Zip Format](wacz-format).
|
|
||||||
|
|
||||||
|
|
||||||
| Format | Extensions | Status |
|
|
||||||
|:--------|:--------------------|:--------------|
|
|
||||||
| WARC | `.warc`, `.warc.gz` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"> Supported |
|
|
||||||
| HAR | `.har` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-000"> In Progress |
|
|
||||||
| WBN | `.wbn` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-000"> Experimental |
|
|
||||||
| ARC | `.arc` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-000"> Not Supported |
|
|
||||||
| CDX | `.cdx`, `.cdxj` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"> Supported |
|
|
||||||
| WACZ | `.wacz` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-000"> In Progress |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
---
|
|
||||||
layout: page
|
|
||||||
title: Welcome
|
|
||||||
nav_order: 1
|
|
||||||
description: About ReplayWeb.page
|
|
||||||
permalink: /docs/index.html
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# USER GUIDE: REPLAYWEB.PAGE
|
|
||||||
|
|
||||||
## What is this document?
|
|
||||||
Welcome to this instructional guide on how to use Webrecorder's replayweb.page for "<i>replaying</i>" your web archives in WARC, CDX, and WACZ formats (you can check out our [supported formats](/docs/formats) for more information).
|
|
||||||
|
|
||||||
## What is Replayweb.page?
|
|
||||||
ReplayWeb.page is an open-source, browser-based viewer that loads web archive files provided by the user and renders them for replay in the browser.
|
|
||||||
|
|
||||||
It functions as a <a alt="A serverless (client-side) web archive means that the action takes place on the user's (the client's - AKA you) computer rather than server-side, which means that the action takes place on a local web server." title="This means that the action takes place on the user's (the client's - AKA your) computer rather than server-side, which means that the action takes place on a local web server."><span style="cursor: help;">serverless (client-side)</span></a> web archive replay tool.
|
|
||||||
|
|
||||||
Archives can be loaded as static files from anywhere a browser can connect to, or from a user's local machine.
|
|
||||||
|
|
||||||
|
|
||||||
### ReplayWeb.page provides the following features:
|
|
||||||
|
|
||||||
* High-Fidelity replay of web archives in several formats and from various locations directly in the browser.
|
|
||||||
* Several ways to explore web archives: story view, page search and URL search.
|
|
||||||
* On-demand, incremental loading of large archives.
|
|
||||||
* Several options for fully-functional offline usage.
|
|
||||||
* Available as a standalone desktop app with Flash support.
|
|
||||||
* Support for versioned embedding of web archives.
|
|
||||||
|
|
||||||
### Check it out on our <a href="https://github.com/webrecorder/replayweb.page" target="_blank">GitHub repo</a>
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: Online Use
|
|
||||||
nav_order: 1
|
|
||||||
parent: Loading Web Archives
|
|
||||||
permalink: /docs/loading_online
|
|
||||||
---
|
|
||||||
# Online Use
|
|
||||||
{: .no_toc }
|
|
||||||
|
|
||||||
Using [https://replayweb.page](https://replayweb.page), you can select a web archive file from a local file or enter their unique remote URL directly to load into the site.
|
|
||||||
|
|
||||||
<img alt="screenshot of replayweb.page (online)" src="/docs/assets/replaywebpage-online.png">
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
## Browsing Web Archives via the ReplayWeb.page
|
|
||||||
{: .no_toc .text-delta }
|
|
||||||
|
|
||||||
|
|
||||||
1.
|
|
||||||
{:toc}
|
|
||||||
|
|
||||||
### Loading Local Web Archives
|
|
||||||
|
|
||||||
From [https://replayweb.page](https://replayweb.page), use the `Choose File...` button. You can pick any local archive file from your computer to load for replay.
|
|
||||||
The click `Load` to load the file.
|
|
||||||
|
|
||||||
The archive is loaded in the browser directly and *not* uploaded anywhere -- it never leaves your computer!
|
|
||||||
|
|
||||||
The archive will be identified by a `file://` URL and is not accessible outside your browser. As expected,
|
|
||||||
this URL is not shareable.
|
|
||||||
|
|
||||||
{: .fs-3 .pad .bg-grey-lt-100}
|
|
||||||
This behavior is similar to how [Webrecorder Player](https://github.com/webrecorder/webrecorder-player) worked, but happens entirely in the browser. <br>The [ReplayWeb.page App](https://github.com/webrecorder/replayweb.page/releases) is also an option for [opening local files when offline](loading_offline#replaywebpage-as-standalone-desktop-electron-app)
|
|
||||||
|
|
||||||
<img alt="screenshot of replayweb.page (online)" src="/docs/assets/replaywebpage-online-local.png">
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
### Loading Remote Web Archives
|
|
||||||
|
|
||||||
To load a remote archive, simply enter the URL of the archive and click `Load`.
|
|
||||||
|
|
||||||
{: .fs-3 .pad .bg-grey-lt-100}
|
|
||||||
See [Supported Locations](locations) for details on where archives can be loaded from.
|
|
||||||
|
|
||||||
The archive will be downloaded, either fully or on-demand (if possible) and presented on the archive page.
|
|
||||||
|
|
||||||
The system supports WARC files, as well as several other formats
|
|
||||||
|
|
||||||
{: .fs-3 .pad .bg-grey-lt-100}
|
|
||||||
See: [Supported Formats](formats) for more details on supported formats.
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
### Loading Remote Archives from Google Drive
|
|
||||||
|
|
||||||
ReplayWeb.page also supports loading archives directly from Google Drive.
|
|
||||||
|
|
||||||
You would first need to integrate replayReplayWeb.page, but it's a fairly easy integration. And once integrated, you can use it to open .warc, and .warc.gz files directly from Google Drive using the following steps.
|
|
||||||
|
|
||||||
1. Navigate to any WARC (.warc, .warc.gz) files or WACZ (Web archive collection) files that you have on Google Drive.
|
|
||||||
|
|
||||||
2. When you select the file, you should see an 'Open With ReplayWeb.page' option at the top.
|
|
||||||
|
|
||||||
3. Clicking on this should redirect to ReplayWeb.page and begin loading. Google Drive loaded archives will have a source URL starting with `googledrive://`.
|
|
||||||
|
|
||||||
|
|
||||||
#### Install [ReplayWeb.page Google Drive Integration](https://gsuite.google.com/u/2/marketplace/app/replaywebpage/160798412227)
|
|
||||||
* This is a Google Drive Add-On
|
|
||||||
* Click install and Google will walk you through the steps of installation
|
|
||||||
* Once installed, Google will confirm the install and where to find replayweb.page in your drive.
|
|
||||||
|
|
||||||
<img alt="screenshot of replayweb.page google drive add-on" src="/docs/assets/replaywebpage-googledrive-install.gif">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
Once an archive has successfully loaded, you will be redirected to the archive view from where you can explore the archive.
|
|
||||||
|
|
||||||
Next: [Exploring the Archive](/docs/exploring)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: 'Supported Locations'
|
|
||||||
nav_order: 2
|
|
||||||
description: 'Supported Locations'
|
|
||||||
parent: Reference
|
|
||||||
permalink: /docs/locations
|
|
||||||
---
|
|
||||||
|
|
||||||
## Supported Location URLs
|
|
||||||
|
|
||||||
ReplayWeb.Page uses URLs to uniquely identify web archives.
|
|
||||||
|
|
||||||
In addition HTTP/S, the system supports loading from additional cloud providers
|
|
||||||
and via peer-to-peer decentralized services. The goal is to support loading
|
|
||||||
web archives from any source a web browser can connect to.
|
|
||||||
|
|
||||||
The following is a list of currently supported URL schemes and details below:
|
|
||||||
|
|
||||||
|
|
||||||
| Scheme | Status |
|
|
||||||
|:-----------------|:------------|
|
|
||||||
| `https://` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"> Supported |
|
|
||||||
| `http://` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"> Supported |
|
|
||||||
| `file://` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"> Supported |
|
|
||||||
| `s3://` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"> Supported |
|
|
||||||
| `googledrive://` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"> Supported |
|
|
||||||
| `ipfs://` | <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"> Supported |
|
|
||||||
| `hyper://` | <span class="d-inline-block p-2 mr-1 v-align-middle text-grey-lt-000 bg-purple-000"> Planned |
|
|
||||||
|
|
||||||
|
|
||||||
### HTTP and HTTPS
|
|
||||||
|
|
||||||
While `https://replayweb.page` can load from any URL, a site must allow access by enabling [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
|
|
||||||
for the web archive. HTTP URLs may not be accessible from `https://replayweb.page` since it requires HTTPS.
|
|
||||||
|
|
||||||
If you need to provide access to web archives stored on your own domain or over HTTP, consider
|
|
||||||
deploying a copy on your server. See: Running your Own.
|
|
||||||
|
|
||||||
### Local Files
|
|
||||||
|
|
||||||
Local files selected via the UI file chooser, and will be given a `file://` URL.
|
|
||||||
Unlike other web archive URLs, file URLs can not be shared with others.
|
|
||||||
|
|
||||||
|
|
||||||
### Amazon S3
|
|
||||||
|
|
||||||
The `s3://` URL scheme is provided as a convenience to reference S3 URLs. The URL is converted to an HTTPS URL for access.
|
|
||||||
The S3 Bucket must be public and also provide access to `https://replayweb.page` via CORS.
|
|
||||||
Downloading via S3 credentials is not currently supported.
|
|
||||||
|
|
||||||
|
|
||||||
### Google Drive
|
|
||||||
|
|
||||||
The `googledrive://` URL scheme is used when accessing a web archive shared over Google Drive. It provides a unique identifier
|
|
||||||
provided via Google Drive. When accessing a Google Drive URL, the user will be asked to authenticate to be able to access the file.
|
|
||||||
|
|
||||||
|
|
||||||
### IPFS
|
|
||||||
{: .d-inline-block }
|
|
||||||
|
|
||||||
Help Wanted
|
|
||||||
{: .label .label-yellow }
|
|
||||||
|
|
||||||
|
|
||||||
The `ipfs://` URL scheme is provide as a convenience and resolves to using the Cloudflare IPFS Gateway to download archives from IPFS.
|
|
||||||
A better implementation with IPFS directly is also possible.
|
|
||||||
|
|
||||||
|
|
||||||
### DAT/Hyper
|
|
||||||
{: .d-inline-block }
|
|
||||||
|
|
||||||
Help Wanted
|
|
||||||
{: .label .label-yellow }
|
|
||||||
|
|
||||||
Support for `hyper://` is planned to allow true peer-to-peer transfer of web archives.
|
|
||||||
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: Offline Use
|
|
||||||
nav_order: 2
|
|
||||||
parent: Loading Web Archives
|
|
||||||
permalink: /docs/loading_offline
|
|
||||||
---
|
|
||||||
|
|
||||||
# Offline Use
|
|
||||||
{: .no_toc }
|
|
||||||
|
|
||||||
## ReplayWeb.page is available for offline use in several ways.
|
|
||||||
{: .no_toc .text-delta }
|
|
||||||
|
|
||||||
|
|
||||||
1.
|
|
||||||
{:toc}
|
|
||||||
|
|
||||||
|
|
||||||
## ReplayWeb.page Offline Cache
|
|
||||||
|
|
||||||
After ReplayWeb.page is loaded, it can automatically be used offline without requiring an Internet connection.
|
|
||||||
|
|
||||||
That's to say, once you have loaded ReplayWeb.page online (with an Internet connection), if an Internet connection is not available later on, all web archives already loaded will continue to be available because it's cached.
|
|
||||||
|
|
||||||
To do this, https://replayweb.page/ in your Chrome browser, and the site will start loading local archives even without an Internet connection.
|
|
||||||
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
What's cache?
|
|
||||||
</summary>
|
|
||||||
<p>
|
|
||||||
Cache is a <i>temporary</i> storage space in your browser that keeps certain files. Cached data is used to quickly load an application or website (like replayweb.page!) every time you log on.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
|
|
||||||
## ReplayWeb.page as Progress Web App
|
|
||||||
|
|
||||||
ReplayWeb.page can also be installed as [Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) and be available as a standalone app on desktop and mobile.
|
|
||||||
|
|
||||||
These type of apps use the same, current version of Chrome you normally use while searching or browsing the web. This is still experimental, but should provide the same behavior as regular https://replayweb.page/
|
|
||||||
|
|
||||||
To do this, on the ReplayWeb.page site, you might have noticed a "new window icon" in your search bar. Clicking on this icon will open the progressive web app on your computer so you can use it offline.
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
What's a Progressive Web App?
|
|
||||||
</summary>
|
|
||||||
<p>
|
|
||||||
Progressive Web Apps can be considered as a cross-platform app: part web and part native. PWAs are built on the web and has web features that make is faster and easier to discover and share. AND it also has native features that makes it better integrated with your operating system and allows you to install on your computer so that it works offline!
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<img alt="screenshot of replayweb.page (offline)" src="/docs/assets/replaywebpage-pwa.png">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## ReplayWeb.page as Standalone Desktop (Electron) App
|
|
||||||
|
|
||||||
ReplayWeb.page is also available as a standalone Electron App. In this mode, ReplayWeb.page packages its own version of Chrome.
|
|
||||||
|
|
||||||
To do this, go to our [GitHub repo for replayweb.page](https://github.com/webrecorder/replayweb.page) and scroll down to "what's in this repo" for [app releases](https://github.com/webrecorder/replayweb.page/releases). You can download as a .dmg (for Apple) or .exe (for Windows).
|
|
||||||
|
|
||||||
Although the Web Page/Progressive Web App versions have almost the same features, the standalone App is useful for two primary reasons:
|
|
||||||
|
|
||||||
1) For viewing web archives that contain Flash. Flash is not supported by default in most browsers and will soon be removed. The ReplayWeb.page App will bundle a Flash plugin to continue to make Flash accessible for web archives.
|
|
||||||
|
|
||||||
2) Primary use for viewing offline web archive. If your primary use is to view web archives stored locally,
|
|
||||||
the ReplayWeb.page App is a better option, as it provides direct access to the file system.
|
|
||||||
Once loaded, ReplayWeb.page App can continue to load web archives from disk.
|
|
||||||
The desktop app fully replaces [Webrecorder Player](https://github.com/webrecorder/webrecorder-player)
|
|
||||||
|
|
||||||
When using [https://replayweb.page](https://replayweb.page), you may be asked to re-open a local file because a web site can not have persistent access to your file system.
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
What's a standalone desktop (Electron) app?
|
|
||||||
</summary>
|
|
||||||
<p>
|
|
||||||
Electron is the framework being used for a native application. A standalone desktop app just means that you can download the application to your desktop and open it up whenever without Internet!
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<img alt="screenshot of replayweb.page (offline)" src="/docs/assets/replaywebpage-releases.png">
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
Once an archive has successfully loaded, you will be redirected to the archive view from where you can explore the archive.
|
|
||||||
|
|
||||||
Next: [Exploring the Archive](/docs/exploring)
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: Reference
|
|
||||||
nav_order: 6
|
|
||||||
has_children: true
|
|
||||||
permalink: /docs/reference
|
|
||||||
---
|
|
||||||
|
|
||||||
## Reference
|
|
||||||
|
|
||||||
A guide to the file formats, specifications, source locations and other APIs to be supported by ReplayWeb.Page
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: Sharing Web Archives
|
|
||||||
nav_order: 3
|
|
||||||
permalink: /docs/sharing
|
|
||||||
---
|
|
||||||
|
|
||||||
## Sharing Links
|
|
||||||
|
|
||||||
ReplayWeb.page links are designed to be shareable with others, as long as they have access.
|
|
||||||
|
|
||||||
You can share links to any view, including Page or Page Resources search, or Replay view.
|
|
||||||
|
|
||||||
ReplayWeb.page encodes the web archive source and view parameters in the URL query and hash string.
|
|
||||||
|
|
||||||
Simply copy the entire location URL, and you can share with others!
|
|
||||||
|
|
||||||
ReplayWeb.page will parse the URL, load the source web archive, then load the view or replay from that archive.
|
|
||||||
|
|
||||||
For example, given the following URL:
|
|
||||||
|
|
||||||
```
|
|
||||||
https://replayweb.page/?source=s3://webrecorder-builds/warcs/netpreserve-twitter.warc#view=replay&url=https%3A%2F%2Ftwitter.com%2Fnetpreserve&ts=20190603053135
|
|
||||||
```
|
|
||||||
|
|
||||||
ReplayWeb.page will load the web archive from `s3://webrecorder-builds/warcs/netpreserve-twitter.warc`, switch to
|
|
||||||
the replay view via `https://twitter.com/netpreserve` at timestamp `20190603053135`
|
|
||||||
|
|
||||||
The following URL will load the same web archive, and show the search results for Pages that contain the word 'WARC':
|
|
||||||
|
|
||||||
```
|
|
||||||
https://replayweb.page/?source=s3://webrecorder-builds/warcs/netpreserve-twitter.warc#view=pages&query=WARC
|
|
||||||
```
|
|
||||||
|
|
||||||
### No Local Files
|
|
||||||
|
|
||||||
For obvious reasons, URLs that have a `source=file://...` can not be shared as they refer to a local file on your machine.
|
|
||||||
Loading that URL by anyone else will result in an error.
|
|
||||||
|
|
||||||
{: .fs-3 .pad .bg-grey-lt-100}
|
|
||||||
A future goal is to provide an option to share local web archives peer-to-peer via the DAT `hyper://` protocol.
|
|
||||||
|
|
||||||
|
|
||||||
### Sharing Google Drive Archives
|
|
||||||
|
|
||||||
An archive loaded from Google Drive can be shared with others, as long as they have access.
|
|
||||||
|
|
||||||
Google Drive Archive will have a `source=googledrive://...`.
|
|
||||||
|
|
||||||
Due to restrictions of Google Drive, you will likely be required to authorize with your Google Account to access an archive from Google Drive.
|
|
||||||
|
|
||||||
Public files shared from Google Drive can sometimes be loaded without requiring authorization, but this is only supported
|
|
||||||
for small files.
|
|
||||||
|
|
||||||
To share a Google Drive web archive with colleagues and friends:
|
|
||||||
|
|
||||||
1. Ensure they you have [loaded the web archive from Google Drive](loading_online#loading-remote-archives-from-google-drive)
|
|
||||||
|
|
||||||
2. Ensure that your friends/colleagues also have the [ReplayWeb.page Google Drive Integration](https://gsuite.google.com/u/2/marketplace/app/replaywebpage/160798412227) installed.
|
|
||||||
|
|
||||||
3. Share the file with them via Google Drive. This is the most surefire way to work.
|
|
||||||
|
|
||||||
OR.
|
|
||||||
|
|
||||||
3. You can share the direct ReplayWeb.page URL directly. This does not always work, and you may need to share the Google Drive link instead.
|
|
||||||
|
|
||||||
|
|
||||||
In this way, web archives can be shared within private networks using existing access control settings in Google Drive.
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
Next: Offline Usage Options
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
---
|
|
||||||
layout: page
|
|
||||||
title: Troubleshooting
|
|
||||||
nav_order: 5
|
|
||||||
description: Troubleshooting ReplayWeb.page
|
|
||||||
permalink: /docs/troubleshooting
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
This section will be dedicated to common errors and issues that we’ve encountered during web archiving.
|
|
||||||
|
|
||||||
### WARC file is too big / too slow / fails to load.
|
|
||||||
#### Loading Large Files: Full vs On-Demand Loading
|
|
||||||
|
|
||||||
Due to the nature of the WARC format, the entire file must be read on first use to generate an index.
|
|
||||||
|
|
||||||
For WARC files **>25MB**, only the index is initially stored in the browser, and the actual content is loaded 'on-demand',
|
|
||||||
when the content is first accessed. This leads to faster loading and saves memory when dealing with large archives, but the entire
|
|
||||||
file must still be read.
|
|
||||||
|
|
||||||
[Web Archive Collection (WACZ)](wacz-format) are always loaded on-demand, as no indexing is required.
|
|
||||||
The initial archive view should load almost instantly as a result.
|
|
||||||
|
|
||||||
We recommend converting larger WARC files to WACZ files.
|
|
||||||
|
|
||||||
This is currently possible by using the `wacz` python library, see [py-wacz documentation](https://github.com/webrecorder/py-wacz)
|
|
||||||
for more info.
|
|
||||||
|
|
||||||
While we've recently made improvements to large WARC loading, for very large files, this may still take some time and occasionally the browser may not load the full file.
|
|
||||||
|
|
||||||
If an archive could not be loaded, an error will be displayed instead of the progress.
|
|
||||||
Please report any issues encountered via [GitHub Issues](https://github.com/webrecorder/replayweb.page/issues)
|
|
||||||
|
|
||||||
## Have another error or issue?
|
|
||||||
Since we just launched, we’ll need your help with what we should troubleshoot! Please contact us and ask us questions and show us examples.
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: Loading Web Archives
|
|
||||||
nav_order: 2
|
|
||||||
description: How to use ReplayWeb.page
|
|
||||||
has_children: true
|
|
||||||
permalink: /docs/usage
|
|
||||||
---
|
|
||||||
|
|
||||||
# How to use ReplayWeb.Page
|
|
||||||
So you generated WARC files after capturing your website. Now what? <br><br>
|
|
||||||
At this point in your web archiving workflow, you'll most likely want to <i><a alt="Replay in this case would be to reproduce, playback or see your web archives again." title="Reproduce, playback, or see again."><span style="cursor: help;">replay</span></a></i> these WARC files.
|
|
||||||
|
|
||||||
This is where replayweb.page can be helpful for you! You can view your web archives either from various locations directly in the browser or offline on your computer.
|
|
||||||
|
|
||||||
## <a href="/docs/loading_online">Online Use</a>
|
|
||||||
|
|
||||||
Currently the easiest way to view your WARC and/or WACZ files is online through <a href="https://replayweb.page/" target="_blank">replayweb.page</a>. You can load web archives locally from your computer or from other remote web archives. Check out [Online Use](/docs/loading_online) for more information how to load your web archives.
|
|
||||||
|
|
||||||
<img alt="GIF of uploading a WACZ file into replayweb.page" src="/docs/assets/replaywebpage-online.gif">
|
|
||||||
|
|
||||||
## <a href="/docs/loading_offline">Offline Use</a>
|
|
||||||
You can run replayweb.page on your computer by running it locally. And then you can load web archives the same way you would online. Check out [Offline Use](/docs/loading_offline) for more information how to load your web archives - offline.
|
|
||||||
|
|
||||||
<img alt="GIF of uploading a WACZ file into replayweb.page running off of localhost (offline)" src="/docs/assets/replaywebpage-offline.gif">
|
|
||||||
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
layout: default
|
|
||||||
title: WACZ Format
|
|
||||||
nav_order: 1
|
|
||||||
permalink: /docs/wacz-format
|
|
||||||
parent: Reference
|
|
||||||
---
|
|
||||||
|
|
||||||
## Web Archive Collection Format Specification
|
|
||||||
|
|
||||||
ReplayWeb.page supports a new format for bundling raw web archive data (usually WARC files), indices,
|
|
||||||
page lists and other metadata into a single ZIP file.
|
|
||||||
|
|
||||||
The full spec for this format is available at: [https://github.com/webrecorder/web-archive-collection-format/blob/master/README.md](https://github.com/webrecorder/web-archive-collection-format/blob/master/README.md)
|
|
||||||
|
|
||||||
Files bundled into this format can use the .wacz (web archive collection zipped) file extension.
|
|
||||||
|
|
||||||
ReplayWeb.page will recognize this extension (as well as regular .zip) and will also load it from Google Drive when the
|
|
||||||
[Google Drive Integration](https://gsuite.google.com/u/2/marketplace/app/replaywebpage/160798412227) is installed.
|
|
||||||
|
|
||||||
The key benefit of this format is that large web archive collections can be loaded very quickly, to show the page list
|
|
||||||
and other key metadata, by downloading only parts of the WACZ file, as [outlined here](https://github.com/webrecorder/web-archive-collection-format/blob/master/README.md#appendix-a-use-case-random-access-to-web-archives-in-zip)
|
|
||||||
|
|
||||||
The actual raw content is loaded on-demand when the user requests each page.
|
|
||||||
|
|
||||||
With a WARC file, the entire contents must be loaded or indexed to determine the contents of the web archive collection.
|
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import json
|
||||||
|
|
||||||
|
def define_env(env):
|
||||||
|
"""
|
||||||
|
This is the hook for the functions (new form)
|
||||||
|
"""
|
||||||
|
version = "LATEST"
|
||||||
|
try:
|
||||||
|
with open("../package.json") as fh:
|
||||||
|
version = json.loads(fh.read())["version"]
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
|
||||||
|
@env.macro
|
||||||
|
def rwp_version():
|
||||||
|
"get the version"
|
||||||
|
return version
|
||||||
|
|
||||||
@@ -0,0 +1,110 @@
|
|||||||
|
site_name: ReplayWeb.page Docs
|
||||||
|
docs_dir: ../site/
|
||||||
|
watch:
|
||||||
|
- ../site/
|
||||||
|
site_dir: _genhtml/
|
||||||
|
repo_url: https://github.com/webrecorder/replayweb.page
|
||||||
|
repo_name: ReplayWeb.page
|
||||||
|
edit_uri: edit/main/site/docs/
|
||||||
|
extra_css:
|
||||||
|
- docs/stylesheets/extra.css
|
||||||
|
extra_javascript:
|
||||||
|
- docs/js/sw.js
|
||||||
|
theme:
|
||||||
|
name: material
|
||||||
|
custom_dir: ../site/docs/overrides
|
||||||
|
features:
|
||||||
|
- navigation.sections
|
||||||
|
- navigation.tabs
|
||||||
|
- navigation.tabs.sticky
|
||||||
|
- navigation.instant
|
||||||
|
- navigation.tracking
|
||||||
|
- navigation.indexes
|
||||||
|
- navigation.footer
|
||||||
|
- content.code.copy
|
||||||
|
- content.action.edit
|
||||||
|
- content.tooltips
|
||||||
|
- search.suggest
|
||||||
|
palette:
|
||||||
|
scheme: webrecorder
|
||||||
|
logo: docs/assets/brand/replaywebpage-icon-white.svg
|
||||||
|
favicon: docs/assets/brand/favicon.svg
|
||||||
|
|
||||||
|
icon:
|
||||||
|
admonition:
|
||||||
|
note: bootstrap/pencil-fill
|
||||||
|
abstract: bootstrap/file-earmark-text-fill
|
||||||
|
info: bootstrap/info-circle-fill
|
||||||
|
tip: bootstrap/exclamation-circle-fill
|
||||||
|
success: bootstrap/check-circle-fill
|
||||||
|
question: bootstrap/question-circle-fill
|
||||||
|
warning: bootstrap/exclamation-triangle-fill
|
||||||
|
failure: bootstrap/x-octagon-fill
|
||||||
|
danger: bootstrap/exclamation-diamond-fill
|
||||||
|
bug: bootstrap/bug-fill
|
||||||
|
example: bootstrap/mortarboard-fill
|
||||||
|
quote: bootstrap/quote
|
||||||
|
|
||||||
|
repo: bootstrap/github
|
||||||
|
edit: bootstrap/pencil
|
||||||
|
view: bootstrap/eye
|
||||||
|
|
||||||
|
nav:
|
||||||
|
- docs/index.md
|
||||||
|
- Embedding:
|
||||||
|
- docs/embedding/index.md
|
||||||
|
- docs/embedding/cors-settings.md
|
||||||
|
- User Guide:
|
||||||
|
- docs/user-guide/index.md
|
||||||
|
- docs/user-guide/loading.md
|
||||||
|
- docs/user-guide/locations.md
|
||||||
|
- docs/user-guide/exploring.md
|
||||||
|
- docs/user-guide/sharing.md
|
||||||
|
- docs/user-guide/offline-use.md
|
||||||
|
|
||||||
|
markdown_extensions:
|
||||||
|
- toc:
|
||||||
|
toc_depth: 3
|
||||||
|
permalink: true
|
||||||
|
- pymdownx.highlight:
|
||||||
|
anchor_linenums: true
|
||||||
|
- pymdownx.emoji:
|
||||||
|
emoji_index: !!python/name:material.extensions.emoji.twemoji
|
||||||
|
emoji_generator: !!python/name:material.extensions.emoji.to_svg
|
||||||
|
options:
|
||||||
|
custom_icons:
|
||||||
|
- ../site/docs/overrides/.icons
|
||||||
|
- admonition
|
||||||
|
- pymdownx.inlinehilite
|
||||||
|
- pymdownx.details
|
||||||
|
- pymdownx.superfences
|
||||||
|
- pymdownx.keys
|
||||||
|
- def_list
|
||||||
|
- attr_list
|
||||||
|
|
||||||
|
extra:
|
||||||
|
generator: false
|
||||||
|
social:
|
||||||
|
- icon: bootstrap/globe
|
||||||
|
link: https://webrecorder.net
|
||||||
|
- icon: bootstrap/chat-left-text-fill
|
||||||
|
link: https://forum.webrecorder.net/
|
||||||
|
- icon: bootstrap/mastodon
|
||||||
|
link: https://digipres.club/@webrecorder
|
||||||
|
- icon: bootstrap/youtube
|
||||||
|
link: https://www.youtube.com/@webrecorder
|
||||||
|
copyright: "Creative Commons Attribution 4.0 International (CC BY 4.0)"
|
||||||
|
|
||||||
|
plugins:
|
||||||
|
- macros
|
||||||
|
- search
|
||||||
|
- redirects:
|
||||||
|
redirect_maps:
|
||||||
|
'docs/cors-settings.md': 'docs/embedding/cors-settings.md'
|
||||||
|
'docs/usage.md': 'docs/user-guide/index.md'
|
||||||
|
'docs/loading_online.md': docs/user-guide/loading.md
|
||||||
|
'docs/loading_offline.md': docs/user-guide/offline-use.md
|
||||||
|
'docs/exploring.md': 'docs/user-guide/exploring.md'
|
||||||
|
'docs/sharing.md': 'docs/user-guide/sharing.md'
|
||||||
|
'docs/locations.md': 'docs/user-guide/locations.md'
|
||||||
|
'docs/formats.md': 'docs/user-guide/index.md#supported-formats'
|
||||||
+6
-6
@@ -73,17 +73,17 @@
|
|||||||
"index.html"
|
"index.html"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "webpack --mode production",
|
"build": "webpack --mode production && cp dist/ui.js site/ui.js",
|
||||||
"build-dev": "webpack --mode development",
|
"build-dev": "webpack --mode development && cp dist/ui.js site/ui.js",
|
||||||
"build-docs": "bundle install; bundle exec jekyll build",
|
"build-docs": "yarn run build && cd mkdocs && mkdocs build",
|
||||||
|
"start-prod": "cd site && http-server -p 9990 --cors",
|
||||||
"start-dev": "webpack serve --mode development",
|
"start-dev": "webpack serve --mode development",
|
||||||
"start-prod": "http-server -p 9990 --cors",
|
"start-docs": "yarn run build-dev && cd mkdocs && mkdocs serve",
|
||||||
|
"start-electron": "NODE_ENV=development electron ./dist/electron.js $1",
|
||||||
"test-start-embed": "cd tests/embed; http-server -p 8020",
|
"test-start-embed": "cd tests/embed; http-server -p 8020",
|
||||||
"test-start-sandbox": "cd tests/embed/sandbox; http-server -p 8030",
|
"test-start-sandbox": "cd tests/embed/sandbox; http-server -p 8030",
|
||||||
"pack": "CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --publish never",
|
"pack": "CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --publish never",
|
||||||
"pack-signed": "electron-builder",
|
"pack-signed": "electron-builder",
|
||||||
"start-electron": "NODE_ENV=development electron ./dist/electron.js $1",
|
|
||||||
"start-jekyll": "yarn run build-docs && bundle exec jekyll serve",
|
|
||||||
"dist": "yarn run build && yarn run pack",
|
"dist": "yarn run build && yarn run pack",
|
||||||
"dist-dev": "yarn run build-dev && yarn run pack",
|
"dist-dev": "yarn run build-dev && yarn run pack",
|
||||||
"release": "yarn run build && electron-builder",
|
"release": "yarn run build && electron-builder",
|
||||||
|
|||||||
@@ -1,4 +0,0 @@
|
|||||||
*
|
|
||||||
!README
|
|
||||||
!.gitignore
|
|
||||||
|
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
dev2.replayweb.page
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 8 8">
|
||||||
|
<style>.b{fill:#0891b2}.g{fill:#4d7c0f}@media (prefers-color-scheme:dark){.b{fill:#0aaed7}.g{fill:#65a414}}</style>
|
||||||
|
<path class="b" d="M2.2 3.6a.08.08 0 0 1-.08-.1c.11-.56.49-1.02 1-1.26h.04v.05c-.13.33-.23.76-.26 1.23 0 .05-.03.08-.07.08H2.2Zm2.36-1.31v-.04a.04.04 0 0 1 .05-.01c.5.23.88.7.99 1.26 0 .03 0 .05-.02.07a.08.08 0 0 1-.06.03H4.9a.08.08 0 0 1-.08-.08c-.03-.47-.12-.9-.26-1.23Zm.96 1.79c.02 0 .05 0 .06.03.02.02.02.04.02.06-.1.56-.48 1.03-.99 1.27h-.04a.04.04 0 0 1-.01-.05c.14-.33.23-.76.26-1.24 0-.04.04-.07.08-.07h.62Zm-2.36 1.3v.05a.04.04 0 0 1-.05.01c-.5-.24-.88-.7-.98-1.27a.08.08 0 0 1 .07-.1h.63c.04 0 .07.04.08.08.02.48.12.9.25 1.24Zm.23-1.22c0-.02 0-.04.02-.06a.08.08 0 0 1 .06-.02h.79c.02 0 .04 0 .06.02l.02.06c-.04.51-.15.95-.32 1.24a.74.74 0 0 1-.13.17.04.04 0 0 1-.05 0 .71.71 0 0 1-.13-.17 2.74 2.74 0 0 1-.32-1.24Zm.95-.65c0 .03 0 .05-.02.06a.08.08 0 0 1-.06.03h-.8a.05.05 0 0 1-.05-.03.08.08 0 0 1-.02-.06c.03-.5.14-.94.32-1.24a.7.7 0 0 1 .13-.17.04.04 0 0 1 .05 0c.04.04.09.1.13.17.17.3.28.74.32 1.24Z"/>
|
||||||
|
<path class="g" d="M7.64 4.2a.1.1 0 0 1 .04.08 3.84 3.84 0 0 1-7.63-.03.08.08 0 0 1 .11-.08l.58.33c.02.02.05.02.08 0l.56-.32a.08.08 0 0 1 .07 0c.03 0 .04.03.05.05a2.4 2.4 0 0 0 4.73.01c0-.02.02-.04.04-.05l.64-.35a.08.08 0 0 1 .08 0l.65.36ZM.1 3.41a.08.08 0 0 1-.04-.08 3.84 3.84 0 0 1 7.61.03c0 .03 0 .06-.03.07a.08.08 0 0 1-.09 0L7 3.12a.08.08 0 0 0-.08 0l-.57.33a.08.08 0 0 1-.07 0 .08.08 0 0 1-.05-.05 2.4 2.4 0 0 0-4.7-.03.1.1 0 0 1-.05.06l-.65.35a.08.08 0 0 1-.08 0L.1 3.41Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 24 24">
|
||||||
|
<path fill="none" d="M0 0h23.04v23.04H0z"/>
|
||||||
|
<clipPath id="a">
|
||||||
|
<path d="M0 0h23.04v23.04H0z"/>
|
||||||
|
</clipPath>
|
||||||
|
<g fill="#fff" clip-path="url(#a)">
|
||||||
|
<path d="M6.54 10.8a.24.24 0 0 1-.24-.28 5.32 5.32 0 0 1 2.97-3.8.1.1 0 0 1 .13.02c.03.03.04.08.02.13-.4 1-.69 2.27-.77 3.7 0 .13-.11.23-.24.23H6.54Zm7.07-3.93c-.02-.05 0-.1.03-.13a.12.12 0 0 1 .13-.03 5.32 5.32 0 0 1 2.96 3.8.24.24 0 0 1-.23.29h-1.87a.24.24 0 0 1-.24-.23 11.6 11.6 0 0 0-.78-3.7Zm2.89 5.37c.07 0 .13.03.18.08.05.06.07.13.05.2a5.32 5.32 0 0 1-2.96 3.8.12.12 0 0 1-.13-.02.12.12 0 0 1-.02-.14c.4-.99.69-2.27.77-3.7 0-.13.11-.22.24-.22h1.87Zm-7.07 3.92a.12.12 0 0 1-.16.16 5.32 5.32 0 0 1-2.96-3.8.24.24 0 0 1 .05-.2.24.24 0 0 1 .18-.08h1.87c.13 0 .23.1.24.22.09 1.43.37 2.71.78 3.7Zm.66-3.67c0-.06.02-.13.07-.18.04-.05.1-.07.17-.07h2.38c.07 0 .13.02.17.07.05.05.07.12.07.18a8.77 8.77 0 0 1-.96 3.72c-.12.2-.26.39-.4.5a.12.12 0 0 1-.14 0 2.1 2.1 0 0 1-.4-.5 8.77 8.77 0 0 1-.96-3.72Zm2.86-1.95a.24.24 0 0 1-.24.26h-2.38a.24.24 0 0 1-.24-.26 8.7 8.7 0 0 1 .96-3.72c.12-.2.26-.39.4-.5a.1.1 0 0 1 .14 0c.14.11.28.3.4.5.52.88.86 2.2.96 3.72Z"/>
|
||||||
|
<path d="M22.85 12.61c.08.05.13.14.12.24a11.53 11.53 0 0 1-22.9-.1c0-.1.03-.18.1-.23a.24.24 0 0 1 .26 0c.52.3 1.4.8 1.72 1 .07.04.17.04.24 0l1.67-.99a.24.24 0 0 1 .36.17 7.2 7.2 0 0 0 14.2.03.24.24 0 0 1 .13-.17l1.91-1.03a.24.24 0 0 1 .23 0l1.96 1.08ZM.23 10.24A.24.24 0 0 1 .1 10a11.53 11.53 0 0 1 22.86.07.24.24 0 0 1-.36.24l-1.7-.99a.24.24 0 0 0-.24 0l-1.7 1a.24.24 0 0 1-.37-.16 7.2 7.2 0 0 0-14.12-.07.24.24 0 0 1-.12.16l-1.96 1.06a.24.24 0 0 1-.24 0L.23 10.24Z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 MiB After Width: | Height: | Size: 6.5 MiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 9.9 MiB After Width: | Height: | Size: 9.9 MiB |
@@ -0,0 +1,108 @@
|
|||||||
|
# Configuring CORS
|
||||||
|
|
||||||
|
## Primer
|
||||||
|
|
||||||
|
ReplayWeb.page can can load files from any web server, but works best when the server hosting the archived content can respond to `Range` requests. That being said, a common obstacle is configuring Cross-Origin Resource Sharing (CORS) settings to give ReplayWeb.page access to the data when content is being hosted from a different server than the webpage where it is embedded.
|
||||||
|
|
||||||
|
Browsers typically restrict access to files hosted on a different domain than the website they are trying to load for security reasons.
|
||||||
|
|
||||||
|
If you are loading archived items from a different domain (for example, S3 or other cloud storage), the site hosting the file needs to 'allow' the website to load the file using special CORS headers.
|
||||||
|
|
||||||
|
These settings apply whenever archived items are hosted on a different domain than the viewer. If you are loading via the [https://replayweb.page](https://replayweb.page) site, you need to grant access to `https://replayweb.page` to load these items.
|
||||||
|
|
||||||
|
The minimum requirement is to return: `Access-Control-Allow-Origin: https://replayweb.page` and most CORS settings include at least this option.
|
||||||
|
|
||||||
|
## Differences Between Chrome, Firefox, and Safari
|
||||||
|
|
||||||
|
Unfortunately, browsers have diverged in how they handle enforcing CORS policies.
|
||||||
|
|
||||||
|
Firefox and Safari sometimes send a [pre-flight OPTIONS request](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) when handling ReplayWeb.page requests, because the ReplayWeb.page uses the `Range` header.
|
||||||
|
|
||||||
|
Chrome currently considers it a 'safe' header, but the other browsers have not yet made this change.
|
||||||
|
|
||||||
|
For best compatibility with all browsers, we recommend including all headers as 'allowed headers' for use with ReplayWeb.page, eg.
|
||||||
|
by setting `Access-Control-Allow-Headers: '*'` as part of the CORS response in addition to `Access-Control-Allow-Origin`.
|
||||||
|
|
||||||
|
## CORS Configurations for Common Hosting Environments
|
||||||
|
|
||||||
|
The following section provides suggested CORS configurations for different hosting environments. For more examples of CORS configurations for different servers, see: [enable-cors.org](https://enable-cors.org/).
|
||||||
|
|
||||||
|
### S3 and Compatible Configurations
|
||||||
|
|
||||||
|
When hosting with Amazon S3 or an S3-compatible service, these CORS bucket configurations _should_ work.
|
||||||
|
|
||||||
|
Amazon S3 and other services now support a JSON based bucket policy, as well as an older XML-based policy.
|
||||||
|
|
||||||
|
The below examples provide access to `https://replayweb.page` to load your archive. When [embedding replayweb.page](index.md), replace the URL with that of the server (origin) URL where the `#!html <replay-web-page>` embed is hosted.
|
||||||
|
|
||||||
|
Both the JSON and XML options provide a method of specifying multiple origins via the JSON list or multiple `#!xml <AllowedOrigin>` tags.
|
||||||
|
|
||||||
|
#### JSON-Based Configuration
|
||||||
|
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"AllowedOrigins": [
|
||||||
|
"https://replayweb.page"
|
||||||
|
],
|
||||||
|
"AllowedMethods": [
|
||||||
|
"GET",
|
||||||
|
"HEAD"
|
||||||
|
],
|
||||||
|
"AllowedHeaders": [
|
||||||
|
"*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
#### XML-Based Configuration
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<CORSConfiguration
|
||||||
|
xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
|
||||||
|
<CORSRule>
|
||||||
|
<AllowedMethod>GET</AllowedMethod>
|
||||||
|
<AllowedMethod>HEAD</AllowedMethod>
|
||||||
|
<AllowedOrigin>https://replayweb.page</AllowedOrigin>
|
||||||
|
<AllowedHeader>*</AllowedHeader>
|
||||||
|
<ExposeHeader>Content-Range</ExposeHeader>
|
||||||
|
<ExposeHeader>Content-Encoding</ExposeHeader>
|
||||||
|
<ExposeHeader>Content-Length</ExposeHeader>
|
||||||
|
</CORSRule>
|
||||||
|
</CORSConfiguration>
|
||||||
|
```
|
||||||
|
|
||||||
|
This policy can be applied using the [s3cmd](https://s3tools.org/usage) command-line tool:
|
||||||
|
|
||||||
|
1. Paste the above snippet into a file, eg. `cors.xml`
|
||||||
|
2. Set the `#!xml <AllowedOrigin>` URL to the site hosting the embed. You can add as many of these as necessary.
|
||||||
|
3. Run `s3cmd setcors ./cors.xml s3://<your-bucket>` to apply the settings from the XML file to the selected S3 bucket.
|
||||||
|
|
||||||
|
See the s3cmd docs for how to configure s3cmd to work with your setup.
|
||||||
|
|
||||||
|
See [S3 Docs](https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html) for more info on how to set this policy.
|
||||||
|
|
||||||
|
Other cloud providers may have a similar settings for configuring CORS.
|
||||||
|
|
||||||
|
### Manual Setup / Nginx
|
||||||
|
|
||||||
|
The recommended setup for nginx is to include the following CORS settings. Like the above, when [embedding replayweb.page](index.md), replace the URL with that of the server (origin) URL where the `#!html <replay-web-page>` embed is hosted.
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
location / {
|
||||||
|
if ($request_method = 'OPTIONS') {
|
||||||
|
add_header 'Access-Control-Allow-Origin' 'https://replayweb.page';
|
||||||
|
add_header 'Access-Control-Allow-Methods' 'GET, HEAD, OPTIONS' always;
|
||||||
|
add_header 'Access-Control-Allow-Headers' '*' ;
|
||||||
|
return 204;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($request_method = 'GET') {
|
||||||
|
add_header 'Access-Control-Allow-Origin' 'https://replayweb.page' always;
|
||||||
|
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
|
||||||
|
add_header 'Access-Control-Allow-Headers' '*' always;
|
||||||
|
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
@@ -0,0 +1,174 @@
|
|||||||
|
# Embedding ReplayWeb.page
|
||||||
|
|
||||||
|
## Primer
|
||||||
|
|
||||||
|
A key goal of ReplayWeb.page is to make embedding archived web content into other sites as easy as embedding other media like images and PDFs.
|
||||||
|
|
||||||
|
To make this possible ReplayWeb.page provides the `#!html <replay-web-page>` HTML web component to support embedding in the pages where you would like to display web archives. This component works in all modern browsers, and has several configuration options that allow for control over the initial URL or snapshot to display from the archive when the component loads. The component can load WACZ files that are created with Webrecorder tools, as well as standalone WARC files.
|
||||||
|
|
||||||
|
The `#!html <replay-web-page>` web component requires a backend service worker to be loaded by your website. While the frontend and backend are both static JavaScript assets which can be loaded from a CDN (Content Delivery Network), the backend service worker JavaScript file must be served from your website. This service worker is responsible for retrieving data on demand from your web archive file.
|
||||||
|
|
||||||
|
!!! tip "Tip: Serving web archives efficiently with WACZ files"
|
||||||
|
While other web archive filetypes may require ReplayWeb.page to download them in their entirety before viewing, WACZ files allow the service worker to pull individual resources from the file as they are requested by the user. Full retrieval of the WACZ by ReplayWeb.page is *not* required as long as the server delivering the WACZ file supports HTTP range requests. This means that serving archived content from WACZ files is effectively as bandwidth efficient as any other web content!
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
### Loading the Frontend
|
||||||
|
|
||||||
|
To embed a WACZ stored at `https://replayweb.page/docs/assets/tweet-example.wacz`, add the following `#!html <script>` tag to your HTML page to load the user interface from the jsDelivr CDN, and use the `#!html <replay-web-page>` component to point to the WACZ:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/replaywebpage@{{ rwp_version() }}/ui.js"></script>
|
||||||
|
|
||||||
|
<replay-web-page source="https://replayweb.page/docs/assets/tweet-example.wacz"
|
||||||
|
url="https://oembed.link/https://twitter.com/webrecorder_io/status/1565881026215219200"></replay-web-page>
|
||||||
|
```
|
||||||
|
|
||||||
|
In this example, the `source` attribute is pointing to the location of the WACZ file (in this case published on AWS S3) and the `url` attribute is used to indicate what URL to display from the archived item after the component loads.
|
||||||
|
|
||||||
|
### Loading the Backend
|
||||||
|
|
||||||
|
ReplayWeb.page's backend is a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) which intercepts requests for URLs and looks for them in your loaded archived item. Service workers are just JavaScript files, but it is necessary to add a service worker path from where the web archive will be served. This allows the service worker to catch requests only from the scope of the current page.
|
||||||
|
|
||||||
|
To do this, create a `/replay` subdirectory and in it, a new JavaScript file (`/replay/sw.js`) and copy the following to the file:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
importScripts("https://cdn.jsdelivr.net/npm/replaywebpage@{{ rwp_version() }}/sw.js");
|
||||||
|
```
|
||||||
|
|
||||||
|
If the HTML above was added to `https://example.com/path/my-web-archive-embed.html`
|
||||||
|
then the `sw.js` should be added such that it is at: `https://example.com/path/replay/sw.js`.
|
||||||
|
|
||||||
|
That's it! Loading `https://example.com/path/my-web-archive-embed.html` should now load the web archive.
|
||||||
|
|
||||||
|
Be sure to add width and height styles to the `#!html <replay-web-page>` tag as needed to scale the embed, and replace `https://replayweb.page/docs/assets/example.wacz` with any web archive hosted on your site.
|
||||||
|
|
||||||
|
??? Info "Info: Loading files from different servers"
|
||||||
|
If the file is loaded from a different origin, your site must have Cross Origin Resource Sharing (CORS) access to download the web archive.
|
||||||
|
<br>See [Loading Errors](#loading-errors) below for more info.
|
||||||
|
|
||||||
|
??? Tip "Best Practice: Controlling ReplayWeb.page versions"
|
||||||
|
|
||||||
|
The above example uses the version number "{{ rwp_version() }}" in paths to load a specific version of ReplayWeb.page from a CDN. These URLs point to a specific version of ReplayWeb.page software released on NPM, meaning that your replay viewer should stay stable, even if ReplayWeb.page is updated.
|
||||||
|
|
||||||
|
- `https://cdn.jsdelivr.net/npm/replaywebpage@{{ rwp_version() }}/ui.js`
|
||||||
|
- `https://cdn.jsdelivr.net/npm/replaywebpage@{{ rwp_version() }}/sw.js`
|
||||||
|
|
||||||
|
Although ReplayWeb.page strives to remain backwards compatible, this addresses any potential issue of older embeds breaking when the replay system is updated.
|
||||||
|
|
||||||
|
You can also use the latest stable release by omitting the version, and the URL will automatically load the latest published release:
|
||||||
|
|
||||||
|
- `https://cdn.jsdelivr.net/npm/replaywebpage/ui.js`
|
||||||
|
- `https://cdn.jsdelivr.net/npm/replaywebpage/sw.js`
|
||||||
|
|
||||||
|
This is not recommended for production use as this is more likely to break in case there is a breaking change.
|
||||||
|
|
||||||
|
For testing the very latest, it is possible to simply link to replayweb.page itself, eg. `https://replayweb.page/ui.js`
|
||||||
|
and `https://replayweb.page/sw.js` but these are updated the most frequently and more likely to break.
|
||||||
|
|
||||||
|
For production use, it is recommended to use a fixed version and explicitly upgrade as necessary.
|
||||||
|
|
||||||
|
## Self Hosting
|
||||||
|
|
||||||
|
Sometimes it can be desirable to self-host the user interface, service worker, and WACZ files. This is useful for preventing tracking by CDNs, or to make it easier to host the content in one place without needing to work out the details of Cross Origin Resource Sharing (CORS).
|
||||||
|
|
||||||
|
Following the same steps above, instead of loading the JavaScript and WACZ file from external locations, [download](https://www.jsdelivr.com/package/npm/replaywebpage) the `ui.js` and `sw.js` JavaScript files and put them on the same server as the HTML that you are publishing. Link them accordingly replacing the CDN links in the guide above.
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
If you are publishing a page at `https://example.com/path/my-web-archive-embed.html`, adjust the `#!html <script>` element to load the ui from a location on your website:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="ui.js"></script>
|
||||||
|
|
||||||
|
<replay-web-page source="example.wacz" url="https://webrecorder.net"></replay-web-page>
|
||||||
|
```
|
||||||
|
|
||||||
|
The following URLs would then need to resolve correctly:
|
||||||
|
|
||||||
|
* https://example.com/path/my-web-archive-embed.html
|
||||||
|
* https://example.com/path/example.wacz
|
||||||
|
* https://example.com/path/ui.js
|
||||||
|
* https://example.com/path/replay/sw.js
|
||||||
|
|
||||||
|
When embedding more than one web archive on your site it can be helpful to centralize the location of the frontend and backend JavaScript, and potentially WACZ files. The `#!html <replay-web-page>` component has a `replayBase` attribute that lets you define the location to load the `sw.js` service worker from. By default, `replayBase` is set to `./replay/` and so the service worker is loaded from `./replay/sw.js`.
|
||||||
|
|
||||||
|
For example, if you publish your JavaScript files at:
|
||||||
|
|
||||||
|
* https://example.com/js/ui.js
|
||||||
|
* https://example.com/js/sw.js
|
||||||
|
* https://example.com/wacz/example.wacz
|
||||||
|
|
||||||
|
Then you must adjust your HTML to reference the new resources:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src=""/js/ui.js""></script>
|
||||||
|
|
||||||
|
<replay-web-page replayBase="/js/" source="/wacz/example.wacz" url="https://webrecorder.net"></replay-web-page>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Embed Modes
|
||||||
|
|
||||||
|
ReplayWeb.page offers four different ways to embed the archived content, including with or without the navigation UI, and with an archival information dropdown. The embed mode can be set via the `embed` property:
|
||||||
|
|
||||||
|
- `default` or not set: Show the replay page and the location bar, allowing navigation to other pages and accessing the page list.
|
||||||
|
|
||||||
|
- `full`: Show the full replayweb.page UI and logo.
|
||||||
|
|
||||||
|
- `replayonly`: Show just the replayed page, and no additional UI or nav bar buttons. Useful for embedding a single page.
|
||||||
|
|
||||||
|
- `replay-with-info`: Show the `replayonly` mode, but also add an archive info dropdown, which shows an archival 'receipt' with provenance and verification information (new in 1.7.0)
|
||||||
|
|
||||||
|
??? example "Example: Embed with `replay-with-info` enabled"
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/replaywebpage/ui.js"></script>
|
||||||
|
<replay-web-page style="height: 600px" loading="eager" embed="replay-with-info" replaybase="../../../" source="../../assets/tweet-example.wacz"url="https://oembed.link/https://twitter.com/webrecorder_io/status/1565881026215219200"></replay-web-page>
|
||||||
|
|
||||||
|
## Embedding Options
|
||||||
|
|
||||||
|
The `#!html <replay-web-page>` tag is a web component that supports a number of additional attributes:
|
||||||
|
|
||||||
|
| Attribute | Description |
|
||||||
|
|:-------------|:-----------------|
|
||||||
|
| `source` | Source URL for the archived item. This should be one of the [supported formats](../user-guide/index.md#supported-formats) loaded from one of the [support locations](../user-guide/locations.md) and is required. |
|
||||||
|
| `url` | The starting URL to load from the archive. If omitted, will start with the page list or URL search view. |
|
||||||
|
| `ts` | The timestamp of the starting URL to load. If omitted, the latest available version is used. |
|
||||||
|
| `deepLink` | If set, ReplayWeb.page will modify the URL of the page to allow for 'deep linking' to exact pages in the embed. |
|
||||||
|
| `embed` | (`default` / `full` / `replayonly` / `replay-with-info` ) - See [Embed Modes](#embed-modes) above.
|
||||||
|
| `swName` | Service Worker filename (default: `sw.js`). Set if using different name, don't include path, only filename |
|
||||||
|
| `replayBase` | Location of the service worker file (eg. sw.js), defaults to `./replay/` as mentioned above, but can be overridden. |
|
||||||
|
| `coll` | Internal ID for this collection, usually generated automatically.
|
||||||
|
| `config` | Extra per collection config options (such as custom fuzzy matching rules, TODO add more info!) |
|
||||||
|
| `sandbox` | If set, will iframe in `sandbox`. Provides extra isolation, but prevents PDFs from loading in an embed, and may result in links opening in new windows. |
|
||||||
|
| `noWebWorker`| If set, will not use Web Worker for loading, only Service Worker. May be useful for certain loading edge cases. |
|
||||||
|
| `noCache` | If set, will not cache any loaded content HTTP responses locally, always loading from original source. |
|
||||||
|
| `hideOffscreen` | If set, will unload the embed when it is not visible and reload when scrolled into view. Useful if multiple embeds per-page to avoid loading all at once. |
|
||||||
|
| `newWindowBase` | set base replay URL loaded when a page opens a new window, defaults to `https://replayweb.page/` if `deepLink` not enabled, otherwise, to current page with new link. |
|
||||||
|
| `requireSubdomainIframe` | If set, will only load embed in an iframe loaded from a subdomain, for increased origin isolation. |
|
||||||
|
| `loading="eager"` | If set, will load the entire WACZ file at once (regardless of size), and not attempt on-demand range request loading. |
|
||||||
|
| `useRuffle` | If set, will enable include Ruffle Flash emulator. Must include the `ruffle/` directory in `replayBase`. |
|
||||||
|
|
||||||
|
## Further Examples
|
||||||
|
|
||||||
|
For an example of a site built around multiple archived items, take a look at our [example-webarchive repository](https://github.com/webrecorder/example-webarchive/) and [static website](https://webrecorder.github.io/example-webarchive) hosted on Github pages. It may give you ideas for how to integrate the ReplayWeb.page component into your site. You may also be interested in [Web Replay Gen](https://github.com/webrecorder/web-replay-gen), an 11ty based static site generator for showcasing multiple WACZ files.
|
||||||
|
|
||||||
|
## Common Issues
|
||||||
|
|
||||||
|
Below are some possible issues that you may encounter when embedding and possible workarounds.
|
||||||
|
|
||||||
|
### Embed is too small / doesn't fill page.
|
||||||
|
|
||||||
|
If the `#!HTML <replay-web-page>` tag is the only element on a page, and you want it to use the full window width and height, adding the following
|
||||||
|
CSS should fix the issue:
|
||||||
|
|
||||||
|
```css
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Loading Errors
|
||||||
|
|
||||||
|
If you see errors related to loading archived items such as `TypeError: failed to load`, the issue may be a result of a CORS error.
|
||||||
|
|
||||||
|
See [CORS Settings](cors-settings.md) for more info on how to configure CORS for ReplayWeb.page
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
---
|
||||||
|
hide:
|
||||||
|
- navigation
|
||||||
|
- toc
|
||||||
|
---
|
||||||
|
|
||||||
|
# Home
|
||||||
|
|
||||||
|
Welcome to the ReplayWeb.page documentation! These docs contain the following sections:
|
||||||
|
|
||||||
|
- [User Guide](user-guide/index.md) — Introduction and reference for using ReplayWeb.page to view archived web content.
|
||||||
|
- [Embedding Docs](develop/embedding.md) — Information on integrating and embedding ReplayWeb.page as a web archive viewer into existing web sites.
|
||||||
|
|
||||||
|
## What is ReplayWeb.page?
|
||||||
|
[ReplayWeb.page](https://replayweb.page) is an open-source, browser-based viewer that loads and renders static web archive files. It functions as a serverless (client side) replay tool that _doesn't_ require a server to coordinate what archived content should be retrieved from a large central repository. It allows web archives to be hosted on any regular web server and viewed in any modern browser.
|
||||||
|
|
||||||
|
### Key Features
|
||||||
|
|
||||||
|
- High-fidelity replay of archived items in several formats.
|
||||||
|
- Page search and URL search.
|
||||||
|
- Full text search support for archived items that include extracted text.
|
||||||
|
- On-demand, incremental loading of large files.
|
||||||
|
- Several options for fully-functional offline usage, including a standalone desktop app with Flash support.
|
||||||
|
- Support for embedding archived items directly into your website!
|
||||||
|
|
||||||
|
### Archives, Repositories, and Other Projects Using ReplayWeb.page
|
||||||
|
|
||||||
|
ReplayWeb.page allows web archives seamlessly integrate into existing web sites, be it repositories, collections, or other archiving services.
|
||||||
|
|
||||||
|
Below are a few of the integrations we know of that use ReplayWeb.page:
|
||||||
|
|
||||||
|
- [Perma.cc](https://archive.blogs.harvard.edu/perma/2022/08/17/new-playback-software-improves-fidelity-of-your-perma-links/) — Web archiving service offered by Harvard's Library Innovation Lab.
|
||||||
|
- [GhostArchive](https://ghostarchive.org/) — Free Web Archiving Service
|
||||||
|
- [The Feminist Institute](https://www.thefeministinstitute.org/digital-archive/archived-websites) — Websites archived to document and celebrate feminist contributions to culture.
|
||||||
|
- [CineFiles](https://cinefiles.bampfa.berkeley.edu/?f%5Bdoctype_s%5D%5B%5D=web+archive) — Film-related web archive ephemera collected by the UC Berkeley Art Museum and Pacific Film Archive.
|
||||||
|
- [Stanford Digital Publication Web Archives](https://archive.supdigital.org/) — Archives of Stanford University Press Digital Publications.
|
||||||
|
- [ysdn.info](https://ysdn.info/) — Final year grad show websites from the now defunct York / Sheridan design program.
|
||||||
|
|
||||||
|
If you know of any additional sites that you'd like us to include here, let us know by writing to _info_ [at] _webrecorder.net_
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bug-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M4.978.855a.5.5 0 1 0-.956.29l.41 1.352A4.985 4.985 0 0 0 3 6h10a4.985 4.985 0 0 0-1.432-3.503l.41-1.352a.5.5 0 1 0-.956-.29l-.291.956A4.978 4.978 0 0 0 8 1a4.979 4.979 0 0 0-2.731.811l-.29-.956z"/>
|
||||||
|
<path d="M13 6v1H8.5v8.975A5 5 0 0 0 13 11h.5a.5.5 0 0 1 .5.5v.5a.5.5 0 1 0 1 0v-.5a1.5 1.5 0 0 0-1.5-1.5H13V9h1.5a.5.5 0 0 0 0-1H13V7h.5A1.5 1.5 0 0 0 15 5.5V5a.5.5 0 0 0-1 0v.5a.5.5 0 0 1-.5.5H13zm-5.5 9.975V7H3V6h-.5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 0-1 0v.5A1.5 1.5 0 0 0 2.5 7H3v1H1.5a.5.5 0 0 0 0 1H3v1h-.5A1.5 1.5 0 0 0 1 11.5v.5a.5.5 0 1 0 1 0v-.5a.5.5 0 0 1 .5-.5H3a5 5 0 0 0 4.5 4.975z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 739 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4.414a1 1 0 0 0-.707.293L.854 15.146A.5.5 0 0 1 0 14.793V2zm3.5 1a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 396 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 340 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 321 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-diamond-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098L9.05.435zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 440 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 411 B |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
|
||||||
|
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
|
||||||
|
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 569 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-text-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1h-4z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 451 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 716 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
|
||||||
|
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 429 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16">
|
||||||
|
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 982 B |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mortarboard-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5Z"/>
|
||||||
|
<path d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 513 B |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-motherboard-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M5 7h3V4H5v3Z"/>
|
||||||
|
<path d="M1 2a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-2H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 9H1V8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6H1V5H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 2H1Zm11 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7Zm2 0a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7ZM3.5 10a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm0 2a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6ZM4 4h-.5a.5.5 0 0 0 0 1H4v1h-.5a.5.5 0 0 0 0 1H4a1 1 0 0 0 1 1v.5a.5.5 0 0 0 1 0V8h1v.5a.5.5 0 0 0 1 0V8a1 1 0 0 0 1-1h.5a.5.5 0 0 0 0-1H9V5h.5a.5.5 0 0 0 0-1H9a1 1 0 0 0-1-1v-.5a.5.5 0 0 0-1 0V3H6v-.5a.5.5 0 0 0-1 0V3a1 1 0 0 0-1 1Zm7 7.5v1a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0-.5.5Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 864 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 589 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
|
||||||
|
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 548 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 675 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-quote" viewBox="0 0 16 16">
|
||||||
|
<path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 705 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
|
||||||
|
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 282 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-octagon-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146zm-6.106 4.5L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 570 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
|
||||||
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 331 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
|
||||||
|
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 924 B |
@@ -0,0 +1,6 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block icons %}
|
||||||
|
{% set icon_path = "overrides/.icons/bootstrap/" %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
@@ -0,0 +1,163 @@
|
|||||||
|
/* Font style definitions */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Recursive';
|
||||||
|
font-style: oblique 0deg 15deg;
|
||||||
|
font-weight: 300 1000;
|
||||||
|
src: url('../assets/fonts/Recursive_VF_1.084.woff2') format('woff2');
|
||||||
|
font-feature-settings: "ss12";
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-display: swap;
|
||||||
|
font-style: normal;
|
||||||
|
src: url('../assets/fonts/Inter.var.woff2') format('woff2');
|
||||||
|
font-feature-settings: "ss03";
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-display: swap;
|
||||||
|
font-style: italic;
|
||||||
|
src: url('../assets/fonts/Inter-Italic.var.woff2') format('woff2');
|
||||||
|
font-feature-settings: "ss03";
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--md-code-font: "Recursive", monospace;
|
||||||
|
--md-text-font: "Inter", "Helvetica", "Arial", sans-serif;
|
||||||
|
--wr-blue-primary: #0891B2;
|
||||||
|
--wr-orange-primary: #C96509;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-md-color-scheme="webrecorder"] {
|
||||||
|
--md-primary-fg-color: #4D7C0F;
|
||||||
|
--md-primary-fg-color--light: #0782A1;
|
||||||
|
--md-primary-fg-color--dark: #066B84;
|
||||||
|
--md-typeset-color: black;
|
||||||
|
--md-accent-fg-color: #0782A1;
|
||||||
|
--md-typeset-a-color: #066B84;
|
||||||
|
--md-code-bg-color: #F9FAFB;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nav changes */
|
||||||
|
|
||||||
|
.md-header__title {
|
||||||
|
font-family: var(--md-code-font);
|
||||||
|
font-variation-settings: "MONO" 0.51;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-header__title--active {
|
||||||
|
font-family: var(--md-text-font);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom menu item hover */
|
||||||
|
|
||||||
|
.md-tabs__link {
|
||||||
|
font-family: var(--md-code-font);
|
||||||
|
font-weight: 400;
|
||||||
|
opacity: .9;
|
||||||
|
transition: .4s cubic-bezier(.1,.7,.1,1),opacity .25s
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-tabs__link:hover {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom body typography rules */
|
||||||
|
|
||||||
|
.md-typeset a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerlink {
|
||||||
|
text-decoration: none!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
code, pre, kbd {
|
||||||
|
font-variation-settings: "MONO" 1;
|
||||||
|
font-feature-settings: "ss01", "ss02", "ss08";
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: #D1D5DB;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-typeset h1, h2, h3, h4, h5 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-typeset h1, h2, h3 {
|
||||||
|
font-weight: 650 !important;
|
||||||
|
font-variation-settings: "OPSZ" 35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wr-container {
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: #D1D5DB;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom badge classes, applies custom overrides to inline-code blocks */
|
||||||
|
|
||||||
|
.badge-blue {
|
||||||
|
background-color: var(--wr-blue-primary) !important;
|
||||||
|
border-color: var(--wr-blue-primary) !important;
|
||||||
|
color: white !important;
|
||||||
|
font-family: var(--md-text-font);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-orange {
|
||||||
|
background-color: var(--wr-orange-primary) !important;
|
||||||
|
border-color: var(--wr-orange-primary) !important;
|
||||||
|
color: white !important;
|
||||||
|
font-family: var(--md-text-font);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Status Styling */
|
||||||
|
|
||||||
|
.status-success {
|
||||||
|
font-family: var(--md-code-font);
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
& svg {
|
||||||
|
color: hsl(142.1 76.2% 36.3%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-warning {
|
||||||
|
font-family: var(--md-code-font);
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
& svg {
|
||||||
|
color: hsl(32.1 94.6% 43.7%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-danger {
|
||||||
|
font-family: var(--md-code-font);
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
& svg {
|
||||||
|
color: hsl(0 72.2% 50.6%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-waiting {
|
||||||
|
font-family: var(--md-code-font);
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
& svg {
|
||||||
|
color: hsl(271.5 81.3% 55.9%);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
# Exploring Archived Content
|
||||||
|
|
||||||
|
The ReplayWeb.page homepage lists an index of all your loaded archived items. Items are searchable by their title or source, and can be filtered by the date they were loaded or their title.
|
||||||
|
|
||||||
|
## Navigation
|
||||||
|
|
||||||
|
ReplayWeb.page's sidebar is the fastest way of finding content within an archived item. It features several tabs that allow information to be accessed:
|
||||||
|
|
||||||
|
### Page
|
||||||
|
|
||||||
|
The pages view lists all the webpages stored within the archived item.
|
||||||
|
|
||||||
|
#### Searching For Pages
|
||||||
|
|
||||||
|
Pages can be searched for by their title, URLs, or extracted text if available.
|
||||||
|
|
||||||
|
ReplayWeb.page will load pre-generated full-text search data when loading WACZ files, and will also attempt to generate full-text index from HTML files contained in WARC files upon loading a WARC.
|
||||||
|
|
||||||
|
### Resources
|
||||||
|
|
||||||
|
The resources view displays all the content within a loaded archived item, listed by URL and media type. For many archived items with no page or curatorial metadata available, this is the best way to explore the archived contents.
|
||||||
|
|
||||||
|
This view is available for all archives that only store raw data.
|
||||||
|
|
||||||
|
#### Searching For Resources
|
||||||
|
|
||||||
|
Page resources can only be searched by URL. Searches can be performed by exact URL, by URL prefix, or by searching for any string contained in the URL.
|
||||||
|
|
||||||
|
The _URL Prefix_ option is best for searching large archives that require on-demand loading. The _Contains_ option will not find any URLs that have not yet been loaded.
|
||||||
|
|
||||||
|
### Story
|
||||||
|
|
||||||
|
The story view presents lists of curated pages and a description of their significance, as specified by the creator of the web archive. This option is only shown if there is a curated story. As curated lists are not a standardized part of the WARC format, only WARCs exported from [Conifer](https://conifer.rhizome.org/) can be configured to use this option.
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
# User Guide
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
1. Check out [Loading Archived Items](loading.md) to point ReplayWeb.page towards the file you wish to view.
|
||||||
|
2. Once your file has been loaded, [learn how to navigate the archived content](exploring.md)!
|
||||||
|
|
||||||
|
## Supported Formats
|
||||||
|
|
||||||
|
While ReplayWeb.page aims to support a variety of formats for archived web content, for best performance we recommend using WACZ files. To archive webpages to WACZ files on a per-page basis, we recommend [ArchiveWeb.page](https://archiveweb.page). If you need to archive entire websites, check out [Browsertrix](https://browsertrix.com).
|
||||||
|
|
||||||
|
??? question "WARC? WACZ? What's the difference?"
|
||||||
|
Due to the nature of the WARC format, the entire file must be read on first use to generate an index — a list of all the pages and content available in the file used by ReplayWebpage to rebuild and display the archived content.
|
||||||
|
|
||||||
|
Inversely, WACZ files are always loaded on-demand and no indexing is required. The initial archive view should load very quickly as a result.
|
||||||
|
|
||||||
|
For users comfortable with the command line, we recommend converting WARC files to WACZ files by using the `wacz` python library, see [py-wacz on GitHub](https://github.com/webrecorder/py-wacz) for more information.
|
||||||
|
|
||||||
|
ReplayWeb.page supports the following file formats listed as "Supported". Format type is determined based on the file's extension.
|
||||||
|
|
||||||
|
| Format | Extensions | Status |
|
||||||
|
|:--------|:--------------------|:---------------|
|
||||||
|
| WACZ | `.wacz` | <span class="status-success">:bootstrap-check-circle-fill: Supported</span> |
|
||||||
|
| WARC | `.warc`, `.warc.gz` | <span class="status-success">:bootstrap-check-circle-fill: Supported</span> |
|
||||||
|
| HAR | `.har` | <span class="status-success">:bootstrap-check-circle-fill: Supported</span> |
|
||||||
|
| WBN | `.wbn` | <span class="status-danger">:bootstrap-x-octagon-fill: Not Supported</span> |
|
||||||
|
| ARC | `.arc` | <span class="status-danger">:bootstrap-x-octagon-fill: Not Supported</span> |
|
||||||
|
| CDX | `.cdx`, `.cdxj` | <span class="status-success">:bootstrap-check-circle-fill: Supported</span> |
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
# Loading Archived Items
|
||||||
|
|
||||||
|
ReplayWeb.page can load archived items from the local filesystem, or from remote locations. If you don't have any archived items yet, try archiving a website with [ArchiveWeb.page](https://archiveweb.page)!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Loading Local Files
|
||||||
|
|
||||||
|
From [replayweb.page](https://replayweb.page), press the _Choose File..._ button, pick any local archived item file from your computer, then press _Load_ to start viewing the file's archived content.
|
||||||
|
|
||||||
|
<img alt="screenshot of replayweb.page (online)" src="../../assets/replaywebpage-online-local.png">
|
||||||
|
|
||||||
|
The archived item is loaded directly in the browser and is _not_ uploaded anywhere — your data never leaves your computer!
|
||||||
|
|
||||||
|
Once loaded, the archived item will appear in the list of Loaded Archives and will be identified by its filename with a a `file://` URL as its source. This URL is not shareable as it doesn't exist outside of your computer.
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img alt="animated gif of replayweb.page opening an archived item" src="../../assets/replaywebpage-online.gif">
|
||||||
|
<figcaption>Loading an archived item into ReplayWeb.page and viewing a URL in the pages list</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
To unload an archived item, click on the 'X'. Unloading an item does not delete the file from its original location.
|
||||||
|
|
||||||
|
## Loading Files from a URL
|
||||||
|
|
||||||
|
To load an archived item stored in a remote location, enter the URL of the file and press _Load_.
|
||||||
|
|
||||||
|
The archived item will be downloaded, either fully or on-demand (if possible) and presented when ready.
|
||||||
|
|
||||||
|
See the [Supported Locations](locations.md) page for details on supported external sources for serving archived items.
|
||||||
|
|
||||||
|
## Loading Files from Google Drive
|
||||||
|
|
||||||
|
In addition to loading remote content from URLs, ReplayWeb.page also supports loading WARC and WACZ files directly from Google Drive.
|
||||||
|
|
||||||
|
### Add-on Installation
|
||||||
|
|
||||||
|
First, install the [ReplayWeb.page Google Drive Addon](https://gsuite.google.com/u/2/marketplace/app/replaywebpage/160798412227).
|
||||||
|
|
||||||
|
* Press the _Install_ button, Google will walk you through the steps of installation.
|
||||||
|
* Once installed, Google will confirm the install and display where to find ReplayWeb.page in your drive.
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img alt="animated gif of replayweb.page google drive add-on install process" src="../../assets/replaywebpage-googledrive-install.gif">
|
||||||
|
<figcaption>Installing the ReplayWeb.page Google Drive add-on</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
### Usage
|
||||||
|
|
||||||
|
1. Navigate to any WARC or WACZ files that available on your Google Drive.
|
||||||
|
|
||||||
|
2. Under the file's _More Actions_ :bootstrap-three-dots-vertical: menu, select _Open With_ and choose _ReplayWeb.page_ from the menu.
|
||||||
|
|
||||||
|
This will redirect to ReplayWeb.page and begin loading the file. Items loaded from Google Drive will have a source URL starting with `googledrive://`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Once an archived item has been successfully loaded, the app will display the archive viewer and you can begin exploring your loaded archive.
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
# Supported Location URLs
|
||||||
|
|
||||||
|
ReplayWeb.page uses URLs to uniquely identify web archives.
|
||||||
|
|
||||||
|
In addition HTTP/S, the system supports loading from additional cloud providers and via peer-to-peer decentralized services. The goal is to support loading web archives from any source a web browser can connect to.
|
||||||
|
|
||||||
|
The following is a list of currently supported URL schemes and details below:
|
||||||
|
|
||||||
|
## HTTP and HTTPS
|
||||||
|
|
||||||
|
While `https://replayweb.page` can load archived items from any URL, the hosting server must allow access by [enabling cross origin resource sharing](../embedding/cors-settings.md) (CORS). HTTP URLs may not be accessible from `https://replayweb.page` since it requires HTTPS.
|
||||||
|
|
||||||
|
## Local Files
|
||||||
|
|
||||||
|
Local files selected via the UI file chooser, and will be given a `file://` URL. Unlike other web archive URLs, file URLs can not be shared with others.
|
||||||
|
|
||||||
|
## Amazon S3
|
||||||
|
|
||||||
|
The `s3://` URL scheme is provided as a convenience to reference S3 URLs. The URL is converted to an HTTPS URL for access. The S3 Bucket must be public and also provide access to `https://replayweb.page` via CORS. Downloading via S3 credentials is not currently supported.
|
||||||
|
|
||||||
|
## Google Drive
|
||||||
|
|
||||||
|
The `googledrive://` URL scheme is used when accessing a web archive shared over Google Drive. It provides a unique identifier provided via Google Drive. When accessing a Google Drive URL, users will be asked to authenticate to be able to access the file.
|
||||||
|
|
||||||
|
## IPFS
|
||||||
|
|
||||||
|
The `ipfs://` URL scheme is provided as a convenience and resolves to Cloudflare's IPFS Gateway to download archives from IPFS.
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
# Offline Use
|
||||||
|
|
||||||
|
There are two ways of using ReplayWeb.page without continuous internet access.
|
||||||
|
|
||||||
|
## Progressive Web App
|
||||||
|
|
||||||
|
ReplayWeb.page can be installed as PWA ([Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)) through supported browsers. Instructions for installation vary based on the browser used to install the application.
|
||||||
|
|
||||||
|
??? question "What's a Progressive Web App?"
|
||||||
|
Progressive Web Apps (PWAs) can be considered cross-platform applications. PWAs are built with the same software used to develop websites, but they also allow developers to access native desktop features to integrate better with desktop operating systems and allow for offline use!
|
||||||
|
|
||||||
|
### Safari
|
||||||
|
|
||||||
|
After navigating to [https://replayweb.page](https://replayweb.page), open the `File` menu and select `Add to Dock`. This will add the PWA to your dock and in Launchpad.
|
||||||
|
|
||||||
|
To uninstall, long press on the app in Launchpad until the icons start to shake, then press the :bootstrap-x: icon.
|
||||||
|
|
||||||
|
### Google Chrome & Microsoft Edge
|
||||||
|
|
||||||
|
After navigating to [https://replayweb.page](https://replayweb.page), look for the installation icon to the left of the bookmark page star in the URL bar. Pressing this icon will display a dialog with an option to install the PWA.
|
||||||
|
|
||||||
|
To uninstall on Edge, navigate to [edge://apps/details/replayweb.page/](edge://apps/details/replayweb.page/) and press `Uninstall`
|
||||||
|
|
||||||
|
To uninstall on Chrome, open the ReplayWeb.page PWA, press the :bootstrap-three-dots-vertical: icon button in the application bar, and select `Uninstall ReplayWeb.page`.
|
||||||
|
|
||||||
|
## Standalone Desktop App
|
||||||
|
|
||||||
|
ReplayWeb.page is also available as a standalone app!
|
||||||
|
|
||||||
|
Navigate to the [latest release of ReplayWeb.page on GitHub](https://github.com/webrecorder/replayweb.page/releases/latest) and download the applicable file for your platform (.dmg for macOS or .exe for Windows).
|
||||||
|
|
||||||
|
The standalone app is useful for two reasons:
|
||||||
|
|
||||||
|
1. Flash is not supported by default in most browsers. The ReplayWeb.page App will continue to bundle [Ruffle](https://ruffle.rs/), a Flash emulator, to continue to make Flash content accessible within archived web content.
|
||||||
|
|
||||||
|
2. If your primary use involves viewing stored locally web archives, the ReplayWeb.page desktop app is a better option, as it provides direct access to the file system. Once loaded, ReplayWeb.page can continue to load web archives from disk without internet access. The desktop app fully replaces [Webrecorder Player](https://github.com/webrecorder/webrecorder-player)
|
||||||
|
|
||||||
|
When using [https://replayweb.page](https://replayweb.page), you may be asked to re-open a local file because a website cannot maintain persistent access to your file system.
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
# Sharing Archived Items
|
||||||
|
|
||||||
|
ReplayWeb.page links are designed to be shareable with others, as long as they have access to the archived item.
|
||||||
|
|
||||||
|
ReplayWeb.page encodes the archived item source and current page parameters in the URL query and hash string. Simply copy the entire location URL, and you can share with others!
|
||||||
|
|
||||||
|
ReplayWeb.page will parse the URL, load the source archived item, then navigate to the current snapshot or search query.
|
||||||
|
|
||||||
|
For example, given the following URL:
|
||||||
|
|
||||||
|
```
|
||||||
|
https://replayweb.page/?source=s3://webrecorder-builds/warcs/netpreserve-twitter.warc#view=replay&url=https%3A%2F%2Ftwitter.com%2Fnetpreserve&ts=20190603053135
|
||||||
|
```
|
||||||
|
|
||||||
|
ReplayWeb.page will load the web archive from `s3://webrecorder-builds/warcs/netpreserve-twitter.warc`, navigate to the correct URL `https://twitter.com/netpreserve` at snapshot `20190603053135`
|
||||||
|
|
||||||
|
The following URL will load the same web archive, and show the search results for pages that contain the word 'WARC':
|
||||||
|
|
||||||
|
```
|
||||||
|
https://replayweb.page/?source=s3://webrecorder-builds/warcs/netpreserve-twitter.warc#view=pages&query=WARC
|
||||||
|
```
|
||||||
|
|
||||||
|
## Can't Share Links to Local Files
|
||||||
|
|
||||||
|
URLs that have a source URL component of `source=file://...` can not be shared as they refer to a local file on your machine. Anyone else attempting to load that URL will get an error.
|
||||||
|
|
||||||
|
## Sharing Archived Items with Google Drive
|
||||||
|
|
||||||
|
Unlike local files, archived items loaded from Google Drive can be shared with others, as long as they have access!
|
||||||
|
|
||||||
|
Files loaded from Google Drive will have a source URL component of `source=googledrive://...`.
|
||||||
|
|
||||||
|
Due to restrictions of Google Drive, users will likely be required to authorize with their Google Account when accessing archived items stored in Google Drive. Public files shared from Google Drive can sometimes be loaded without requiring authorization, but this is only supported for small files.
|
||||||
|
|
||||||
|
To share archived items via Google Drive ensure that the person you are sharing the item with also has the [ReplayWeb.page Google Drive Integration](https://gsuite.google.com/u/2/marketplace/app/replaywebpage/160798412227) installed (see [add-on installation](loading.md#add-on-installation) for details).
|
||||||
|
|
||||||
|
Once they have installed the add-on, share the archived item with them like any other file on Google Drive and have them open it with ReplayWebpage using the [Google Drive loading usage guide](loading.md#usage).
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -2,7 +2,7 @@
|
|||||||
<html class="no-overflow">
|
<html class="no-overflow">
|
||||||
<head>
|
<head>
|
||||||
<link rel="manifest" href="/webmanifest.json" />
|
<link rel="manifest" href="/webmanifest.json" />
|
||||||
<link rel="icon" href="build/icon.png" type="image/png" />
|
<link rel="icon" href="favicon.png" type="image/png" />
|
||||||
<title>ReplayWeb.page</title>
|
<title>ReplayWeb.page</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<script src="./ui.js"></script>
|
<script src="./ui.js"></script>
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="66.712418mm"
|
||||||
|
height="66.712418mm"
|
||||||
|
viewBox="0 0 66.712418 66.712418"
|
||||||
|
version="1.1"
|
||||||
|
id="wrlogo">
|
||||||
|
<defs
|
||||||
|
id="defs1341">
|
||||||
|
<linearGradient
|
||||||
|
y2="48.223869"
|
||||||
|
x2="97.913383"
|
||||||
|
y1="48.223869"
|
||||||
|
x1="2.9740067"
|
||||||
|
gradientTransform="matrix(0.70268446,0,0,0.70268446,72.622704,112.65806)"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
id="linearGradient6615"
|
||||||
|
xlink:href="#linearGradient5691" />
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient5691">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#4876ff;stop-opacity:1"
|
||||||
|
offset="0"
|
||||||
|
id="stop5687" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#04cdff;stop-opacity:1"
|
||||||
|
offset="1"
|
||||||
|
id="stop5689" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<metadata
|
||||||
|
id="metadata1344">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-72.477124,-114.81046)">
|
||||||
|
<circle
|
||||||
|
transform="rotate(0.86915873)"
|
||||||
|
r="33.356209"
|
||||||
|
cy="146.54422"
|
||||||
|
cx="108.06871"
|
||||||
|
id="path6016-0-7-6-9-11-2-8-67-6-50-4-33"
|
||||||
|
style="fill:url(#linearGradient6615);fill-opacity:1;stroke:none;stroke-width:23.3824;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
|
||||||
|
<path
|
||||||
|
style="fill:#d2f9d6;fill-opacity:1;stroke-width:0.702683"
|
||||||
|
d="m 119.62552,156.54036 h 5.46953 c 3.81136,0 6.91161,-3.10024 6.91161,-6.9116 0,-3.81136 -3.10025,-6.9116 -6.91161,-6.9116 h -15.59889 c -3.81136,0 -6.9116,3.10024 -6.9116,6.9116 0,1.96682 0.82917,3.73828 2.15161,4.9982 -0.83057,0.55722 -1.82557,0.88678 -2.89857,0.88678 h -2.082056 c -1.042775,-1.72016 -1.654819,-3.73054 -1.654819,-5.88498 0,-6.2834 5.112035,-11.39543 11.395435,-11.39543 h 15.59889 c 6.28341,0 11.39474,5.11132 11.39474,11.39543 0,6.28411 -5.11222,11.50105 -11.39474,11.39543 l -5.45665,0.14787 v -2.17722 z"
|
||||||
|
id="path114-4-0-85-6-0-5-3-6-1-6" />
|
||||||
|
<path
|
||||||
|
style="fill:#64e986;fill-opacity:1;stroke-width:0.702683"
|
||||||
|
d="m 91.878825,142.66568 -4.893158,0.0515 c -3.811155,0.0401 -6.911605,3.10024 -6.911605,6.91231 0,3.81065 3.100238,6.91089 6.911605,6.91089 h 15.598893 c 3.81136,0 6.9116,-3.10024 6.9116,-6.91089 0,-1.96682 -0.82917,-3.73899 -2.15162,-4.9989 0.83057,-0.55723 1.82557,-0.88609 2.89857,-0.88609 h 2.08066 c 1.04348,1.71947 1.65552,3.72985 1.65552,5.88499 0,6.28269 -5.11132,11.39472 -11.39473,11.39472 H 86.985667 c -6.282704,0 -11.39544,-5.11132 -11.39544,-11.39472 0,-6.28411 5.112828,-11.49617 11.39544,-11.39614 l 4.893158,0.0779 v 2.17722 z"
|
||||||
|
id="path116-9-4-7-0-8-3-2-08-9-1" />
|
||||||
|
<path
|
||||||
|
style="fill:#64e986;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||||
|
id="path3919-5-9-8-6-6-56-0-37-5-8"
|
||||||
|
d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
|
||||||
|
transform="matrix(-0.38260367,0,0,0.3986412,118.95441,127.09397)" />
|
||||||
|
<path
|
||||||
|
style="fill:#d2f9d6;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||||
|
id="path3919-3-3-7-5-9-7-2-6-8-7-7"
|
||||||
|
d="m 73.728819,47.245763 -10.861072,-6.335289 -10.86107,-6.33529 10.917057,-6.238319 10.917057,-6.238318 -0.05599,12.573609 z"
|
||||||
|
transform="matrix(0.4122212,0,0,-0.40812,91.057524,172.76152)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -4,7 +4,7 @@
|
|||||||
"description": "A tool to explore and replay interactive archived web pages directly in the browser",
|
"description": "A tool to explore and replay interactive archived web pages directly in the browser",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "build/icon.png",
|
"src": "assets/favicon.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
+12
-4
@@ -103,17 +103,25 @@ const browserConfig = (/*env, argv*/) => {
|
|||||||
ui: "./src/index.ts",
|
ui: "./src/index.ts",
|
||||||
};
|
};
|
||||||
|
|
||||||
const patterns = [{ from: "package.json", to: "_data/package.json" }];
|
//const patterns = [{ from: "package.json", to: "_data/package.json" }];
|
||||||
|
let patterns = [{
|
||||||
|
from: "build/icon.png",
|
||||||
|
to: "site/assets/favicon.png",
|
||||||
|
}, {
|
||||||
|
from: "assets/logo.svg",
|
||||||
|
to: "site/assets/logo.svg"
|
||||||
|
}];
|
||||||
|
|
||||||
if (isDevServer) {
|
if (isDevServer) {
|
||||||
entry["sw"] = "@webrecorder/wabac/src/sw.js";
|
entry["sw"] = "@webrecorder/wabac/src/sw.js";
|
||||||
} else {
|
} else {
|
||||||
patterns.push({
|
patterns.push({
|
||||||
from: "node_modules/@webrecorder/wabac/dist/sw.js",
|
from: "node_modules/@webrecorder/wabac/dist/sw.js",
|
||||||
to: "sw.js",
|
to: "site/sw.js",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/** @type {import('webpack').Configuration} */
|
/** @type {import('webpack').Configuration} */
|
||||||
const config = {
|
const config = {
|
||||||
target: "web",
|
target: "web",
|
||||||
@@ -129,7 +137,7 @@ const browserConfig = (/*env, argv*/) => {
|
|||||||
|
|
||||||
output: {
|
output: {
|
||||||
path: path.join(__dirname),
|
path: path.join(__dirname),
|
||||||
filename: "[name].js",
|
filename: "dist/[name].js",
|
||||||
libraryTarget: "self",
|
libraryTarget: "self",
|
||||||
globalObject: "self",
|
globalObject: "self",
|
||||||
publicPath: "/",
|
publicPath: "/",
|
||||||
@@ -139,7 +147,7 @@ const browserConfig = (/*env, argv*/) => {
|
|||||||
compress: true,
|
compress: true,
|
||||||
port: 9990,
|
port: 9990,
|
||||||
open: false,
|
open: false,
|
||||||
static: path.join(__dirname),
|
static: path.join(__dirname, "site"),
|
||||||
//publicPath: "/"
|
//publicPath: "/"
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user