chore: improve web responsiveness

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

Cargo.lock

@@ -65,8 +65,7 @@ pub(crate) async fn start_webserver(app: Liwan, events: Sender<Event>) -> Result
         .appending("X-XSS-Protection", "1; mode=block")
         .appending("Content-Security-Policy", "default-src 'self' data: 'unsafe-inline'")
         .appending("Referrer-Policy", "same-origin")
-        .appending("Feature-Policy", "geolocation 'none'; microphone 'none'; camera 'none'")
-        .appending("Permissions-Policy", "geolocation=(), microphone=(), camera=(), interest-cohort=()");
+        .appending("Permissions-Policy", "geolocation=(), microphone=(), camera=()");
 
     let api_router = Route::new()
         .nest_no_strip("/event", handle_events)

data/licenses-npm.json

@@ -137,11 +137,16 @@ impl<E: RustEmbed + Send + Sync> Endpoint for EmbeddedFilesEndpoint<E> {
 
                 // otherwise, return 200 with etag hash
                 let body: Vec<u8> = content.data.into();
-                let mime = mime_guess::from_path(path).first_or_octet_stream();
-                Ok(Response::builder()
-                    .header(header::CONTENT_TYPE, mime.as_ref())
-                    .header(header::ETAG, hash)
-                    .body(body))
+                let mime = mime_guess::from_path(&path).first_or_octet_stream();
+
+                let mut builder =
+                    Response::builder().header(header::CONTENT_TYPE, mime.as_ref()).header(header::ETAG, hash);
+
+                if path.starts_with("_astro/") {
+                    builder = builder.header(header::CACHE_CONTROL, "public, max-age=604800, immutable");
+                }
+
+                Ok(builder.body(body))
             }
             None => Err(StatusCode::NOT_FOUND.into()),
         }

src/web/mod.rs

@@ -27,7 +27,8 @@ export default defineConfig({
 						template: (dependencies) => JSON.stringify(dependencies),
 					},
 				},
-			}),
+				// biome-ignore lint/suspicious/noExplicitAny: type is correct
+			}) as any,
 		],
 	},
 	integrations: [react()],

src/web/webext.rs

@@ -1,47 +1,48 @@
 {
 	"name": "liwan-web",
-	"type": "module",
 	"version": "0.0.1",
+	"type": "module",
 	"scripts": {
-		"dev": "bun run --bun astro dev",
 		"build": "bun run --bun astro build",
+		"dev": "bun run --bun astro dev",
 		"preview": "bun run --bun astro preview",
 		"typecheck": "bun run --bun tsc --noEmit"
 	},
 	"dependencies": {
 		"@astrojs/react": "^3.6.2",
 		"@explodingcamera/css": "^0.0.4",
-		"@fontsource-variable/figtree": "^5.0.21",
+		"@fontsource-variable/figtree": "^5.0.22",
 		"@icons-pack/react-simple-icons": "^10.0.0",
-		"@nivo/geo": "^0.87.0",
 		"@nivo/line": "^0.87.0",
 		"@picocss/pico": "^2.0.6",
 		"@radix-ui/react-dialog": "^1.1.1",
 		"@radix-ui/react-tabs": "^1.1.0",
-		"@react-spring/web": "^9.7.4",
 		"@scaleway/use-query-params": "^5.0.5",
-		"@tanstack/react-query": "^5.51.23",
-		"@types/react": "^18.3.3",
-		"@types/react-dom": "^18.3.0",
-		"@types/react-simple-maps": "^3.0.6",
+		"@tanstack/react-query": "^5.52.0",
 		"@uidotdev/usehooks": "^2.4.1",
-		"astro": "^4.14.2",
 		"date-fns": "^3.6.0",
 		"fets": "^0.8.3",
 		"lightningcss": "^1.26.0",
-		"lucide-react": "^0.428.0",
+		"lucide-react": "^0.429.0",
 		"react": "^18.3.1",
-		"react-countup": "^6.5.3",
 		"react-dom": "^18.3.1",
 		"react-simple-maps": "^3.0.0",
 		"react-tag-autocomplete": "^7.3.0",
-		"react-tooltip": "^5.28.0",
-		"rollup-plugin-license": "^3.5.2",
-		"typescript": "^5.5.4"
+		"react-tooltip": "^5.28.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.8.3",
-		"bun-types": "^1.1.24"
+		"@types/react": "^18.3.4",
+		"@types/react-dom": "^18.3.0",
+		"@types/react-simple-maps": "^3.0.6",
+		"astro": "^4.14.3",
+		"bun-types": "^1.1.25",
+		"rollup-plugin-license": "^3.5.2",
+		"typescript": "^5.5.4"
 	},
-	"trustedDependencies": ["@biomejs/biome", "esbuild", "sharp"]
+	"trustedDependencies": [
+		"@biomejs/biome",
+		"esbuild",
+		"sharp"
+	]
 }

web/astro.config.ts

@@ -2,22 +2,8 @@ import { useMemo } from "react";
 import styles from "./graph.module.css";
 
 import { ResponsiveLine, type SliceTooltipProps } from "@nivo/line";
-import { addMonths, differenceInSeconds } from "date-fns";
-
-import type { Metric } from "../api";
-
-export type DataPoint = {
-	x: Date;
-	y: number;
-};
-
-export const toDataPoints = (data: number[], range: { start: number; end: number }, metric: Metric): DataPoint[] => {
-	const step = differenceInSeconds(range.end, range.start) / data.length;
-	return data.map((value, i) => ({
-		x: new Date(range.start + i * step * 1000 + 1000),
-		y: metric === "avg_views_per_session" ? value / 1000 : value,
-	}));
-};
+import { addMonths } from "date-fns";
+import type { DataPoint } from ".";
 
 export type GraphRange = "year" | "month" | "day" | "hour";
 

web/bun.lockb

@@ -0,0 +1,20 @@
+import { differenceInSeconds } from "date-fns";
+import "./graph.module.css";
+
+import { lazy } from "react";
+import type { Metric } from "../../api";
+
+export const LineGraph = lazy(() => import("./graph.tsx").then(({ LineGraph }) => ({ default: LineGraph })));
+
+export type DataPoint = {
+	x: Date;
+	y: number;
+};
+
+export const toDataPoints = (data: number[], range: { start: number; end: number }, metric: Metric): DataPoint[] => {
+	const step = differenceInSeconds(range.end, range.start) / data.length;
+	return data.map((value, i) => ({
+		x: new Date(range.start + i * step * 1000 + 1000),
+		y: metric === "avg_views_per_session" ? value / 1000 : value,
+	}));
+};