Fix to preserve reverse proxy path in index.html

Signed-off-by: Alexis Jeandet <[email protected]>

speasy_proxy/__init__.py

@@ -34,7 +34,7 @@ def get_application() -> FastAPI:
     )
     _app.include_router(frontend_router)
     _app.include_router(v1_api_router)
-    _app.mount("/static", StaticFiles(directory=f"{os.path.dirname(os.path.abspath(__file__))}/static"), name="static")
+    _app.mount("/static/", StaticFiles(directory=f"{os.path.dirname(os.path.abspath(__file__))}/static"), name="static")
 
     up_since.set(datetime.now(UTC))
 

speasy_proxy/frontend/home.py

@@ -16,10 +16,10 @@
 
 log = logging.getLogger(__name__)
 
-index_html = open(f'{os.path.dirname(os.path.abspath(__file__))}/../static/index.html').read()
+templates = Jinja2Templates(directory=f"{os.path.dirname(os.path.abspath(__file__))}/../templates")
 
 
 @router.get('/', response_class=HTMLResponse)
 def home(request: Request, user_agent: Annotated[str | None, Header()] = None):
     log.debug(f'Client asking for home page from {user_agent}')
-    return HTMLResponse(content=index_html, status_code=200)
+    return templates.TemplateResponse("index.html", {"request": request, 'base_url': str(request.base_url)})

speasy_proxy/static/index.html → speasy_proxy/templates/index.html

@@ -4,10 +4,10 @@
     <meta charset="UTF-8">
     <title>Speasy Cache Server</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="static/theme.css" type="text/css">
+    <link rel="stylesheet" href="{{ base_url }}static/theme.css" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
-    <script src="static/status.js"></script>
+    <script src="{{ base_url }}static/status.js"></script>
     <script>
         $(document).ready(function () {
             update_status();
@@ -19,7 +19,7 @@
 <header>
     <div class="container" style="display: flex; align-items: center; justify-content: center;">
         <div class="logo">
-            <img src="static/logo_speasy.svg" alt="Speasy logo" height="80px">
+            <img src="{{ base_url }}static/logo_speasy.svg" alt="Speasy logo" height="80px">
         </div>
         <div class="title">
             <h1>Speasy Cache Server</h1>
@@ -32,7 +32,7 @@ <h1>Speasy Cache Server</h1>
         <p> This the shared cache server for the Speasy project. It allows to share Speasy requests results between
             users across the world.
         </p>
-        <p>You can access and experiment with the API <a href="/docs">here</a>.</p>
+        <p>You can access and experiment with the API <a href="{{ base_url }}/docs">here</a>.</p>
         <p>The source code is available on <a href="https://github.com/SciQLop/speasy_proxy">GitHub</a>.
         </p>
     </section>