diff --git a/docs/manual/new-vue-ui.rst b/docs/manual/new-vue-ui.rst index 586cd232..3b007549 100644 --- a/docs/manual/new-vue-ui.rst +++ b/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 `_ 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``. diff --git a/docs/manual/template-guide.rst b/docs/manual/template-guide.rst index 819b8a22..1c008067 100644 --- a/docs/manual/template-guide.rst +++ b/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``. diff --git a/docs/manual/ui-overview.rst b/docs/manual/ui-overview.rst index 89c961bd..b056b153 100644 --- a/docs/manual/ui-overview.rst +++ b/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