Merge pull request #26 from C4illin/release-please--branches--main--components--convertx-frontend

issue #23

.github/dependabot.yml

@@ -5,19 +5,19 @@
 
 version: 2
 updates:
-  # Maintain dependencies for npm
-  - package-ecosystem: "npm" # See documentation for possible values
-    versioning-strategy: increase
-    directory: "/" # Location of package manifests
-    schedule:
-      interval: "daily"
-  # Maintain dependencies for GitHub Actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: "daily"
-  # Maintain dependencies for Docker
-  - package-ecosystem: "docker"
-    directory: "/"
-    schedule:
-      interval: "daily"
+- package-ecosystem: npm
+  versioning-strategy: increase
+  directory: "/"
+  schedule:
+    interval: daily
+  commit-message:
+    prefix: "build"
+    include: "scope"
+  open-pull-requests-limit: 10
+- package-ecosystem: github-actions
+  directory: "/"
+  schedule:
+    interval: weekly
+  commit-message:
+    prefix: "build"
+    include: "scope"

.github/workflows/release-please.yml

@@ -0,0 +1,25 @@
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+name: release-please
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: googleapis/release-please-action@v4
+        with:
+          # this assumes that you have created a personal access token
+          # (PAT) and configured it as a GitHub action secret named
+          # `MY_RELEASE_PLEASE_TOKEN` (this secret name is not important).
+          # token: ${{ secrets.MY_RELEASE_PLEASE_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # this is a built-in strategy in release-please, see "Action Inputs"
+          # for more options
+          release-type: node

.github/workflows/remove-docker-tag.yml

@@ -0,0 +1,21 @@
+name: Remove Docker Tag
+
+on:
+  workflow_dispatch:
+
+jobs:
+  remove-docker-tag:
+    runs-on: ubuntu-latest
+
+    # Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job.
+    # (required)
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+    - name: Remove Docker Tag
+      uses: ArchieAtkinson/remove-dockertag-action@v0.0
+      with:
+        tag_name: master
+        github_token: ${{ secrets.GITHUB_TOKEN }}

CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+## [0.1.2](https://github.com/C4illin/ConvertX/compare/v0.1.1...v0.1.2) (2024-06-10)
+
+
+### Bug Fixes
+
+* fix incorrect redirect ([25df58b](https://github.com/C4illin/ConvertX/commit/25df58ba82321aaa6617811a6995cb96c2a00a40)), closes [#23](https://github.com/C4illin/ConvertX/issues/23)
+
+## [0.1.1](https://github.com/C4illin/ConvertX/compare/v0.1.0...v0.1.1) (2024-05-30)
+
+
+### Bug Fixes
+
+* :bug: make sure all redirects are 302 ([9970fd3](https://github.com/C4illin/ConvertX/commit/9970fd3f89190af96f8762edc3817d1e03082b3a)), closes [#12](https://github.com/C4illin/ConvertX/issues/12)
+
+## 0.1.0 (2024-05-30)
+
+
+### Features
+
+* remove file from file list in index.html ([787ff97](https://github.com/C4illin/ConvertX/commit/787ff9741ecbbf4fb4c02b43bd22a214a173fd7b))
+
+
+### Miscellaneous Chores
+
+* release 0.1.0 ([54d9aec](https://github.com/C4illin/ConvertX/commit/54d9aecbf949689b12aa7e5e8e9be7b9032f4431))

README.md

@@ -1,8 +1,13 @@
 ![ConvertX](images/logo.png)
 # ConvertX
 [![Docker](https://github.com/C4illin/ConvertX/actions/workflows/docker-publish.yml/badge.svg?branch=main)](https://github.com/C4illin/ConvertX/actions/workflows/docker-publish.yml)
+[![GitHub Release](https://img.shields.io/github/v/release/C4illin/ConvertX)](https://github.com/C4illin/ConvertX/pkgs/container/convertx)
+![GitHub commits since latest release](https://img.shields.io/github/commits-since/C4illin/ConvertX/latest)
+![GitHub repo size](https://img.shields.io/github/repo-size/C4illin/ConvertX)
+![Docker container size](https://ghcr-badge.egpl.dev/c4illin/convertx/size?color=%230375b6&tag=latest&label=image+size&trim=)
+![GitHub top language](https://img.shields.io/github/languages/top/C4illin/ConvertX)
 
-A self-hosted online file converter. Supports 831 different formats. Written with Typescript, Bun and Elysia.
+A self-hosted online file converter. Supports 831 different formats. Written with TypeScript, Bun and Elysia.
 
 ## Features
 
@@ -12,13 +17,13 @@ A self-hosted online file converter. Supports 831 different formats. Written wit
 
 ## Converters supported
 
-| Converter      | Use case      | Converts from | Converts to |
-|----------------|---------------|---------------|-------------|
-| Vips           | Images (fast) | 45            | 23          |
-| PDFLaTeX       | Documents     | 1             | 1           |
-| Pandoc         | Documents     | 43            | 65          |
-| GraphicsMagick | Images        | 166           | 133         |
-| FFmpeg         | Video         | ~473          | ~280        |
+| Converter                                                                    | Use case      | Converts from | Converts to |
+|------------------------------------------------------------------------------|---------------|---------------|-------------|
+| [Vips](https://github.com/libvips/libvips)                                   | Images (fast) | 45            | 23          |
+| [PDFLaTeX](https://www.math.rug.nl/~trentelman/jacob/pdflatex/pdflatex.html) | Documents     | 1             | 1           |
+| [Pandoc](https://pandoc.org/)                                                | Documents     | 43            | 65          |
+| [GraphicsMagick](http://www.graphicsmagick.org/)                             | Images        | 166           | 133         |
+| [FFmpeg](https://ffmpeg.org/)                                                | Video         | ~473          | ~280        |
 
 <!-- many ffmpeg fileformats are duplicates -->
 
@@ -28,7 +33,7 @@ A self-hosted online file converter. Supports 831 different formats. Written wit
 # docker-compose.yml
 services:
   convertx: 
-    image: ghcr.io/c4illin/convertx:main
+    image: ghcr.io/c4illin/convertx
     ports:
       - "3000:3000"
     environment: # Defaults are listed below. All are optional.
@@ -60,6 +65,7 @@ Tutorial in french: https://belginux.com/installer-convertx-avec-docker/
 - [ ] Divide index.tsx into smaller components
 - [ ] Add tests
 - [ ] Add searchable list of formats
+- [ ] Make the upload button nicer and more easy to drop files on. Support copy paste as well if possible.
 
 ## Contributors
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "convertx-frontend",
-  "version": "1.0.50",
+  "version": "0.1.2",
   "scripts": {
     "dev": "bun run --watch src/index.tsx",
     "hot": "bun run --hot src/index.tsx",
@@ -12,29 +12,28 @@
     "@elysiajs/html": "^1.0.2",
     "@elysiajs/jwt": "^1.0.2",
     "@elysiajs/static": "^1.0.3",
-    "elysia": "^1.0.22",
-    "node-poppler": "^7.2.0"
+    "elysia": "^1.0.23"
   },
   "module": "src/index.tsx",
   "bun-create": {
     "start": "bun run src/index.tsx"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.7.3",
+    "@biomejs/biome": "1.8.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
     "@kitajs/ts-html-plugin": "^4.0.1",
     "@picocss/pico": "^2.0.6",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/bun": "^1.1.3",
     "@types/eslint": "^8.56.10",
-    "@types/node": "^20.12.13",
+    "@types/node": "^20.14.2",
     "@types/ws": "^8.5.10",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
     "cpy-cli": "^5.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.1",
     "typescript": "^5.4.5"
   }
 }

src/converters/main.ts

@@ -20,8 +20,6 @@ import {
   properties as propertiesPdflatex,
 } from "./pdflatex";
 
-import { convert as convertPoppler, properties as propertiesPoppler } from "./poppler";
-
 import { normalizeFiletype } from "../helpers/normalizeFiletype";
 
 // This should probably be reconstructed so that the functions are not imported instead the functions hook into this to make the converters more modular
@@ -60,10 +58,6 @@ const properties: {
     properties: propertiesPdflatex,
     converter: convertPdflatex,
   },
-  poppler: {
-    properties: propertiesPoppler,
-    converter: convertPoppler,
-  },
   pandoc: {
     properties: propertiesPandoc,
     converter: convertPandoc,

src/converters/poppler.ts

@@ -1,115 +0,0 @@
-const { Poppler } = require("node-poppler");
-const poppler = new Poppler();
-
-export const properties = {
-  from: {
-    text: ["pdf"],
-  },
-  to: {
-    text: [
-      "jpeg",
-      "png",
-      "tiff",
-      "eps",
-      "icc",
-      "pdf",
-      "svg",
-      "ps",
-      "html",
-      "text",
-    ],
-  },
-};
-
-export function convert(
-  filePath: string,
-  fileType: string,
-  convertTo: string,
-  targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
-): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const cairoFiles = [
-      "jpeg",
-      "png",
-      "tiff",
-      "eps",
-      "icc",
-      "pdf",
-      "svg",
-      "ps",
-    ];
-
-    if (cairoFiles.includes(convertTo)) {
-      const popplerOptions: {
-        jpegFile?: boolean;
-        pngFile?: boolean;
-        tiffFile?: boolean;
-        epsFile?: boolean;
-        iccFile?: boolean;
-        pdfFile?: boolean;
-        svgFile?: boolean;
-        psFile?: boolean;
-      } = {};
-
-      switch (convertTo) {
-        case "jpeg":
-          popplerOptions.jpegFile = true;
-          break;
-        case "png":
-          popplerOptions.pngFile = true;
-          break;
-        case "tiff":
-          popplerOptions.tiffFile = true;
-          break;
-        case "eps":
-          popplerOptions.epsFile = true;
-          break;
-        case "icc":
-          popplerOptions.iccFile = true;
-          break;
-        case "pdf":
-          popplerOptions.pdfFile = true;
-          break;
-        case "svg":
-          popplerOptions.svgFile = true;
-          break;
-        case "ps":
-          popplerOptions.psFile = true;
-          break;
-        default:
-          reject(`Invalid convertTo option: ${convertTo}`);
-      }
-
-      poppler
-        .pdfToCairo(filePath, targetPath, popplerOptions)
-        .then(() => {
-          resolve("success");
-        })
-        .catch((err: Error) => {
-          reject(err);
-        });
-    } else if (convertTo === "html") {
-      poppler
-        .pdfToHtml(filePath, targetPath)
-        .then(() => {
-          resolve("success");
-        })
-        .catch((err: Error) => {
-          reject(err);
-        });
-    } else if (convertTo === "text") {
-      poppler
-        .pdfToText(filePath, targetPath)
-        .then(() => {
-          resolve("success");
-        })
-        .catch((err: Error) => {
-          reject(err);
-        });
-    } else {
-      reject(`Invalid convertTo option: ${convertTo}`);
-    }
-  });
-}

src/helpers/normalizeFiletype.ts

@@ -25,8 +25,6 @@ export const normalizeOutputFiletype = (filetype: string): string => {
       return "tex";
     case "markdown":
       return "md";
-    case "text":
-      return "txt";
     default:
       return lowercaseFiletype;
   }

src/index.tsx

@@ -121,7 +121,7 @@ const app = new Elysia()
   )
   .get("/setup", ({ redirect }) => {
     if (!FIRST_RUN) {
-      return redirect("/login");
+      return redirect("/login", 302);
     }
 
     return (
@@ -164,7 +164,7 @@ const app = new Elysia()
   })
   .get("/register", ({ redirect }) => {
     if (!ACCOUNT_REGISTRATION) {
-      return redirect("/login");
+      return redirect("/login", 302);
     }
 
     return (
@@ -206,7 +206,7 @@ const app = new Elysia()
     "/register",
     async ({ body, set, redirect, jwt, cookie: { auth } }) => {
       if (!ACCOUNT_REGISTRATION && !FIRST_RUN) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       if (FIRST_RUN) {
@@ -253,13 +253,13 @@ const app = new Elysia()
         sameSite: "strict",
       });
 
-      return redirect("/");
+      return redirect("/", 302);
     },
     { body: t.Object({ email: t.String(), password: t.String() }) },
   )
   .get("/login", async ({ jwt, redirect, cookie: { auth } }) => {
     if (FIRST_RUN) {
-      return redirect("/setup");
+      return redirect("/setup", 302);
     }
 
     // if already logged in, redirect to home
@@ -267,7 +267,7 @@ const app = new Elysia()
       const user = await jwt.verify(auth.value);
 
       if (user) {
-        return redirect("/");
+        return redirect("/", 302);
       }
 
       auth.remove();
@@ -361,7 +361,7 @@ const app = new Elysia()
         sameSite: "strict",
       });
 
-      return redirect("/");
+      return redirect("/", 302);
     },
     { body: t.Object({ email: t.String(), password: t.String() }) },
   )
@@ -370,27 +370,27 @@ const app = new Elysia()
       auth.remove();
     }
 
-    return redirect("/login");
+    return redirect("/login", 302);
   })
   .post("/logoff", ({ redirect, cookie: { auth } }) => {
     if (auth?.value) {
       auth.remove();
     }
 
-    return redirect("/login");
+    return redirect("/login", 302);
   })
   .get("/", async ({ jwt, redirect, cookie: { auth, jobId } }) => {
     if (FIRST_RUN) {
-      return redirect("/setup");
+      return redirect("/setup", 302);
     }
 
     if (!auth?.value) {
-      return redirect("/login");
+      return redirect("/login", 302);
     }
     // validate jwt
     const user = await jwt.verify(auth.value);
     if (!user) {
-      return redirect("/login");
+      return redirect("/login", 302);
     }
 
     // make sure user exists in db
@@ -402,7 +402,7 @@ const app = new Elysia()
       if (auth?.value) {
         auth.remove();
       }
-      return redirect("/login");
+      return redirect("/login", 302);
     }
 
     // create a new job
@@ -509,16 +509,16 @@ const app = new Elysia()
     "/upload",
     async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
       if (!auth?.value) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       if (!jobId?.value) {
-        return redirect("/");
+        return redirect("/", 302);
       }
 
       const existingJob = await db
@@ -526,7 +526,7 @@ const app = new Elysia()
         .get(jobId.value, user.id);
 
       if (!existingJob) {
-        return redirect("/");
+        return redirect("/", 302);
       }
 
       const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
@@ -557,16 +557,16 @@ const app = new Elysia()
     "/delete",
     async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
       if (!auth?.value) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       if (!jobId?.value) {
-        return redirect("/");
+        return redirect("/", 302);
       }
 
       const existingJob = await db
@@ -574,7 +574,7 @@ const app = new Elysia()
         .get(jobId.value, user.id);
 
       if (!existingJob) {
-        return redirect("/");
+        return redirect("/", 302);
       }
 
       const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
@@ -587,16 +587,16 @@ const app = new Elysia()
     "/convert",
     async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
       if (!auth?.value) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       if (!jobId?.value) {
-        return redirect("/");
+        return redirect("/", 302);
       }
 
       const existingJob = (await db
@@ -604,7 +604,7 @@ const app = new Elysia()
         .get(jobId.value, user.id)) as IJobs;
 
       if (!existingJob) {
-        return redirect("/");
+        return redirect("/", 302);
       }
 
       const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
@@ -627,7 +627,7 @@ const app = new Elysia()
       const fileNames = JSON.parse(body.file_names) as string[];
 
       if (!Array.isArray(fileNames) || fileNames.length === 0) {
-        return redirect("/");
+        return redirect("/", 302);
       }
 
       db.run(
@@ -677,7 +677,7 @@ const app = new Elysia()
         });
 
       // Redirect the client immediately
-      return redirect(`/results/${jobId.value}`);
+      return redirect(`/results/${jobId.value}`, 302);
     },
     {
       body: t.Object({
@@ -688,12 +688,12 @@ const app = new Elysia()
   )
   .get("/history", async ({ jwt, redirect, cookie: { auth } }) => {
     if (!auth?.value) {
-      return redirect("/login");
+      return redirect("/login", 302);
     }
     const user = await jwt.verify(auth.value);
 
     if (!user) {
-      return redirect("/login");
+      return redirect("/login", 302);
     }
 
     let userJobs = db
@@ -751,7 +751,7 @@ const app = new Elysia()
     "/results/:jobId",
     async ({ params, jwt, set, redirect, cookie: { auth, job_id } }) => {
       if (!auth?.value) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       if (job_id?.value) {
@@ -761,7 +761,7 @@ const app = new Elysia()
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       const job = (await db
@@ -846,7 +846,7 @@ const app = new Elysia()
     "/progress/:jobId",
     async ({ jwt, set, params, redirect, cookie: { auth, job_id } }) => {
       if (!auth?.value) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       if (job_id?.value) {
@@ -856,7 +856,7 @@ const app = new Elysia()
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       const job = (await db
@@ -934,12 +934,12 @@ const app = new Elysia()
     "/download/:userId/:jobId/:fileName",
     async ({ params, jwt, redirect, cookie: { auth } }) => {
       if (!auth?.value) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       const job = await db
@@ -947,7 +947,7 @@ const app = new Elysia()
         .get(user.id, params.jobId);
 
       if (!job) {
-        return redirect("/results");
+        return redirect("/results", 302);
       }
       // parse from url encoded string
       const userId = decodeURIComponent(params.userId);
@@ -960,12 +960,12 @@ const app = new Elysia()
   )
   .get("/converters", async ({ jwt, redirect, cookie: { auth } }) => {
     if (!auth?.value) {
-      return redirect("/login");
+      return redirect("/login", 302);
     }
 
     const user = await jwt.verify(auth.value);
     if (!user) {
-      return redirect("/login");
+      return redirect("/login", 302);
     }
 
     return (
@@ -1022,12 +1022,12 @@ const app = new Elysia()
     async ({ params, jwt, redirect, cookie: { auth } }) => {
       // TODO: Implement zip download
       if (!auth?.value) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login");
+        return redirect("/login", 302);
       }
 
       const job = await db
@@ -1035,7 +1035,7 @@ const app = new Elysia()
         .get(user.id, params.jobId);
 
       if (!job) {
-        return redirect("/results");
+        return redirect("/results", 302);
       }
 
       const userId = decodeURIComponent(params.userId);

src/public/style.css

@@ -1,9 +1,3 @@
-article {
-  /* height: 300px; */
-  /* width: 300px; */
-
-}
-
 div.icon {
   height: 100px;
   width: 100px;