theo/werkzeugkiste
1
0
Fork 0
mirror of https://github.com/theoleuthardt/werkzeugkiste.git synced 2026-06-13 09:37:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: new separate frontend and backend folders with fastify as nodejs framework, libreconvert is configured in fastify as route

Browse source
This commit is contained in:
theoleuthardt 2025-02-14 14:40:35 +01:00
parent 7b584d2fff
commit 9733de9a39
26 changed files with 1171 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/app/doc-to-pdf/layout.tsx Normal file
View file

@ -0,0 +1,18 @@
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "doc-to-pdf",
description: "Converter for documents to pdf format!",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`antialiased`}>{children}</body>
</html>
);
}

111
frontend/src/app/doc-to-pdf/page.tsx Normal file
View file

@ -0,0 +1,111 @@
"use client";
import React, { 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 [loading, setLoading] = useState(false);
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files.length > 0) {
setFile(event.target.files[0]);
setDownloadUrl("");
}
};
const convertToPdf = async () => {
if (!file) {
alert("No file selected");
return;
}
const formData = new FormData();
formData.append("file", file);
setLoading(true);
try {
const response = await fetch(
process.env.backend_url + "/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);
} catch (error) {
console.error("Error while converting:", error);
alert("Error while converting");
} finally {
setLoading(false);
}
};
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>
<table className="border-2 border-white text-xl rounded-xl mb-16">
<thead>
<tr>
<th>Input Format</th>
<th>Output Format</th>
</tr>
</thead>
<tbody>
<tr>
<td>docx</td>
<td>pdf</td>
</tr>
<tr>
<td>doc</td>
<td>pdf</td>
</tr>
<tr>
<td>odt</td>
<td>pdf</td>
</tr>
</tbody>
</table>
<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"}>
{downloadUrl ? (
<Link id="downloadPDF" href={downloadUrl}>
<Button content="download" />
</Link>
) : (
<Button
content={
loading ? (
<div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
) : (
"convert"
)
}
onClick={convertToPdf}
/>
)}
</div>
</div>
<Footer />
</div>
);
}

BIN
frontend/src/app/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 481 B

5
frontend/src/app/globals.css Normal file
View file

@ -0,0 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

25
frontend/src/app/layout.tsx Normal file
View file

@ -0,0 +1,25 @@
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "Werkzeugkiste",
description: "Collection of useful digital utilities",
icons: [
{
rel: "icon",
url: "/favicon.ico",
},
],
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`antialiased`}>{children}</body>
</html>
);
}

27
frontend/src/app/page.tsx Normal file
View file

@ -0,0 +1,27 @@
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { toolLinks } from "@/constants";
export default function Home() {
return (
<div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
<Navbar renderHomeLink={false} />
<div className="w-screen h-screen flex flex-col items-center justify-center">
<div className="grid grid-cols-3 gap-6">
{toolLinks.map((tool) => (
<a
key={tool.title}
href={tool.link}
className="text-2xl border-2 border-white p-6 flex justify-center rounded-2xl shadow-md
shadow-white hover:scale-110 hover:transition-scale hover:duration-200
hover:text-blue-400 hover:border-blue-400 hover:shadow-blue-400"
>
{tool.title}
</a>
))}
</div>
</div>
<Footer />
</div>
);
}