Merge pull request #33 from mbahArip/v2

Fix Manga Preview error when build

src/app/api/internal/encrypt/route.ts

@@ -8,13 +8,16 @@ export async function GET(request: NextRequest) {
   try {
     const sp = new URL(request.nextUrl).searchParams;
     const query = sp.get("q");
+    const key = sp.get("key");
     if (!query) return new NextResponse("Add query parameter 'q' with the value to encrypt", { status: 400 });
 
-    const encrypted = await encryptData(query);
+    const encrypted = await encryptData(query, key || process.env.ENCRYPTION_KEY);
 
     return NextResponse.json(
       {
+        message: key ? "Encrypted with provided key" : "Encrypted with environment key",
         value: encrypted,
+        key,
       },
       { status: 200 },
     );

src/components/Guide/Configuration/Layout.tsx

@@ -8,6 +8,7 @@ import { generateConfig } from "~/data/template";
 
 import { ButtonLoading, Loader, Markdown } from "~/components/Global";
 import { ConfigAPI, ConfigEnvironment, ConfigSite } from "~/components/Guide/Configuration";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 
@@ -268,6 +269,25 @@ If you're migrating from previous version, you can load your old environment and
           onReset={onReset}
         />
 
+        <Alert
+          variant={"destructive"}
+          className='bg-destructive text-destructive-foreground'
+        >
+          <AlertTitle>
+            <h4>Configuration Issue</h4>
+          </AlertTitle>
+          <AlertDescription className='flex flex-col gap-1.5'>
+            <p className='w-full whitespace-pre-wrap text-pretty py-1.5'>{`After some report, it seems that the config will generate incorrect encrypted ID, and somehow it only happen on deployment.
+I'm sorry for the inconvenience, but you need to re-encrypt the id using the encryption endpoint.
+I'll try to fix this issue as soon as possible`}</p>
+            <code className='rounded-[var(--radius)] bg-muted px-2 py-1 text-sm text-muted-foreground'>{`https://drive-demo.mbaharip.com/api/internal/encrypt?q=<ID>&key=<ENCRYPTION_KEY>`}</code>
+            <code className='rounded-[var(--radius)] bg-muted px-2 py-1 text-sm text-muted-foreground'>{`https://<your-deployment-or-localhost>/api/internal/encrypt?q=<ID>&key=<ENCRYPTION_KEY>`}</code>
+            <p className='w-full whitespace-pre-wrap text-pretty'>
+              {`Replace <ID> with Root Folder ID and Shared Drive ID (if you use Team Drive) and <ENCRYPTION_KEY> with your Encryption Key from the Environment Configuration section.`}
+            </p>
+          </AlertDescription>
+        </Alert>
+
         <div className='flex w-full flex-col gap-3 tablet:flex-row tablet:items-center tablet:justify-end'>
           <Button
             variant={"destructive"}

src/components/Preview/Manga.tsx

@@ -100,7 +100,7 @@ export default function PreviewManga({ file }: Props) {
             file.ondata = (err, data, final) => {
               if (err) throw err;
               // Check if the file is an image
-              if (!file.name.toLowerCase().includes(".jpg" || ".jpeg" || ".png" || ".gif" || ".webp")) return;
+              if (![".jpg", ".jpeg", ".png", ".gif", ".webp"].some(ext => file.name.toLowerCase().endsWith(ext))) return;
               if (!final) return; // Skip if not fully loaded
 
               const blob = new Blob([data]);