+ {/* Style implementation */}
+
+ );
+}
+```
+
+## 8. Configure caching
+
+Enable caching to:
+
+- Reduce computation costs
+- Improve response times
+- Decrease origin server load
+- Provide consistent performance
+
+Here's how to implement caching with customizable durations:
+
+```typescript title="src/index.ts"
+import { Hono } from "hono";
+import { cache } from "hono/cache";
+
+const app = new Hono()
+ .use(
+ "*",
+ cache({
+ cacheName: async (c) => {
+ const url = new URL(c.req.url);
+ return `${c.req.method} ${url.pathname}${url.searchParams}`;
+ },
+ cacheControl: "max-age=86400",
+ }),
+ )
+ .route("og", og);
+```
+
+:::caution
+Make sure to configure appropriate cache durations based on your application's needs. The example uses a 24-hour cache duration.
+:::
+
+## Set up TypeScript type definitions
+
+Let's create our type definitions to ensure smooth TypeScript integration. Create a new file `src/type.d.ts`:
+
+```typescript title="src/type.d.ts"
+interface CacheStorage {
+ default: Cache;
+}
+
+declare module "@cloudflare/pages-plugin-vercel-og/api" {
+ import { ImageResponse as VercelImageResponse } from "@vercel/og";
+ export declare class ImageResponse extends Response {
+ constructor(...args: ConstructorParameters
+
+ );
+ }
+
+ function Style2() {
+ //http://127.0.0.1:8787/og?mainText=Green%20Technology%20Summit%202024&description=Join%20industry%20leaders%20in%20sustainable%20tech%20for%20three%20days%20of%20innovation,%20collaboration,%20and%20impact&footerText=%F0%9F%8C%B1%20December%2015-17%20%E2%80%A2%20Virtual%20and%20In-Person%20%E2%80%A2%20Register%20Now&style=2
+ return (
+
+
+
+
+ {mainText}
+
+ {description}
+
+
+ {footerText}
+
+
+
+ );
+ }
+ //http://127.0.0.1:8787/og?mainText=A%20Seamless%20Approach%20Using%20Cloudflare%20Hono,%20Vercel%20OG,%20and%20Tailwind%20CSS&description=Discover%20the%20future%20of%20Open%20Graph%20image%20generation%20with%20a%20seamless%20integration%20of%20Cloudflare%20Workers,%20Hono,%20Vercel%20OG,%20and%20Tailwind%20CSS.%20This%20demo%20highlights%20a%20lightning-fast,%20serverless%20approach%20to%20crafting%20dynamic,%20beautifully%20styled%20OG%20images.%20Perfect%20for%20boosting%20social%20media%20engagement%20and%20standing%20out%20online.&footerText=%F0%9F%9A%80%20Built%20with%20Cloudflare%20Workers,%20Hono,%20Vercel%20OG,%20and%20Tailwind%20CSS%20|%20%E2%9A%A1%20Fast,%20Scalable,%20and%20Stylish&style=3
+ async function Style3() {
+ try {
+ const logoImage = await loadImage(c, '/images/cf-logo-v-rgb.png');
+
+ return (
+
+ {logoImage && (
+
+
+
+
+
+
+ {mainText}
+
+
+
+ {description}
+
+ {footerText}
+
+ {mainText}
+{description}
+ + + +{footerText}
+ + + ); + } catch (error) { + console.error('Style3 rendering error:', error); + throw error; + } + } + function Style4() { + return ( +
+ 
+
+ );
+ }
+
+ return new ImageResponse(SocialCardTemplate, {
+ width: 1200,
+ height: 630,
+ fonts: Array.isArray(font) ? [...font] : [font],
+ });
+ } catch (error: any) {
+ console.error('OG Image generation error:', error);
+ return c.json({ error: 'Failed to generate image', details: error.message }, 500);
+ }
+});
+```
+
+```typescript title="src/index.ts"
+import { Hono } from 'hono';
+import og from './og';
+import { logger } from 'hono/logger';
+import { cache } from 'hono/cache';
+
+const app = new Hono()
+ .use('*', logger())
+ // .use(
+ // '*',
+ // cache({
+ // cacheName: async (c) => {
+ // const url = new URL(c.req.url);
+ // const params = url.searchParams.toString();
+ // return `${c.req.method} ${url.pathname}${params}`;
+ // },
+ // cacheControl: 'max-age=86400', // 24 hour
+ // })
+ // )
+ .get('/', (c) => {
+ return c.text('Hello from OG Image Generator on Cloudflare Worker!');
+ })
+ .route('og', og);
+
+export default app;
+```
+
+```typescript title="src/style.css"
+/* src/styles.css */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+```
+
+```typescript title="worker-configuration.d.ts"
+// Generated by Wrangler by running `wrangler types --env-interface CloudflareBindings`
+
+interface CloudflareBindings {
+ ASSETS: Fetcher;
+}
+```
+
+The complete source code is available on [GitHub](https://github.com/mohdlatif/og-image-generator-cloudflare-worker).
+
+## Related resources
+
+- [Cloudflare Workers documentation](/workers/)
+- [Hono framework](https://hono.dev/)
+- [Vercel OG Image Generation](https://vercel.com/docs/functions/og-image-generation)
+- [Cloudflare page plugin vercel/og](/pages/functions/plugins/vercel-og/)
+- [Tailwind CSS](https://tailwindcss.com/)
https://github.com/mohdlatif
+
+