docs: update embedding guide with new replay-with-info embed mode

README: mention that replayweb.page can be run as static web server
This commit is contained in:
Ilya Kreymer
2022-11-04 13:43:51 -07:00
parent 8bfd93837d
commit 0bb4f15eb3
2 changed files with 23 additions and 3 deletions
+8 -1
View File
@@ -35,7 +35,14 @@ This repository contains:
- Docs hosted at: https://replayweb.page/docs - Docs hosted at: https://replayweb.page/docs
- App releases at: https://github.com/webrecorder/replayweb.page/releases - App releases at: https://github.com/webrecorder/replayweb.page/releases
## How to Use This Repo ## Running ReplayWeb.page
To run ReplayWeb.page and view web archives, a regular HTTP server is all that is needed.
ReplayWeb.page can run with any HTTP server locally. For example, you can run `http-server -p 9990` or `python -m http.server 9990` to run a static web server in the directory of this repository. Then, simply load `http://localhost:9990/` and you'll have replayweb.page running locally.
## Developing ReplayWeb.page
ReplayWeb.page is built as a Node package can be installed using yarn: ReplayWeb.page is built as a Node package can be installed using yarn:
+15 -2
View File
@@ -81,11 +81,24 @@ Then you adjust your HTML to reference the new resources:
<replay-web-page replayBase="/js/" source="/wacz/example.wacz" url="https://webrecorder.net"></replay-web-page> <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 ### Examples
<details> <details>
<summary> <summary>
Here is an example embed added directly to this page: Here is an example embed added directly to this page, with <code class="language-plaintext highlighter-rouge">replay-with-info</code> embed mode:
</summary> </summary>
<script src="../ui.js"></script> <script src="../ui.js"></script>
@@ -106,7 +119,7 @@ The `<replay-web-page>` tag is a web component that supports a number of additio
| `url` | The starting URL to load from the archive. If omitted, will start with the page list or URL search view. | | `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. | | `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. | | `deepLink` | if set, allow 'deep linking' to exact pages in the embed, besides the starting URL. |
| `embed` | (`default` / `full` / `replayonly` ) - if set to `full`, will show the replayweb.page nav bar and logo. if set to `default`, omitted, will show the location bar. if set to `replayonly`, will only show the `url` and not location bar or any nav bar buttons, which may be useful for embedding a single page only. | | `embed` | (`default` / `full` / `replayonly` / `replay-with-info` ) - See [Embed Modes](#embed-modes) above.
| `replayBase` | Location of the `sw.js` file, defaults to `./replay/` as mentioned above, but can be overridden. | | `replayBase` | Location of the `sw.js` file, defaults to `./replay/` as mentioned above, but can be overridden. |
| `coll` | Internal id for this collection, usually generated automatically. | `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!) | | `config` | Extra per collection config options (such as custom fuzzy matching rules, TODO add more info!) |