docs: tweak outline headings, add banner image

docs/manual/new-vue-ui.rst

@@ -2,7 +2,7 @@
 
 
 New Vue-based UI (Alpha)
-------------------------
+========================
 
 With 2.7.0, pywb introduces a new `Vue UI <https://vuejs.org/>`_ based system, which can be enabled to provide a more feature-representation of a web archive.
 
@@ -18,6 +18,9 @@ The UI consists of two parts, which can be enabled using the ``ui`` block in ``c
 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
+--------
+
 Calendar UI
 ^^^^^^^^^^^
 
@@ -42,6 +45,10 @@ Navigation preserves the different levels. The full calendar UI is also availabl
 
 The new banner should allow for faster navigation across multiple captures.
 
+.. image:: images/vue-banner.png
+  :width: 600
+  :alt: Calendar UI Screenshot
+
 
 To enable this UI for replay pages, set the ``ui.vue_timeline_banner`` property to true in the ``config.yaml``
 
@@ -51,5 +58,28 @@ Custom Logo
 
 When using the custom banner, it is possible to configure a logo by setting ``ui.logo`` to a static file.
 
-If ommitted, the standard pywb logo will be used instead.
+If ommitted, the standard pywb logo will be used by default.
+
+
+Updating the Vue UI
+-------------------
+
+The UI is contained with 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:
+
+
+.. 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``.

docs/manual/template-guide.rst

@@ -1,16 +1,19 @@
 .. _template-guide:
 
-Template Reference
-------------------
+Template Guide
+==============
 
-The following provides a quick reference of all of the templates available in pywb.
+Introduction
+------------
+
+This guide provides a reference of all of the templates available in pywb and how they could be modified.
 
 These templates are found in the ``pywb/templates`` directory and can be overridden as needed, one HTML page at a time.
 
 Template variables are listed as ``{{ variable }}`` to indicate the syntax used for rendering the value of the variable in Jinja2.
 
-Preparing a Template For Modification
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+Copying a Template For Modification
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 To modify a template, it is often useful to start with the default template. To do so, simply copy a default template
 to a local ``templates`` directory.
@@ -86,6 +89,7 @@ This template renders the home page for pywb, and by default renders a list of a
 Template variables:
 
 * ``{{ routes }}`` - a list of available collection routes.
+
 * ``{{ all_metadata }}`` - a dictionary of all metadata for all collections, keyed by collection id. See :ref:`custom-metadata` for more info on the custom metadata.
 
 
@@ -113,7 +117,7 @@ Template variables:
 .. _custom-metadata:
 
 Custom Metadata
-===============
+"""""""""""""""
 
 If custom collection metadata is provided, this page will automatically show this metadata as well.
 
@@ -237,7 +241,7 @@ Template variables:
 .. _custom-top-frame:
 
 Customizing the Top Frame Template
-==================================
+""""""""""""""""""""""""""""""""""
 
 The top-frame used for framed replay can be replaced or augmented
 by modifying the ``frame_insert.html``.

docs/manual/ui-overview.rst

@@ -12,6 +12,6 @@ pywb includes an extensive template system.
 .. toctree::
 
    ui-customization
-   template-guide
    new-vue-ui
+   template-guide