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

chore(deps): update oven/bun docker tag to v1.1.28

.deepsource.toml

@@ -0,0 +1,7 @@
+version = 1
+
+[[analyzers]]
+name = "javascript"
+
+  [analyzers.meta]
+  environment = ["nodejs"]

.eslintrc.cjs

@@ -1,46 +0,0 @@
-/** @type {import("eslint").Linter.Config} */
-const config = {
-  root: true,
-  parser: "@typescript-eslint/parser",
-  plugins: ["isaacscript", "import"],
-  extends: [
-    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/stylistic-type-checked",
-    "plugin:prettier/recommended",
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    tsconfigRootDir: __dirname,
-    project: ["./tsconfig.json"],
-  },
-  overrides: [
-    // Template files don't have reliable type information
-    {
-      extends: ["plugin:@typescript-eslint/disable-type-checked"],
-    },
-  ],
-  rules: {
-    // These off/not-configured-the-way-we-want lint rules we like & opt into
-    "@typescript-eslint/no-explicit-any": "error",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      { argsIgnorePattern: "^_", destructuredArrayIgnorePattern: "^_" },
-    ],
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      { prefer: "type-imports", fixStyle: "inline-type-imports" },
-    ],
-    "import/consistent-type-specifier-style": ["error", "prefer-inline"],
-
-    // For educational purposes we format our comments/jsdoc nicely
-    "isaacscript/complete-sentences-jsdoc": "warn",
-    "isaacscript/format-jsdoc-comments": "warn",
-
-    // These lint rules don't make sense for us but are enabled in the preset configs
-    "@typescript-eslint/no-confusing-void-expression": "off",
-    "@typescript-eslint/restrict-template-expressions": "off",
-  },
-};
-
-module.exports = config;

.github/dependabot.yml

@@ -1,23 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-- 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/bun-dependabot.yml

@@ -1,28 +0,0 @@
-name: 'Dependabot: Update bun.lockb'
-
-on:
-  pull_request:
-    paths:
-      - "package.json"
-
-permissions:
-  contents: write
-
-jobs:
-  update-bun-lockb:
-    name: "Update bun.lockb"
-    if: github.actor == 'dependabot[bot]'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: oven-sh/setup-bun@v2
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.ref }}
-      - run: |
-          bun install
-          git add bun.lockb
-          git config --global user.name 'dependabot[bot]'
-          git config --global user.email 'dependabot[bot]@users.noreply.github.com'
-          git commit --amend --no-edit 
-          git push --force

CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## [0.5.0](https://github.com/C4illin/ConvertX/compare/v0.4.1...v0.5.0) (2024-09-20)
+
+
+### Features
+
+* add option to customize how often files are automatically deleted ([317c932](https://github.com/C4illin/ConvertX/commit/317c932c2a26280bf37ed3d3bf9b879413590f5a))
+
+
+### Bug Fixes
+
+* improve file name replacement logic ([60ba7c9](https://github.com/C4illin/ConvertX/commit/60ba7c93fbdc961f3569882fade7cc13dee7a7a5))
+
+## [0.4.1](https://github.com/C4illin/ConvertX/compare/v0.4.0...v0.4.1) (2024-09-15)
+
+
+### Bug Fixes
+
+* allow non lowercase true and false values, fixes [#122](https://github.com/C4illin/ConvertX/issues/122) ([bef1710](https://github.com/C4illin/ConvertX/commit/bef1710e3376baa7e25c107ded20a40d18b8c6b0))
+
+## [0.4.0](https://github.com/C4illin/ConvertX/compare/v0.3.3...v0.4.0) (2024-08-26)
+
+
+### Features
+
+* add option for unauthenticated file conversions [#114](https://github.com/C4illin/ConvertX/issues/114) ([f0d0e43](https://github.com/C4illin/ConvertX/commit/f0d0e4392983c3e4c530304ea88e023fda9bcac0))
+* add resvg converter ([d5eeef9](https://github.com/C4illin/ConvertX/commit/d5eeef9f6884b2bb878508bed97ea9ceaa662995))
+* add robots.txt ([6597c1d](https://github.com/C4illin/ConvertX/commit/6597c1d7caeb4dfb6bc47b442e4dfc9840ad12b7))
+* Add search bar for formats ([53fff59](https://github.com/C4illin/ConvertX/commit/53fff594fc4d69306abcb2a5cad890fcd0953a58))
+
+
+### Bug Fixes
+
+* keep unauthenticated user logged in if allowed [#114](https://github.com/C4illin/ConvertX/issues/114) ([bc4ad49](https://github.com/C4illin/ConvertX/commit/bc4ad492852fad8cb832a0c03485cccdd7f7b117))
+* pdf support in vips ([8ca4f15](https://github.com/C4illin/ConvertX/commit/8ca4f1587df7f358893941c656d78d75f04dac93))
+* Slow click on conversion popup does not work ([4d9c4d6](https://github.com/C4illin/ConvertX/commit/4d9c4d64aa0266f3928935ada68d91ac81f638aa))
+
 ## [0.3.3](https://github.com/C4illin/ConvertX/compare/v0.3.2...v0.3.3) (2024-07-30)
 
 

Dockerfile

@@ -1,4 +1,5 @@
-FROM oven/bun:1.1.21-alpine as base
+FROM oven/bun:1.1.29-alpine AS base
+LABEL org.opencontainers.image.source="https://github.com/C4illin/ConvertX"
 WORKDIR /app
 
 # install dependencies into temp directory
@@ -13,6 +14,12 @@ RUN mkdir -p /temp/prod
 COPY package.json bun.lockb /temp/prod/
 RUN cd /temp/prod && bun install --frozen-lockfile --production
 
+FROM base AS builder
+RUN apk --no-cache add curl gcc
+ENV PATH=/root/.cargo/bin:$PATH
+RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+RUN cargo install resvg
+
 # copy node_modules from temp directory
 # then copy all (non-ignored) project files into the image
 # FROM base AS prerelease
@@ -40,12 +47,15 @@ RUN apk --no-cache add  \
   graphicsmagick \
   ghostscript \
   vips-tools \
+  vips-poppler \
+  vips-jxl \
   libjxl-tools
 
 # this might be needed for some latex use cases, will add it if needed.
 #   texmf-dist-fontsextra \
 
 COPY --from=install /temp/prod/node_modules node_modules
+COPY --from=builder /root/.cargo/bin/resvg /usr/local/bin/resvg
 # COPY --from=prerelease /app/src/index.tsx /app/src/
 # COPY --from=prerelease /app/package.json .
 COPY . .

README.md

@@ -20,8 +20,9 @@ A self-hosted online file converter. Supports 831 different formats. Written wit
 | Converter                                                                    | Use case      | Converts from | Converts to |
 |------------------------------------------------------------------------------|---------------|---------------|-------------|
 | [libjxl](https://github.com/libjxl/libjxl)                                   | JPEG XL       | 11            | 11          |
+| [resvg](https://github.com/RazrFalcon/resvg)                                 | SVG           | 1             | 1           |
 | [Vips](https://github.com/libvips/libvips)                                   | Images        | 45            | 23          |
-| [XeLaTeX](https://tug.org/xetex/)                                            | Documents     | 1             | 1           |
+| [XeLaTeX](https://tug.org/xetex/)                                            | LaTeX         | 1             | 1           |
 | [Pandoc](https://pandoc.org/)                                                | Documents     | 43            | 65          |
 | [GraphicsMagick](http://www.graphicsmagick.org/)                             | Images        | 166           | 133         |
 | [FFmpeg](https://ffmpeg.org/)                                                | Video         | ~473          | ~280        |
@@ -37,21 +38,25 @@ Any missing converter? Open an issue or pull request!
 services:
   convertx: 
     image: ghcr.io/c4illin/convertx
+    container_name: convertx
+    restart: unless-stopped
     ports:
       - "3000:3000"
     environment: # Defaults are listed below. All are optional.
       - ACCOUNT_REGISTRATION=false # true or false, doesn't matter for the first account (e.g. keep this to false if you only want one account)
       - JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234 # will use randomUUID() by default
       - HTTP_ALLOWED=false # setting this to true is unsafe, only set this to true locally
+      - ALLOW_UNAUTHENTICATED=false # allows anyone to use the service without logging in, only set this to true locally
+      - AUTO_DELETE_EVERY_N_HOURS=24 # checks every n hours for files older then n hours and deletes them, set to 0 to disable
     volumes:
       - convertx:/app/data
 ```
 
-<!-- or
+or
 
 ```bash
-docker run ghcr.io/c4illin/convertx:master -p 3000:3000 -e ACCOUNT_REGISTRATION=false -v /path/you/want:/app/data
+docker run -p 3000:3000 -v ./data:/app/data ghcr.io/c4illin/convertx
-``` -->
+```
 
 Then visit `http://localhost:3000` in your browser and create your account. Don't leave it unconfigured and open, as anyone can register the first account.
 
@@ -61,14 +66,31 @@ If you get unable to open database file run `chown -R $USER:$USER path` on the p
 
 Tutorial in french: https://belginux.com/installer-convertx-avec-docker/
 
+## Screenshots
+
+![ConvertX Preview](images/preview.png)
+
+## Development
+
+0. Install [Bun](https://bun.sh/) and Git
+1. Clone the repository
+2. `bun install`
+3. `bun run dev`
+
+Pull requests are welcome! See below and open issues for the list of todos.
+
 ## Todo
 - [x] Add messages for errors in converters
+- [x] Add searchable list of formats
 - [ ] Add options for converters
-- [ ] Add more converters
 - [ ] 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.
+- [ ] Make errors logs visible from the web ui
+- [ ] Add more converters:
+  - [ ] [deark](https://github.com/jsummers/deark)
+  - [ ] LibreOffice
+  - [ ] [dvisvgm](https://github.com/mgieseki/dvisvgm)
 
 ## Contributors
 

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
   "formatter": {
     "enabled": true,
     "formatWithErrors": true,
@@ -9,6 +9,9 @@
     "lineWidth": 80,
     "attributePosition": "auto"
   },
+  "files": {
+    "ignore": ["**/node_modules/**", "**/pico.lime.min.css"]
+  },
   "organizeImports": { "enabled": true },
   "linter": {
     "enabled": true,

compose.yaml

@@ -8,5 +8,6 @@ services:
     environment:
       - ACCOUNT_REGISTRATION=true
       - JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234
+      - ALLOW_UNAUTHENTICATED=true
     ports:
       - 3000:3000

eslint.config.mjs

@@ -0,0 +1,36 @@
+import { fixupPluginRules } from "@eslint/compat";
+import tseslint from "typescript-eslint";
+import eslint from "@eslint/js";
+import deprecationPlugin from "eslint-plugin-deprecation";
+import eslintCommentsPlugin from "eslint-plugin-eslint-comments";
+import importPlugin from "eslint-plugin-import";
+import simpleImportSortPlugin from "eslint-plugin-simple-import-sort";
+
+export default tseslint.config(
+  {
+    plugins: {
+      "@typescript-eslint": tseslint.plugin,
+      deprecation: fixupPluginRules(deprecationPlugin),
+      "eslint-comments": eslintCommentsPlugin,
+      import: fixupPluginRules(importPlugin),
+      "simple-import-sort": simpleImportSortPlugin,
+    },
+  },
+  {
+    ignores: ["**/node_modules/**", "**/public/**"],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  ...tseslint.configs.stylisticTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: ["./tsconfig.json"],
+      },
+    },
+  },
+);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "convertx-frontend",
-  "version": "0.3.3",
+  "version": "0.5.0",
   "scripts": {
     "dev": "bun run --watch src/index.tsx",
     "hot": "bun run --hot src/index.tsx",
@@ -8,14 +8,15 @@
     "css": "cpy 'node_modules/@picocss/pico/css/pico.lime.min.css' 'src/public/' --flat",
     "lint": "run-p 'lint:*'",
     "lint:tsc": "tsc --noEmit",
-    "lint:knip": "knip"
+    "lint:knip": "knip",
+    "lint:biome": "biome lint --error-on-warnings ./src"
   },
   "dependencies": {
     "@elysiajs/cookie": "^0.8.0",
     "@elysiajs/html": "1.0.2",
-    "@elysiajs/jwt": "^1.1.0",
+    "@elysiajs/jwt": "^1.1.1",
     "@elysiajs/static": "1.0.3",
-    "elysia": "^1.1.4"
+    "elysia": "^1.1.12"
   },
   "module": "src/index.tsx",
   "type": "module",
@@ -23,26 +24,32 @@
     "start": "bun run src/index.tsx"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "1.9.2",
+    "@eslint/compat": "^1.1.1",
+    "@eslint/js": "^9.9.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@kitajs/ts-html-plugin": "^4.0.2",
     "@picocss/pico": "^2.0.6",
-    "@total-typescript/ts-reset": "^0.5.1",
+    "@total-typescript/ts-reset": "^0.6.1",
-    "@types/bun": "^1.1.6",
+    "@types/bun": "^1.1.8",
-    "@types/eslint": "^9.6.0",
+    "@types/eslint": "^9.6.1",
-    "@types/node": "^22.0.0",
+    "@types/node": "^22.5.4",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@typescript-eslint/parser": "^8.4.0",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.8.0",
+    "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-deprecation": "^3.0.0",
-    "eslint-plugin-isaacscript": "^3.12.2",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-isaacscript": "^4.0.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "knip": "^5.27.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "npm-run-all": "^4.1.5",
+    "knip": "^5.29.2",
+    "npm-run-all2": "^6.2.2",
     "prettier": "^3.3.3",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.4.0"
   },
   "trustedDependencies": [
     "@biomejs/biome"

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}

src/converters/main.ts

@@ -25,6 +25,11 @@ import {
   properties as propertiesLibjxl,
 } from "./libjxl";
 
+import {
+  convert as convertresvg,
+  properties as propertiesresvg,
+} from "./resvg";
+
 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
@@ -59,6 +64,10 @@ const properties: {
     properties: propertiesLibjxl,
     converter: convertLibjxl,
   },
+  resvg: {
+    properties: propertiesresvg,
+    converter: convertresvg,
+  },
   vips: {
     properties: propertiesImage,
     converter: convertImage,

src/converters/resvg.ts

@@ -0,0 +1,37 @@
+import { exec } from "node:child_process";
+
+export const properties = {
+  from: {
+    images: ["svg"],
+  },
+  to: {
+    images: ["png"],
+  },
+};
+
+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) => {
+    exec(`resvg "${filePath}" "${targetPath}"`, (error, stdout, stderr) => {
+      if (error) {
+        reject(`error: ${error}`);
+      }
+
+      if (stdout) {
+        console.log(`stdout: ${stdout}`);
+      }
+
+      if (stderr) {
+        console.error(`stderr: ${stderr}`);
+      }
+
+      resolve("success");
+    });
+  });
+}

src/converters/vips.ts

@@ -113,9 +113,15 @@ export function convert(
   //     .toFormat(convertTo)
   //     .toFile(targetPath);
   // }
+  let action = "copy";
+  if (fileType === "pdf") {
+    action = "pdfload";
+  }
 
   return new Promise((resolve, reject) => {
-    exec(`vips copy "${filePath}" "${targetPath}"`, (error, stdout, stderr) => {
+    exec(
+      `vips ${action} "${filePath}" "${targetPath}"`,
+      (error, stdout, stderr) => {
         if (error) {
           reject(`error: ${error}`);
         }
@@ -129,6 +135,7 @@ export function convert(
         }
 
         resolve("success");
-    });
+      },
+    );
   });
 }

src/helpers/printVersions.ts

@@ -73,6 +73,16 @@ if (process.env.NODE_ENV === "production") {
     }
   });
 
+  exec("resvg -V", (error, stdout) => {
+    if (error) {
+      console.error("resvg is not installed");
+    }
+
+    if (stdout) {
+      console.log(`resvg v${stdout.split("\n")[0]}`);
+    }
+  });
+
   exec("bun -v", (error, stdout) => {
     if (error) {
       console.error("Bun is not installed. wait what");

src/index.tsx

@@ -1,12 +1,12 @@
-import { Database } from "bun:sqlite";
-import { randomUUID } from "node:crypto";
-import { rmSync } from "node:fs";
-import { mkdir, unlink } from "node:fs/promises";
 import cookie from "@elysiajs/cookie";
 import { html } from "@elysiajs/html";
-import { jwt } from "@elysiajs/jwt";
+import { jwt, type JWTPayloadSpec } from "@elysiajs/jwt";
 import { staticPlugin } from "@elysiajs/static";
+import { Database } from "bun:sqlite";
 import { Elysia, t } from "elysia";
+import { randomInt, randomUUID } from "node:crypto";
+import { rmSync } from "node:fs";
+import { mkdir, unlink } from "node:fs/promises";
 import { BaseHtml } from "./components/base";
 import { Header } from "./components/header";
 import {
@@ -27,9 +27,15 @@ const uploadsDir = "./data/uploads/";
 const outputDir = "./data/output/";
 
 const ACCOUNT_REGISTRATION =
-  process.env.ACCOUNT_REGISTRATION === "true" || false;
+  process.env.ACCOUNT_REGISTRATION?.toLowerCase() === "true" || false;
 
-const HTTP_ALLOWED = process.env.HTTP_ALLOWED === "true" || false;
+const HTTP_ALLOWED =
+  process.env.HTTP_ALLOWED?.toLowerCase() === "true" || false;
+const ALLOW_UNAUTHENTICATED =
+  process.env.ALLOW_UNAUTHENTICATED?.toLowerCase() === "true" || false;
+const AUTO_DELETE_EVERY_N_HOURS = process.env.AUTO_DELETE_EVERY_N_HOURS
+  ? Number(process.env.AUTO_DELETE_EVERY_N_HOURS)
+  : 24;
 
 // fileNames: fileNames,
 // filesToConvert: fileNames.length,
@@ -115,7 +121,7 @@ const app = new Elysia({
       schema: t.Object({
         id: t.String(),
       }),
-      secret: process.env.JWT_SECRET || randomUUID(),
+      secret: process.env.JWT_SECRET ?? randomUUID(),
       exp: "7d",
     }),
   )
@@ -336,7 +342,7 @@ const app = new Elysia({
   .post(
     "/login",
     async function handler({ body, set, redirect, jwt, cookie: { auth } }) {
-      const existingUser = await db
+      const existingUser = db
         .query("SELECT * FROM users WHERE email = ?")
         .as(User)
         .get(body.email);
@@ -403,17 +409,19 @@ const app = new Elysia({
       return redirect("/setup", 302);
     }
 
-    if (!auth?.value) {
+    if (!auth?.value && !ALLOW_UNAUTHENTICATED) {
-      return redirect("/login", 302);
-    }
-    // validate jwt
-    const user = await jwt.verify(auth.value);
-    if (!user) {
       return redirect("/login", 302);
     }
 
+    // validate jwt
+    let user: ({ id: string } & JWTPayloadSpec) | false = false;
+    if (auth?.value) {
+      user = await jwt.verify(auth.value);
+
+      if (user !== false && user.id) {
+        if (Number.parseInt(user.id) < 2 ** 24 || !ALLOW_UNAUTHENTICATED) {
           // make sure user exists in db
-    const existingUser = await db
+          const existingUser = db
             .query("SELECT * FROM users WHERE id = ?")
             .as(User)
             .get(user.id);
@@ -424,6 +432,34 @@ const app = new Elysia({
             }
             return redirect("/login", 302);
           }
+        }
+      }
+    } else if (ALLOW_UNAUTHENTICATED) {
+      const newUserId = String(randomInt(2 ** 24, Number.MAX_SAFE_INTEGER));
+      const accessToken = await jwt.sign({
+        id: newUserId,
+      });
+
+      user = { id: newUserId };
+      if (!auth) {
+        return {
+          message: "No auth cookie, perhaps your browser is blocking cookies.",
+        };
+      }
+
+      // set cookie
+      auth.set({
+        value: accessToken,
+        httpOnly: true,
+        secure: !HTTP_ALLOWED,
+        maxAge: 60 * 60 * 24 * 1,
+        sameSite: "strict",
+      });
+    }
+
+    if (!user) {
+      return redirect("/login", 302);
+    }
 
     // create a new job
     db.query("INSERT INTO jobs (user_id, date_created) VALUES (?, ?)").run(
@@ -473,10 +509,87 @@ const app = new Elysia({
               ))}
             </select> */}
             </article>
-            <form method="post" action="/convert">
+            <form
+              method="post"
+              action="/convert"
+              style={{ position: "relative" }}>
               <input type="hidden" name="file_names" id="file_names" />
               <article>
-                <select name="convert_to" aria-label="Convert to" required>
+                <input
+                  type="search"
+                  name="convert_to_search"
+                  placeholder="Search for conversions"
+                  autocomplete="off"
+                />
+
+                <div class="select_container">
+                  <article
+                    class="convert_to_popup"
+                    hidden
+                    style={{
+                      flexDirection: "column",
+                      display: "flex",
+                      zIndex: 2,
+                      position: "absolute",
+                      maxHeight: "50vh",
+                      width: "90vw",
+                      overflowY: "scroll",
+                      margin: "0px",
+                      overflowX: "hidden",
+                    }}>
+                    {Object.entries(getAllTargets()).map(
+                      ([converter, targets]) => (
+                        // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
+                        <article
+                          class="convert_to_group"
+                          data-converter={converter}
+                          style={{
+                            borderColor: "gray",
+                            padding: "2px",
+                          }}
+                        >
+                          <header
+                            style={{ fontSize: "20px", fontWeight: "bold" }}
+                            safe>
+                            {converter}
+                          </header>
+
+                          <ul
+                            class="convert_to_target"
+                            style={{
+                              display: "flex",
+                              flexDirection: "row",
+                              gap: "5px",
+                              flexWrap: "wrap",
+                            }}>
+                            {targets.map((target) => (
+                              // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
+                              <button
+                                // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
+                                tabindex={0}
+                                class="target"
+                                data-value={`${target},${converter}`}
+                                data-target={target}
+                                data-converter={converter}
+                                style={{ fontSize: "15px", padding: "5px" }}
+                                type="button"
+                                safe
+                              >
+                                {target}
+                              </button>
+                            ))}
+                          </ul>
+                        </article>
+                      ),
+                    )}
+                  </article>
+
+                  {/* Hidden element which determines the format to convert the file too and the converter to use */}
+                  <select
+                    name="convert_to"
+                    aria-label="Convert to"
+                    required
+                    hidden>
                     <option selected disabled value="">
                       Convert to
                     </option>
@@ -494,6 +607,7 @@ const app = new Elysia({
                       ),
                     )}
                   </select>
+                </div>
               </article>
               <input type="submit" value="Convert" />
             </form>
@@ -507,7 +621,67 @@ const app = new Elysia({
     "/conversions",
     ({ body }) => {
       return (
-        <select name="convert_to" aria-label="Convert to" required>
+        <>
+          <article
+            class="convert_to_popup"
+            hidden
+            style={{
+              flexDirection: "column",
+              display: "flex",
+              zIndex: 2,
+              position: "absolute",
+              maxHeight: "50vh",
+              width: "90vw",
+              overflowY: "scroll",
+              margin: "0px",
+              overflowX: "hidden",
+            }}>
+            {Object.entries(getPossibleTargets(body.fileType)).map(
+              ([converter, targets]) => (
+                // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
+                <article
+                  class="convert_to_group"
+                  data-converter={converter}
+                  style={{
+                    borderColor: "gray",
+                    padding: "2px",
+                  }}
+                >
+                  <header style={{ fontSize: "20px", fontWeight: "bold" }} safe>
+                    {converter}
+                  </header>
+
+                  <ul
+                    class="convert_to_target"
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      gap: "5px",
+                      flexWrap: "wrap",
+                    }}>
+                    {targets.map((target) => (
+                      // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
+                      <button
+                        // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
+                        tabindex={0}
+                        class="target"
+                        data-value={`${target},${converter}`}
+                        data-target={target}
+                        data-converter={converter}
+                        style={{ fontSize: "15px", padding: "5px" }}
+                        type="button"
+                        safe
+                      >
+                        {target}
+                      </button>
+                    ))}
+                  </ul>
+                </article>
+              ),
+            )}
+          </article>
+
+          <select name="convert_to" aria-label="Convert to" required hidden>
             <option selected disabled value="">
               Convert to
             </option>
@@ -525,6 +699,7 @@ const app = new Elysia({
               ),
             )}
           </select>
+        </>
       );
     },
     { body: t.Object({ fileType: t.String() }) },
@@ -561,13 +736,8 @@ const app = new Elysia({
             await Bun.write(`${userUploadsDir}${file.name}`, file);
           }
         } else {
-          await Bun.write(
+          // biome-ignore lint/complexity/useLiteralKeys: weird error
-            `${userUploadsDir}${
+          await Bun.write(`${userUploadsDir}${body.file["name"]}`, body.file);
-              // biome-ignore lint/complexity/useLiteralKeys: ts bug
-              body.file["name"]
-            }`,
-            body.file,
-          );
         }
       }
 
@@ -623,7 +793,7 @@ const app = new Elysia({
         return redirect("/", 302);
       }
 
-      const existingJob = await db
+      const existingJob = db
         .query("SELECT * FROM jobs WHERE id = ? AND user_id = ?")
         .as(Jobs)
         .get(jobId.value, user.id);
@@ -645,9 +815,7 @@ const app = new Elysia({
         );
       }
 
-      const convertTo = normalizeFiletype(
+      const convertTo = normalizeFiletype(body.convert_to.split(",")[0] ?? "");
-        body.convert_to.split(",")[0] as string,
-      );
       const converterName = body.convert_to.split(",")[1];
       const fileNames = JSON.parse(body.file_names) as string[];
 
@@ -667,10 +835,13 @@ const app = new Elysia({
       Promise.all(
         fileNames.map(async (fileName) => {
           const filePath = `${userUploadsDir}${fileName}`;
-          const fileTypeOrig = fileName.split(".").pop() as string;
+          const fileTypeOrig = fileName.split(".").pop() ?? "";
           const fileType = normalizeFiletype(fileTypeOrig);
           const newFileExt = normalizeOutputFiletype(convertTo);
-          const newFileName = fileName.replace(fileTypeOrig, newFileExt);
+          const newFileName = fileName.replace(
+            new RegExp(`${fileTypeOrig}(?!.*${fileTypeOrig})`),
+            newFileExt,
+          );
           const targetPath = `${userOutputDir}${newFileName}`;
 
           const result = await mainConverter(
@@ -793,7 +964,7 @@ const app = new Elysia({
         return redirect("/login", 302);
       }
 
-      const job = await db
+      const job = db
         .query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
         .as(Jobs)
         .get(user.id, params.jobId);
@@ -892,7 +1063,7 @@ const app = new Elysia({
         return redirect("/login", 302);
       }
 
-      const job = await db
+      const job = db
         .query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
         .as(Jobs)
         .get(user.id, params.jobId);
@@ -1077,14 +1248,14 @@ const app = new Elysia({
         return redirect("/results", 302);
       }
 
-      const userId = decodeURIComponent(params.userId);
+      // const userId = decodeURIComponent(params.userId);
-      const jobId = decodeURIComponent(params.jobId);
+      // const jobId = decodeURIComponent(params.jobId);
-      const outputPath = `${outputDir}${userId}/${jobId}/`;
+      // const outputPath = `${outputDir}${userId}/${jobId}/`;
 
       // return Bun.zip(outputPath);
     },
   )
-  .onError(({ code, error, request }) => {
+  .onError(({ error }) => {
     // log.error(` ${request.method} ${request.url}`, code, error);
     console.error(error);
   })
@@ -1095,12 +1266,14 @@ console.log(
 );
 
 const clearJobs = () => {
-  // clear all jobs older than 24 hours
-  // get all files older than 24 hours
   const jobs = db
     .query("SELECT * FROM jobs WHERE date_created < ?")
     .as(Jobs)
-    .all(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString());
+    .all(
+      new Date(
+        Date.now() - AUTO_DELETE_EVERY_N_HOURS * 60 * 60 * 1000,
+      ).toISOString(),
+    );
 
   for (const job of jobs) {
     // delete the directories
@@ -1111,7 +1284,9 @@ const clearJobs = () => {
     db.query("DELETE FROM jobs WHERE id = ?").run(job.id);
   }
 
-  // run every 24 hours
+  setTimeout(clearJobs, AUTO_DELETE_EVERY_N_HOURS * 60 * 60 * 1000);
-  setTimeout(clearJobs, 24 * 60 * 60 * 1000);
 };
-clearJobs();
+
+if (AUTO_DELETE_EVERY_N_HOURS > 0) {
+  clearJobs();
+}

src/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

src/public/script.js

@@ -3,7 +3,73 @@ const fileInput = document.querySelector('input[type="file"]');
 const fileNames = [];
 let fileType;
 
-const selectContainer = document.querySelector("form > article");
+const selectContainer = document.querySelector("form .select_container");
+
+const updateSearchBar = () => {
+  const convertToInput = document.querySelector(
+    "input[name='convert_to_search']",
+  );
+  const convertToPopup = document.querySelector(".convert_to_popup");
+  const convertToGroupElements = document.querySelectorAll(".convert_to_group");
+  const convertToGroups = {};
+  const convertToElement = document.querySelector("select[name='convert_to']");
+
+  const showMatching = (search) => {
+    for (const [targets, groupElement] of Object.values(convertToGroups)) {
+      let matchingTargetsFound = 0;
+      for (const target of targets) {
+        if (target.dataset.target.includes(search)) {
+          matchingTargetsFound++;
+          target.hidden = false;
+        } else {
+          target.hidden = true;
+        }
+      }
+
+      if (matchingTargetsFound === 0) {
+        groupElement.hidden = true;
+      } else {
+        groupElement.hidden = false;
+      }
+    }
+  };
+
+  for (const groupElement of convertToGroupElements) {
+    const groupName = groupElement.dataset.converter;
+
+    const targetElements = groupElement.querySelectorAll(".target");
+    const targets = Array.from(targetElements);
+
+    for (const target of targets) {
+      target.onmousedown = () => {
+        convertToElement.value = target.dataset.value;
+        convertToInput.value = `${target.dataset.target} using ${target.dataset.converter}`;
+        showMatching("");
+      };
+    }
+
+    convertToGroups[groupName] = [targets, groupElement];
+  }
+
+  convertToInput.addEventListener("input", (e) => {
+    showMatching(e.target.value.toLowerCase());
+  });
+
+  convertToInput.addEventListener("blur", (e) => {
+    // Keep the popup open even when clicking on a target button
+    // for a split second to allow the click to go through
+    if (e?.relatedTarget?.classList?.contains("target")) {
+      convertToPopup.hidden = true;
+      return;
+    }
+
+    convertToPopup.hidden = true;
+  });
+
+  convertToInput.addEventListener("focus", () => {
+    convertToPopup.hidden = false;
+  });
+};
 
 // const convertFromSelect = document.querySelector("select[name='convert_from']");
 
@@ -49,6 +115,7 @@ fileInput.addEventListener("change", (e) => {
         .then((res) => res.text())
         .then((html) => {
           selectContainer.innerHTML = html;
+          updateSearchBar();
         })
         .catch((err) => console.log(err));
     }
@@ -123,3 +190,5 @@ formConvert.addEventListener("submit", (e) => {
   const hiddenInput = document.querySelector("input[name='file_names']");
   hiddenInput.value = JSON.stringify(fileNames);
 });
+
+updateSearchBar();

src/public/style.css

@@ -4,7 +4,7 @@ div.icon {
 }
 
 button[type="submit"] {
-  width: 50%
+  width: 50%;
 }
 
 div.center {
@@ -13,3 +13,47 @@ div.center {
   justify-content: center;
   align-items: center;
 }
+
+@media (max-width: 99999999999px) {
+  .convert_to_popup {
+    width: 50vw !important;
+    height: 50vh;
+  }
+}
+
+@media (max-width: 850px) {
+  .convert_to_popup {
+    width: 60vw !important;
+    height: 60vh;
+  }
+}
+
+@media (max-width: 575px) {
+  .convert_to_popup {
+    width: 80vw !important;
+    height: 75vh;
+  }
+}
+
+@media (max-height: 1000px) {
+  .convert_to_popup {
+    height: 40vh;
+  }
+}
+@media (max-height: 650px) {
+  .convert_to_popup {
+    height: 30vh;
+  }
+}
+
+@media (max-height: 500px) {
+  .convert_to_popup {
+    height: 25vh;
+  }
+}
+
+@media (max-height: 400px) {
+  .convert_to_popup {
+    height: 15vh;
+  }
+}

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "lib": ["ESNext"],
-    "module": "esnext",
+    "module": "ESNext",
-    "target": "esnext",
+    "target": "ES2021",
     "moduleResolution": "bundler",
     "moduleDetection": "force",
     "allowImportingTsExtensions": true,