icon sharp

package.json

@@ -45,6 +45,7 @@
     "react-leaflet": "^5.0.0",
     "react-otp-input": "^3.1.1",
     "react-virtualized": "^9.22.6",
+    "sharp": "^0.34.5",
     "tailwind-merge": "^3.3.1",
     "use-long-press": "^3.3.0",
     "yup": "^1.7.1",

src/app/[name]/api/logo/route.ts

@@ -0,0 +1,93 @@
+import { NextRequest, NextResponse } from "next/server";
+import sharp from "sharp";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ name: string }> }
+) {
+  try {
+    const { name } = await params;
+    const searchParams = request.nextUrl.searchParams;
+    const logoUrl = searchParams.get("url");
+    const size = parseInt(searchParams.get("size") || "192");
+
+    if (!logoUrl) {
+      return new NextResponse("Logo URL is required", { status: 400 });
+    }
+
+    // دانلود تصویر
+    const imageResponse = await fetch(logoUrl);
+    if (!imageResponse.ok) {
+      return new NextResponse("Failed to fetch logo", { status: 404 });
+    }
+
+    const imageBuffer = Buffer.from(await imageResponse.arrayBuffer());
+
+    // دریافت ابعاد تصویر
+    const metadata = await sharp(imageBuffer).metadata();
+    const { width, height } = metadata;
+
+    if (!width || !height) {
+      return new NextResponse("Invalid image", { status: 400 });
+    }
+
+    // اگر تصویر از قبل مربع باشد، مستقیماً resize می‌کنیم
+    if (width === height) {
+      const processedImage = sharp(imageBuffer).resize(size, size, {
+        fit: "contain",
+        background: { r: 0, g: 0, b: 0, alpha: 0 },
+      });
+      const outputBuffer = await processedImage.png().toBuffer();
+      
+      return new NextResponse(outputBuffer, {
+        headers: {
+          "Content-Type": "image/png",
+          "Cache-Control": "public, max-age=31536000, immutable",
+        },
+      });
+    }
+
+    // محاسبه نسبت برای resize اولیه (برای بهینه‌سازی)
+    const maxDimension = Math.max(width, height);
+    const scale = size / maxDimension;
+    const newWidth = Math.round(width * scale);
+    const newHeight = Math.round(height * scale);
+
+    // ابتدا resize می‌کنیم و سپس padding اضافه می‌کنیم
+    const paddingTop = Math.floor((size - newHeight) / 2);
+    const paddingBottom = size - newHeight - paddingTop;
+    const paddingLeft = Math.floor((size - newWidth) / 2);
+    const paddingRight = size - newWidth - paddingLeft;
+
+    const processedImage = sharp(imageBuffer)
+      .resize(newWidth, newHeight, {
+        fit: "contain",
+        background: { r: 0, g: 0, b: 0, alpha: 0 },
+      })
+      .extend({
+        top: paddingTop,
+        bottom: paddingBottom,
+        left: paddingLeft,
+        right: paddingRight,
+        background: { r: 0, g: 0, b: 0, alpha: 0 },
+      });
+
+    // تبدیل به PNG و برگرداندن
+    const outputBuffer = await processedImage.png().toBuffer();
+
+    return new NextResponse(outputBuffer, {
+      headers: {
+        "Content-Type": "image/png",
+        "Cache-Control":
+          "public, max-age=31536000, immutable",
+      },
+    });
+  } catch (error) {
+    console.error("Error processing logo:", error);
+    return new NextResponse("Internal Server Error", { status: 500 });
+  }
+}
+

src/app/[name]/layout.tsx

@@ -19,11 +19,21 @@ export async function generateMetadata({
   try {
     const restaurant = await getRestaurant(name)
 
-    const favicon = restaurant.logo || "/icons/web-app-manifest-192x192.png"
     const title = restaurant.seoTitle || restaurant.name
+    const logo = restaurant.logo
 
     const defaultIcon = "/icons/web-app-manifest-192x192.png"
-    const iconUrl = favicon || defaultIcon
+    
+    // استفاده از API route برای تبدیل لوگو به مربع
+    let iconUrl = defaultIcon
+    let icon192Url = defaultIcon
+    let icon512Url = "/icons/web-app-manifest-512x512.png"
+    
+    if (logo && logo.trim() !== "") {
+      iconUrl = `/${name}/api/logo?url=${encodeURIComponent(logo)}&size=192`
+      icon192Url = `/${name}/api/logo?url=${encodeURIComponent(logo)}&size=192`
+      icon512Url = `/${name}/api/logo?url=${encodeURIComponent(logo)}&size=512`
+    }
 
     return {
       title,
@@ -32,8 +42,8 @@ export async function generateMetadata({
       icons: {
         icon: [
           { url: iconUrl },
-          { url: iconUrl, sizes: "192x192", type: "image/png" },
+          { url: icon192Url, sizes: "192x192", type: "image/png" },
-          { url: iconUrl, sizes: "512x512", type: "image/png" },
+          { url: icon512Url, sizes: "512x512", type: "image/png" },
         ],
         shortcut: iconUrl,
         apple: iconUrl,

src/app/[name]/manifest.webmanifest/route.ts

@@ -17,15 +17,19 @@ export async function GET(
 
     const icons = [];
     if (logo && logo.trim() !== "") {
+      // استفاده از API route برای تبدیل لوگو به مربع
+      const logo192Url = `/${name}/api/logo?url=${encodeURIComponent(logo)}&size=192`;
+      const logo512Url = `/${name}/api/logo?url=${encodeURIComponent(logo)}&size=512`;
+      
       icons.push(
         {
-          src: logo,
+          src: logo192Url,
           sizes: "192x192",
           type: "image/png",
           purpose: "any",
         },
         {
-          src: logo,
+          src: logo512Url,
           sizes: "512x512",
           type: "image/png",
           purpose: "any",