fix: Embed static assets in binary and fix font loading

Static files (CSS, JS) were served via ServeDir using CARGO_MANIFEST_DIR
which only exists on the build machine, not on deployed servers. This
caused: white unstyled page, always-visible loading indicators, and
broken manifest loading.

- Embed style.css and htmx.min.js into the binary via include_str!
- Serve them from dedicated handlers with proper content-type and caching
- Move Google Fonts from CSS @import to <link> tags with preconnect
  for non-blocking font loading
- Remove ServeDir dependency from routes
This commit is contained in:
Till Wegmueller 2026-03-15 22:49:33 +01:00
parent 5d13eaa936
commit 4591767a0a
No known key found for this signature in database
4 changed files with 38 additions and 9 deletions

View file

@ -524,3 +524,34 @@ pub async fn ui_p5i_generate(
) )
.into_response()) .into_response())
} }
// ===========================================================================
// Embedded static assets
// ===========================================================================
static CSS_CONTENT: &str = include_str!("../../../static/css/style.css");
static HTMX_JS_CONTENT: &str = include_str!("../../../static/js/htmx.min.js");
/// GET /ui/static/css/style.css
pub async fn static_css() -> Response {
(
[
(header::CONTENT_TYPE, "text/css; charset=utf-8"),
(header::CACHE_CONTROL, "public, max-age=3600"),
],
CSS_CONTENT,
)
.into_response()
}
/// GET /ui/static/js/htmx.min.js
pub async fn static_htmx_js() -> Response {
(
[
(header::CONTENT_TYPE, "application/javascript; charset=utf-8"),
(header::CACHE_CONTROL, "public, max-age=86400"),
],
HTMX_JS_CONTENT,
)
.into_response()
}

View file

@ -7,15 +7,9 @@ use axum::{
routing::{get, post}, routing::{get, post},
}; };
use std::sync::Arc; use std::sync::Arc;
use tower_http::services::ServeDir;
use tower_http::trace::TraceLayer; use tower_http::trace::TraceLayer;
pub fn app_router(state: Arc<DepotRepo>) -> Router { pub fn app_router(state: Arc<DepotRepo>) -> Router {
// Static file serving for the web UI
let static_dir = ServeDir::new(
std::path::Path::new(env!("CARGO_MANIFEST_DIR")).join("static"),
);
Router::new() Router::new()
.route("/", get(|| async { Redirect::permanent("/ui/") })) .route("/", get(|| async { Redirect::permanent("/ui/") }))
.route("/versions/0", get(versions::get_versions)) .route("/versions/0", get(versions::get_versions))
@ -79,7 +73,9 @@ pub fn app_router(state: Arc<DepotRepo>) -> Router {
.route("/ui/search/results", get(ui::ui_search_results)) .route("/ui/search/results", get(ui::ui_search_results))
.route("/ui/package/{publisher}/{*fmri}", get(ui::ui_package_detail)) .route("/ui/package/{publisher}/{*fmri}", get(ui::ui_package_detail))
.route("/ui/p5i", get(ui::ui_p5i_generate)) .route("/ui/p5i", get(ui::ui_p5i_generate))
.nest_service("/ui/static", static_dir) // Embedded static assets
.route("/ui/static/css/style.css", get(ui::static_css))
.route("/ui/static/js/htmx.min.js", get(ui::static_htmx_js))
.layer(TraceLayer::new_for_http()) .layer(TraceLayer::new_for_http())
.with_state(state) .with_state(state)
} }

View file

@ -3,8 +3,7 @@
Full custom stylesheet no framework dependencies Full custom stylesheet no framework dependencies
========================================================================== */ ========================================================================== */
/* --- Fonts --- */ /* Fonts loaded via <link> in base.html for non-blocking load */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
/* --- Design tokens --- */ /* --- Design tokens --- */
:root { :root {

View file

@ -4,6 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Package Repository{% endblock %}</title> <title>{% block title %}Package Repository{% endblock %}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap">
<link rel="stylesheet" href="/ui/static/css/style.css"> <link rel="stylesheet" href="/ui/static/css/style.css">
<script src="/ui/static/js/htmx.min.js"></script> <script src="/ui/static/js/htmx.min.js"></script>
</head> </head>