Add example links to exploring section (#298)

- Moves example WARC files to /site/examples
- Adds example link for full text search
- Adds example link for searching resources
- Updates example docs link on the app homepage, sends to the project
showcase section
- Link fix
- .gitignore update
---------

Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>

.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

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 <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.
+To make this possible ReplayWeb.page provides the `#!html <replay-web-page>` 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 <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. 
+The `#!html <replay-web-page>` 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 <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:
 
@@ -26,9 +26,10 @@ url="https://oembed.link/https://twitter.com/webrecorder_io/status/1565881026215
 
 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
+### Loading the Service Worker (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.
+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 and can be loaded from the CDN (Content Delivery Network), it is necessary to add a service worker path from where the web archive will be served to a local path. We use `/replay` in these examples, but it can be anything.
+Since the service worker takes over the rendering of this path, it should be a path that is otherwise non-existent (serves a 404) from the actual web server.
 
 To do this, create a `/replay` subdirectory and in it, a new JavaScript file (`/replay/sw.js`) and copy the following to the file:
 
@@ -39,6 +40,9 @@ importScripts("https://cdn.jsdelivr.net/npm/replaywebpage@{{ rwp_version() }}/sw
 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`.
 
+This has the affect imports the actual server worker from the CDN, serving it on your site `https://example.com/replay/sw.js` and
+allowing it to render web archives on the `/replay/` path.
+
 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.

site/docs/index.md

@@ -9,7 +9,7 @@ hide:
 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.
+- [Embedding Docs](embedding/index.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.

site/docs/user-guide/exploring.md

@@ -16,12 +16,16 @@ 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.
 
+[See an example of searching for pages containing "WARC".](https://replayweb.page/?source=examples/netpreserve-twitter.warc#view=pages&query=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.
 
+[See an example of searching for image resources.](https://replayweb.page/?source=examples/netpreserve-twitter.warc#view=resources&currMime=image%2F&urlSearchType=prefix)
+
 #### 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.

src/appmain.ts

@@ -414,7 +414,11 @@ export class ReplayWebApp extends LitElement {
               Explore and Replay Interactive Archived Webpages Directly in your
               Browser.
               <i
-                ><a target="_blank" href="./docs/examples">(See Examples)</a></i
+                ><a
+                  target="_blank"
+                  href="./docs/#archives-repositories-and-other-projects-using-replaywebpage"
+                  >(See Examples)</a
+                ></i
               >
             </p>
           `