critique 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# 0.1.12
+
+- Web preview:
+  - Add client-side mobile detection with redirect to `?v=mobile`
+  - Simplify worker: redirect mobile devices instead of content negotiation
+  - Remove `Vary` header - URL now determines content, better caching
+  - Increase cache max-age to 24h (was 1h)
+
 # 0.1.11
 
 - All commands:

package/package.json

@@ -2,7 +2,7 @@
   "name": "critique",
   "module": "src/diff.tsx",
   "type": "module",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "private": false,
   "bin": "./src/cli.tsx",
   "scripts": {

package/src/ansi-html.ts

@@ -204,6 +204,17 @@ ${content}
   const minFontSize = 4;
   const maxFontSize = 16;
 
+  // Redirect mobile devices to ?v=mobile for optimized view
+  // Only redirect if not already on a forced version
+  const params = new URLSearchParams(window.location.search);
+  if (!params.has('v')) {
+    const isMobile = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Opera M(obi|ini)|Windows Phone|webOS/i.test(navigator.userAgent);
+    if (isMobile) {
+      params.set('v', 'mobile');
+      window.location.replace(window.location.pathname + '?' + params.toString());
+    }
+  }
+
   function adjustFontSize() {
     const viewportWidth = window.innerWidth;
     const calculatedSize = (viewportWidth - padding) / (cols * charRatio);

package/src/worker.ts

@@ -90,7 +90,8 @@ app.post("/upload", async (c) => {
 
 // View HTML content with streaming
 // GET /view/:id
-// Query params: ?v=desktop or ?v=mobile to force a version
+// Query params: ?v=desktop or ?v=mobile to select version
+// Server redirects mobile devices to ?v=mobile, client JS also handles redirect
 app.get("/view/:id", async (c) => {
   const id = c.req.param("id")
 
@@ -98,12 +99,21 @@ app.get("/view/:id", async (c) => {
     return c.text("Invalid ID", 400)
   }
 
-  // Check for forced version via query param
-  const forcedVersion = c.req.query("v")
-  const isMobile = forcedVersion === "mobile" || (forcedVersion !== "desktop" && isMobileDevice(c))
+  // Check for version query param
+  const version = c.req.query("v")
+  
+  // If no version specified and mobile device detected, redirect to ?v=mobile
+  // This is a fallback - client JS also handles this redirect
+  if (!version && isMobileDevice(c)) {
+    const url = new URL(c.req.url)
+    url.searchParams.set("v", "mobile")
+    return c.redirect(url.toString(), 302)
+  }
 
-  // Try to get the appropriate version
+  // Serve the appropriate version based on query param
+  const isMobile = version === "mobile"
   let html: string | null = null
+  
   if (isMobile) {
     // Try mobile version first, fall back to desktop
     html = await c.env.CRITIQUE_KV.get(`${id}-mobile`)
@@ -120,11 +130,9 @@ app.get("/view/:id", async (c) => {
 
   // Stream the HTML content for faster initial load
   return stream(c, async (s) => {
-    // Set content type header
     c.header("Content-Type", "text/html; charset=utf-8")
-    // Vary by User-Agent and Sec-CH-UA-Mobile for proper caching
-    c.header("Vary", "User-Agent, Sec-CH-UA-Mobile")
-    c.header("Cache-Control", "public, max-age=3600")
+    // Cache is now safe - URL determines content, no Vary needed
+    c.header("Cache-Control", "public, max-age=86400")
 
     // Stream in chunks for better performance
     const chunkSize = 16 * 1024 // 16KB chunks