Allow for custom image logo (#642)

* first test

* add custom URL logo

* some styling

* fixed typo, wrong import

* Update .env.example

Co-authored-by: calle <93376500+callebtc@users.noreply.github.com>

Co-authored-by: calle <93376500+callebtc@users.noreply.github.com>

.env.example

@@ -34,6 +34,7 @@ LNBITS_SITE_TAGLINE="free and open-source lightning wallet"
 LNBITS_SITE_DESCRIPTION="Some description about your service, will display if title is not 'LNbits'"
 # Choose from mint, flamingo, freedom, salvador, autumn, monochrome, classic
 LNBITS_THEME_OPTIONS="classic, bitcoin, freedom, mint, autumn, monochrome, salvador"
+# LNBITS_CUSTOM_LOGO="https://lnbits.com/assets/images/logo/logo.svg"
 
 # Choose from LNPayWallet, OpenNodeWallet, LntxbotWallet,
 #             LndRestWallet, CLightningWallet, LNbitsWallet, SparkWallet, FakeWallet, EclairWallet

lnbits/helpers.py

@@ -6,11 +6,10 @@ from typing import Any, List, NamedTuple, Optional
 import jinja2
 import shortuuid  # type: ignore
 
+import lnbits.settings as settings
 from lnbits.jinja2_templating import Jinja2Templates
 from lnbits.requestvars import g
 
-import lnbits.settings as settings
-
 
 class Extension(NamedTuple):
     code: str
@@ -160,6 +159,7 @@ def template_renderer(additional_folders: List = []) -> Jinja2Templates:
             ["lnbits/templates", "lnbits/core/templates", *additional_folders]
         )
     )
+        
     if settings.LNBITS_AD_SPACE:
         t.env.globals["AD_SPACE"] = settings.LNBITS_AD_SPACE
     t.env.globals["HIDE_API"] = settings.LNBITS_HIDE_API
@@ -170,6 +170,8 @@ def template_renderer(additional_folders: List = []) -> Jinja2Templates:
     t.env.globals["LNBITS_THEME_OPTIONS"] = settings.LNBITS_THEME_OPTIONS
     t.env.globals["LNBITS_VERSION"] = settings.LNBITS_COMMIT
     t.env.globals["EXTENSIONS"] = get_valid_extensions()
+    if settings.LNBITS_CUSTOM_LOGO:
+        t.env.globals["USE_CUSTOM_LOGO"] = settings.LNBITS_CUSTOM_LOGO
 
     if settings.DEBUG:
         t.env.globals["VENDORED_JS"] = map(url_for_vendored, get_js_vendored())

lnbits/settings.py

@@ -1,10 +1,9 @@
-import subprocess
 import importlib
-
+import subprocess
-from environs import Env  # type: ignore
 from os import path
 from typing import List
 
+from environs import Env  # type: ignore
 
 env = Env()
 env.read_env()
@@ -47,6 +46,7 @@ LNBITS_THEME_OPTIONS: List[str] = env.list(
     default="classic, flamingo, mint, salvador, monochrome, autumn",
     subcast=str,
 )
+LNBITS_CUSTOM_LOGO = env.str("LNBITS_CUSTOM_LOGO", default="")
 
 WALLET = wallet_class()
 DEFAULT_WALLET_NAME = env.str("LNBITS_DEFAULT_WALLET_NAME", default="LNbits wallet")

lnbits/templates/base.html

@@ -34,10 +34,12 @@
           {% endblock %}
           <q-toolbar-title>
             <q-btn flat no-caps dense size="lg" type="a" href="/">
-              {% block toolbar_title %} {% if SITE_TITLE != 'LNbits' %} {{
+              {% block toolbar_title %} {% if USE_CUSTOM_LOGO %}
-              SITE_TITLE }} {% else %} <strong>LN</strong>bits {% endif %} {%
+              <img height="30px" alt="Logo" src="{{ USE_CUSTOM_LOGO }}" />
-              endblock %}</q-btn
+              {%else%} {% if SITE_TITLE != 'LNbits' %} {{ SITE_TITLE }} {% else
-            >
+              %}
+              <strong>LN</strong>bits {% endif %} {%endif%} {% endblock %}
+            </q-btn>
           </q-toolbar-title>
           {% block beta %}
           <q-badge color="yellow" text-color="black" class="q-mr-md">

lnbits/templates/public.html

@@ -1,7 +1,13 @@
 {% extends "base.html" %} {% block beta %}{% endblock %} {% block drawer_toggle
 %}{% endblock %} {% block drawer %}{% endblock %} {% block toolbar_title %}
-<a href="/" class="inherit">
+<a
-  {% if SITE_TITLE != 'LNbits' %} {{ SITE_TITLE }} {% else %}
+  href="/"
-  <strong>LN</strong>bits {% endif %}
+  class="inherit q-btn q-btn-item non-selectable no-outline q-btn--flat q-btn--rectangle q-btn--actionable q-focusable q-hoverable q-btn--no-uppercase q-btn--wrap q-btn--dense q-btn--active"
+  style="font-size: 20px"
+>
+  {% if USE_CUSTOM_LOGO %}
+  <img height="30px" alt="Logo" src="{{ USE_CUSTOM_LOGO }}" />
+  {%else%} {% if SITE_TITLE != 'LNbits' %} {{ SITE_TITLE }} {% else %}
+  <strong>LN</strong>bits {% endif %} {% endif %}
 </a>
 {% endblock %}