From 29860bcb245927be6a1bb17aa1413ce0f038fbf5 Mon Sep 17 00:00:00 2001
From: Lauren Ko <lauren.ko@unt.edu>
Date: Wed, 22 Dec 2021 17:55:10 -0600
Subject: [PATCH] New UI corrections (#687)

* Fix typos.

* Make ui variable available to collection page
---
 docs/manual/new-vue-ui.rst     |  6 +++---
 docs/manual/template-guide.rst | 30 +++++++++++++++---------------
 docs/manual/ui-guide.rst       | 10 +++++-----
 pywb/apps/frontendapp.py       |  4 +++-
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/docs/manual/new-vue-ui.rst b/docs/manual/new-vue-ui.rst
index 3b007549..f9528ab7 100644
--- a/docs/manual/new-vue-ui.rst
+++ b/docs/manual/new-vue-ui.rst
@@ -4,7 +4,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.
+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.
 
 The UI consists of two parts, which can be enabled using the ``ui`` block in ``config.yaml``
 
@@ -58,13 +58,13 @@ 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 by default.
+If omitted, the standard pywb logo will be used by default.
 
 
 Updating the Vue UI
 -------------------
 
-The UI is contained with the ``pywb/vueui`` directory.
+The UI is contained within the ``pywb/vueui`` directory.
 
 The Vue component sources can be found in ``pywb/vueui/src``.
 
diff --git a/docs/manual/template-guide.rst b/docs/manual/template-guide.rst
index 1c008067..957c1d4f 100644
--- a/docs/manual/template-guide.rst
+++ b/docs/manual/template-guide.rst
@@ -49,7 +49,7 @@ Base Templates (and supporting templates)
 File: ``base.html``
 
 This template includes the HTML added to all other pages, replay and non-replay. Shared JS and CSS includes can be added here.
-For themeing all pywb UI, it may be useful to modify this template.
+For theming all pywb UI, it may be useful to modify this template.
 
 To customize the default pywb UI across multiple pages, the following additional templates
 can also be overriden:
@@ -101,7 +101,7 @@ Collection Page Template
 
 File: ``search.html``
 
-The 'collection page' template is the page rendered when no URL is specified, eg. ``http://localhost:8080/my-collection/``.
+The 'collection page' template is the page rendered when no URL is specified, e.g. ``http://localhost:8080/my-collection/``.
 
 The default template renders a search page that can be used to start searching for URLs.
 
@@ -123,19 +123,19 @@ If custom collection metadata is provided, this page will automatically show thi
 
 It is possible to also add custom metadata per-collection that will be available to the collection.
 
-For dynamic collections, any fields placed under ``<coll_name>/metadata.yaml`` filed can be accessed
+For dynamic collections, any fields placed in ``<coll_name>/metadata.yaml`` files can be accessed
 
 via the ``{{ metadata }}`` variable.
 
-For example, if metadata file contains:
+For example, if the metadata file contains:
 
 .. code:: yaml
 
     somedata: value
 
-Accessing ``{{ metadata.somedata }}`` will resolve to ``value``
+Accessing ``{{ metadata.somedata }}`` will resolve to ``value``.
 
-The metadata can also be added via commandline: ``wb-manager metadata myCollection --set somedata=value]``
+The metadata can also be added via commandline: ``wb-manager metadata myCollection --set somedata=value``.
 
 
 URL Query/Calendar Page Template
@@ -151,13 +151,13 @@ The default template supports the standard pywb table view, as well as a conditi
 
 Template variables:
 
-* ``{{ url }}`` - the URL being queried, eg. ``https://example.com/``
+* ``{{ url }}`` - the URL being queried, e.g. ``https://example.com/``
 
-* ``{{ prefix }}`` - the collection prefix that will be used for replay, eg. ``http://localhost:8080/my-collection/``
+* ``{{ prefix }}`` - the collection prefix that will be used for replay, e.g. ``http://localhost:8080/my-collection/``
 
 * ``{{ ui }}`` - an optional ``ui`` dictionary from ``config.yaml``, if any
 
-* ``{{ static_prefix }}`` - the prefix from which static files will be accessed from, eg. ``http://localhost:8080/static/``
+* ``{{ static_prefix }}`` - the prefix from which static files will be accessed from, e.g. ``http://localhost:8080/static/``
 
 
 Replay and Banner Templates
@@ -180,11 +180,11 @@ Template variables:
 
 * ``{{ url }}`` - the URL being replayed.
 
-* ``{{ timestamp }}`` - the timestamp being replayed, eg. ``20211226`` in ``http://localhost:8080/pywb/20211226/mp_/https://example.com/``
+* ``{{ timestamp }}`` - the timestamp being replayed, e.g. ``20211226`` in ``http://localhost:8080/pywb/20211226/mp_/https://example.com/``
 
 * ``{{ is_framed }}`` - true/false if currently in framed mode.
 
-* ``{{ wb_prefix }}`` - the collection prefix, eg. ``http://localhost:8080/pywb/``
+* ``{{ wb_prefix }}`` - the collection prefix, e.g. ``http://localhost:8080/pywb/``
 
 * ``{{ config }}`` - provides the contents of the ``config.yaml`` as a dictionary.
 
@@ -234,7 +234,7 @@ Template variables:
 
 * ``{{ is_framed }}`` - true/false if currently in framed mode.
 
-* ``{{ wb_prefix }}`` - the collection prefix, eg. ``http://localhost:8080/pywb/``
+* ``{{ wb_prefix }}`` - the collection prefix, e.g. ``http://localhost:8080/pywb/``
 
 
 
@@ -266,7 +266,7 @@ create an ``<iframe>`` element and pass the id (or element itself) to the ``Cont
 The outer frame can receive notifications of changes to the replay via ``postMessage``
 
 For example, to detect when the content frame changed and log the new url and timestamp,
-use the following script to the outer frame html:
+use the following script in the outer frame html:
 
 .. code-block:: javascript
 
@@ -346,9 +346,9 @@ This block is provided to the ``search.html``, ``query.html`` and ``banner.html`
 Localization Globals
 ^^^^^^^^^^^^^^^^^^^^
 
-The Localization system (see: :ref:`localization`) adds several additional template globals, to faciliate listing available locales and getting URLs to switch locales, including:
+The Localization system (see: :ref:`localization`) adds several additional template globals, to facilitate listing available locales and getting URLs to switch locales, including:
 
-* ``{{ _Q() }}`` - a function used to mark certain text for localization, eg. ``{{ _Q('localize this text') }}``
+* ``{{ _Q() }}`` - a function used to mark certain text for localization, e.g. ``{{ _Q('localize this text') }}``
 
 * ``{{ env.pywb_lang }}`` - indicates current locale language code used for localization.
 
diff --git a/docs/manual/ui-guide.rst b/docs/manual/ui-guide.rst
index 4c75e6b3..4d981faa 100644
--- a/docs/manual/ui-guide.rst
+++ b/docs/manual/ui-guide.rst
@@ -13,7 +13,7 @@ Changing the Default Styles
 
 When using the default UI, pywb styles can be configured in ``pywb/static/default_banner.css``
 
-The stylesheet contained under ``#_wb_frame_top_banner`` affect the rendering of the default banner in framed mode.
+The style definition for ``#_wb_frame_top_banner`` affects the rendering of the default banner in framed mode.
 
 
 Configuring a Logo
@@ -23,9 +23,9 @@ 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 static directory.
+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 to the config:
+For example, to add the default pywb logo to the banner, use the following in the config:
 
 .. code:: yaml
 
@@ -59,7 +59,7 @@ pywb will automatically support static files placed under the following director
 * Files under the root ``static`` directory: ``static/my-file.js`` can be accessed via ``http://localhost:8080/static/my-file.js``
 
 
-* Files under the per-collection directory: ``./collections/my-coll/static/my-file.js`` can be accessed via ``http://localhost:8080/pywb/static/_/my-coll/my-file.js``
+* Files under the per-collection directory: ``./collections/my-coll/static/my-file.js`` can be accessed via ``http://localhost:8080/static/_/my-coll/my-file.js``
 
 
 It is possible to change these settings via ``config.yaml``:
@@ -102,7 +102,7 @@ For customizing the top-level page and banner, see :ref:`custom-top-frame`.
 
 However, there may be other reasons to embed pywb in an iframe.
 
-This can be doen simply by including something like:
+This can be done simply by including something like:
 
 .. code:: html
 
diff --git a/pywb/apps/frontendapp.py b/pywb/apps/frontendapp.py
index c80c4e3b..86d6db40 100644
--- a/pywb/apps/frontendapp.py
+++ b/pywb/apps/frontendapp.py
@@ -383,6 +383,7 @@ class FrontEndApp(object):
 
         coll_config = self.get_coll_config(coll)
         metadata = coll_config.get('metadata')
+        ui = coll_config.get('ui', {})
 
         view = BaseInsertView(self.rewriterapp.jinja_env, 'search.html')
 
@@ -394,7 +395,8 @@ class FrontEndApp(object):
                                         wb_prefix=wb_prefix,
                                         coll=coll,
                                         coll_config=coll_config,
-                                        metadata=metadata)
+                                        metadata=metadata,
+                                        ui=ui)
 
         return WbResponse.text_response(content, content_type='text/html; charset="utf-8"')