Mount staticfiles for social icons

Author: ArtyomVancyan

examples/demonstration/main.py

@@ -1,5 +1,6 @@
 from fastapi import APIRouter
 from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
 from sqlalchemy.orm import Session
 
 from config import oauth2_config
@@ -37,4 +38,5 @@ async def on_auth(auth: Auth, user: User):
 app = FastAPI()
 app.include_router(app_router)
 app.include_router(oauth2_router)
+app.mount("/static", StaticFiles(directory="static"), name="static")
 app.add_middleware(OAuth2Middleware, config=oauth2_config, callback=on_auth)

examples/demonstration/static/github.svg

@@ -23,9 +23,11 @@
             </a>
             {% for provider in request.auth.clients %}
                 <a href="/oauth2/{{ provider }}/auth" style="display: flex; align-items: center;">
-                    <svg style="height: 50px; width: 50px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-                        <path fill="#dfdfd6" d="M7.499,1C3.91,1,1,3.906,1,7.49c0,2.867,1.862,5.299,4.445,6.158C5.77,13.707,6,13.375,6,13.125 c0-0.154,0.003-0.334,0-0.875c-1.808,0.392-2.375-0.875-2.375-0.875c-0.296-0.75-0.656-0.963-0.656-0.963 c-0.59-0.403,0.044-0.394,0.044-0.394C3.666,10.064,4,10.625,4,10.625c0.5,0.875,1.63,0.791,2,0.625 c0-0.397,0.044-0.688,0.154-0.873C4.111,10.02,2.997,8.84,3,7.208c0.002-0.964,0.335-1.715,0.876-2.269 C3.639,4.641,3.479,3.625,3.961,3c1.206,0,1.927,0.873,1.927,0.873s0.565-0.248,1.61-0.248c1.045,0,1.608,0.234,1.608,0.234 S9.829,3,11.035,3c0.482,0.625,0.322,1.641,0.132,1.918C11.684,5.461,12,6.21,12,7.208c0,1.631-1.11,2.81-3.148,3.168 C8.982,10.572,9,10.842,9,11.25c0,0.867,0,1.662,0,1.875c0,0.25,0.228,0.585,0.558,0.522C12.139,12.787,14,10.356,14,7.49 C14,3.906,11.09,1,7.499,1z"></path>
-                    </svg>
+                    <img
+                            alt="{{ provider }} icon"
+                            src="/static/{{ provider }}.svg"
+                            style="width: 50px; height: 50px; margin-right: 1rem;"
+                    >
                 </a>
             {% endfor %}
         {% endif %}