From: Roland Häder <roland@mxchange.org>
Date: Sun, 25 Jun 2023 05:05:47 +0000 (+0200)
Subject: Continued:
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=2da6daf2ffc5e39c4b555bd8ce030470d6840960;p=fba.git

Continued:
- basic theme support added
- please note that the StaticFiles class handles them!
---

diff --git a/api.py b/api.py
index 7d0dd52..4f59c1b 100644
--- a/api.py
+++ b/api.py
@@ -14,16 +14,21 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+import os
+import os.path
 import re
 
 from datetime import datetime
 from email.utils import format_datetime
+from pathlib import Path
+
+import fastapi
 from fastapi import Request, HTTPException, Query
 from fastapi.responses import JSONResponse
 from fastapi.responses import PlainTextResponse
+from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
-import fastapi
 import uvicorn
 import requests
 import validators
@@ -39,6 +44,12 @@ from fba.http import network
 from fba.models import blocks
 
 router = fastapi.FastAPI(docs_url=config.get("base_url") + "/docs", redoc_url=config.get("base_url") + "/redoc")
+router.mount(
+    "/static",
+    StaticFiles(directory=Path(__file__).parent.absolute() / "static"),
+    name="static",
+)
+
 templates = Jinja2Templates(directory="templates")
 
 @router.get(config.get("base_url") + "/api/info.json", response_class=JSONResponse)
@@ -240,6 +251,7 @@ def scoreboard(request: Request, mode: str, amount: int):
     return templates.TemplateResponse("views/scoreboard.html", {
         "base_url"  : config.get("base_url"),
         "slogan"    : config.get("slogan"),
+        "theme"     : config.get("theme"),
         "request"   : request,
         "scoreboard": True,
         "mode"      : mode,
@@ -257,6 +269,7 @@ def index(request: Request):
 
     return templates.TemplateResponse("views/index.html", {
         "request": request,
+        "theme"  : config.get("theme"),
         "info"   : response.json()
     })
 
@@ -300,6 +313,7 @@ def top(request: Request, mode: str, value: str, amount: int = config.get("api_l
         "found"    : found,
         "blocklist": blocklist,
         "info"     : info,
+        "theme"    : config.get("theme"),
     })
 
 @router.get(config.get("base_url") + "/rss")
diff --git a/config.defaults.json b/config.defaults.json
index 2010acd..d6cb220 100644
--- a/config.defaults.json
+++ b/config.defaults.json
@@ -21,5 +21,6 @@
     "error_log_cleanup" : 604800,
     "write_error_log"   : "true",
     "rss_limit"         : 50,
-    "api_limit"         : 500
+    "api_limit"         : 500,
+    "theme"             : "light",
 }
diff --git a/static/css/light.css b/static/css/light.css
new file mode 100644
index 0000000..47aea43
--- /dev/null
+++ b/static/css/light.css
@@ -0,0 +1,125 @@
+body {
+    background-color: #ffffff;
+    color: #000022;
+    text-align: center;
+    font-family: sans;
+}
+
+#header {
+    margin-bottom: 20px;
+}
+
+h1 {
+    background-color: #eaeaea;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+    width: auto;
+}
+
+#content {
+    margin-bottom: 20px;
+}
+
+table {
+    width: 100%;
+    border: 2px solid #eaeaea;
+    border-spacing: 0px;
+    border-radius: 5px;
+}
+
+th {
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+table.with-rows > tbody > tr:nth-of-type(2n),
+table.with-rows > thead {
+    background-color: #eaeaea;
+}
+
+table td {
+    padding: 4px;
+    text-align: left;
+}
+
+.block_level {
+    width: 100%;
+    margin: auto;
+    margin-top: 10px;
+}
+.block {
+    padding: 5px;
+    margin: 5px;
+}
+
+a {
+    color: #000000;
+}
+a.listlink {
+    text-decoration: none;
+}
+a:hover {
+    color: #f00000;
+}
+
+input {
+    padding: 5px;
+    border-radius: 5px;
+    font-size: 16px;
+}
+input[type="submit"] {
+    cursor: pointer;
+}
+input:hover {
+    border-color: #f00000;
+}
+
+span[title] {
+    text-decoration: underline dotted;
+}
+
+.scoreboard {
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 50%;
+    width: 50em;
+}
+
+/* notice box */
+.notice {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 20px;
+    width: 50em;
+    text-align: left;
+    border: 1px solid #eaeaea;
+    border-radius: 5px;
+}
+/* notice header */
+.notice > h3 {
+    margin: 0px;
+    padding: 5px;
+    background-color: #eaeaea;
+    text-align: center;
+}
+/* notice text/body */
+.notice > div {
+    margin: 0px;
+    padding: 5px;
+}
+
+li {
+    padding-bottom: 4px;
+}
+
+code {
+    padding: 3px;
+    background-color: #eaeaea;
+    border-radius: 5px;
+}
+
+ul.nav > li {
+    margin: 2px;
+    display: inline;
+}
diff --git a/templates/base.html b/templates/base.html
index 55d3023..413cd4c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,129 +1,9 @@
 <!DOCTYPE html>
 <head>
     <title>fedi-block-api - {% block title %}{% endblock %}</title>
-    {% block rss %}
-        <link rel="alternate" type="application/rss+xml" title="RSS Feed for latest blocked instances" href="{{base_url}}/rss" />
-    {% endblock %}
-    <style>
-        body {
-            background-color: #ffffff;
-            color: #000022;
-            text-align: center;
-            font-family: sans;
-        }
-
-        #header {
-            margin-bottom: 20px;
-        }
-
-        h1 {
-            background-color: #eaeaea;
-            border-radius: 5px;
-            padding-left: 5px;
-            padding-right: 5px;
-            width: auto;
-        }
-
-        #content {
-            margin-bottom: 20px;
-        }
-
-        table {
-            width: 100%;
-            border: 2px solid #eaeaea;
-            border-spacing: 0px;
-            border-radius: 5px;
-        }
-
-        th {
-            padding-top: 4px;
-            padding-bottom: 4px;
-        }
-
-        table.with-rows > tbody > tr:nth-of-type(2n),
-        table.with-rows > thead {
-            background-color: #eaeaea;
-        }
-
-        table td {
-            padding: 4px;
-            text-align: left;
-        }
-
-        .block_level {
-            width: 100%;
-            margin: auto;
-            margin-top: 10px;
-        }
-        .block {
-            padding: 5px;
-            margin: 5px;
-        }
-
-        a {
-            color: #000000;
-        }
-        a.listlink {
-            text-decoration: none;
-        }
-        a:hover {
-            color: #f00000;
-        }
-
-        input {
-            padding: 5px;
-            border-radius: 5px;
-            font-size: 16px;
-        }
-        input[type="submit"] {
-            cursor: pointer;
-        }
-        input:hover {
-            border-color: #f00000;
-        }
-
-        span[title] {
-            text-decoration: underline dotted;
-        }
-
-        .scoreboard {
-            margin-left: auto;
-            margin-right: auto;
-            min-width: 50%;
-            width: 50em;
-        }
-        .notice {
-            margin-left: auto;
-            margin-right: auto;
-            margin-bottom: 20px;
-            width: 50em;
-            text-align: left;
-            border: 1px solid #eaeaea;
-            border-radius: 5px;
-        }
-        .notice > div {
-            margin: 0px;
-            padding: 5px;
-        }
-        .notice > h3 {
-            margin: 0px;
-            padding: 5px;
-            background-color: #eaeaea;
-            text-align: center;
-        }
-        li {
-            padding-bottom: 4px;
-        }
-        code {
-            padding: 3px;
-            background-color: #eaeaea;
-            border-radius: 5px;
-        }
-        ul.nav > li {
-            margin: 2px;
-            display: inline;
-        }
-    </style>
+    <link rel="alternate" type="application/rss+xml" title="RSS Feed for latest blocked instances" href="{{base_url}}/rss" />
+    {% block rss %}{% endblock %}
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='css/' + theme + '.css') }}" media="all" />
 </head>
 
 <body>
@@ -147,6 +27,6 @@
                 NO SLOGAN WAS FOUND!!!
             {% endif %}
         {% endblock %}
-    </p>
+    </div>
 </body>
 </html>