1
0
mirror of https://github.com/webrecorder/pywb.git synced 2025-03-15 00:03:28 +01:00

Add ui.logo_home_url as config.yaml option (#790)

* Add ui.logo_home_url as config option
* Add ui.logo_home_url to docs
This commit is contained in:
Tessa Walsh 2023-01-05 17:33:00 -05:00 committed by GitHub
parent 3050fd2b2b
commit 3d0673e32a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 69 additions and 38 deletions

View File

@ -6,6 +6,7 @@ debug: true
# Uncomment to set banner colors and logo
# ui:
# logo: path/relative/from/static/logo.png
# logo_home_url: https://example.com
# navbar_background_hex: 0c49b0
# navbar_color_hex: fff
# navbar_light_buttons: true

View File

@ -53,6 +53,21 @@ For example, to use the file ``./static/my-logo.png`` as the logo, set:
logo: my-logo.png
Logo URL
^^^^^^^^
It is possible to configure the logo to link to any URL by setting ``ui.logo_home_url`` in ``config.yml`` to the URL of your choice.
If omitted, the logo will not link to any page.
For example, to have the logo redirect to ``https://example.com/web-archive-landing-page``, set:
.. code:: yaml
ui:
logo_home_url: https://example.com/web-archive-landing-page
Banner Colors
^^^^^^^^^^^^^

File diff suppressed because one or more lines are too long

View File

@ -25,7 +25,7 @@ html, body
<div id="app" style="width: 100%; height: 200px"></div>
<script>
VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ wb_prefix }}", "{{ timestamp }}", "{{ ui.logo }}", "{{ ui.navbar_background_hex | default('f8f9fa') }}", "{{ ui.navbar_color_hex | default('212529') }}", "{{ ui.navbar_light_buttons }}", "{{ env.pywb_lang | default('en') }}",
VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ wb_prefix }}", "{{ timestamp }}", "{{ ui.logo }}", "{{ ui.logo_home_url }}", "{{ ui.navbar_background_hex | default('f8f9fa') }}", "{{ ui.navbar_color_hex | default('212529') }}", "{{ ui.navbar_light_buttons }}", "{{ env.pywb_lang | default('en') }}",
allLocales, i18nStrings);
</script>

View File

@ -90,7 +90,7 @@
<div id="app" style="width: 100%; height: 100%"></div>
<script>
VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ prefix }}", undefined, "{{ ui.logo }}", "{{ ui.navbar_background_hex | default('f8f9fa') }}", "{{ ui.navbar_color_hex | default('212529') }}", "{{ ui.navbar_light_buttons }}", "{{ env.pywb_lang | default('en') }}",
VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ prefix }}", undefined, "{{ ui.logo }}", "{{ ui.logo_home_url }}", "{{ ui.navbar_background_hex | default('f8f9fa') }}", "{{ ui.navbar_color_hex | default('212529') }}", "{{ ui.navbar_light_buttons }}", "{{ env.pywb_lang | default('en') }}",
allLocales, i18nStrings);
</script>

View File

@ -4,9 +4,12 @@
<nav
class="navbar navbar-light navbar-expand-lg fixed-top top-navbar justify-content-center"
:style="navbarStyle">
<a class="navbar-brand flex-grow-1 my-1" href="/">
<a class="navbar-brand flex-grow-1 my-1" :href="config.logoHomeUrl" v-if="config.logoHomeUrl">
<img :src="config.logoImg" id="logo-img" alt="_('pywb logo')">
</a>
<div class="navbar-brand flex-grow-1 my-1" v-else>
<img :src="config.logoImg" id="logo-img" alt="_('pywb logo')">
</div>
<div class="flex-grow-1 d-flex" id="searchdiv">
<form
class="form-inline my-2 my-md-0 mx-lg-auto"

View File

@ -7,20 +7,21 @@ import Vue from "vue/dist/vue.esm.browser";
// ===========================================================================
export function main(staticPrefix, url, prefix, timestamp, logoUrl, navbarBackground, navbarColor, navbarLightButtons, locale, allLocales, i18nStrings) {
export function main(staticPrefix, url, prefix, timestamp, logoUrl, logoHomeUrl, navbarBackground, navbarColor, navbarLightButtons, locale, allLocales, i18nStrings) {
PywbI18N.init(locale, i18nStrings);
new CDXLoader(staticPrefix, url, prefix, timestamp, logoUrl, navbarBackground, navbarColor, navbarLightButtons, allLocales);
new CDXLoader(staticPrefix, url, prefix, timestamp, logoUrl, logoHomeUrl, navbarBackground, navbarColor, navbarLightButtons, allLocales);
}
// ===========================================================================
class CDXLoader {
constructor(staticPrefix, url, prefix, timestamp, logoUrl, navbarBackground, navbarColor, navbarLightButtons, allLocales) {
constructor(staticPrefix, url, prefix, timestamp, logoUrl, logoHomeUrl, navbarBackground, navbarColor, navbarLightButtons, allLocales) {
this.loadingSpinner = null;
this.loaded = false;
this.opts = {};
this.prefix = prefix;
this.staticPrefix = staticPrefix;
this.logoUrl = logoUrl;
this.logoHomeUrl = logoHomeUrl;
this.navbarBackground = navbarBackground;
this.navbarColor = navbarColor;
this.navbarLightButtons = navbarLightButtons;
@ -60,7 +61,7 @@ class CDXLoader {
const logoImg = this.staticPrefix + "/" + (this.logoUrl ? this.logoUrl : "pywb-logo-sm.png");
this.app = this.initApp({logoImg, navbarBackground, navbarColor, navbarLightButtons, url, allLocales, timestamp});
this.app = this.initApp({logoImg, logoHomeUrl, navbarBackground, navbarColor, navbarLightButtons, url, allLocales, timestamp});
this.loadCDX(queryURL).then((cdxList) => {
this.setAppData(cdxList, url, this.timestamp);