npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

replaywebpage

v2.0.0

Published

Serverless Web Archive Replay

Downloads

537

Readme

Embedded Viewer Usage Stats:

ReplayWeb.page provides a full web archive viewer that runs directly in the browser, available at: https://replayweb.page/

For full user docs, see: https://replayweb.page/docs.

The ReplayWeb.page App can be downloaded from the Releases page.

See CHANGES.md for the current changes, or the release notes on the link above.

Embedding Guide

See the Embedding Guide for more info on embedding web archives in other sites.

What's in this repo

ReplayWeb.page provides a static site generated with MkDocs, an npm package/library, and an Electron app all in this repo.

This repository contains the 'frontend' UI for the replay system, while the 'backend' is provided via a service worker implementation found at: https://github.com/webrecorder/wabac.js. (Of course, both frontend and backend actually run in the browser).

The frontend is loaded from ui.js, while the backend service/web worker is loaded from sw.js.

This repository contains:

  • The core site hosted on https://replayweb.page/ via GitHub Pages
  • The docs for https://replayweb.page/docs created with Material for MkDocs
  • The package for npm module: https://www.npmjs.com/package/replaywebpage
  • A build system for https://replayweb.page and ReplayWeb.page App.
  • App releases at: https://github.com/webrecorder/replayweb.page/releases

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 after running yarn run build. Then, load http://localhost:9990/ and you'll have the core replayweb.page running locally.

Developing ReplayWeb.page

ReplayWeb.page is built as a Node package can be installed using yarn: yarn install

The package provides various commands that can be used with yarn/npm. Some useful commands include:

  • yarn start-dev - to run in dev mode with Webpack dev server on port 9990. Autobuilds dev assets.

  • yarn start-docs - to build assets in dev mode, and start docs in dev mode. Autobuilds /docs assets.

  • yarn start-prod - to run production site on port 9990, with previously built assets (without docs)

  • yarn start-prod-docs - to build production version of the site and build docs with /docs endpoint available.

  • yarn start-electron - to start electron in dev mode, with previously built assets

  • yarn build - to build production assets sw.js, ui.js

  • yarn build-docs - to build the docs site in mkdocs/site to mkdocs/_genhtml

  • yarn dist - to build production assets + Electron app (in dist/)

Static Site

The static assets are placed in the root index.html, sw.js, and ui.js, and can be used with any HTTP server. This provides the core ReplayWeb.page functionality.

Static Site + Docs

The full site with docs is built using MkDocs. Using the yarn build-docs command, the static assets are copied into mkdocs/site/ and using Markdown in mkdocs/site/docs, the final static site is built to mkdocs/_genhtml. This is what is published to https://replayweb.page/ via CI.

Service Worker Requirements

Note that for the 'backend' service worker to work, the static site must be served from either localhost or an HTTPS endpoint. This is browser security requirement and not much can be done to get around that.

See the user docs for additional info about using ReplayWeb.page

LICENSE

ReplayWeb.page is made available under the AGPLv3 License.

If you would like to use it under a different license or have a question, please reach out as that may be a possibility.

Contributing and Bug Reports

Contributions are definitely welcome!

As this is still a new project and rapidly evolving, please open an issue first before submitting a pull request.