Update docs

- Add thorough Vue theming instructions
- Update frameless replay banner info

Author: tw4l

docs/manual/configuring.rst

@@ -16,8 +16,19 @@ With **framed replay**, the archived content is loaded into an iframe, and a top
 In this mode, the top frame url is for example, ``http://my-archive.example.com/<coll name>/http://example.com/`` while
 the actual content is served at ``http://my-archive.example.com/<coll name>/mp_/http://example.com/``
 
+With **frameless replay**, the archived content is loaded directly. As of pywb 2.7, frameless replay is bannerless
+unless a custom banner is added via the ``custom_banner.html`` template.
+
+
+.. warning::
+    pywb 2.7 introduces a breaking change around frameless replay and banners.
+    Any custom banner intended to be used with frameless replay in pywb 2.7 and
+    higher must be specified in the ``custom_banner.html`` template. This may
+    require moving custom content from ``banner.html`` to the new
+    ``custom_banner.html``.
+
+    The default banner will no longer be served in frameless replay.
 
-With **frameless replay**, the archived content is loaded directly, and a banner UI is injected into the page.
 
 In this mode, the content is served directly at ``http://my-archive.example.com/<coll name>/http://example.com/``
 

docs/manual/images/vue-banner.png

@@ -148,9 +148,7 @@ File: ``query.html``
 
 This template is rendered for any URL search response pages, either a single URL or more complex queries.
 
-For example, the page ``http://localhost:8080/my-collection/*/https://example.com/`` will be rendered using this template.
-
-The default template supports the standard pywb table view, as well as a conditional new vue-based UI. (See :ref:`new-vue-ui` for more info on the new UI)
+For example, the page ``http://localhost:8080/my-collection/*/https://example.com/`` will be rendered using this template, with functionality provided by a Vue application.
 
 Template variables:
 
@@ -176,8 +174,7 @@ File: ``banner.html``
 
 This template is used to render the banner and is used both in framed replay and frameless replay.
 
-In framed replay, the template is only rendered in the top/outer frame, while in frameless replay,
-it is added to every page.
+In framed replay, the template is only rendered in the top/outer frame, while in frameless replay, it is added to every page.
 
 Template variables:
 
@@ -195,14 +192,7 @@ Template variables:
 
 * ``{{ ui }}`` - an optional ``ui`` dictionary from ``config.yaml``, if any.
 
-
-The default banner creates all UI dynamically via JS. However, a custom banner could also insert HTML to render the banner directly.
-
-By default, the banner checks the ``{{ ui.vue_timeline_banner }}`` and renders the new UI or the standard default UI.
-
-The default UI is created via the ``default_banner.js`` script.
-
-See :ref:`new-vue-ui` for more details on the new Vue UI.
+The default banner creates the UI dynamically in JavaScript using Vue.
 
 
 Head Insert Template

docs/manual/images/vue-cal.png

@@ -4,6 +4,6 @@ UI Customization
 .. toctree::
 
    ui-guide
-   new-vue-ui
+   vue-ui
    template-guide
 

docs/manual/template-guide.rst

@@ -8,38 +8,12 @@ Most aspects of the pywb user-interface can be customized by changing the defaul
 This guide covers a few different options for customizing the UI.
 
 
-Changing the Default Styles
----------------------------
-
-When using the default UI, pywb styles can be configured in ``pywb/static/default_banner.css``
-
-The style definition for ``#_wb_frame_top_banner`` affects the rendering of the default banner in framed mode.
-
-
-Configuring a Logo
-------------------
-
-An optional logo can be configured at the top-left of the default banner.
-
-To enable the logo set the ``ui.logo`` property in ``config.yaml`` to point to the URL of the logo.
-
-The URL can be any image URL, including a URL served from the static directory.
-
-For example, to add the default pywb logo to the banner, use the following in the config, which will
-load the logo from ``./static/pywb-logo-sm.png``
-
-.. code:: yaml
-
-    ui:
-        logo: pywb-logo-sm.png
-
-
-New Vue-based UI (Alpha)
-------------------------
+New Vue-based UI
+----------------
 
 With pywb 2.7.0, pywb includes a brand new UI which includes a visual calendar mode and a histogram-based banner.
 
-See :ref:`new-vue-ui` for more information on how to enable this UI.
+See :ref:`vue-ui` for more information on how to enable this UI.
 
 
 Customizing UI Templates

docs/manual/ui-customization.rst

@@ -1,22 +1,11 @@
-.. _new-vue-ui:
+.. _vue-ui:
 
 
-New Vue-based UI (Alpha)
-========================
+Vue-based UI
+================
 
-With 2.7.0, pywb introduces a new `Vue UI <https://vuejs.org/>`_ based system, which can be enabled to provide a more feature-rich representation of a web archive.
+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.
 
-The UI consists of two parts, which can be enabled using the ``ui`` block in ``config.yaml``
-
-.. code::  yaml
-
-  ui:
-    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.
 
 Overview
 --------
@@ -26,20 +15,17 @@ 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.
+The calendar is rendered in place of the URL query page from versions before 2.7.0.
 
 .. image:: images/vue-cal.png
   :width: 600
   :alt: Calendar UI Screenshot
 
 
-To enable this UI for URL query pages, set the ``ui.vue_calendar_ui`` property to true in the ``config.yaml``
-
-
 Banner Replay UI
 ^^^^^^^^^^^^^^^^
 
-The new banner histogram allows for zooming in on captures per year as well as per month.
+The new banner histogram allows for zooming in on captures per year, month, week, and day.
 
 Navigation preserves the different levels. The full calendar UI is also available as a dropdown by clicking the calendar icon.
 
@@ -50,13 +36,10 @@ The new banner should allow for faster navigation across multiple captures.
   :alt: Calendar UI Screenshot
 
 
-To enable this UI for replay pages, set the ``ui.vue_timeline_banner`` property to true in the ``config.yaml``
-
-
 Custom Logo
 ^^^^^^^^^^^
 
-When using the custom banner, it is possible to configure a logo by setting ``ui.logo`` to a static file.
+It is possible to configure a custom logo by setting ``ui.logo`` in ``config.yaml`` to a static file.
 
 If omitted, the standard pywb logo will be used by default.
 
@@ -70,6 +53,25 @@ For example, to use the file ``./static/my-logo.png`` as the logo, set:
     logo: my-logo.png
 
 
+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.
+
+
 Updating the Vue UI
 -------------------