2022-08-01 02:23:46 -04:00
.. _vue-ui:
2021-12-13 22:54:29 -08:00
2022-08-01 02:23:46 -04:00
Vue-based UI
================
2021-12-13 22:54:29 -08:00
2022-08-01 02:23:46 -04:00
With 2.7.0, pywb introduces a new `Vue UI <https://vuejs.org/> `_ based system, which provides a more feature-rich representation of a web archive.
2021-12-13 22:54:29 -08:00
Overview
--------
Calendar UI
^^^^^^^^^^^
The new calendar UI provides a histogram and a clickable calendar representation of a web archive.
2022-08-01 02:23:46 -04:00
The calendar is rendered in place of the URL query page from versions before 2.7.0.
2021-12-13 22:54:29 -08:00
.. image :: images/vue-cal.png
:width: 600
:alt: Calendar UI Screenshot
Banner Replay UI
^^^^^^^^^^^^^^^^
2022-08-01 02:23:46 -04:00
The new banner histogram allows for zooming in on captures per year, month, week, and day.
2021-12-13 22:54:29 -08:00
Navigation preserves the different levels. The full calendar UI is also available as a dropdown by clicking the calendar icon.
The new banner should allow for faster navigation across multiple captures.
.. image :: images/vue-banner.png
:width: 600
:alt: Calendar UI Screenshot
Custom Logo
^^^^^^^^^^^
2022-08-01 02:23:46 -04:00
It is possible to configure a custom logo by setting `` ui.logo `` in `` config.yaml `` to a static file.
2021-12-13 22:54:29 -08:00
2021-12-22 17:55:10 -06:00
If omitted, the standard pywb logo will be used by default.
2021-12-13 22:54:29 -08:00
2022-01-23 17:55:24 -08:00
If set, the logo should point to a file in the static directory (default is `` static `` but can be changed via the `` static_dir `` config option).
For example, to use the file `` ./static/my-logo.png `` as the logo, set:
.. code :: yaml
ui:
logo: my-logo.png
2021-12-13 22:54:29 -08:00
2022-08-01 02:23:46 -04:00
Banner Colors
^^^^^^^^^^^^^
It is possible to configure the background color, text color, and button outlines of the header by setting values in the `` ui `` section of `` config.yaml `` .
To customize the header background color, set `` ui.navbar_background_hex `` to the color's hex value, with the initial hash symbol (`` # `` ) omitted. If omitted, `` #f8f9fa `` (Bootstrap 4's `` light `` ) will be used by default.
For example, to use the color `` #cff3ff `` as the banner color, set:
.. code :: yaml
ui:
navbar_background_hex: cff3ff
The navbar text color can similarly be set using the `` ui.navbar_color_hex `` setting.
The banner's buttons default to Bootstrap 4's `` btn-outline-dark `` . To use light-outlined buttons instead, set `` ui.navbar_light_buttons `` equal to any value.
2021-12-13 22:54:29 -08:00
Updating the Vue UI
-------------------
2021-12-22 17:55:10 -06:00
The UI is contained within the `` pywb/vueui `` directory.
2021-12-13 22:54:29 -08:00
The Vue component sources can be found in `` pywb/vueui/src `` .
Updating the UI requires `` node `` and `` yarn `` .
To install and build, run:
.. code :: console
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 `` .