Added a hono version of workers examples - fixes

Author: furrypet

src/content/docs/workers/examples/ab-testing.mdx

@@ -140,65 +140,66 @@ async def on_fetch(request):
 </TabItem> <TabItem label="Hono" icon="seti:typescript">
 
 ```ts
-import { Hono } from 'hono';
-import { getCookie, setCookie } from 'hono/cookie';
+import { Hono } from "hono";
+import { getCookie, setCookie } from "hono/cookie";
 
 const app = new Hono();
 
 const NAME = "myExampleWorkersABTest";
 
 // Middleware to handle A/B testing logic
-app.use('*', async (c) => {
-  const url = new URL(c.req.url);
-  
-  // Enable Passthrough to allow direct access to control and test routes
-  if (url.pathname.startsWith("/control") || url.pathname.startsWith("/test")) {
-    return fetch(c.req.raw);
-  }
-  
-  // Determine which group this requester is in
-  const abTestCookie = getCookie(c, NAME);
-  
-  if (abTestCookie === 'control') {
-    // User is in control group
-    url.pathname = "/control" + url.pathname;
-    return fetch(url);
-  } else if (abTestCookie === 'test') {
-    // User is in test group
-    url.pathname = "/test" + url.pathname;
-    return fetch(url);
-  } else {
-    // If there is no cookie, this is a new client
-    // Choose a group and set the cookie (50/50 split)
-    const group = Math.random() < 0.5 ? "test" : "control";
-    
-    // Update URL path based on assigned group
-    if (group === "control") {
-      url.pathname = "/control" + url.pathname;
-    } else {
-      url.pathname = "/test" + url.pathname;
-    }
-    
-    // Fetch from origin with modified path
-    const res = await fetch(url);
-    
-    // Create a new response to avoid immutability issues
-    const newResponse = new Response(res.body, res);
-    
-    // Set cookie to enable persistent A/B sessions
-    setCookie(c, NAME, group, {
-      path: '/',
-      // Add additional cookie options as needed:
-      // secure: true,
-      // httpOnly: true,
-      // sameSite: 'strict',
-    });
-    
-    // Copy the Set-Cookie header to the response
-    newResponse.headers.set('Set-Cookie', c.res.headers.get('Set-Cookie') || '');
-    
-    return newResponse;
-  }
+app.use("*", async (c) => {
+	// Enable Passthrough to allow direct access to control and test routes
+	if (c.req.path.startsWith("/control") || c.req.path.startsWith("/test")) {
+		return fetch(c.req.raw);
+	}
+
+	// Determine which group this requester is in
+	const abTestCookie = getCookie(c, NAME);
+
+	if (abTestCookie === "control") {
+		// User is in control group
+		c.req.path = "/control" + c.req.path;
+		return fetch(url);
+	} else if (abTestCookie === "test") {
+		// User is in test group
+		url.pathname = "/test" + url.pathname;
+		return fetch(c.req.url);
+	} else {
+		// If there is no cookie, this is a new client
+		// Choose a group and set the cookie (50/50 split)
+		const group = Math.random() < 0.5 ? "test" : "control";
+
+		// Update URL path based on assigned group
+		if (group === "control") {
+			c.req.path = "/control" + c.req.path;
+		} else {
+			c.req.path = "/test" + c.req.path;
+		}
+
+		// Fetch from origin with modified path
+		const res = await fetch(c.req.url);
+
+		// Create a new response to avoid immutability issues
+		const newResponse = new Response(res.body, res);
+
+		// Set cookie to enable persistent A/B sessions
+		setCookie(c, NAME, group, {
+			path: "/",
+			// Add additional cookie options as needed:
+			// secure: true,
+			// httpOnly: true,
+			// sameSite: 'strict',
+		});
+
+		// Copy the Set-Cookie header to the response
+		newResponse.headers.set(
+			"Set-Cookie",
+			c.res.headers.get("Set-Cookie") || "",
+		);
+
+		return newResponse;
+	}
 });
 
 export default app;

src/content/docs/workers/examples/basic-auth.mdx

@@ -266,15 +266,15 @@ use worker::*;
 
 #[event(fetch)]
 async fn fetch(req: Request, env: Env, _ctx: Context) -> Result<Response> {
-    let basic_user = "admin";
-    // You will need an admin password. This should be
-    // attached to your Worker as an encrypted secret.
-    // Refer to https://developers.cloudflare.com/workers/configuration/secrets/
-    let basic_pass = match env.secret("PASSWORD") {
-        Ok(s) => s.to_string(),
-        Err(_) => "password".to_string(),
-    };
-    let url = req.url()?;
+let basic_user = "admin";
+// You will need an admin password. This should be
+// attached to your Worker as an encrypted secret.
+// Refer to https://developers.cloudflare.com/workers/configuration/secrets/
+let basic_pass = match env.secret("PASSWORD") {
+Ok(s) => s.to_string(),
+Err(_) => "password".to_string(),
+};
+let url = req.url()?;
 
     match url.path() {
         "/" => Response::ok("Anyone can access the homepage."),
@@ -328,8 +328,10 @@ async fn fetch(req: Request, env: Env, _ctx: Context) -> Result<Response> {
         }
         _ => Response::error("Not Found.", 404),
     }
+
 }
-```
+
+````
 </TabItem> <TabItem label="Hono" icon="seti:typescript">
 
 ```ts
@@ -341,7 +343,6 @@ async fn fetch(req: Request, env: Env, _ctx: Context) -> Result<Response> {
 
 import { Hono } from 'hono';
 import { auth } from 'hono/basic-auth';
-import { Buffer } from "node:buffer";
 
 // Define environment interface
 interface Env {
@@ -352,74 +353,21 @@ interface Env {
 
 const app = new Hono<Env>();
 
-// Helper function for comparing strings safely
-const encoder = new TextEncoder();
-function timingSafeEqual(a: string, b: string) {
-  const aBytes = encoder.encode(a);
-  const bBytes = encoder.encode(b);
-
-  if (aBytes.byteLength !== bBytes.byteLength) {
-    // Strings must be the same length in order to compare
-    // with crypto.subtle.timingSafeEqual
-    return false;
-  }
-
-  return crypto.subtle.timingSafeEqual(aBytes, bBytes);
-}
-
 // Public homepage - accessible to everyone
 app.get('/', (c) => {
   return c.text("Anyone can access the homepage.");
 });
 
 // Logout route
 app.get('/logout', (c) => {
-  // Invalidate the "Authorization" header by returning a HTTP 401.
-  // We do not send a "WWW-Authenticate" header, as this would trigger
-  // a popup in the browser, immediately asking for credentials again.
   return c.text("Logged out.", 401);
 });
 
 // Admin route - protected with Basic Auth
-app.get('/admin', async (c) => {
-  const BASIC_USER = "admin";
-  
-  // You will need an admin password. This should be
-  // attached to your Worker as an encrypted secret.
-  // Refer to https://developers.cloudflare.com/workers/configuration/secrets/
-  const BASIC_PASS = c.env.PASSWORD ?? "password";
-  
-  // The "Authorization" header is sent when authenticated
-  const authorization = c.req.header('Authorization');
-  if (!authorization) {
-    // Prompts the user for credentials
-    return c.text("You need to login.", 401, {
-      'WWW-Authenticate': 'Basic realm="my scope", charset="UTF-8"',
-    });
-  }
-  
-  const [scheme, encoded] = authorization.split(" ");
-  
-  // The Authorization header must start with Basic, followed by a space
-  if (!encoded || scheme !== "Basic") {
-    return c.text("Malformed authorization header.", 400);
-  }
-  
-  const credentials = Buffer.from(encoded, "base64").toString();
-  
-  // The username & password are split by the first colon
-  //=> example: "username:password"
-  const index = credentials.indexOf(":");
-  const user = credentials.substring(0, index);
-  const pass = credentials.substring(index + 1);
-  
-  if (!timingSafeEqual(BASIC_USER, user) || !timingSafeEqual(BASIC_PASS, pass)) {
-    // Prompts the user for credentials again
-    return c.text("You need to login.", 401, {
-      'WWW-Authenticate': 'Basic realm="my scope", charset="UTF-8"',
-    });
-  }
-  
+app.get('/admin',
+	basicAuth({ username: BASIC_USER, password: c.env.PASSWORD }),
+	async (c) => {
+
   // Success! User is authenticated
   return c.text("🎉 You have private access!", 200, {
     'Cache-Control': 'no-store',
@@ -432,6 +380,6 @@ app.notFound((c) => {
 });
 
 export default app;
-```
+````
 
-</TabItem> </Tabs>
+</TabItem> </Tabs>

src/content/docs/workers/examples/bulk-origin-proxy.mdx

@@ -77,32 +77,31 @@ export default {
 </TabItem> <TabItem label="Hono" icon="seti:typescript">
 
 ```ts
-import { Hono } from 'hono';
-
-type Bindings = {};
+import { Hono } from "hono";
+import { proxy } from "hono/proxy";
 
 // An object with different URLs to fetch
 const ORIGINS: Record<string, string> = {
-  "starwarsapi.yourdomain.com": "swapi.dev",
-  "google.yourdomain.com": "www.google.com",
+	"starwarsapi.yourdomain.com": "swapi.dev",
+	"google.yourdomain.com": "www.google.com",
 };
 
-const app = new Hono<{ Bindings: Bindings }>();
-
-app.all('*', async (c) => {
-  const url = new URL(c.req.url);
-  
-  // Check if incoming hostname is a key in the ORIGINS object
-  if (url.hostname in ORIGINS) {
-    const target = ORIGINS[url.hostname];
-    url.hostname = target;
-    
-    // If it is, proxy request to that third party origin
-    return fetch(url.toString(), c.req.raw);
-  }
-  
-  // Otherwise, process request as normal
-  return fetch(c.req.raw);
+const app = new Hono();
+
+app.all("*", async (c) => {
+	const url = new URL(c.req.url);
+
+	// Check if incoming hostname is a key in the ORIGINS object
+	if (url.hostname in ORIGINS) {
+		const target = ORIGINS[url.hostname];
+		url.hostname = target;
+
+		// If it is, proxy request to that third party origin
+		return proxy(url, c.req.raw);
+	}
+
+	// Otherwise, process request as normal
+	return fetch(c.req.raw);
 });
 
 export default app;

src/content/docs/workers/examples/cache-api.mdx

@@ -135,58 +135,28 @@ async def on_fetch(request, _env, ctx):
 </TabItem> <TabItem label="Hono" icon="seti:typescript">
 
 ```ts
-import { Hono } from 'hono';
-import type { Context } from 'hono';
+import { Hono } from "hono";
+import type { Context } from "hono";
+import { cache } from "hono/cache";
 
 type Env = {
-  // Cloudflare Worker environment
+	// Cloudflare Worker environment
 };
 
-const app = new Hono<{ Bindings: Env }>();
-
-app.use('*', async (c, next) => {
-  const request = c.req.raw;
-  const cacheUrl = new URL(request.url);
-
-  // Construct the cache key from the cache URL
-  const cacheKey = new Request(cacheUrl.toString(), request);
-  const cache = caches.default;
-
-  // Check whether the value is already available in the cache
-  // if not, you will need to fetch it from origin, and store it in the cache
-  let response = await cache.match(cacheKey);
-
-  if (!response) {
-    console.log(
-      `Response for request url: ${request.url} not present in cache. Fetching and caching request.`
-    );
-    
-    // Continue to the next middleware to handle the request
-    await next();
-    
-    // Get the response that was generated
-    response = new Response(c.res.body, {
-      status: c.res.status,
-      headers: c.res.headers,
-    });
-
-    // Cache API respects Cache-Control headers. Setting s-max-age to 10
-    // will limit the response to be in cache for 10 seconds max
-    response.headers.append("Cache-Control", "s-maxage=10");
-
-    // Use waitUntil to capture the cache.put promise
-    c.executionCtx.waitUntil(cache.put(cacheKey, response.clone()));
-    
-    return response;
-  } else {
-    console.log(`Cache hit for: ${request.url}.`);
-    return response;
-  }
-});
+const app = new Hono();
+
+// We leverage hono built-in cache helper here
+app.get(
+	"*",
+	cache({
+		cacheName: "my-cache",
+		cacheControl: "max-age=3600", // 1 hour
+	}),
+);
 
 // Add a route to handle the request if it's not in cache
-app.get('*', (c) => {
-  return c.text('Hello from Hono!');
+app.get("*", (c) => {
+	return c.text("Hello from Hono!");
 });
 
 export default app;