diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..1b8ac88 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +# Ignore artifacts: +build +coverage diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +{} diff --git a/README.md b/README.md index eb01ede..1751986 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Werkzeugkiste -**Werkzeugkiste** is a Next.js-based website that offers a collection of useful digital tools and converters. -This platform is designed to provide users with a simple and efficient way to handle various tasks, such as converting +**Werkzeugkiste** is a Next.js-based website that offers a collection of useful digital tools and converters. +This platform is designed to provide users with a simple and efficient way to handle various tasks, such as converting files, calculating values, or using other handy digital utilities. ## Tech-Stack @@ -29,25 +29,32 @@ To install and run the project locally, follow these steps: ```bash git clone https://github.com/theoleuthardt/werkzeugkiste.git cd werkzeugkiste - + + ``` 2. **Install the dependencies**: + ```bash npm install + ``` + 3. **Start the website locally with npm**: ```bash npm run start + ``` **or** 3. **Start the website with docker compose**: - ```bash - docker compose up -d + + ```bash + docker compose up -d + + ``` 4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - ## Authors - [@Domenik Wilhelm](https://www.github.com/AuriomTex) -- [@Theo Leuthardt](https://www.github.com/theoleuthardt) \ No newline at end of file +- [@Theo Leuthardt](https://www.github.com/theoleuthardt) diff --git a/docker-compose.yaml b/docker-compose.yaml index 005a2f1..cc0e49a 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -10,4 +10,4 @@ services: PORT: 3000 ports: - "3000:3000" - restart: unless-stopped \ No newline at end of file + restart: unless-stopped diff --git a/next.config.ts b/next.config.ts index fe2af46..68a6c64 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,7 +1,7 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { - output: 'standalone', + output: "standalone", }; export default nextConfig; diff --git a/package-lock.json b/package-lock.json index ed24307..dcf41a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "eslint": "^9", "eslint-config-next": "15.1.6", "postcss": "^8", + "prettier": "3.4.2", "tailwindcss": "^3.4.1", "typescript": "^5" } @@ -4537,6 +4538,22 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz", + "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", diff --git a/package.json b/package.json index 47c13d7..ad7da03 100644 --- a/package.json +++ b/package.json @@ -9,19 +9,20 @@ "lint": "next lint" }, "dependencies": { + "next": "15.1.6", "react": "^19.0.0", - "react-dom": "^19.0.0", - "next": "15.1.6" + "react-dom": "^19.0.0" }, "devDependencies": { - "typescript": "^5", + "@eslint/eslintrc": "^3", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", - "postcss": "^8", - "tailwindcss": "^3.4.1", "eslint": "^9", "eslint-config-next": "15.1.6", - "@eslint/eslintrc": "^3" + "postcss": "^8", + "prettier": "3.4.2", + "tailwindcss": "^3.4.1", + "typescript": "^5" } } diff --git a/src/app/file-to-pdf/layout.tsx b/src/app/file-to-pdf/layout.tsx new file mode 100644 index 0000000..6e928a0 --- /dev/null +++ b/src/app/file-to-pdf/layout.tsx @@ -0,0 +1,18 @@ +import type { Metadata } from "next"; + +export const metadata: Metadata = { + title: "file-to-pdf", + description: "Converter for files to pdf format!", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/src/app/file-to-pdf/page.tsx b/src/app/file-to-pdf/page.tsx new file mode 100644 index 0000000..61138fc --- /dev/null +++ b/src/app/file-to-pdf/page.tsx @@ -0,0 +1,17 @@ +import Navbar from "../../components/Navbar"; +import Footer from "../../components/Footer"; +import Button from "@/components/Button"; + +export default function Home() { + return ( +
+ +
+

file-to-pdf

+ +
+
+ ); +} diff --git a/src/app/globals.css b/src/app/globals.css index 6b717ad..8df686e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,3 +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; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 92e244f..cda35d9 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -13,11 +13,7 @@ export default function RootLayout({ }>) { return ( - - {children} - + {children} ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 02232e0..4fe092a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,27 @@ +import Navbar from "../components/Navbar"; +import Footer from "../components/Footer"; +import { toolLinks } from "@/constants"; + export default function Home() { return ( -
- +
+ +
+
+ {toolLinks.map((tool) => ( + + {tool.title} + + ))} +
+
+
); } diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/src/assets/favicon.ico and /dev/null differ diff --git a/src/assets/logo/icons8-toolbox-128.svg b/src/assets/logo/icons8-toolbox-128.svg new file mode 100644 index 0000000..de1dc0c --- /dev/null +++ b/src/assets/logo/icons8-toolbox-128.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/logo/icons8-toolbox-256.svg b/src/assets/logo/icons8-toolbox-256.svg new file mode 100644 index 0000000..0947e86 --- /dev/null +++ b/src/assets/logo/icons8-toolbox-256.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/logo/icons8-toolbox-512.svg b/src/assets/logo/icons8-toolbox-512.svg new file mode 100644 index 0000000..26e66d6 --- /dev/null +++ b/src/assets/logo/icons8-toolbox-512.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/logo/icons8-toolbox-64.svg b/src/assets/logo/icons8-toolbox-64.svg new file mode 100644 index 0000000..63ede29 --- /dev/null +++ b/src/assets/logo/icons8-toolbox-64.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/logo/icons8-toolbox-pastel-glyph-120.png b/src/assets/logo/icons8-toolbox-pastel-glyph-120.png new file mode 100644 index 0000000..5d94154 Binary files /dev/null and b/src/assets/logo/icons8-toolbox-pastel-glyph-120.png differ diff --git a/src/assets/logo/icons8-toolbox-pastel-glyph-16.png b/src/assets/logo/icons8-toolbox-pastel-glyph-16.png new file mode 100644 index 0000000..6b6d223 Binary files /dev/null and b/src/assets/logo/icons8-toolbox-pastel-glyph-16.png differ diff --git a/src/assets/logo/icons8-toolbox-pastel-glyph-32.png b/src/assets/logo/icons8-toolbox-pastel-glyph-32.png new file mode 100644 index 0000000..9212725 Binary files /dev/null and b/src/assets/logo/icons8-toolbox-pastel-glyph-32.png differ diff --git a/src/assets/logo/icons8-toolbox-pastel-glyph-96.png b/src/assets/logo/icons8-toolbox-pastel-glyph-96.png new file mode 100644 index 0000000..f74e95c Binary files /dev/null and b/src/assets/logo/icons8-toolbox-pastel-glyph-96.png differ diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..05f1076 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,21 @@ +"use client"; +import React from "react"; + +interface ButtonProps { + className?: string; + content: string; + onClick?: Function; +} + +const Button = (props: ButtonProps) => { + return ( + + ); +}; + +export default Button; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..6c6d16e --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +interface FooterProps { + className?: string; +} + +const Footer = (props: FooterProps) => { + return ( +
+
+

made by

+ + Domi + +

and

+ + Theo. + +
+
+ ); +}; + +export default Footer; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..140f087 --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import Image from "next/image"; +import LOGO from "../assets/logo/icons8-toolbox-64.svg"; + +interface NavProps { + className?: string; + renderHomeLink: boolean; +} + +const Navbar = (props: NavProps) => { + return ( +
+ +
+ ); +}; + +export default Navbar; diff --git a/src/constants/index.ts b/src/constants/index.ts new file mode 100644 index 0000000..a4641bc --- /dev/null +++ b/src/constants/index.ts @@ -0,0 +1,38 @@ +export const toolLinks = [ + { + title: "file-to-pdf", + link: "/file-to-pdf", + }, + { + title: "img-to-png", + link: "/img-to-png", + }, + { + title: "rgb-to-hex", + link: "/rgb-to-hex", + }, + { + title: "video-to-gif", + link: "/video-to-gif", + }, + { + title: "qr-code-generator", + link: "/qr-code-generator", + }, + { + title: "password-generator", + link: "/password-generator", + }, + { + title: "bg-remover", + link: "/bg-remover", + }, + { + title: "word-counter", + link: "/word-counter", + }, + { + title: "pomodoro-timer", + link: "/pomodoro-timer", + }, +]; diff --git a/tailwind.config.ts b/tailwind.config.ts index 109807b..4a0ad11 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -12,6 +12,9 @@ export default { background: "var(--background)", foreground: "var(--foreground)", }, + fontFamily: { + noto: ["Noto Serif", "serif"], + }, }, }, plugins: [],