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

issue #163

.eslintrc.cjs

@@ -1,55 +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",
-      "./cli/tsconfig.eslint.json", // separate eslint config for the CLI since we want to lint and typecheck differently due to template files
-      "./upgrade/tsconfig.json",
-      "./www/tsconfig.json",
-    ],
-  },
-  overrides: [
-    // Template files don't have reliable type information
-    {
-      files: ["./cli/template/**/*.{ts,tsx}"],
-      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",
-
-    // This rule doesn't seem to be working properly
-    "@typescript-eslint/prefer-nullish-coalescing": "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:
-  # 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"

.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@v1
-      - 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

.github/workflows/docker-publish.yml

@@ -58,9 +58,10 @@ jobs:
       # https://github.com/docker/build-push-action
       - name: Build and push Docker image
         id: build-and-push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
+          platforms: linux/amd64,linux/arm64
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.github/workflows/release-please.yml

@@ -19,6 +19,7 @@ jobs:
           # (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 }}

.gitignore

@@ -47,3 +47,5 @@ package-lock.json
 /db
 /data
 /Bruno
+/tsconfig.tsbuildinfo
+/src/public/generated.css

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

CHANGELOG.md

@@ -1,5 +1,140 @@
 # Changelog
 
+## [0.8.1](https://github.com/C4illin/ConvertX/compare/v0.8.0...v0.8.1) (2024-10-05)
+
+
+### Bug Fixes
+
+* disable convert button when input is empty ([78844d7](https://github.com/C4illin/ConvertX/commit/78844d7bd55990789ed07c81e49043e688cbe656)), closes [#151](https://github.com/C4illin/ConvertX/issues/151)
+* resize to fit for ico ([b4e53db](https://github.com/C4illin/ConvertX/commit/b4e53dbb8e70b3a95b44e5b756759d16117a87e1)), closes [#157](https://github.com/C4illin/ConvertX/issues/157)
+* treat jfif as jpeg ([339b79f](https://github.com/C4illin/ConvertX/commit/339b79f786131deb93f0d5683e03178fdcab1ef5)), closes [#163](https://github.com/C4illin/ConvertX/issues/163)
+
+## [0.8.0](https://github.com/C4illin/ConvertX/compare/v0.7.0...v0.8.0) (2024-09-30)
+
+
+### Features
+
+* add light theme, fixes [#156](https://github.com/C4illin/ConvertX/issues/156) ([72636c5](https://github.com/C4illin/ConvertX/commit/72636c5059ebf09c8fece2e268293650b2f8ccf6))
+
+
+### Bug Fixes
+
+* add support for usd for assimp, [#144](https://github.com/C4illin/ConvertX/issues/144) ([2057167](https://github.com/C4illin/ConvertX/commit/20571675766209ad1251f07e687d29a6791afc8b))
+* cleanup formats and add opus, fixes [#159](https://github.com/C4illin/ConvertX/issues/159) ([ae1dfaf](https://github.com/C4illin/ConvertX/commit/ae1dfafc9d9116a57b08c2f7fc326990e00824b0))
+* support .awb and clean up, fixes [#153](https://github.com/C4illin/ConvertX/issues/153), [#92](https://github.com/C4illin/ConvertX/issues/92) ([1c9e67f](https://github.com/C4illin/ConvertX/commit/1c9e67fc3201e0e5dee91e8981adf34daaabf33a))
+
+## [0.7.0](https://github.com/C4illin/ConvertX/compare/v0.6.0...v0.7.0) (2024-09-26)
+
+
+### Features
+
+* Add support for 3d assets through assimp converter ([63a4328](https://github.com/C4illin/ConvertX/commit/63a4328d4a1e01df3e0ec4a877bad8c8ffe71129))
+
+
+### Bug Fixes
+
+* wrong layout on search with few options ([8817389](https://github.com/C4illin/ConvertX/commit/88173891ba2d69da46eda46f3f598a9b54f26f96))
+
+## [0.6.0](https://github.com/C4illin/ConvertX/compare/v0.5.0...v0.6.0) (2024-09-25)
+
+
+### Features
+
+* ui remake with tailwind ([22f823c](https://github.com/C4illin/ConvertX/commit/22f823c535b20382981f86a13616b830a1f3392f))
+
+
+### Bug Fixes
+
+* rename css file to force update cache, fixes [#141](https://github.com/C4illin/ConvertX/issues/141) ([47139a5](https://github.com/C4illin/ConvertX/commit/47139a550bd3d847da288c61bf8f88953b79c673))
+
+## [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)
+
+
+### Bug Fixes
+
+* downgrade @elysiajs/html dependency to version 1.0.2 ([c714ade](https://github.com/C4illin/ConvertX/commit/c714ade3e23865ba6cfaf76c9e7259df1cda222c))
+
+## [0.3.2](https://github.com/C4illin/ConvertX/compare/v0.3.1...v0.3.2) (2024-07-09)
+
+
+### Bug Fixes
+
+* increase max request body to support large uploads ([3ae2db5](https://github.com/C4illin/ConvertX/commit/3ae2db5d9b36fe3dcd4372ddcd32aa573ea59aa6)), closes [#64](https://github.com/C4illin/ConvertX/issues/64)
+
+## [0.3.1](https://github.com/C4illin/ConvertX/compare/v0.3.0...v0.3.1) (2024-06-27)
+
+
+### Bug Fixes
+
+* release releases ([4d4c13a](https://github.com/C4illin/ConvertX/commit/4d4c13a8d85ec7c9209ad41cdbea7d4380b0edbf))
+
+## [0.3.0](https://github.com/C4illin/ConvertX/compare/v0.2.0...v0.3.0) (2024-06-27)
+
+
+### Features
+
+* add version number to log ([4dcb796](https://github.com/C4illin/ConvertX/commit/4dcb796e1bd27badc078d0638076cd9f1e81c4a4)), closes [#44](https://github.com/C4illin/ConvertX/issues/44)
+* change to xelatex ([fae2ba9](https://github.com/C4illin/ConvertX/commit/fae2ba9c54461dccdccd1bfb5e76398540d11d0b))
+* print version of installed converters to log ([801cf28](https://github.com/C4illin/ConvertX/commit/801cf28d1e5edac9353b0b16be75a4fb48470b8a))
+
+## [0.2.0](https://github.com/C4illin/ConvertX/compare/v0.1.2...v0.2.0) (2024-06-20)
+
+
+### Features
+
+* add libjxl for jpegxl conversion ([ff680cb](https://github.com/C4illin/ConvertX/commit/ff680cb29534a25c3148a90fd064bb86c71fb482))
+* change from debian to alpine ([1316957](https://github.com/C4illin/ConvertX/commit/13169574f0134ae236f8d41287bb73930b575e82)), closes [#34](https://github.com/C4illin/ConvertX/issues/34)
+
+## [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)
 
 

Dockerfile

@@ -1,4 +1,5 @@
-FROM oven/bun:1-debian 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,16 +14,22 @@ 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
+FROM base AS prerelease
-# COPY --from=install /temp/dev/node_modules node_modules
+COPY --from=install /temp/dev/node_modules node_modules
-# COPY . .
+COPY . .
 
 # # [optional] tests & build
-# ENV NODE_ENV=production
+ENV NODE_ENV=production
 # RUN bun test
-# RUN bun run build
+RUN bun run build
 
 # copy production dependencies and source code into final image
 FROM base AS release
@@ -31,21 +38,30 @@ LABEL description="ConvertX: self-hosted online file converter supporting 700+ f
 LABEL repo="https://github.com/C4illin/ConvertX"
 
 # install additional dependencies
-RUN rm -rf /var/lib/apt/lists/partial && apt-get update -o Acquire::CompressionTypes::Order::=gz \
+RUN apk --no-cache add  \
-  && apt-get install -y \
   pandoc \
-  texlive-latex-recommended \
+  texlive \
-  texlive-fonts-recommended \
+  texlive-xetex \
-  texlive-latex-extra \
+  texmf-dist-latexextra \
   ffmpeg \
   graphicsmagick \
   ghostscript \
-  libvips-tools
+  vips-tools \
+  vips-poppler \
+  vips-jxl \
+  libjxl-tools \
+  assimp
+
+# 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/public/generated.css /app/src/public/
 # COPY --from=prerelease /app/src/index.tsx /app/src/
 # COPY --from=prerelease /app/package.json .
 COPY . .
 
 EXPOSE 3000/tcp
+ENV NODE_ENV=production
 ENTRYPOINT [ "bun", "run", "./src/index.tsx" ]

README.md

@@ -1,49 +1,64 @@
 ![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 over a thousand different formats. Written with TypeScript, Bun and Elysia.
 
 ## Features
 
 - Convert files to different formats
+- Process multiple files at once
 - Password protection
 - Multiple accounts
 
 ## Converters supported
 
-| Converter      | Use case      | Converts from | Converts to |
+| Converter                                                                    | Use case      | Converts from | Converts to |
-|----------------|---------------|---------------|-------------|
+|------------------------------------------------------------------------------|---------------|---------------|-------------|
-| Vips           | Images (fast) | 45            | 23          |
+| [libjxl](https://github.com/libjxl/libjxl)                                   | JPEG XL       | 11            | 11          |
-| PDFLaTeX       | Documents     | 1             | 1           |
+| [resvg](https://github.com/RazrFalcon/resvg)                                 | SVG           | 1             | 1           |
-| Pandoc         | Documents     | 43            | 65          |
+| [Vips](https://github.com/libvips/libvips)                                   | Images        | 45            | 23          |
-| GraphicsMagick | Images        | 166           | 133         |
+| [Assimp](https://github.com/assimp/assimp)                                   | 3D Assets     | 70            | 24          |
-| FFmpeg         | Video         | ~473          | ~280        |
+| [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        |
 
 <!-- many ffmpeg fileformats are duplicates -->
 
+Any missing converter? Open an issue or pull request!
+
 ## Deployment
 
 ```yml
 # docker-compose.yml
 services:
   convertx: 
-    image: ghcr.io/c4illin/convertx:main
+    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.
 
@@ -53,13 +68,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,7 +9,15 @@
     "lineWidth": 80,
     "attributePosition": "auto"
   },
-  "organizeImports": { "enabled": true },
+  "files": {
+    "ignore": [
+      "**/node_modules/**",
+      "**/pico.lime.min.css"
+    ]
+  },
+  "organizeImports": {
+    "enabled": true
+  },
   "linter": {
     "enabled": true,
     "rules": {
@@ -22,7 +30,11 @@
         "useLiteralKeys": "error",
         "useOptionalChain": "error"
       },
-      "correctness": { "noPrecisionLoss": "error", "noUnusedVariables": "off" },
+      "correctness": {
+        "noPrecisionLoss": "error",
+        "noUnusedVariables": "off",
+        "useJsxKeyInIterable": "off"
+      },
       "style": {
         "noInferrableTypes": "error",
         "noNamespace": "error",
@@ -42,6 +54,9 @@
         "noUnsafeDeclarationMerging": "error",
         "useAwait": "error",
         "useNamespaceKeyword": "error"
+      },
+      "nursery": {
+        "useSortedClasses": "error"
       }
     }
   },

compose.yaml

@@ -2,10 +2,14 @@ services:
   convertx:
     build:
       context: .
+      # dockerfile: Debian.Dockerfile
     volumes:
       - ./data:/app/data
-    environment:
+    environment: # Defaults are listed below. All are optional.
-      - ACCOUNT_REGISTRATION=true
+      - ACCOUNT_REGISTRATION=true # 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
+      - JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234 # will use randomUUID() by default
+      - HTTP_ALLOWED=true # setting this to true is unsafe, only set this to true locally
+      - ALLOW_UNAUTHENTICATED=true # allows anyone to use the service without logging in, only set this to true locally
+      - AUTO_DELETE_EVERY_N_HOURS=1 # checks every n hours for files older then n hours and deletes them, set to 0 to disable
     ports:
       - 3000:3000

eslint.config.js

@@ -0,0 +1,59 @@
+import { fixupPluginRules } from "@eslint/compat";
+import eslint from "@eslint/js";
+import deprecationPlugin from "eslint-plugin-deprecation";
+import eslintPluginReadableTailwind from "eslint-plugin-readable-tailwind";
+import simpleImportSortPlugin from "eslint-plugin-simple-import-sort";
+import tailwind from "eslint-plugin-tailwindcss";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...tailwind.configs["flat/recommended"],
+  {
+    plugins: {
+      deprecation: fixupPluginRules(deprecationPlugin),
+      "simple-import-sort": simpleImportSortPlugin,
+      "readable-tailwind": eslintPluginReadableTailwind,
+    },
+    ignores: ["**/node_modules/**"],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: ["./tsconfig.json"],
+      },
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+    },
+    files: ["**/*.{js,mjs,cjs,tsx,ts}"],
+    rules: {
+      ...eslintPluginReadableTailwind.configs.warning.rules,
+      "tailwindcss/classnames-order": "off",
+      "readable-tailwind/multiline": [
+        "warn",
+        {
+          group: "newLine",
+          printWidth: 100,
+        },
+      ],
+      "tailwindcss/no-custom-classname": [
+        "warn",
+        {
+          whitelist: [
+            "select_container",
+            "convert_to_popup",
+            "convert_to_group",
+            "target",
+            "convert_to_target",
+          ],
+        },
+      ],
+    },
+  },
+);

package.json

@@ -1,39 +1,61 @@
 {
   "name": "convertx-frontend",
-  "version": "0.1.0",
+  "version": "0.8.1",
   "scripts": {
     "dev": "bun run --watch src/index.tsx",
     "hot": "bun run --hot src/index.tsx",
-    "format": "biome format --write ./src",
+    "format": "eslint --fix .",
-    "css": "cpy 'node_modules/@picocss/pico/css/pico.lime.min.css' 'src/public/' --flat"
+    "build": "postcss ./src/main.css -o ./src/public/generated.css",
+    "lint": "run-p 'lint:*'",
+    "lint:tsc": "tsc --noEmit",
+    "lint:knip": "knip",
+    "lint:eslint": "eslint ."
   },
   "dependencies": {
     "@elysiajs/cookie": "^0.8.0",
-    "@elysiajs/html": "^1.0.2",
+    "@elysiajs/html": "1.0.2",
-    "@elysiajs/jwt": "^1.0.2",
+    "@elysiajs/jwt": "^1.1.1",
-    "@elysiajs/static": "^1.0.3",
+    "@elysiajs/static": "1.0.3",
-    "elysia": "^1.0.22"
+    "elysia": "^1.1.17"
   },
   "module": "src/index.tsx",
+  "type": "module",
   "bun-create": {
     "start": "bun run src/index.tsx"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.7.3",
+    "@eslint/compat": "^1.1.1",
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+    "@eslint/js": "^9.12.0",
-    "@kitajs/ts-html-plugin": "^4.0.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-    "@picocss/pico": "^2.0.6",
+    "@kitajs/ts-html-plugin": "^4.1.0",
-    "@total-typescript/ts-reset": "^0.5.1",
+    "@total-typescript/ts-reset": "^0.6.1",
-    "@types/bun": "^1.1.3",
+    "@types/bun": "^1.1.10",
-    "@types/eslint": "^8.56.10",
+    "@types/eslint": "^9.6.1",
-    "@types/node": "^20.12.13",
+    "@types/eslint-plugin-tailwindcss": "^3.17.0",
-    "@types/ws": "^8.5.10",
+    "@types/eslint__js": "^8.42.3",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@types/node": "^22.7.4",
-    "@typescript-eslint/parser": "^7.11.0",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
-    "cpy-cli": "^5.0.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
+    "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-deprecation": "^3.0.0",
-    "prettier": "^3.2.5",
+    "eslint-plugin-isaacscript": "^4.0.0",
-    "typescript": "^5.4.5"
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-readable-tailwind": "^1.8.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-tailwindcss": "^3.17.4",
+    "globals": "^15.9.0",
+    "knip": "^5.30.6",
+    "npm-run-all2": "^6.2.3",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
+    "postcss-lightningcss": "^1.0.1",
+    "prettier": "^3.3.3",
+    "tailwind-scrollbar": "^3.1.0",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.8.0"
   }
 }

postcss.config.cjs

@@ -0,0 +1,9 @@
+ 
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+     
+    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
+  }
+}

renovate.json

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

src/components/base.tsx

@@ -1,11 +1,13 @@
-export const BaseHtml = ({ children, title = "ConvertX" }) => (
+export const BaseHtml = ({
+  children,
+  title = "ConvertX",
+}: { children: JSX.Element; title?: string }) => (
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title safe>{title}</title>
-      <link rel="stylesheet" href="/pico.lime.min.css" />
+      <link rel="stylesheet" href="/generated.css" />
-      <link rel="stylesheet" href="/style.css" />
       <link
         rel="apple-touch-icon"
         sizes="180x180"
@@ -25,6 +27,6 @@ export const BaseHtml = ({ children, title = "ConvertX" }) => (
       />
       <link rel="manifest" href="/site.webmanifest" />
     </head>
-    <body>{children}</body>
+    <body class="w-full bg-neutral-900 text-neutral-200">{children}</body>
   </html>
 );

src/components/header.tsx

@@ -5,44 +5,65 @@ export const Header = ({
   let rightNav: JSX.Element;
   if (loggedIn) {
     rightNav = (
-      <ul>
+      <ul class="flex gap-4">
         <li>
-          <a href="/history">History</a>
+          <a
+            class={`
+              text-accent-600 transition-all
+              hover:text-accent-500 hover:underline
+            `}
+            href="/history">
+            History
+          </a>
         </li>
         <li>
-          <a href="/logoff">Logout</a>
+          <a
+            class={`
+              text-accent-600 transition-all
+              hover:text-accent-500 hover:underline
+            `}
+            href="/logoff">
+            Logout
+          </a>
         </li>
       </ul>
     );
   } else {
     rightNav = (
-      <ul>
+      <ul class="flex gap-4">
         <li>
-          <a href="/login">Login</a>
+          <a
+            class={`
+              text-accent-600 transition-all
+              hover:text-accent-500 hover:underline
+            `}
+            href="/login">
+            Login
+          </a>
         </li>
-        {accountRegistration && (
+        {accountRegistration ? (
           <li>
-            <a href="/register">Register</a>
+            <a
+              class={`
+                text-accent-600 transition-all
+                hover:text-accent-500 hover:underline
+              `}
+              href="/register">
+              Register
+            </a>
           </li>
-        )}
+        ) : null}
       </ul>
     );
   }
 
   return (
-    <header className="container">
+    <header class="w-full p-4">
-      <nav>
+      <nav class="mx-auto flex max-w-4xl justify-between rounded bg-neutral-900 p-4">
         <ul>
           <li>
             <strong>
-              <a
+              <a href="/">ConvertX</a>
-                href="/"
-                style={{
-                  textDecoration: "none",
-                  color: "inherit",
-                }}>
-                ConvertX
-              </a>
             </strong>
           </li>
         </ul>

src/converters/assimp.ts

@@ -0,0 +1,143 @@
+import { exec } from "node:child_process";
+
+// This could be done dynamically by running `ffmpeg -formats` and parsing the output
+export const properties = {
+  from: {
+    muxer: [
+      "3d",
+      "3ds",
+      "3mf",
+      "ac",
+      "ac3d",
+      "acc",
+      "amf",
+      "ase",
+      "ask",
+      "assbin",
+      "b3d",
+      "blend",
+      "bsp",
+      "bvh",
+      "cob",
+      "csm",
+      "dae",
+      "dxf",
+      "enff",
+      "fbx",
+      "glb",
+      "gltf",
+      "hmp",
+      "ifc",
+      "ifczip",
+      "iqm",
+      "irr",
+      "irrmesh",
+      "lwo",
+      "lws",
+      "lxo",
+      "md2",
+      "md3",
+      "md5anim",
+      "md5camera",
+      "md5mesh",
+      "mdc",
+      "mdl",
+      "mesh.xml",
+      "mesh",
+      "mot",
+      "ms3d",
+      "ndo",
+      "nff",
+      "obj",
+      "off",
+      "ogex",
+      "pk3",
+      "ply",
+      "pmx",
+      "prj",
+      "q3o",
+      "q3s",
+      "raw",
+      "scn",
+      "sib",
+      "smd",
+      "step",
+      "stl",
+      "stp",
+      "ter",
+      "uc",
+      "usd",
+      "usda",
+      "usdc",
+      "usdz",
+      "vta",
+      "x",
+      "x3d",
+      "x3db",
+      "xgl",
+      "xml",
+      "zae",
+      "zgl",
+    ],
+  },
+  to: {
+    muxer: [
+      "3ds",
+      "3mf",
+      "assbin",
+      "assjson",
+      "assxml",
+      "collada",
+      "dae",
+      "fbx",
+      "fbxa",
+      "glb",
+      "glb2",
+      "gltf",
+      "gltf2",
+      "m3d",
+      "m3da",
+      "obj",
+      "objnomtl",
+      "pbrt",
+      "ply",
+      "plyb",
+      "stl",
+      "stlb",
+      "stp",
+      "x",
+      "x3d",
+    ],
+  },
+};
+
+export async function convert(
+  filePath: string,
+  fileType: string,
+  convertTo: string,
+  targetPath: string,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: unknown,
+): Promise<string> {
+  // let command = "ffmpeg";
+
+  const command = `assimp export "${filePath}" "${targetPath}"`;
+
+  return new Promise((resolve, reject) => {
+    exec(command, (error, stdout, stderr) => {
+      if (error) {
+        reject(`error: ${error}`);
+      }
+
+      if (stdout) {
+        console.log(`stdout: ${stdout}`);
+      }
+
+      if (stderr) {
+        console.error(`stderr: ${stderr}`);
+      }
+
+      resolve("Done");
+    });
+  });
+}

src/converters/ffmpeg.ts

@@ -6,6 +6,7 @@ export const properties = {
     muxer: [
       "264",
       "265",
+      "266",
       "302",
       "3dostr",
       "3g2",
@@ -18,6 +19,7 @@ export const properties = {
       "aac",
       "aax",
       "ac3",
+      "ac4",
       "ace",
       "acm",
       "act",
@@ -48,7 +50,6 @@ export const properties = {
       "apng",
       "aptx",
       "aptxhd",
-      "aptx_hd",
       "aqt",
       "aqtitle",
       "argo_asf",
@@ -63,10 +64,12 @@ export const properties = {
       "av1",
       "avc",
       "avi",
+      "avif",
       "avr",
       "avs",
       "avs2",
       "avs3",
+      "awb",
       "bcstm",
       "bethsoftvid",
       "bfi",
@@ -75,8 +78,10 @@ export const properties = {
       "bink",
       "binka",
       "bit",
-      "bmp_pipe",
+      "bitpacked",
       "bmv",
+      "bmp",
+      "bonk",
       "boa",
       "brender_pix",
       "brstm",
@@ -93,7 +98,7 @@ export const properties = {
       "codec2",
       "codec2raw",
       "concat",
-      "cri_pipe",
+      "cri",
       "dash",
       "dat",
       "data",
@@ -101,8 +106,9 @@ export const properties = {
       "dav",
       "dbm",
       "dcstr",
-      "dds_pipe",
+      "dds",
       "derf",
+      "dfpwm",
       "dfa",
       "dhav",
       "dif",
@@ -131,6 +137,8 @@ export const properties = {
       "exr_pipe",
       "f32be",
       "f32le",
+      "ec3",
+      "evc",
       "f4v",
       "f64be",
       "f64le",
@@ -157,13 +165,13 @@ export const properties = {
       "gdv",
       "genh",
       "gif",
-      "gif_pipe",
       "gsm",
       "gxf",
       "h261",
       "h263",
       "h264",
       "h265",
+      "h266",
       "h26l",
       "hca",
       "hcom",
@@ -180,7 +188,6 @@ export const properties = {
       "ifv",
       "ilbc",
       "image2",
-      "image2pipe",
       "imf",
       "imx",
       "ingenient",
@@ -197,21 +204,17 @@ export const properties = {
       "ivr",
       "j2b",
       "j2k",
-      "j2k_pipe",
       "jack",
       "jacosub",
-      "jpegls_pipe",
-      "jpeg_pipe",
       "jv",
+      "jpegls",
+      "jpeg",
+      "jxl",
       "kmsgrab",
       "kux",
       "kvag",
       "lavfi",
-      "libcdio",
+      "laf",
-      "libdc1394",
-      "libgme",
-      "libopenmpt",
-      "live_flv",
       "lmlm4",
       "loas",
       "lrc",
@@ -224,16 +227,13 @@ export const properties = {
       "m4b",
       "m4v",
       "mac",
-      "matroska",
       "mca",
       "mcc",
       "mdl",
       "med",
-      "mgsts",
       "microdvd",
       "mj2",
       "mjpeg",
-      "mjpeg_2000",
       "mjpg",
       "mk3d",
       "mka",
@@ -257,9 +257,7 @@ export const properties = {
       "mpc",
       "mpc8",
       "mpeg",
-      "mpegts",
+      "mpg",
-      "mpegtsraw",
-      "mpegvideo",
       "mpjpeg",
       "mpl2",
       "mpo",
@@ -293,25 +291,27 @@ export const properties = {
       "okt",
       "oma",
       "omg",
+      "opus",
       "openal",
       "oss",
+      "osq",
       "paf",
-      "pam_pipe",
+      "pdv",
-      "pbm_pipe",
+      "pam",
-      "pcx_pipe",
+      "pbm",
-      "pgmyuv_pipe",
+      "pcx",
-      "pgm_pipe",
+      "pgmyuv",
-      "pgx_pipe",
+      "pgm",
-      "photocd_pipe",
+      "pgx",
-      "pictor_pipe",
+      "photocd",
+      "pictor",
       "pjs",
       "plm",
       "pmp",
-      "png_pipe",
+      "png",
       "ppm",
-      "ppm_pipe",
+      "pp",
-      "pp_bnk",
+      "psd",
-      "psd_pipe",
       "psm",
       "psp",
       "psxstr",
@@ -322,7 +322,7 @@ export const properties = {
       "pvf",
       "qcif",
       "qcp",
-      "qdraw_pipe",
+      "qdraw",
       "r3d",
       "rawvideo",
       "rco",
@@ -334,6 +334,7 @@ export const properties = {
       "rm",
       "roq",
       "rpl",
+      "rka",
       "rsd",
       "rso",
       "rt",
@@ -354,6 +355,7 @@ export const properties = {
       "sbc",
       "sbg",
       "scc",
+      "sdns",
       "sdp",
       "sdr2",
       "sds",
@@ -363,10 +365,9 @@ export const properties = {
       "sfx",
       "sfx2",
       "sga",
-      "sgi_pipe",
+      "sgi",
       "shn",
       "siff",
-      "simbiosis_imx",
       "sln",
       "smi",
       "smjpeg",
@@ -388,12 +389,9 @@ export const properties = {
       "stp",
       "str",
       "sub",
-      "subviewer",
-      "subviewer1",
-      "sunrast_pipe",
       "sup",
       "svag",
-      "svg_pipe",
+      "svg",
       "svs",
       "sw",
       "swf",
@@ -403,7 +401,8 @@ export const properties = {
       "thd",
       "thp",
       "tiertexseq",
-      "tiff_pipe",
+      "tif",
+      "tiff",
       "tmv",
       "truehd",
       "tta",
@@ -423,6 +422,7 @@ export const properties = {
       "ul",
       "ult",
       "umx",
+      "usm",
       "uw",
       "v",
       "v210",
@@ -446,12 +446,14 @@ export const properties = {
       "vql",
       "vt",
       "vtt",
+      "vvc",
       "w64",
+      "wa",
       "wav",
+      "way",
       "wc3movie",
       "webm",
-      "webm_dash_manifest",
+      "webp",
-      "webp_pipe",
       "webvtt",
       "wow",
       "wsaud",
@@ -463,32 +465,31 @@ export const properties = {
       "x11grab",
       "xa",
       "xbin",
-      "xbm_pipe",
       "xl",
       "xm",
+      "xmd",
       "xmv",
       "xpk",
-      "xpm_pipe",
       "xvag",
-      "xwd_pipe",
       "xwma",
       "y4m",
       "yop",
       "yuv",
       "yuv10",
-      "yuv4mpegpipe",
     ],
   },
   to: {
     muxer: [
       "264",
       "265",
+      "266",
       "302",
       "3g2",
       "3gp",
       "a64",
       "aac",
       "ac3",
+      "ac4",
       "adts",
       "adx",
       "afc",
@@ -496,43 +497,32 @@ export const properties = {
       "aifc",
       "aiff",
       "al",
-      "alaw",
-      "alp",
-      "alsa",
       "amr",
       "amv",
       "apm",
       "apng",
       "aptx",
       "aptxhd",
-      "aptx_hd",
-      "argo_asf",
       "asf",
-      "asf_stream",
       "ass",
       "ast",
       "au",
+      "aud",
+      "av1",
       "avi",
-      "avm2",
+      "avif",
       "avs",
       "avs2",
+      "avs3",
       "bit",
       "bmp",
       "c2",
-      "caca",
       "caf",
       "cavs",
-      "cavsvideo",
       "chk",
-      "chromaprint",
-      "codec2",
-      "codec2raw",
       "cpk",
-      "crc",
+      "cvg",
-      "dash",
+      "dfpwm",
-      "data",
-      "daud",
-      "dirac",
       "dnxhd",
       "dnxhr",
       "dpx",
@@ -541,30 +531,16 @@ export const properties = {
       "dv",
       "dvd",
       "eac3",
+      "ec3",
+      "evc",
       "exr",
-      "f32be",
-      "f32le",
       "f4v",
-      "f64be",
-      "f64le",
-      "fbdev",
       "ffmeta",
-      "ffmetadata",
-      "fifo",
-      "fifo_test",
-      "filmstrip",
-      "film_cpk",
       "fits",
       "flac",
       "flm",
       "flv",
-      "framecrc",
-      "framehash",
-      "framemd5",
       "g722",
-      "g723_1",
-      "g726",
-      "g726le",
       "gif",
       "gsm",
       "gxf",
@@ -572,32 +548,26 @@ export const properties = {
       "h263",
       "h264",
       "h265",
-      "hash",
+      "h266",
-      "hds",
+      "hdr",
       "hevc",
-      "hls",
       "ico",
-      "ilbc",
       "im1",
       "im24",
       "im8",
-      "image2",
-      "image2pipe",
-      "ipod",
       "ircam",
       "isma",
       "ismv",
       "ivf",
       "j2c",
       "j2k",
-      "jacosub",
       "jls",
       "jp2",
       "jpeg",
       "jpg",
       "js",
       "jss",
-      "kvag",
+      "jxl",
       "latm",
       "lbc",
       "ljpg",
@@ -612,13 +582,9 @@ export const properties = {
       "m4a",
       "m4b",
       "m4v",
-      "matroska",
-      "md5",
-      "microdvd",
       "mjpeg",
       "mjpg",
       "mkv",
-      "mkvtimestamp_v2",
       "mlp",
       "mmf",
       "mov",
@@ -628,26 +594,17 @@ export const properties = {
       "mpa",
       "mpd",
       "mpeg",
-      "mpeg1video",
-      "mpeg2video",
-      "mpegts",
       "mpg",
-      "mpjpeg",
       "msbc",
       "mts",
-      "mulaw",
       "mxf",
-      "mxf_d10",
-      "mxf_opatom",
-      "null",
       "nut",
+      "obu",
       "oga",
       "ogg",
       "ogv",
       "oma",
-      "opengl",
       "opus",
-      "oss",
       "pam",
       "pbm",
       "pcm",
@@ -655,14 +612,14 @@ export const properties = {
       "pfm",
       "pgm",
       "pgmyuv",
+      "phm",
       "pix",
       "png",
       "ppm",
       "psp",
-      "pulse",
+      "qoi",
       "ra",
       "ras",
-      "rawvideo",
       "rco",
       "rcv",
       "rgb",
@@ -670,84 +627,47 @@ export const properties = {
       "roq",
       "rs",
       "rso",
-      "rtp",
-      "rtp_mpegts",
-      "rtsp",
-      "s16be",
-      "s16le",
-      "s24be",
-      "s24le",
-      "s32be",
-      "s32le",
-      "s8",
-      "sap",
       "sb",
       "sbc",
       "scc",
-      "sdl",
-      "sdl2",
-      "segment",
       "sf",
       "sgi",
-      "singlejpeg",
-      "smjpeg",
-      "smoothstreaming",
-      "sndio",
       "sox",
       "spdif",
       "spx",
       "srt",
       "ssa",
-      "ssegment",
-      "streamhash",
-      "stream_segment",
       "sub",
       "sun",
       "sunras",
       "sup",
-      "svcd",
       "sw",
       "swf",
       "tco",
-      "tee",
       "tga",
       "thd",
       "tif",
       "tiff",
-      "truehd",
       "ts",
       "tta",
       "ttml",
       "tun",
-      "u16be",
-      "u16le",
-      "u24be",
-      "u24le",
-      "u32be",
-      "u32le",
-      "u8",
       "ub",
       "ul",
-      "uncodedframecrc",
       "uw",
-      "v4l2",
       "vag",
+      "vbn",
       "vc1",
-      "vc1test",
       "vc2",
-      "vcd",
-      "vidc",
-      "video4linux2",
       "vob",
       "voc",
       "vtt",
+      "vvc",
       "w64",
       "wav",
+      "wbmp",
       "webm",
-      "webm_chunk",
-      "webm_dash_manifest",
       "webp",
-      "webvtt",
       "wma",
       "wmv",
       "wtv",
@@ -755,12 +675,10 @@ export const properties = {
       "xbm",
       "xface",
       "xml",
-      "xv",
       "xwd",
       "y",
       "y4m",
       "yuv",
-      "yuv4mpegpipe",
     ],
   },
 };
@@ -770,42 +688,19 @@ export async function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  options?: any,
+  options?: unknown,
 ): Promise<string> {
-  // let command = "ffmpeg";
+  let extra = "";
+  let message = "Done";
 
-  // these are containers that can contain multiple formats
+  if (convertTo === "ico") {
-  // const autoDetect = [
+    // make sure image is 256x256 or smaller
-  //   "mp4",
+    extra = `-filter:v "scale='min(256,iw)':min'(256,ih)':force_original_aspect_ratio=decrease"`;
-  //   "mkv",
+    message = "Done: resized to 256x256";
-  //   "avi",
+  }
-  //   "mov",
-  //   "m4a",
-  //   "3gp",
-  //   "3g2",
-  //   "mj2",
-  //   "psp",
-  //   "m4b",
-  //   "ism",
-  //   "ismv",
-  //   "isma",
-  //   "f4v",
-  // ];
 
-  // if (!(fileType in autoDetect)) {
+  const command = `ffmpeg -i "${filePath}" ${extra} "${targetPath}"`;
-  //   command += ` -f "${fileType}"`;
-  // }
-
-  // command += ` -i "${filePath}"`;
-
-  // if (!(convertTo in autoDetect)) {
-  //   command += ` -f "${convertTo}"`;
-  // }
-
-  // command += ` "${targetPath}"`;
-
-  const command = `ffmpeg -i "${filePath}" "${targetPath}"`;
 
   return new Promise((resolve, reject) => {
     exec(command, (error, stdout, stderr) => {
@@ -821,7 +716,7 @@ export async function convert(
         console.error(`stderr: ${stderr}`);
       }
 
-      resolve("success");
+      resolve(message);
     });
   });
 }

src/converters/graphicsmagick.ts

@@ -143,6 +143,7 @@ export const properties = {
       "svgz",
       "text",
       "tga",
+      "tif",
       "tiff",
       "tile",
       "tim",
@@ -227,7 +228,6 @@ export const properties = {
       "jbig",
       "jng",
       "jpeg",
-      "jpg",
       "k",
       "m",
       "m2v",
@@ -313,8 +313,8 @@ export function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  options?: any,
+  options?: unknown,
 ): Promise<string> {
   return new Promise((resolve, reject) => {
     exec(
@@ -332,7 +332,7 @@ export function convert(
           console.error(`stderr: ${stderr}`);
         }
 
-        resolve("success");
+        resolve("Done");
       },
     );
   });

src/converters/libjxl.ts

@@ -0,0 +1,71 @@
+import { exec } from "node:child_process";
+
+// declare possible conversions
+export const properties = {
+  from: {
+    jxl: ["jxl"],
+    images: [
+      "apng",
+      "exr",
+      "gif",
+      "jpeg",
+      "pam",
+      "pfm",
+      "pgm",
+      "pgx",
+      "png",
+      "ppm",
+    ],
+  },
+  to: {
+    jxl: [
+      "apng",
+      "exr",
+      "gif",
+      "jpeg",
+      "pam",
+      "pfm",
+      "pgm",
+      "pgx",
+      "png",
+      "ppm",
+    ],
+    images: ["jxl"],
+  },
+};
+
+export function convert(
+  filePath: string,
+  fileType: string,
+  convertTo: string,
+  targetPath: string,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: unknown,
+): Promise<string> {
+  let tool = "";
+  if (fileType === "jxl") {
+    tool = "djxl";
+  }
+
+  if (convertTo === "jxl") {
+    tool = "cjxl";
+  }
+
+  return new Promise((resolve, reject) => {
+    exec(`${tool} "${filePath}" "${targetPath}"`, (error, stdout, stderr) => {
+      if (error) {
+        reject(`error: ${error}`);
+      }
+
+      if (stdout) {
+        console.log(`stdout: ${stdout}`);
+      }
+
+      if (stderr) {
+        console.error(`stderr: ${stderr}`);
+      }
+
+      resolve("Done");
+    });
+  });
+}

src/converters/main.ts

@@ -1,62 +1,59 @@
-import { convert as convertImage, properties as propertiesImage } from "./vips";
-
-import {
-  convert as convertPandoc,
-  properties as propertiesPandoc,
-} from "./pandoc";
-
-import {
-  convert as convertFFmpeg,
-  properties as propertiesFFmpeg,
-} from "./ffmpeg";
-
-import {
-  convert as convertGraphicsmagick,
-  properties as propertiesGraphicsmagick,
-} from "./graphicsmagick";
-
-import {
-  convert as convertPdflatex,
-  properties as propertiesPdflatex,
-} from "./pdflatex";
-
 import { normalizeFiletype } from "../helpers/normalizeFiletype";
+import { convert as convertassimp, properties as propertiesassimp } from "./assimp";
+import { convert as convertFFmpeg, properties as propertiesFFmpeg } from "./ffmpeg";
+import { convert as convertGraphicsmagick, properties as propertiesGraphicsmagick } from "./graphicsmagick";
+import { convert as convertLibjxl, properties as propertiesLibjxl } from "./libjxl";
+import { convert as convertPandoc, properties as propertiesPandoc } from "./pandoc";
+import { convert as convertresvg, properties as propertiesresvg } from "./resvg";
+import { convert as convertImage, properties as propertiesImage } from "./vips";
+import { convert as convertxelatex, properties as propertiesxelatex } from "./xelatex";
+
 
 // This should probably be reconstructed so that the functions are not imported instead the functions hook into this to make the converters more modular
 
-const properties: {
+const properties: Record<
-  [key: string]: {
+  string,
+  {
     properties: {
-      from: { [key: string]: string[] };
+      from: Record<string, string[]>;
-      to: { [key: string]: string[] };
+      to: Record<string, string[]>;
-      options?: {
+      options?: Record<
-        [key: string]: {
+        string,
-          [key: string]: {
+        Record<
+          string,
+          {
             description: string;
             type: string;
             default: number;
-          };
+          }
-        };
+        >
-      };
+      >;
     };
     converter: (
       filePath: string,
       fileType: string,
       convertTo: string,
       targetPath: string,
-      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+
-      options?: any,
+      options?: unknown,
-      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    ) => unknown;
-    ) => any;
+  }
-  };
+> = {
-} = {
+  libjxl: {
+    properties: propertiesLibjxl,
+    converter: convertLibjxl,
+  },
+  resvg: {
+    properties: propertiesresvg,
+    converter: convertresvg,
+  },
   vips: {
     properties: propertiesImage,
     converter: convertImage,
   },
-  pdflatex: {
+  xelatex: {
-    properties: propertiesPdflatex,
+    properties: propertiesxelatex,
-    converter: convertPdflatex,
+    converter: convertxelatex,
   },
   pandoc: {
     properties: propertiesPandoc,
@@ -66,6 +63,10 @@ const properties: {
     properties: propertiesGraphicsmagick,
     converter: convertGraphicsmagick,
   },
+  assimp: {
+    properties: propertiesassimp,
+    converter: convertassimp,
+  },
   ffmpeg: {
     properties: propertiesFFmpeg,
     converter: convertFFmpeg,
@@ -75,24 +76,19 @@ const properties: {
 export async function mainConverter(
   inputFilePath: string,
   fileTypeOriginal: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  convertTo: string,
-  convertTo: any,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  options?: unknown,
-  options?: any,
   converterName?: string,
 ) {
   const fileType = normalizeFiletype(fileTypeOriginal);
 
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  let converterFunc: typeof properties["libjxl"]["converter"] | undefined;
-  let converterFunc: any;
-  // let converterName = converterName;
 
   if (converterName) {
     converterFunc = properties[converterName]?.converter;
   } else {
     // Iterate over each converter in properties
-    // biome-ignore lint/style/noParameterAssign: <explanation>
     for (converterName in properties) {
       const converterObj = properties[converterName];
 
@@ -102,9 +98,8 @@ export async function mainConverter(
 
       for (const key in converterObj.properties.from) {
         if (
-          // HOW??
+          converterObj?.properties?.from[key]?.includes(fileType) &&
-          converterObj.properties.from[key].includes(fileType) &&
+          converterObj?.properties?.to[key]?.includes(convertTo)
-          converterObj.properties.to[key].includes(convertTo)
         ) {
           converterFunc = converterObj.converter;
           break;
@@ -121,7 +116,7 @@ export async function mainConverter(
   }
 
   try {
-    await converterFunc(
+    const result = await converterFunc(
       inputFilePath,
       fileType,
       convertTo,
@@ -131,7 +126,13 @@ export async function mainConverter(
 
     console.log(
       `Converted ${inputFilePath} from ${fileType} to ${convertTo} successfully using ${converterName}.`,
+      result,
     );
+
+    if (typeof result === "string") {
+      return result;
+    }
+
     return "Done";
   } catch (error) {
     console.error(
@@ -142,7 +143,7 @@ export async function mainConverter(
   }
 }
 
-const possibleTargets: { [key: string]: { [key: string]: string[] } } = {};
+const possibleTargets: Record<string, Record<string, string[]>> = {};
 
 for (const converterName in properties) {
   const converterProperties = properties[converterName]?.properties;
@@ -167,9 +168,7 @@ for (const converterName in properties) {
   }
 }
 
-export const getPossibleTargets = (
+export const getPossibleTargets = (from: string): Record<string, string[]> => {
-  from: string,
-): { [key: string]: string[] } => {
   const fromClean = normalizeFiletype(from);
 
   return possibleTargets[fromClean] || {};
@@ -193,11 +192,12 @@ for (const converterName in properties) {
 }
 possibleInputs.sort();
 
-export const getPossibleInputs = () => {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const getPossibleInputs = () => {
   return possibleInputs;
 };
 
-const allTargets: { [key: string]: string[] } = {};
+const allTargets: Record<string, string[]> = {};
 
 for (const converterName in properties) {
   const converterProperties = properties[converterName]?.properties;
@@ -208,9 +208,9 @@ for (const converterName in properties) {
 
   for (const key in converterProperties.to) {
     if (allTargets[converterName]) {
-      allTargets[converterName].push(...converterProperties.to[key]);
+      allTargets[converterName].push(...(converterProperties.to[key] || []));
     } else {
-      allTargets[converterName] = converterProperties.to[key];
+      allTargets[converterName] = converterProperties.to[key] || [];
     }
   }
 }
@@ -219,7 +219,7 @@ export const getAllTargets = () => {
   return allTargets;
 };
 
-const allInputs: { [key: string]: string[] } = {};
+const allInputs: Record<string, string[]> = {};
 for (const converterName in properties) {
   const converterProperties = properties[converterName]?.properties;
 
@@ -229,9 +229,9 @@ for (const converterName in properties) {
 
   for (const key in converterProperties.from) {
     if (allInputs[converterName]) {
-      allInputs[converterName].push(...converterProperties.from[key]);
+      allInputs[converterName].push(...(converterProperties.from[key] || []));
     } else {
-      allInputs[converterName] = converterProperties.from[key];
+      allInputs[converterName] = converterProperties.from[key] || [];
     }
   }
 }

src/converters/old.sharp.ts

@@ -1,119 +0,0 @@
-import sharp from "sharp";
-import type { FormatEnum } from "sharp";
-
-// declare possible conversions
-export const properties = {
-  from: {
-    images: [
-      "avif",
-      "bif",
-      "csv",
-      "exr",
-      "fits",
-      "gif",
-      "hdr.gz",
-      "hdr",
-      "heic",
-      "heif",
-      "img.gz",
-      "img",
-      "j2c",
-      "j2k",
-      "jp2",
-      "jpeg",
-      "jpx",
-      "jxl",
-      "mat",
-      "mrxs",
-      "ndpi",
-      "nia.gz",
-      "nia",
-      "nii.gz",
-      "nii",
-      "pdf",
-      "pfm",
-      "pgm",
-      "pic",
-      "png",
-      "ppm",
-      "raw",
-      "scn",
-      "svg",
-      "svs",
-      "svslide",
-      "szi",
-      "tif",
-      "tiff",
-      "v",
-      "vips",
-      "vms",
-      "vmu",
-      "webp",
-      "zip",
-    ],
-  },
-  to: {
-    images: [
-      "avif",
-      "dzi",
-      "fits",
-      "gif",
-      "hdr.gz",
-      "heic",
-      "heif",
-      "img.gz",
-      "j2c",
-      "j2k",
-      "jp2",
-      "jpeg",
-      "jpx",
-      "jxl",
-      "mat",
-      "nia.gz",
-      "nia",
-      "nii.gz",
-      "nii",
-      "png",
-      "tiff",
-      "vips",
-      "webp",
-    ],
-  },
-  options: {
-    svg: {
-      scale: {
-        description: "Scale the image up or down",
-        type: "number",
-        default: 1,
-      },
-    },
-  },
-};
-
-export async function convert(
-  filePath: string,
-  fileType: string,
-  convertTo: keyof FormatEnum,
-  targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
-) {
-  if (fileType === "svg") {
-    const scale = options.scale || 1;
-    const metadata = await sharp(filePath).metadata();
-
-    if (!metadata || !metadata.width || !metadata.height) {
-      throw new Error("Could not get metadata from image");
-    }
-
-    const newWidth = Math.round(metadata.width * scale);
-    const newHeight = Math.round(metadata.height * scale);
-
-    return await sharp(filePath)
-      .resize(newWidth, newHeight)
-      .toFormat(convertTo)
-      .toFile(targetPath);
-  }
-
-  return await sharp(filePath).toFormat(convertTo).toFile(targetPath);
-}

src/converters/pandoc.ts

@@ -124,12 +124,18 @@ export function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  options?: any,
+  options?: unknown,
 ): Promise<string> {
+  // set xelatex here
+  const xelatex = ["pdf", "latex"];
+  let option = "";
+  if (xelatex.includes(convertTo)) {
+    option = "--pdf-engine=xelatex";
+  }
   return new Promise((resolve, reject) => {
     exec(
-      `pandoc "${filePath}" -f ${fileType} -t ${convertTo} -o "${targetPath}"`,
+      `pandoc ${option} "${filePath}" -f ${fileType} -t ${convertTo} -o "${targetPath}"`,
       (error, stdout, stderr) => {
         if (error) {
           reject(`error: ${error}`);
@@ -143,7 +149,7 @@ export function convert(
           console.error(`stderr: ${stderr}`);
         }
 
-        resolve("success");
+        resolve("Done");
       },
     );
   });

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,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: unknown,
+): 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("Done");
+    });
+  });
+}

src/converters/vips.ts

@@ -1,5 +1,6 @@
 import { exec } from "node:child_process";
 
+
 // declare possible conversions
 export const properties = {
   from: {
@@ -94,8 +95,8 @@ export function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  options?: any,
+  options?: unknown,
 ): Promise<string> {
   // if (fileType === "svg") {
   //   const scale = options.scale || 1;
@@ -113,22 +114,29 @@ 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(
-      if (error) {
+      `vips ${action} "${filePath}" "${targetPath}"`,
-        reject(`error: ${error}`);
+      (error, stdout, stderr) => {
-      }
+        if (error) {
+          reject(`error: ${error}`);
+        }
 
-      if (stdout) {
+        if (stdout) {
-        console.log(`stdout: ${stdout}`);
+          console.log(`stdout: ${stdout}`);
-      }
+        }
 
-      if (stderr) {
+        if (stderr) {
-        console.error(`stderr: ${stderr}`);
+          console.error(`stderr: ${stderr}`);
-      }
+        }
 
-      resolve("success");
+        resolve("Done");
-    });
+      },
+    );
   });
 }

src/converters/xelatex.ts

@@ -14,14 +14,18 @@ export function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  options?: any,
+  options?: unknown,
 ): Promise<string> {
   return new Promise((resolve, reject) => {
     // const fileName: string = (targetPath.split("/").pop() as string).replace(".pdf", "")
-    const outputPath = targetPath.split("/").slice(0, -1).join("/").replace("./", "")
+    const outputPath = targetPath
+      .split("/")
+      .slice(0, -1)
+      .join("/")
+      .replace("./", "");
     exec(
-      `pdflatex -interaction=nonstopmode -output-directory="${outputPath}" "${filePath}"`,
+      `latexmk -xelatex -interaction=nonstopmode -output-directory="${outputPath}" "${filePath}"`,
       (error, stdout, stderr) => {
         if (error) {
           reject(`error: ${error}`);
@@ -35,7 +39,7 @@ export function convert(
           console.error(`stderr: ${stderr}`);
         }
 
-        resolve("success");
+        resolve("Done");
       },
     );
   });

src/helpers/normalizeFiletype.ts

@@ -2,6 +2,7 @@ export const normalizeFiletype = (filetype: string): string => {
   const lowercaseFiletype = filetype.toLowerCase();
 
   switch (lowercaseFiletype) {
+    case "jfif":
     case "jpg":
       return "jpeg";
     case "htm":
@@ -23,6 +24,9 @@ export const normalizeOutputFiletype = (filetype: string): string => {
       return "jpg";
     case "latex":
       return "tex";
+    case "markdown_phpextra":
+    case "markdown_strict":
+    case "markdown_mmd":
     case "markdown":
       return "md";
     default:

src/helpers/printVersions.ts

@@ -0,0 +1,105 @@
+import { exec } from "node:child_process";
+import { version } from "../../package.json";
+console.log(`ConvertX v${version}`);
+
+if (process.env.NODE_ENV === "production") {
+  exec("cat /etc/os-release", (error, stdout) => {
+    if (error) {
+      console.error("Not running on docker, this is not supported.");
+    }
+
+    if (stdout) {
+      console.log(stdout.split('PRETTY_NAME="')[1]?.split('"')[0]);
+    }
+  });
+
+  exec("pandoc -v", (error, stdout) => {
+    if (error) {
+      console.error("Pandoc is not installed.");
+    }
+
+    if (stdout) {
+      console.log(stdout.split("\n")[0]);
+    }
+  });
+
+  exec("ffmpeg -version", (error, stdout) => {
+    if (error) {
+      console.error("FFmpeg is not installed.");
+    }
+
+    if (stdout) {
+      console.log(stdout.split("\n")[0]);
+    }
+  });
+
+  exec("vips -v", (error, stdout) => {
+    if (error) {
+      console.error("Vips is not installed.");
+    }
+
+    if (stdout) {
+      console.log(stdout.split("\n")[0]);
+    }
+  });
+
+  exec("gm version", (error, stdout) => {
+    if (error) {
+      console.error("GraphicsMagick is not installed.");
+    }
+
+    if (stdout) {
+      console.log(stdout.split("\n")[0]);
+    }
+  });
+
+  exec("djxl --version", (error, stdout) => {
+    if (error) {
+      console.error("libjxl-tools is not installed.");
+    }
+
+    if (stdout) {
+      console.log(stdout.split("\n")[0]);
+    }
+  });
+
+  exec("xelatex -version", (error, stdout) => {
+    if (error) {
+      console.error("Tex Live with XeTeX is not installed.");
+    }
+
+    if (stdout) {
+      console.log(stdout.split("\n")[0]);
+    }
+  });
+
+  exec("resvg -V", (error, stdout) => {
+    if (error) {
+      console.error("resvg is not installed");
+    }
+
+    if (stdout) {
+      console.log(`resvg v${stdout.split("\n")[0]}`);
+    }
+  });
+
+  exec("assimp version", (error, stdout) => {
+    if (error) {
+      console.error("assimp is not installed");
+    }
+
+    if (stdout) {
+      console.log(`assimp v${stdout.split("\n")[5]}`);
+    }
+  });
+
+  exec("bun -v", (error, stdout) => {
+    if (error) {
+      console.error("Bun is not installed. wait what");
+    }
+
+    if (stdout) {
+      console.log(`Bun v${stdout.split("\n")[0]}`);
+    }
+  });
+}

src/helpers/tailwind.ts

@@ -0,0 +1,17 @@
+import tw from "tailwindcss";
+import postcss from "postcss";
+
+export const generateTailwind = async () => {
+  const result = await Bun.file("./src/main.css")
+    .text()
+    .then((sourceText) => {
+      const config = "./tailwind.config.js";
+
+      return postcss([tw(config)]).process(sourceText, {
+        from: "./src/main.css",
+        to: "./public/generated.css",
+      });
+    });
+
+  return result;
+};

src/main.css

@@ -0,0 +1,45 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .article {
+    @apply p-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded;
+  }
+  .btn-primary {
+    @apply bg-accent-500 text-contrast rounded p-4 hover:bg-accent-400 cursor-pointer transition-colors;
+  }
+}
+
+:root {
+    --contrast: 255, 255, 255;
+    --neutral-900: 243, 244, 246;
+    --neutral-800: 229, 231, 235;
+    --neutral-700: 209, 213, 219;
+    --neutral-600: 156, 163, 175;
+    --neutral-500: 180, 180, 180;
+    --neutral-400: 75, 85, 99;
+    --neutral-300: 55, 65, 81;
+    --neutral-200: 31, 41, 55;
+    --neutral-100: 17, 24, 39;
+    --accent-400: 132, 204, 22;
+    --accent-500: 101, 163, 13;
+    --accent-600: 77, 124, 15;
+  }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --contrast: 0, 0, 0;
+    --neutral-900: 17, 24, 39;
+    --neutral-800: 31, 41, 55;
+    --neutral-700: 55, 65, 81;
+    --neutral-600: 75, 85, 99;
+    --neutral-500: 107, 114, 128;
+    --neutral-300: 209, 213, 219;
+    --neutral-400: 156, 163, 175;
+    --neutral-200: 229, 231, 235;
+    --accent-600: 101, 163, 13;
+    --accent-500: 132, 204, 22;
+    --accent-400: 163, 230, 53;
+  }
+}

src/public/robots.txt

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

src/public/script.js

@@ -1,9 +1,98 @@
 // Select the file input element
 const fileInput = document.querySelector('input[type="file"]');
+const dropZone = document.getElementById("dropzone");
 const fileNames = [];
 let fileType;
 
-const selectContainer = document.querySelector("form > article");
+dropZone.addEventListener("dragover", () => {
+  dropZone.classList.add("dragover");
+});
+
+dropZone.addEventListener("dragleave", () => {
+  dropZone.classList.remove("dragover");
+});
+
+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 convertButton = document.querySelector("input[type='submit']");
+
+  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.classList.remove("hidden");
+          target.classList.add("flex");
+        } else {
+          target.classList.add("hidden");
+          target.classList.remove("flex");
+        }
+      }
+
+      if (matchingTargetsFound === 0) {
+        groupElement.classList.add("hidden");
+        groupElement.classList.remove("flex");
+      } else {
+        groupElement.classList.remove("hidden");
+        groupElement.classList.add("flex");
+      }
+    }
+  };
+
+  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}`;
+        convertButton.disabled = false;
+        showMatching("");
+      };
+    }
+
+    convertToGroups[groupName] = [targets, groupElement];
+  }
+
+  convertToInput.addEventListener("input", (e) => {
+    showMatching(e.target.value.toLowerCase());
+  });
+
+  convertToInput.addEventListener("search", () => {
+    // when the user clears the search bar using the 'x' button
+    convertButton.disabled = true;
+  });
+
+  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.classList.add("hidden");
+      convertToPopup.classList.remove("flex");
+      return;
+    }
+
+    convertToPopup.classList.add("hidden");
+    convertToPopup.classList.remove("flex");
+  });
+
+  convertToInput.addEventListener("focus", () => {
+    convertToPopup.classList.remove("hidden");
+    convertToPopup.classList.add("flex");
+  });
+};
 
 // const convertFromSelect = document.querySelector("select[name='convert_from']");
 
@@ -28,6 +117,7 @@ fileInput.addEventListener("change", (e) => {
 
     if (!fileType) {
       fileType = file.name.split(".").pop();
+      console.log("fileType", fileType);
       fileInput.setAttribute("accept", `.${fileType}`);
       setTitle();
 
@@ -49,6 +139,7 @@ fileInput.addEventListener("change", (e) => {
         .then((res) => res.text())
         .then((html) => {
           selectContainer.innerHTML = html;
+          updateSearchBar();
         })
         .catch((err) => console.log(err));
     }
@@ -69,6 +160,7 @@ const setTitle = () => {
 };
 
 // Add a onclick for the delete button
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const deleteRow = (target) => {
   const filename = target.parentElement.parentElement.children[0].textContent;
   const row = target.parentElement.parentElement;
@@ -119,7 +211,9 @@ const uploadFiles = (files) => {
 
 const formConvert = document.querySelector("form[action='/convert']");
 
-formConvert.addEventListener("submit", (e) => {
+formConvert.addEventListener("submit", () => {
   const hiddenInput = document.querySelector("input[name='file_names']");
   hiddenInput.value = JSON.stringify(fileNames);
 });
+
+updateSearchBar();

src/public/style.css

@@ -1,21 +0,0 @@
-article {
-  /* height: 300px; */
-  /* width: 300px; */
-
-}
-
-div.icon {
-  height: 100px;
-  width: 100px;
-}
-
-button[type="submit"] {
-  width: 50%
-}
-
-div.center {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}

tailwind.config.js

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+/** @type {import('tailwindcss').Config} */
+ 
+module.exports = {
+  content: ["./src/**/*.{html,js,tsx,jsx,cjs,mjs}"],
+  theme: {
+    extend: {
+      colors: {
+        contrast: "rgba(var(--contrast))",
+        "neutral-900": "rgba(var(--neutral-900))",
+        "neutral-800": "rgba(var(--neutral-800))",
+        "neutral-700": "rgba(var(--neutral-700))",
+        "neutral-600": "rgba(var(--neutral-600))",
+        "neutral-500": "rgba(var(--neutral-500))",
+        "neutral-400": "rgba(var(--neutral-400))",
+        "neutral-300": "rgba(var(--neutral-300))",
+        "neutral-200": "rgba(var(--neutral-200))",
+        "neutral-100": "rgba(var(--neutral-100))",
+        "accent-600": "rgba(var(--accent-600))",
+        "accent-500": "rgba(var(--accent-500))",
+        "accent-400": "rgba(var(--accent-400))",
+      },
+    },
+  },
+  plugins: [require("tailwind-scrollbar")],
+};

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "lib": ["ESNext"],
-    "module": "esnext",
+    "module": "ESNext",
-    "target": "esnext",
+    "target": "ES2021",
     "moduleResolution": "bundler",
     "moduleDetection": "force",
     "allowImportingTsExtensions": true,
@@ -17,9 +17,6 @@
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "allowJs": true,
-    "types": [
-      "bun-types" // add Bun global
-    ],
     // non bun init
     "plugins": [{ "name": "@kitajs/ts-html-plugin" }],
     "noUncheckedIndexedAccess": true,