diff --git a/docs/manual/configuring.rst b/docs/manual/configuring.rst index 666a5346..9a341734 100644 --- a/docs/manual/configuring.rst +++ b/docs/manual/configuring.rst @@ -16,8 +16,19 @@ With **framed replay**, the archived content is loaded into an iframe, and a top In this mode, the top frame url is for example, ``http://my-archive.example.com//http://example.com/`` while the actual content is served at ``http://my-archive.example.com//mp_/http://example.com/`` +With **frameless replay**, the archived content is loaded directly. As of pywb 2.7, frameless replay is bannerless +unless a custom banner is added via the ``custom_banner.html`` template. + + +.. warning:: + pywb 2.7 introduces a breaking change around frameless replay and banners. + Any custom banner intended to be used with frameless replay in pywb 2.7 and + higher must be specified in the ``custom_banner.html`` template. This may + require moving custom content from ``banner.html`` to the new + ``custom_banner.html``. + + The default banner will no longer be served in frameless replay. -With **frameless replay**, the archived content is loaded directly, and a banner UI is injected into the page. In this mode, the content is served directly at ``http://my-archive.example.com//http://example.com/`` diff --git a/docs/manual/images/vue-banner.png b/docs/manual/images/vue-banner.png index 21a0e137..301e7041 100644 Binary files a/docs/manual/images/vue-banner.png and b/docs/manual/images/vue-banner.png differ diff --git a/docs/manual/images/vue-cal.png b/docs/manual/images/vue-cal.png index 4ff204ba..b8a34a1f 100644 Binary files a/docs/manual/images/vue-cal.png and b/docs/manual/images/vue-cal.png differ diff --git a/docs/manual/template-guide.rst b/docs/manual/template-guide.rst index ee2f9efa..864ad837 100644 --- a/docs/manual/template-guide.rst +++ b/docs/manual/template-guide.rst @@ -148,9 +148,7 @@ File: ``query.html`` This template is rendered for any URL search response pages, either a single URL or more complex queries. -For example, the page ``http://localhost:8080/my-collection/*/https://example.com/`` will be rendered using this template. - -The default template supports the standard pywb table view, as well as a conditional new vue-based UI. (See :ref:`new-vue-ui` for more info on the new UI) +For example, the page ``http://localhost:8080/my-collection/*/https://example.com/`` will be rendered using this template, with functionality provided by a Vue application. Template variables: @@ -176,8 +174,7 @@ File: ``banner.html`` This template is used to render the banner and is used both in framed replay and frameless replay. -In framed replay, the template is only rendered in the top/outer frame, while in frameless replay, -it is added to every page. +In framed replay, the template is only rendered in the top/outer frame, while in frameless replay, it is added to every page. Template variables: @@ -195,14 +192,7 @@ Template variables: * ``{{ ui }}`` - an optional ``ui`` dictionary from ``config.yaml``, if any. - -The default banner creates all UI dynamically via JS. However, a custom banner could also insert HTML to render the banner directly. - -By default, the banner checks the ``{{ ui.vue_timeline_banner }}`` and renders the new UI or the standard default UI. - -The default UI is created via the ``default_banner.js`` script. - -See :ref:`new-vue-ui` for more details on the new Vue UI. +The default banner creates the UI dynamically in JavaScript using Vue. Head Insert Template diff --git a/docs/manual/ui-customization.rst b/docs/manual/ui-customization.rst index 47c960d4..8fc5bd65 100644 --- a/docs/manual/ui-customization.rst +++ b/docs/manual/ui-customization.rst @@ -4,6 +4,6 @@ UI Customization .. toctree:: ui-guide - new-vue-ui + vue-ui template-guide diff --git a/docs/manual/ui-guide.rst b/docs/manual/ui-guide.rst index edc68a16..7bdb47c1 100644 --- a/docs/manual/ui-guide.rst +++ b/docs/manual/ui-guide.rst @@ -8,38 +8,12 @@ Most aspects of the pywb user-interface can be customized by changing the defaul This guide covers a few different options for customizing the UI. -Changing the Default Styles ---------------------------- - -When using the default UI, pywb styles can be configured in ``pywb/static/default_banner.css`` - -The style definition for ``#_wb_frame_top_banner`` affects 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 the static directory. - -For example, to add the default pywb logo to the banner, use the following in the config, which will -load the logo from ``./static/pywb-logo-sm.png`` - -.. code:: yaml - - ui: - logo: pywb-logo-sm.png - - -New Vue-based UI (Alpha) ------------------------- +New Vue-based UI +---------------- 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. +See :ref:`vue-ui` for more information on how to enable this UI. Customizing UI Templates diff --git a/docs/manual/new-vue-ui.rst b/docs/manual/vue-ui.rst similarity index 58% rename from docs/manual/new-vue-ui.rst rename to docs/manual/vue-ui.rst index e7b6ed33..3c8c5c40 100644 --- a/docs/manual/new-vue-ui.rst +++ b/docs/manual/vue-ui.rst @@ -1,22 +1,11 @@ -.. _new-vue-ui: +.. _vue-ui: -New Vue-based UI (Alpha) -======================== +Vue-based UI +================ -With 2.7.0, pywb introduces a new `Vue UI `_ based system, which can be enabled to provide a more feature-rich representation of a web archive. +With 2.7.0, pywb introduces a new `Vue UI `_ based system, which provides 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`` - -.. code:: yaml - - ui: - vue_calendar_ui: true - vue_timeline_banner: true - - -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 -------- @@ -26,20 +15,17 @@ Calendar UI The new calendar UI provides a histogram and a clickable calendar representation of a web archive. -The calendar is rendered in place of the standard URL query page. +The calendar is rendered in place of the URL query page from versions before 2.7.0. .. image:: images/vue-cal.png :width: 600 :alt: Calendar UI Screenshot -To enable this UI for URL query pages, set the ``ui.vue_calendar_ui`` property to true in the ``config.yaml`` - - Banner Replay UI ^^^^^^^^^^^^^^^^ -The new banner histogram allows for zooming in on captures per year as well as per month. +The new banner histogram allows for zooming in on captures per year, month, week, and day. Navigation preserves the different levels. The full calendar UI is also available as a dropdown by clicking the calendar icon. @@ -50,13 +36,10 @@ The new banner should allow for faster navigation across multiple captures. :alt: Calendar UI Screenshot -To enable this UI for replay pages, set the ``ui.vue_timeline_banner`` property to true in the ``config.yaml`` - - Custom Logo ^^^^^^^^^^^ -When using the custom banner, it is possible to configure a logo by setting ``ui.logo`` to a static file. +It is possible to configure a custom logo by setting ``ui.logo`` in ``config.yaml`` to a static file. If omitted, the standard pywb logo will be used by default. @@ -70,6 +53,25 @@ For example, to use the file ``./static/my-logo.png`` as the logo, set: logo: my-logo.png +Banner Colors +^^^^^^^^^^^^^ + +It is possible to configure the background color, text color, and button outlines of the header by setting values in the ``ui`` section of ``config.yaml``. + +To customize the header background color, set ``ui.navbar_background_hex`` to the color's hex value, with the initial hash symbol (``#``) omitted. If omitted, ``#f8f9fa`` (Bootstrap 4's ``light``) will be used by default. + +For example, to use the color ``#cff3ff`` as the banner color, set: + +.. code:: yaml + + ui: + navbar_background_hex: cff3ff + +The navbar text color can similarly be set using the ``ui.navbar_color_hex`` setting. + +The banner's buttons default to Bootstrap 4's ``btn-outline-dark``. To use light-outlined buttons instead, set ``ui.navbar_light_buttons`` equal to any value. + + Updating the Vue UI -------------------