diff --git a/.gitignore b/.gitignore index 407c08a..d702c76 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ *.har *.warc *.warc.gz -!examples/*.warc +!site/examples/*.warc **/node_modules yarn-error.log coverage/ @@ -9,7 +9,7 @@ coverage/ **/.DS_Store **/.sass-cache/ **/__pycache__/ -_genhtml/ +mkdocs/_genhtml/ dist/ plugins-*/ site/sw.js diff --git a/site/docs/embedding/index.md b/site/docs/embedding/index.md index 7259019..204128b 100644 --- a/site/docs/embedding/index.md +++ b/site/docs/embedding/index.md @@ -1,19 +1,19 @@ # Embedding ReplayWeb.page -## Primer +## Introduction 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 ` 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. +To make this possible ReplayWeb.page provides the `#!html ` HTML [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) 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, WARC files and [other formats](../user-guide/index.md#supported-formats). -The `#!html ` 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. +The `#!html ` web component consists of a "backend" service worker, which emulates a web server, and a "frontend" UI, though in reality both are scripts running in the browser - there is no web server! !!! 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 +### Loading the ReplayWeb.page UI (Frontend) To embed a WACZ stored at `https://replayweb.page/docs/assets/tweet-example.wacz`, add the following `#!html