mirror of
https://github.com/webrecorder/pywb.git
synced 2025-03-15 00:03:28 +01:00
New UI corrections (#687)
* Fix typos. * Make ui variable available to collection page
This commit is contained in:
Lauren Ko
GitHub
parent
edecbbba91
commit
118400c641
@ -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``.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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"')
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user