New Vue-based UI (Alpha)

With 2.7.0, pywb introduces a new Vue UI based system, which can be enabled to provide a more feature-rich representation of a web archive.

The UI consists of two parts, which can be enabled using the ui block in config.yaml

  vue_calendar_ui: true
  vue_timeline_banner: true

Note: This UI is still in development and not all features are operational yet. In particular, localization switching is not yet available in the alpha version.


Calendar UI

The new calendar UI provides a histogram and a clickable calendar representation of a web archive.

The calendar is rendered in place of the standard URL query page.

Calendar UI Screenshot

To enable this UI for URL query pages, set the ui.vue_calendar_ui property to true in the config.yaml

Updating the Vue UI

The UI is contained within the pywb/vueui directory.

The Vue component sources can be found in pywb/vueui/src.

Updating the UI requires node and yarn.

To install and build, run:

cd pywb/vueui
yarn install
yarn build

This will generate the output to pywb/static/vue/vueui.js which is loaded from the default templates when the Vue UI rendering is enabled.

Additional styles for the banner are loaded from pywb/static/vue_banner.css.