feat: convert docs to pdf logic with api endpoint and dockerfile dependency

Dockerfile

@@ -5,7 +5,7 @@ FROM node:18-alpine AS base
 # Install dependencies only when needed
 FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache libc6-compat libreoffice ttf-liberation
 WORKDIR /app
 
 # Install dependencies based on the preferred package manager
@@ -49,7 +49,6 @@ RUN adduser --system --uid 1001 nextjs
 
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
-COPY --from=builder /app/public ./public
 
 USER nextjs
 

src/app/api/libre-convert/route.ts

@@ -0,0 +1,43 @@
+"use strict";
+import libre from "libreoffice-convert";
+import { promisify } from "util";
+import { NextRequest, NextResponse } from "next/server";
+
+const libreConvertAsync = promisify(libre.convert);
+
+export async function POST(request: NextRequest) {
+  if (request.method !== "POST") {
+    return NextResponse.json({ error: "Method not allowed" }, { status: 405 });
+  }
+
+  try {
+    const formData = await request.formData();
+    const file = formData.get("file") as Blob;
+
+    if (!file) {
+      return NextResponse.json({ error: "No file uploaded!" }, { status: 400 });
+    }
+
+    const arrayBuffer = await file.arrayBuffer();
+    const fileBuffer = Buffer.from(arrayBuffer);
+    const pdfBuffer = await libreConvertAsync(
+      fileBuffer,
+      ".pdf",
+      "writer_pdf_Export",
+    );
+
+    return new Response(pdfBuffer, {
+      status: 200,
+      headers: {
+        "Content-Type": "application/pdf",
+        "Content-Disposition": "attachment; filename=converted.pdf",
+      },
+    });
+  } catch (error: unknown) {
+    console.error("Convert error: ", error);
+    return NextResponse.json(
+      { error: "Error while converting!" },
+      { status: 500 },
+    );
+  }
+}

src/app/doc-to-pdf/layout.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "file-to-pdf",
+  title: "doc-to-pdf",
-  description: "Converter for files to pdf format!",
+  description: "Converter for documents to pdf format!",
 };
 
 export default function RootLayout({

src/app/doc-to-pdf/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Button from "@/components/Button";
+import Link from "next/link";
+
+export default function Home() {
+  const [file, setFile] = useState<File | null>(null);
+  const [downloadUrl, setDownloadUrl] = useState<string>("");
+  const [showDownload, setShowDownload] = useState(false);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files.length > 0) {
+      setFile(event.target.files[0]);
+    }
+  };
+
+  const convertToPdf = async () => {
+    if (!file) {
+      alert("No file selected");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const response = await fetch("/api/libre-convert", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!response.ok) {
+        return new Error(`Error: ${response.statusText}`);
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      setDownloadUrl(url);
+      setShowDownload(true);
+    } catch (error) {
+      console.error("Error while converting:", error);
+      alert("Error while converting");
+    }
+  };
+
+  useEffect(() => {
+    if (file) {
+      console.log(file);
+    }
+  }, [file]);
+
+  return (
+    <div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
+      <Navbar renderHomeLink={true} />
+      <div className="w-screen h-screen flex flex-col items-center justify-center">
+        <h2 className="text-5xl font-bold text-white mb-16">doc-to-pdf</h2>
+        <input
+          type="file"
+          className="border-2 border-white p-3 rounded-xl text-center text-white"
+          id="documentUpload"
+          onChange={handleFileChange}
+        />
+        <div className={"flex flex-row items-center gap-4 mt-4"}>
+          <Button content="convert" onClick={convertToPdf} />
+          <Link id="downloadPDF" href={downloadUrl}>
+            <Button content="download" visible={showDownload} />
+          </Link>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}

src/app/file-to-pdf/page.tsx

@@ -1,17 +0,0 @@
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Button from "@/components/Button";
-
-export default function Home() {
-  return (
-    <div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
-      <Navbar renderHomeLink={true} />
-      <div className="w-screen h-screen flex flex-col items-center justify-center">
-        <h2 className="text-5xl font-bold text-white mb-16">file-to-pdf</h2>
-        <input type="file" className="bg-gray-800 text-white p-2 rounded-lg" />
-        <Button content="convert" className="text-" />
-      </div>
-      <Footer />
-    </div>
-  );
-}

src/constants/index.ts

@@ -1,7 +1,7 @@
 export const toolLinks = [
   {
-    title: "file-to-pdf",
+    title: "doc-to-pdf",
-    link: "/file-to-pdf",
+    link: "/doc-to-pdf",
   },
   {
     title: "img-to-png",