Add full support for favicon magic in portal even without proxy

snikket_web/__init__.py

@@ -15,6 +15,7 @@ from quart import (
     render_template,
     current_app,
     redirect,
+    jsonify,
 )
 
 import environ
@@ -196,6 +197,44 @@ def create_app() -> quart.Quart:
 
         return redirect(url_for('main.login'))
 
+    @app.route("/site.webmanifest")
+    def site_manifest() -> quart.Response:
+        # this is needed for icons
+        return jsonify(
+            {
+                "name": "Snikket",
+                "short_name": "Snikket",
+                "icons": [
+                    {
+                        "src": url_for(
+                            "static",
+                            filename="img/android-chrome-192x192.png",
+                        ),
+                        "sizes": "192x192",
+                        "type": "image/png"
+                    },
+                    {
+                        "src": url_for(
+                            "static",
+                            filename="img/android-chrome-256x256.png",
+                        ),
+                        "sizes": "256x256",
+                        "type": "image/png"
+                    },
+                    {
+                        "src": url_for(
+                            "static",
+                            filename="img/android-chrome-512x512.png",
+                        ),
+                        "sizes": "512x512",
+                        "type": "image/png"
+                    },
+                ],
+                "theme_color": "#fbfdff",
+                "background_color": "#fbfdff",
+            }
+        )
+
     logging_config = app.config.get("LOGGING_CONFIG")
     if logging_config is not None:
         if isinstance(logging_config, dict):

snikket_web/static/img/safari-pinned-tab.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="260.000000pt" height="260.000000pt" viewBox="0 0 260.000000 260.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,260.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1169 2496 c-2 -2 -24 -6 -49 -9 -51 -6 -196 -42 -237 -59 -360 -146
+-607 -401 -723 -748 -49 -143 -62 -230 -62 -386 0 -177 27 -297 109 -498 115
+-282 109 -516 -18 -660 l-30 -35 38 6 c151 22 316 93 400 172 12 12 25 21 28
+21 3 0 41 -20 83 -45 181 -104 366 -152 592 -153 133 0 240 16 362 54 84 27
+228 92 228 103 0 4 -14 15 -31 25 -254 150 -478 469 -534 761 -5 22 -10 47
+-11 55 -21 97 -21 303 1 409 58 293 200 534 420 716 33 28 81 64 108 80 26 17
+47 33 47 36 0 3 -39 24 -87 47 -86 40 -217 83 -298 97 -46 7 -329 17 -336 11z
+m-117 -379 c90 -53 140 -137 140 -237 0 -231 -271 -353 -445 -199 -62 54 -89
+113 -90 197 -1 125 70 223 193 263 49 16 155 4 202 -24z"/>
+<path d="M847 2029 c-56 -29 -96 -101 -91 -161 12 -128 153 -196 261 -124 37
+24 73 83 73 118 0 23 -4 25 -45 24 -75 -2 -108 46 -93 139 2 17 -3 20 -33 21
+-20 1 -52 -7 -72 -17z"/>
+<path d="M1885 2218 c-136 -100 -265 -251 -340 -398 -40 -80 -92 -223 -100
+-281 -4 -24 -8 -46 -10 -49 -2 -3 -6 -35 -9 -71 l-6 -65 33 -1 c125 -3 325
+-57 461 -124 77 -39 178 -101 204 -126 7 -7 17 -13 20 -13 14 0 178 -166 216
+-219 39 -53 39 -53 52 -30 18 32 63 173 75 234 71 364 -31 723 -281 997 -64
+70 -219 198 -238 198 -4 0 -38 -23 -77 -52z"/>
+<path d="M1418 1245 c-7 -8 17 -171 37 -244 9 -35 28 -93 42 -128 l26 -64 41
+7 c136 22 368 118 446 182 l31 27 -50 33 c-146 94 -330 161 -491 178 -36 3
+-68 8 -71 10 -3 2 -8 1 -11 -1z"/>
+</g>
+</svg>

snikket_web/templates/base.html

@@ -8,11 +8,11 @@
 		<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/common.css') }}">
 		<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/app.css') }}">
 		{% endblock %}
-		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-		<link rel="manifest" href="/site.webmanifest">
-		<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+		<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for("static", filename="img/apple-touch-icon.png") }}">
+		<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for("static", filename="img/favicon-32x32.png") }}">
+		<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for("static", filename="img/favicon-16x16.png") }}">
+		<link rel="manifest" href="{{ url_for("site_manifest") }}">
+		<link rel="mask-icon" href="{{ url_for("static", filename="img/safari-pinned-tab.svg") }}" color="#5bbad5">
 		<meta name="msapplication-TileColor" content="#fbd308">
 		<meta name="theme-color" content="#fbd308">
 	</head>