Web Replay Gen

Generate a website for viewing web archive collections with minimal setup.

Compatible with web archives in WACZ format.

Features:

Automatic deploy to GitHub Pages
List & autocomplete-search web archives
Embedded web archive replay

Getting Started

1. Create new project from template

Clone as usual after creating your new repository from this template.

2. Install dependencies

Navigate to your project directory and run:

npm install

4. Configure `wrg-config.json`

Web Replay Gen generates a static site for you based on a list of URLs to WACZ files. Update your wrg-config.json file with your website title and add your URLs to the archives array. Your updated wrg-config.json may look like this:

{
  "site": {
    "title": "My Web Archives"
  },
  "archives": [
    "https://example.com/test.wacz",
    "https://example.com/abc/archive.wacz"
  ]
}

5. Generate static website

npm run build

This will output your new site to /_site.

6. Deploy

Push to main to automatically deploy your site to GitHub Pages ✨

To disable publishing to Pages, simply delete the publish-gh-pages.yml workflow.

Documentation

`wrg-config.json` Options

`site`

Object for configuring site details.

Key	Default Value	Value Type
`site`	`{}`	`Object`
`site.title`	`"Web Archives"`	`string`	Website title, used in browser title bar and as the primary heading
`site.url`	`""`	`string`	Website base URL
`site.logoSrc`	`""`	`string`	Website logo, any valid `<img>` `src`

`replay`

Object for configuring the embedded ReplayWeb.page <replay-web-page> tag.

Key	Default Value	Value Type
`replay`	`{}`	`Object`
`replay.version`	`"1.6.4"`	`string`	ReplayWeb.page version. Omit for the latest. See releases
`replay.embed`	`"replayonly"`	`"replayonly"\|"full"\|"default"`	ReplayWeb.page `embed` option

`archives`

Array of WACZ data.

Key	Default Value	Value Type
`archives`	`[]`	`string[]\|Object[]`

WACZ data can be a plain URL string or an object with name and url. For example, both entries are valid:

{
  "archives": [
    // Entry 1:
    "s3://my-bucket/a/archive.wacz",
    // Entry 2:
    {
      "name": "My Web Archive",
      "url": "s3://my-bucket/b/archive.wacz"
    }
  ]
}

Development

You can use a separate wrg-config.local.json during local development. To point the generator to your dev file, create .env with the following:

WRG_CONFIG_NAME=wrg-config.local.json

Templates

Web Replay Gen templates are written in Nunjucks. You are free to use any templating language Eleventy supports, like plain HTML, markdown, or ejs.

Web Components

Web components in the /components directory are not pre-rendered at build time. Use the <is-land> tag to render web components at runtime. See archive.njk for an example and refer to the 11ty/is-land docs.

Styling

TailwindCSS

TailwindCSS is enabled in all Eleventy template files. You can install a specific Tailwind version with npm install -D tailwindcss@{version}.

Note: Tailwind is not available in web components (/components/*.js) due to limitations with the shadow DOM. See workarounds if you'd like to access Tailwind classes in web components.

Customization

Tailwind supports inline-style-like customization through arbitrary values in class names. For a more global approach to customization (for example, if you have vendor CSS file) include a <link rel="stylesheet"> tag in your template file. Any .css files in /src will be copied to the output site folder and can be referenced in the <link> tag.

SuaYoo/web-replay-gen-sample