diff --git a/docs/index.rst b/docs/index.rst index c5cb6d69..af80b744 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -17,7 +17,7 @@ A subset of features provides the basic functionality of a "Wayback Machine". manual/usage manual/configuring manual/access-control - manual/ui-overview + manual/ui-customization manual/localization manual/architecture manual/apis diff --git a/docs/manual/ui-customization.rst b/docs/manual/ui-customization.rst index f63e083d..47c960d4 100644 --- a/docs/manual/ui-customization.rst +++ b/docs/manual/ui-customization.rst @@ -1,114 +1,9 @@ -.. _ui-customizations: +UI Customization +================ -UI Overview and Customization -============================= - -pywb includes a number of options for styling the UI, including completely replacing the UI with a custom version. - - -Customizing UI Templates ------------------------- - -pywb renders HTML using the Jinja2 templating engine, loading default templates from the ``pywb/templates`` directory. - -If running from a custom directory, templates can be placed in the ``templates`` directory and will override the defaults. - -See :ref:`template-guide` for more details on customizing the templates. - - -New Vue-based UI (Alpha) ------------------------- - -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. - - -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. - - -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 static directory. - -For example, to add the default pywb logo to the banner, use the following to the config: - -.. code:: yaml - - ui: - logo: /static/pywb-logo-sm.png - - -Static Files ------------- - -pywb will automatically support static files placed under the following directories: - -* 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`` - - -It is possible to change these settings via ``config.yaml``: - -* ``static_prefix`` - sets the URL path used in pywb to serve static content (default ``static``) - -* ``static_dir`` - sets the directory name used to read static files (default ``static``) - -While pywb can serve static files, it is recommended to use an existing web server to serve static files, especially if already using it in production. - -For example, this can be done via nginx with: - - -.. code:: text - - location /wayback/static { - alias /pywb/pywb/static; - } - - -Loading Custom Metadata ------------------------ - -pywb includes a default mechanism for loading externally defined metadata, loaded from a per-collection ``metadata.yaml`` YAML file at runtime. - -See :ref:`custom-metadata` for more details. - -Additionally, the banner template has access to the contents of the ``config.yaml`` via the ``{{ config }}`` template variable, -allowing for passing in arbitrary config information. - -For more dynamic loading of data, the banner and all of the templates can load additional data via JS ``fetch()`` calls. - - -Embedding pywb in frames ------------------------- - -It should be possible to embed pywb replay itself as an iframe as needed. - -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: - -.. code:: html - - - - -
Embedding pywb replay
- - - +.. toctree:: + ui-guide + new-vue-ui + template-guide + diff --git a/docs/manual/ui-overview.rst b/docs/manual/ui-overview.rst deleted file mode 100644 index b056b153..00000000 --- a/docs/manual/ui-overview.rst +++ /dev/null @@ -1,17 +0,0 @@ -UI Overview -=========== - -The UI overview provides various aspects of customizing the pywb UI. - -The template reference lists the available templates and their variables. - -The new Vue UI covers the new UI being developed as of pywb 2.7.0 - -pywb includes an extensive template system. - -.. toctree:: - - ui-customization - new-vue-ui - template-guide -