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

chore(main): release 0.9.0

.dockerignore

@@ -1,16 +1,20 @@
-node_modules
-Dockerfile*
-docker-compose*
 .dockerignore
+.editorconfig
+.env
 .git
 .gitignore
-README.md
-LICENSE
-.vscode
-Makefile
-helm-charts
-.env
-.editorconfig
 .idea
+.vscode
+CHANGELOG.md
 coverage*
-data
+data
+docker-compose*
+Dockerfile*
+eslint.config.js
+helm-charts
+LICENSE
+Makefile
+node_modules
+prettier.config.js
+README.md
+renovate.json

.github/workflows/docker-publish.yml

@@ -1,69 +1,80 @@
-name: Docker
+name: Docker
-
+
-# This workflow uses actions that are not certified by GitHub.
+# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
+# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
+# separate terms of service, privacy policy, and support
-# documentation.
+# documentation.
-
+
-on:
+on:
-  push:
+  push:
-    branches: [ "main" ]
+    branches: [ "main" ]
-    # Publish semver tags as releases.
+    # Publish semver tags as releases.
-    tags: [ 'v*.*.*' ]
+    tags: [ 'v*.*.*' ]
-  pull_request:
+  pull_request:
-    branches: [ "main" ]
+    branches: [ "main" ]
-  workflow_dispatch:
+  workflow_dispatch:
-
+
-env:
+env:
-  # Use docker.io for Docker Hub if empty
+  # Use docker.io for Docker Hub if empty
-  REGISTRY: ghcr.io
+  REGISTRY: ghcr.io
-  # github.repository as <account>/<repo>
+  # github.repository as <account>/<repo>
-  IMAGE_NAME: ${{ github.repository }}
+  IMAGE_NAME: ${{ github.repository }}
-
+  DOCKERHUB_USERNAME: c4illin
-
+
-jobs:
+
-  build:
+jobs:
-    runs-on: ubuntu-latest
+  build:
-    permissions:
+    runs-on: ubuntu-latest
-      contents: read
+    permissions:
-      packages: write
+      contents: read
-
+      packages: write
-    steps:
+
-      - name: Checkout repository
+    steps:
-        uses: actions/checkout@v4
+      - name: Checkout repository
-
+        uses: actions/checkout@v4
-      # Workaround: https://github.com/docker/build-push-action/issues/461
+
-      - name: Setup Docker buildx
+      # Workaround: https://github.com/docker/build-push-action/issues/461
-        uses: docker/setup-buildx-action@v3
+      - name: Setup Docker buildx
-
+        uses: docker/setup-buildx-action@v3
-      # Login against a Docker registry except on PR
+
-      # https://github.com/docker/login-action
+      # Login against a Docker registry except on PR
-      - name: Log into registry ${{ env.REGISTRY }}
+      # https://github.com/docker/login-action
-        if: github.event_name != 'pull_request'
+      - name: Log into registry ${{ env.REGISTRY }}
-        uses: docker/login-action@v3
+        if: github.event_name != 'pull_request'
-        with:
+        uses: docker/login-action@v3
-          registry: ${{ env.REGISTRY }}
+        with:
-          username: ${{ github.actor }}
+          registry: ${{ env.REGISTRY }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+          username: ${{ github.actor }}
-
+          password: ${{ secrets.GITHUB_TOKEN }}
-      # Extract metadata (tags, labels) for Docker
+      
-      # https://github.com/docker/metadata-action
+      - name: Login to Docker Hub
-      - name: Extract Docker metadata
+        if: github.event_name != 'pull_request'
-        id: meta
+        uses: docker/login-action@v3
-        uses: docker/metadata-action@v5
+        with:
-        with:
+          username: ${{ env.DOCKERHUB_USERNAME }}
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
+
-      # Build and push Docker image with Buildx (don't push on PR)
+      # Extract metadata (tags, labels) for Docker
-      # https://github.com/docker/build-push-action
+      # https://github.com/docker/metadata-action
-      - name: Build and push Docker image
+      - name: Extract Docker metadata
-        id: build-and-push
+        id: meta
-        uses: docker/build-push-action@v6
+        uses: docker/metadata-action@v5
-        with:
+        with:
-          context: .
+          images: |
-          platforms: linux/amd64,linux/arm64
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          push: ${{ github.event_name != 'pull_request' }}
+            ${{ env.IMAGE_NAME }}
-          tags: ${{ steps.meta.outputs.tags }}
+
-          labels: ${{ steps.meta.outputs.labels }}
+      # Build and push Docker image with Buildx (don't push on PR)
-          cache-from: type=gha
+      # https://github.com/docker/build-push-action
-          cache-to: type=gha,mode=max
+      - name: Build and push Docker image
+        id: build-and-push
+        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 }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+      

.github/workflows/dockerhub-description.yml

@@ -0,0 +1,27 @@
+name: Update Docker Hub Description
+
+env:
+  IMAGE_NAME: ${{ github.repository }}
+  DOCKERHUB_USERNAME: c4illin
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - README.md
+      - .github/workflows/dockerhub-description.yml
+jobs:
+  dockerHubDescription:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Docker Hub Description
+      uses: peter-evans/dockerhub-description@v4
+      with:
+        username: ${{ env.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}
+        repository: ${{ env.IMAGE_NAME }}
+        short-description: ${{ github.event.repository.description }}
+        enable-url-completion: true

.gitignore

@@ -48,4 +48,4 @@ package-lock.json
 /data
 /Bruno
 /tsconfig.tsbuildinfo
-/src/public/generated.css
+/public/generated.css

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.9.0](https://github.com/C4illin/ConvertX/compare/v0.8.1...v0.9.0) (2024-11-21)
+
+
+### Features
+
+* add inkscape for vector images ([f3740e9](https://github.com/C4illin/ConvertX/commit/f3740e9ded100b8500f3613517960248bbd3c210))
+* Allow to chose webroot ([36cb6cc](https://github.com/C4illin/ConvertX/commit/36cb6cc589d80d0a87fa8dbe605db71a9a2570f9)), closes [#180](https://github.com/C4illin/ConvertX/issues/180)
+* disable convert when uploading ([58e220e](https://github.com/C4illin/ConvertX/commit/58e220e82d7f9c163d6ea4dc31092c08a3e254f4)), closes [#177](https://github.com/C4illin/ConvertX/issues/177)
+
+
+### Bug Fixes
+
+* treat unknown as m4a ([1a442d6](https://github.com/C4illin/ConvertX/commit/1a442d6e69606afef63b1e7df36aa83d111fa23d)), closes [#178](https://github.com/C4illin/ConvertX/issues/178)
+* wait for both upload and selection ([4c05fd7](https://github.com/C4illin/ConvertX/commit/4c05fd72bbbf91ee02327f6fcbf749b78272376b)), closes [#177](https://github.com/C4illin/ConvertX/issues/177)
+
 ## [0.8.1](https://github.com/C4illin/ConvertX/compare/v0.8.0...v0.8.1) (2024-10-05)
 
 

Dockerfile

@@ -1,4 +1,4 @@
-FROM oven/bun:1.1.29-alpine AS base
+FROM oven/bun:1.1.36-alpine AS base
 LABEL org.opencontainers.image.source="https://github.com/C4illin/ConvertX"
 WORKDIR /app
 
@@ -50,14 +50,15 @@ RUN apk --no-cache add  \
   vips-poppler \
   vips-jxl \
   libjxl-tools \
-  assimp
+  assimp \
+  inkscape
 
 # 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/public/generated.css /app/public/
 # COPY --from=prerelease /app/src/index.tsx /app/src/
 # COPY --from=prerelease /app/package.json .
 COPY . .

README.md

@@ -1,111 +1,130 @@
-![ConvertX](images/logo.png)
+![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)
+# ConvertX
-[![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)
+[![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 repo size](https://img.shields.io/github/repo-size/C4illin/ConvertX)
+[![ghcr.io Pulls](https://img.shields.io/badge/dynamic/json?logo=github&url=https%3A%2F%2Fipitio.github.io%2Fbackage%2FC4illin%2FConvertX%2Fconvertx.json&query=%24.downloads&label=ghcr.io%20pulls&cacheSeconds=14400)](https://github.com/C4illin/ConvertX/pkgs/container/ConvertX)
-![Docker container size](https://ghcr-badge.egpl.dev/c4illin/convertx/size?color=%230375b6&tag=latest&label=image+size&trim=)
+[![GitHub Release](https://img.shields.io/github/v/release/C4illin/ConvertX)](https://github.com/C4illin/ConvertX/pkgs/container/convertx)
-![GitHub top language](https://img.shields.io/github/languages/top/C4illin/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)
-A self-hosted online file converter. Supports over a thousand different formats. Written with TypeScript, Bun and Elysia.
+![Docker container size](https://ghcr-badge.egpl.dev/c4illin/convertx/size?color=%230375b6&tag=latest&label=image+size&trim=)
-
+<!-- ![Dev image size](https://ghcr-badge.egpl.dev/c4illin/convertx/size?color=%230375b6&tag=main&label=dev+image&trim=) -->
-## Features
+
-
+A self-hosted online file converter. Supports over a thousand different formats. Written with TypeScript, Bun and Elysia.
-- Convert files to different formats
+
-- Process multiple files at once
+## Features
-- Password protection
+
-- Multiple accounts
+- Convert files to different formats
-
+- Process multiple files at once
-## Converters supported
+- Password protection
-
+- Multiple accounts
-| Converter                                                                    | Use case      | Converts from | Converts to |
+
-|------------------------------------------------------------------------------|---------------|---------------|-------------|
+## Converters supported
-| [libjxl](https://github.com/libjxl/libjxl)                                   | JPEG XL       | 11            | 11          |
+
-| [resvg](https://github.com/RazrFalcon/resvg)                                 | SVG           | 1             | 1           |
+| Converter                                                                    | Use case      | Converts from | Converts to |
-| [Vips](https://github.com/libvips/libvips)                                   | Images        | 45            | 23          |
+|------------------------------------------------------------------------------|---------------|---------------|-------------|
-| [Assimp](https://github.com/assimp/assimp)                                   | 3D Assets     | 70            | 24          |
+| [libjxl](https://github.com/libjxl/libjxl)                                   | JPEG XL       | 11            | 11          |
-| [XeLaTeX](https://tug.org/xetex/)                                            | LaTeX         | 1             | 1           |
+| [resvg](https://github.com/RazrFalcon/resvg)                                 | SVG           | 1             | 1           |
-| [Pandoc](https://pandoc.org/)                                                | Documents     | 43            | 65          |
+| [Vips](https://github.com/libvips/libvips)                                   | Images        | 45            | 23          |
-| [GraphicsMagick](http://www.graphicsmagick.org/)                             | Images        | 166           | 133         |
+| [Assimp](https://github.com/assimp/assimp)                                   | 3D Assets     | 70            | 24          |
-| [FFmpeg](https://ffmpeg.org/)                                                | Video         | ~473          | ~280        |
+| [XeLaTeX](https://tug.org/xetex/)                                            | LaTeX         | 1             | 1           |
-
+| [Pandoc](https://pandoc.org/)                                                | Documents     | 43            | 65          |
-<!-- many ffmpeg fileformats are duplicates -->
+| [GraphicsMagick](http://www.graphicsmagick.org/)                             | Images        | 166           | 133         |
-
+| [Inkscape](https://inkscape.org/)                                            | Vector images | 7             | 17          |
-Any missing converter? Open an issue or pull request!
+| [FFmpeg](https://ffmpeg.org/)                                                | Video         | ~473          | ~280        |
-
+
-## Deployment
+<!-- many ffmpeg fileformats are duplicates -->
-
+
-```yml
+Any missing converter? Open an issue or pull request!
-# docker-compose.yml
+
-services:
+## Deployment
-  convertx: 
+
-    image: ghcr.io/c4illin/convertx
+```yml
-    container_name: convertx
+# docker-compose.yml
-    restart: unless-stopped
+services:
-    ports:
+  convertx: 
-      - "3000:3000"
+    image: ghcr.io/c4illin/convertx
-    environment: # Defaults are listed below. All are optional.
+    container_name: convertx
-      - 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)
+    restart: unless-stopped
-      - JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234 # will use randomUUID() by default
+    ports:
-      - HTTP_ALLOWED=false # setting this to true is unsafe, only set this to true locally
+      - "3000:3000"
-      - ALLOW_UNAUTHENTICATED=false # allows anyone to use the service without logging in, only set this to true locally
+    environment:
-      - AUTO_DELETE_EVERY_N_HOURS=24 # checks every n hours for files older then n hours and deletes them, set to 0 to disable
+      - JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234 # will use randomUUID() if unset
-    volumes:
+    volumes:
-      - convertx:/app/data
+      - convertx:/app/data
-```
+```
-
+
-or
+or
-
+
-```bash
+```bash
-docker run -p 3000:3000 -v ./data:/app/data ghcr.io/c4illin/convertx
+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.
+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.
-
+
-If you get unable to open database file run `chown -R $USER:$USER path` on the path you choose.
+If you get unable to open database file run `chown -R $USER:$USER path` on the path you choose.
-
+
-### Tutorial
+### Environment variables
-
+
-Tutorial in french: https://belginux.com/installer-convertx-avec-docker/
+All are optional, JWT_SECRET is recommended to be set.
-
+
-## Screenshots
+| Name                      | Default | Description |
-
+|---------------------------|---------|-------------|
-![ConvertX Preview](images/preview.png)
+| JWT_SECRET                | when unset it will use the value from randomUUID() | A long and secret string used to sign the JSON Web Token |
-
+| ACCOUNT_REGISTRATION      | false | Allow users to register accounts |
-## Development
+| HTTP_ALLOWED              | false | Allow HTTP connections, only set this to true locally |
-
+| ALLOW_UNAUTHENTICATED     | false | Allow unauthenticated users to use the service, only set this to true locally |
-0. Install [Bun](https://bun.sh/) and Git
+| AUTO_DELETE_EVERY_N_HOURS | 24 | Checks every n hours for files older then n hours and deletes them, set to 0 to disable |
-1. Clone the repository
+| WEBROOT                   | "" | The address to the root path setting this to "/convert" will serve the website on "example.com/convert/" |
-2. `bun install`
+
-3. `bun run dev`
+> [!WARNING]
-
+> If you can't login, make sure you are accessing the service over https or set HTTP_ALLOWED=true
-Pull requests are welcome! See below and open issues for the list of todos.
+
-
+### Tutorial
-## Todo
+
-- [x] Add messages for errors in converters
+Tutorial in french: <https://belginux.com/installer-convertx-avec-docker/>
-- [x] Add searchable list of formats
+
-- [ ] Add options for converters
+Tutorial in chinese: <https://xzllll.com/24092901/>
-- [ ] Divide index.tsx into smaller components
+
-- [ ] Add tests
+## Screenshots
-- [ ] 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
+![ConvertX Preview](images/preview.png)
-- [ ] Add more converters:
+
-  - [ ] [deark](https://github.com/jsummers/deark)
+## Development
-  - [ ] LibreOffice
+
-  - [ ] [dvisvgm](https://github.com/mgieseki/dvisvgm)
+0. Install [Bun](https://bun.sh/) and Git
-
+1. Clone the repository
-## Contributors
+2. `bun install`
-
+3. `bun run dev`
-<a href="https://github.com/C4illin/ConvertX/graphs/contributors">
+
-  <img src="https://contrib.rocks/image?repo=C4illin/ConvertX" />
+Pull requests are welcome! See below and open issues for the list of todos.
-</a>
+
-
+## Todo
-## Star History
+
-
+- [x] Add messages for errors in converters
-<a href="https://github.com/C4illin/ConvertX/stargazers">
+- [x] Add searchable list of formats
- <picture>
+- [ ] Add options for converters
-   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=C4illin/ConvertX&type=Date&theme=dark" />
+- [ ] Divide index.tsx into smaller components
-   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=C4illin/ConvertX&type=Date" />
+- [ ] Add tests
-   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=C4illin/ConvertX&type=Date" />
+- [ ] Make the upload button nicer and more easy to drop files on. Support copy paste as well if possible.
- </picture>
+- [ ] Make errors logs visible from the web ui
-</a>
+- [ ] Add more converters:
+  - [ ] [deark](https://github.com/jsummers/deark)
+  - [ ] LibreOffice
+  - [ ] [dvisvgm](https://github.com/mgieseki/dvisvgm)
+
+## Contributors
+
+<a href="https://github.com/C4illin/ConvertX/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=C4illin/ConvertX" alt="Image with all contributors"/>
+</a>
+
+## Star History
+
+<a href="https://github.com/C4illin/ConvertX/stargazers">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=C4illin/ConvertX&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=C4illin/ConvertX&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=C4illin/ConvertX&type=Date" />
+ </picture>
+</a>

compose.yaml

@@ -11,5 +11,6 @@ services:
       - 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
+      - WEBROOT=/convertx # the root path of the web interface, leave empty to disable
     ports:
       - 3000:3000

package.json

@@ -1,11 +1,11 @@
 {
   "name": "convertx-frontend",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "scripts": {
     "dev": "bun run --watch src/index.tsx",
     "hot": "bun run --hot src/index.tsx",
     "format": "eslint --fix .",
-    "build": "postcss ./src/main.css -o ./src/public/generated.css",
+    "build": "postcss ./src/main.css -o ./public/generated.css",
     "lint": "run-p 'lint:*'",
     "lint:tsc": "tsc --noEmit",
     "lint:knip": "knip",
@@ -13,10 +13,11 @@
   },
   "dependencies": {
     "@elysiajs/cookie": "^0.8.0",
-    "@elysiajs/html": "1.0.2",
+    "@elysiajs/html": "^1.1.1",
     "@elysiajs/jwt": "^1.1.1",
-    "@elysiajs/static": "1.0.3",
+    "@elysiajs/static": "^1.1.1",
-    "elysia": "^1.1.17"
+    "@kitajs/html": "^4.2.4",
+    "elysia": "^1.1.25"
   },
   "module": "src/index.tsx",
   "type": "module",
@@ -24,38 +25,31 @@
     "start": "bun run src/index.tsx"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.1.1",
+    "@eslint/compat": "^1.2.3",
-    "@eslint/js": "^9.12.0",
+    "@eslint/js": "^9.15.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
     "@kitajs/ts-html-plugin": "^4.1.0",
     "@total-typescript/ts-reset": "^0.6.1",
-    "@types/bun": "^1.1.10",
+    "@types/bun": "^1.1.13",
-    "@types/eslint": "^9.6.1",
     "@types/eslint-plugin-tailwindcss": "^3.17.0",
     "@types/eslint__js": "^8.42.3",
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.9.1",
-    "@typescript-eslint/eslint-plugin": "^8.7.0",
-    "@typescript-eslint/parser": "^8.7.0",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
-    "eslint": "^9.12.0",
+    "eslint": "^9.15.0",
-    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-deprecation": "^3.0.0",
-    "eslint-plugin-isaacscript": "^4.0.0",
+    "eslint-plugin-readable-tailwind": "^1.8.2",
-    "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",
+    "eslint-plugin-tailwindcss": "^3.17.5",
-    "globals": "^15.9.0",
+    "globals": "^15.12.0",
-    "knip": "^5.30.6",
+    "knip": "^5.37.1",
-    "npm-run-all2": "^6.2.3",
+    "npm-run-all2": "^7.0.1",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
-    "postcss-lightningcss": "^1.0.1",
     "prettier": "^3.3.3",
     "tailwind-scrollbar": "^3.1.0",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^3.4.15",
-    "typescript": "^5.6.2",
+    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.8.0"
+    "typescript-eslint": "^8.15.0"
   }
 }

postcss.config.cjs

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

postcss.config.js

@@ -0,0 +1,8 @@
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+import tailwind from "tailwindcss";
+import tailwindConfig from "./tailwind.config.js";
+
+export default {
+  plugins: [autoprefixer, tailwind(tailwindConfig), cssnano],
+};

public/results.js

@@ -1,3 +1,5 @@
+const webroot = document.querySelector("meta[name='webroot']").content;
+
 window.downloadAll = function () {
   // Get all download links
   const downloadLinks = document.querySelectorAll("a[download]");
@@ -18,7 +20,7 @@ let progressElem = document.querySelector("progress");
 const refreshData = () => {
   // console.log("Refreshing data...", progressElem.value, progressElem.max);
   if (progressElem.value !== progressElem.max) {
-    fetch(`/progress/${jobId}`, {
+    fetch(`${webroot}/progress/${jobId}`, {
       method: "POST",
     })
       .then((res) => res.text())

public/script.js

@@ -1,219 +1,236 @@
-// Select the file input element
+const webroot = document.querySelector("meta[name='webroot']").content;
-const fileInput = document.querySelector('input[type="file"]');
+const fileInput = document.querySelector('input[type="file"]');
-const dropZone = document.getElementById("dropzone");
+const dropZone = document.getElementById("dropzone");
-const fileNames = [];
+const convertButton = document.querySelector("input[type='submit']");
-let fileType;
+const fileNames = [];
-
+let fileType;
-dropZone.addEventListener("dragover", () => {
+let pendingFiles = 0;
-  dropZone.classList.add("dragover");
+let formatSelected = false;
-});
+
-
+dropZone.addEventListener("dragover", () => {
-dropZone.addEventListener("dragleave", () => {
+  dropZone.classList.add("dragover");
-  dropZone.classList.remove("dragover");
+});
-});
+
-
+dropZone.addEventListener("dragleave", () => {
-const selectContainer = document.querySelector("form .select_container");
+  dropZone.classList.remove("dragover");
-
+});
-const updateSearchBar = () => {
+
-  const convertToInput = document.querySelector(
+dropZone.addEventListener("drop", () => {
-    "input[name='convert_to_search']",
+  dropZone.classList.remove("dragover");
-  );
+});
-  const convertToPopup = document.querySelector(".convert_to_popup");
+
-  const convertToGroupElements = document.querySelectorAll(".convert_to_group");
+const selectContainer = document.querySelector("form .select_container");
-  const convertToGroups = {};
+
-  const convertToElement = document.querySelector("select[name='convert_to']");
+const updateSearchBar = () => {
-  const convertButton = document.querySelector("input[type='submit']");
+  const convertToInput = document.querySelector(
-
+    "input[name='convert_to_search']",
-  const showMatching = (search) => {
+  );
-    for (const [targets, groupElement] of Object.values(convertToGroups)) {
+  const convertToPopup = document.querySelector(".convert_to_popup");
-      let matchingTargetsFound = 0;
+  const convertToGroupElements = document.querySelectorAll(".convert_to_group");
-      for (const target of targets) {
+  const convertToGroups = {};
-        if (target.dataset.target.includes(search)) {
+  const convertToElement = document.querySelector("select[name='convert_to']");
-          matchingTargetsFound++;
+
-          target.classList.remove("hidden");
+  const showMatching = (search) => {
-          target.classList.add("flex");
+    for (const [targets, groupElement] of Object.values(convertToGroups)) {
-        } else {
+      let matchingTargetsFound = 0;
-          target.classList.add("hidden");
+      for (const target of targets) {
-          target.classList.remove("flex");
+        if (target.dataset.target.includes(search)) {
-        }
+          matchingTargetsFound++;
-      }
+          target.classList.remove("hidden");
-
+          target.classList.add("flex");
-      if (matchingTargetsFound === 0) {
+        } else {
-        groupElement.classList.add("hidden");
+          target.classList.add("hidden");
-        groupElement.classList.remove("flex");
+          target.classList.remove("flex");
-      } else {
+        }
-        groupElement.classList.remove("hidden");
+      }
-        groupElement.classList.add("flex");
+
-      }
+      if (matchingTargetsFound === 0) {
-    }
+        groupElement.classList.add("hidden");
-  };
+        groupElement.classList.remove("flex");
-
+      } else {
-  for (const groupElement of convertToGroupElements) {
+        groupElement.classList.remove("hidden");
-    const groupName = groupElement.dataset.converter;
+        groupElement.classList.add("flex");
-
+      }
-    const targetElements = groupElement.querySelectorAll(".target");
+    }
-    const targets = Array.from(targetElements);
+  };
-
+
-    for (const target of targets) {
+  for (const groupElement of convertToGroupElements) {
-      target.onmousedown = () => {
+    const groupName = groupElement.dataset.converter;
-        convertToElement.value = target.dataset.value;
+
-        convertToInput.value = `${target.dataset.target} using ${target.dataset.converter}`;
+    const targetElements = groupElement.querySelectorAll(".target");
-        convertButton.disabled = false;
+    const targets = Array.from(targetElements);
-        showMatching("");
+
-      };
+    for (const target of targets) {
-    }
+      target.onmousedown = () => {
-
+        convertToElement.value = target.dataset.value;
-    convertToGroups[groupName] = [targets, groupElement];
+        convertToInput.value = `${target.dataset.target} using ${target.dataset.converter}`;
-  }
+        formatSelected = true;
-
+        if (pendingFiles === 0 && fileNames.length > 0) {
-  convertToInput.addEventListener("input", (e) => {
+          convertButton.disabled = false;
-    showMatching(e.target.value.toLowerCase());
+        }
-  });
+        showMatching("");
-
+      };
-  convertToInput.addEventListener("search", () => {
+    }
-    // when the user clears the search bar using the 'x' button
+
-    convertButton.disabled = true;
+    convertToGroups[groupName] = [targets, groupElement];
-  });
+  }
-
+
-  convertToInput.addEventListener("blur", (e) => {
+  convertToInput.addEventListener("input", (e) => {
-    // Keep the popup open even when clicking on a target button
+    showMatching(e.target.value.toLowerCase());
-    // for a split second to allow the click to go through
+  });
-    if (e?.relatedTarget?.classList?.contains("target")) {
+
-      convertToPopup.classList.add("hidden");
+  convertToInput.addEventListener("search", () => {
-      convertToPopup.classList.remove("flex");
+    // when the user clears the search bar using the 'x' button
-      return;
+    convertButton.disabled = true;
-    }
+    formatSelected = false;
-
+  });
-    convertToPopup.classList.add("hidden");
+
-    convertToPopup.classList.remove("flex");
+  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
-  convertToInput.addEventListener("focus", () => {
+    if (e?.relatedTarget?.classList?.contains("target")) {
-    convertToPopup.classList.remove("hidden");
+      convertToPopup.classList.add("hidden");
-    convertToPopup.classList.add("flex");
+      convertToPopup.classList.remove("flex");
-  });
+      return;
-};
+    }
-
+
-// const convertFromSelect = document.querySelector("select[name='convert_from']");
+    convertToPopup.classList.add("hidden");
-
+    convertToPopup.classList.remove("flex");
-// Add a 'change' event listener to the file input element
+  });
-fileInput.addEventListener("change", (e) => {
+
-  // console.log(e.target.files);
+  convertToInput.addEventListener("focus", () => {
-  // Get the selected files from the event target
+    convertToPopup.classList.remove("hidden");
-  const files = e.target.files;
+    convertToPopup.classList.add("flex");
-
+  });
-  // Select the file-list table
+};
-  const fileList = document.querySelector("#file-list");
+
-
+// Add a 'change' event listener to the file input element
-  // Loop through the selected files
+fileInput.addEventListener("change", (e) => {
-  for (const file of files) {
+  // Get the selected files from the event target
-    // Create a new table row for each file
+  const files = e.target.files;
-    const row = document.createElement("tr");
+
-    row.innerHTML = `
+  // Select the file-list table
-      <td>${file.name}</td>
+  const fileList = document.querySelector("#file-list");
-      <td>${(file.size / 1024).toFixed(2)} kB</td>
+
-      <td><a class="secondary" onclick="deleteRow(this)" style="cursor: pointer">Remove</a></td>
+  // Loop through the selected files
-    `;
+  for (const file of files) {
-
+    // Create a new table row for each file
-    if (!fileType) {
+    const row = document.createElement("tr");
-      fileType = file.name.split(".").pop();
+    row.innerHTML = `
-      console.log("fileType", fileType);
+      <td>${file.name}</td>
-      fileInput.setAttribute("accept", `.${fileType}`);
+      <td>${(file.size / 1024).toFixed(2)} kB</td>
-      setTitle();
+      <td><a onclick="deleteRow(this)">Remove</a></td>
-
+    `;
-      // choose the option that matches the file type
+
-      // for (const option of convertFromSelect.children) {
+    if (!fileType) {
-      //   console.log(option.value);
+      fileType = file.name.split(".").pop();
-      //   if (option.value === fileType) {
+      fileInput.setAttribute("accept", `.${fileType}`);
-      //     option.selected = true;
+      setTitle();
-      //   }
+
-      // }
+      // choose the option that matches the file type
-
+      // for (const option of convertFromSelect.children) {
-      fetch("/conversions", {
+      //   console.log(option.value);
-        method: "POST",
+      //   if (option.value === fileType) {
-        body: JSON.stringify({ fileType: fileType }),
+      //     option.selected = true;
-        headers: {
+      //   }
-          "Content-Type": "application/json",
+      // }
-        },
+
-      })
+      fetch(`${webroot}/conversions`, {
-        .then((res) => res.text())
+        method: "POST",
-        .then((html) => {
+        body: JSON.stringify({ fileType: fileType }),
-          selectContainer.innerHTML = html;
+        headers: {
-          updateSearchBar();
+          "Content-Type": "application/json",
-        })
+        },
-        .catch((err) => console.log(err));
+      })
-    }
+        .then((res) => res.text())
-
+        .then((html) => {
-    // Append the row to the file-list table
+          selectContainer.innerHTML = html;
-    fileList.appendChild(row);
+          updateSearchBar();
-
+        })
-    // Append the file to the hidden input
+        .catch((err) => console.log(err));
-    fileNames.push(file.name);
+    }
-  }
+
-
+    // Append the row to the file-list table
-  uploadFiles(files);
+    fileList.appendChild(row);
-});
+
-
+    // Append the file to the hidden input
-const setTitle = () => {
+    fileNames.push(file.name);
-  const title = document.querySelector("h1");
+  }
-  title.textContent = `Convert ${fileType ? `.${fileType}` : ""}`;
+
-};
+  uploadFiles(files);
-
+});
-// Add a onclick for the delete button
+
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const setTitle = () => {
-const deleteRow = (target) => {
+  const title = document.querySelector("h1");
-  const filename = target.parentElement.parentElement.children[0].textContent;
+  title.textContent = `Convert ${fileType ? `.${fileType}` : ""}`;
-  const row = target.parentElement.parentElement;
+};
-  row.remove();
+
-
+// Add a onclick for the delete button
-  // remove from fileNames
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const index = fileNames.indexOf(filename);
+const deleteRow = (target) => {
-  fileNames.splice(index, 1);
+  const filename = target.parentElement.parentElement.children[0].textContent;
-
+  const row = target.parentElement.parentElement;
-  // if fileNames is empty, reset fileType
+  row.remove();
-  if (fileNames.length === 0) {
+
-    fileType = null;
+  // remove from fileNames
-    fileInput.removeAttribute("accept");
+  const index = fileNames.indexOf(filename);
-    setTitle();
+  fileNames.splice(index, 1);
-  }
+
-
+  // reset fileInput
-  fetch("/delete", {
+  fileInput.value = "";
-    method: "POST",
+
-    body: JSON.stringify({ filename: filename }),
+  // if fileNames is empty, reset fileType
-    headers: {
+  if (fileNames.length === 0) {
-      "Content-Type": "application/json",
+    fileType = null;
-    },
+    fileInput.removeAttribute("accept");
-  })
+    convertButton.disabled = true;
-    .then((res) => res.json())
+    setTitle();
-    .then((data) => {
+  }
-      console.log(data);
+
-    })
+  fetch(`${webroot}/delete`, {
-    .catch((err) => console.log(err));
+    method: "POST",
-};
+    body: JSON.stringify({ filename: filename }),
-
+    headers: {
-const uploadFiles = (files) => {
+      "Content-Type": "application/json",
-  const formData = new FormData();
+    },
-
+  })
-  for (const file of files) {
+    .catch((err) => console.log(err));
-    formData.append("file", file, file.name);
+};
-  }
+
-
+const uploadFiles = (files) => {
-  fetch("/upload", {
+  convertButton.disabled = true;
-    method: "POST",
+  convertButton.textContent = "Uploading...";
-    body: formData,
+  pendingFiles += 1;
-  })
+
-    .then((res) => res.json())
+  const formData = new FormData();
-    .then((data) => {
+
-      console.log(data);
+  for (const file of files) {
-    })
+    formData.append("file", file, file.name);
-    .catch((err) => console.log(err));
+  }
-};
+
-
+  fetch(`${webroot}/upload`, {
-const formConvert = document.querySelector("form[action='/convert']");
+    method: "POST",
-
+    body: formData,
-formConvert.addEventListener("submit", () => {
+  })
-  const hiddenInput = document.querySelector("input[name='file_names']");
+    .then((res) => res.json())
-  hiddenInput.value = JSON.stringify(fileNames);
+    .then((data) => {
-});
+      pendingFiles -= 1;
-
+      if (pendingFiles === 0) {
-updateSearchBar();
+        if (formatSelected) {
+          convertButton.disabled = false;
+        }
+        convertButton.textContent = "Convert";
+      }
+      console.log(data);
+    })
+    .catch((err) => console.log(err));
+};
+
+const formConvert = document.querySelector(`form[action='${webroot}/convert']`);
+
+formConvert.addEventListener("submit", () => {
+  const hiddenInput = document.querySelector("input[name='file_names']");
+  hiddenInput.value = JSON.stringify(fileNames);
+});
+
+updateSearchBar();

renovate.json

@@ -3,5 +3,9 @@
   "extends": [
     "config:recommended",
     ":disableDependencyDashboard"
-  ]
+  ],
+  "lockFileMaintenance": {
+    "enabled": true,
+    "automerge": true
+  }
 }

src/components/base.tsx

@@ -1,31 +1,39 @@
+import { Html } from "@elysiajs/html";
+
 export const BaseHtml = ({
   children,
   title = "ConvertX",
-}: { children: JSX.Element; title?: string }) => (
+  webroot = "",
+}: {
+  children: JSX.Element;
+  title?: string;
+  webroot?: string;
+}) => (
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta name="webroot" content={webroot} />
       <title safe>{title}</title>
-      <link rel="stylesheet" href="/generated.css" />
+      <link rel="stylesheet" href={`${webroot}/generated.css`} />
       <link
         rel="apple-touch-icon"
         sizes="180x180"
-        href="/apple-touch-icon.png"
+        href={`${webroot}/apple-touch-icon.png`}
       />
       <link
         rel="icon"
         type="image/png"
         sizes="32x32"
-        href="/favicon-32x32.png"
+        href={`${webroot}/favicon-32x32.png`}
       />
       <link
         rel="icon"
         type="image/png"
         sizes="16x16"
-        href="/favicon-16x16.png"
+        href={`${webroot}/favicon-16x16.png`}
       />
-      <link rel="manifest" href="/site.webmanifest" />
+      <link rel="manifest" href={`${webroot}/site.webmanifest`} />
     </head>
     <body class="w-full bg-neutral-900 text-neutral-200">{children}</body>
   </html>

src/components/header.tsx

@@ -1,7 +1,14 @@
+import { Html } from "@kitajs/html";
+
 export const Header = ({
   loggedIn,
   accountRegistration,
-}: { loggedIn?: boolean; accountRegistration?: boolean }) => {
+  webroot = "",
+}: {
+  loggedIn?: boolean;
+  accountRegistration?: boolean;
+  webroot?: string;
+}) => {
   let rightNav: JSX.Element;
   if (loggedIn) {
     rightNav = (
@@ -12,7 +19,8 @@ export const Header = ({
               text-accent-600 transition-all
               hover:text-accent-500 hover:underline
             `}
-            href="/history">
+            href={`${webroot}/history`}
+          >
             History
           </a>
         </li>
@@ -22,7 +30,8 @@ export const Header = ({
               text-accent-600 transition-all
               hover:text-accent-500 hover:underline
             `}
-            href="/logoff">
+            href={`${webroot}/logoff`}
+          >
             Logout
           </a>
         </li>
@@ -37,7 +46,8 @@ export const Header = ({
               text-accent-600 transition-all
               hover:text-accent-500 hover:underline
             `}
-            href="/login">
+            href={`${webroot}/login`}
+          >
             Login
           </a>
         </li>
@@ -48,7 +58,8 @@ export const Header = ({
                 text-accent-600 transition-all
                 hover:text-accent-500 hover:underline
               `}
-              href="/register">
+              href={`${webroot}/register`}
+            >
               Register
             </a>
           </li>
@@ -63,7 +74,7 @@ export const Header = ({
         <ul>
           <li>
             <strong>
-              <a href="/">ConvertX</a>
+              <a href={`${webroot}/`}>ConvertX</a>
             </strong>
           </li>
         </ul>

src/converters/assimp.ts

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

src/converters/inkscape.ts

@@ -0,0 +1,64 @@
+import { exec } from "node:child_process";
+
+export const properties = {
+    from: {
+      images: [
+        "svg",
+        "pdf",
+        "eps",
+        "ps",
+        "wmf",
+        "emf",
+        "png"
+      ]
+    },
+    to: {
+      images: [
+        "dxf",
+        "emf",
+        "eps",
+        "fxg",
+        "gpl",
+        "hpgl",
+        "html",
+        "odg",
+        "pdf",
+        "png",
+        "pov",
+        "ps",
+        "sif",
+        "svg",
+        "svgz",
+        "tex",
+        "wmf",
+      ]
+    },
+  };
+
+  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(`inkscape "${filePath}" -o "${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

@@ -2,6 +2,7 @@ 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 convertInkscape, properties as propertiesInkscape } from "./inkscape";
 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";
@@ -63,6 +64,10 @@ const properties: Record<
     properties: propertiesGraphicsmagick,
     converter: convertGraphicsmagick,
   },
+  inkscape: {
+    properties: propertiesInkscape,
+    converter: convertInkscape,
+  },
   assimp: {
     properties: propertiesassimp,
     converter: convertassimp,

src/helpers/normalizeFiletype.ts

@@ -1,35 +1,37 @@
-export const normalizeFiletype = (filetype: string): string => {
+export const normalizeFiletype = (filetype: string): string => {
-  const lowercaseFiletype = filetype.toLowerCase();
+  const lowercaseFiletype = filetype.toLowerCase();
-
+
-  switch (lowercaseFiletype) {
+  switch (lowercaseFiletype) {
-    case "jfif":
+    case "jfif":
-    case "jpg":
+    case "jpg":
-      return "jpeg";
+      return "jpeg";
-    case "htm":
+    case "htm":
-      return "html";
+      return "html";
-    case "tex":
+    case "tex":
-      return "latex";
+      return "latex";
-    case "md":
+    case "md":
-      return "markdown";
+      return "markdown";
-    default:
+    case "unknown":
-      return lowercaseFiletype;
+      return "m4a";
-  }
+    default:
-};
+      return lowercaseFiletype;
-
+  }
-export const normalizeOutputFiletype = (filetype: string): string => {
+};
-  const lowercaseFiletype = filetype.toLowerCase();
+
-
+export const normalizeOutputFiletype = (filetype: string): string => {
-  switch (lowercaseFiletype) {
+  const lowercaseFiletype = filetype.toLowerCase();
-    case "jpeg":
+
-      return "jpg";
+  switch (lowercaseFiletype) {
-    case "latex":
+    case "jpeg":
-      return "tex";
+      return "jpg";
-    case "markdown_phpextra":
+    case "latex":
-    case "markdown_strict":
+      return "tex";
-    case "markdown_mmd":
+    case "markdown_phpextra":
-    case "markdown":
+    case "markdown_strict":
-      return "md";
+    case "markdown_mmd":
-    default:
+    case "markdown":
-      return lowercaseFiletype;
+      return "md";
-  }
+    default:
-};
+      return lowercaseFiletype;
+  }
+};

src/helpers/printVersions.ts

@@ -53,6 +53,16 @@ if (process.env.NODE_ENV === "production") {
     }
   });
 
+  exec("inkscape --version", (error, stdout) => {
+    if (error) {
+      console.error("Inkscape 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.");

src/index.tsx

@@ -2,7 +2,7 @@ import { randomInt, 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 { html, Html } from "@elysiajs/html";
 import { jwt, type JWTPayloadSpec } from "@elysiajs/jwt";
 import { staticPlugin } from "@elysiajs/static";
 import { Database } from "bun:sqlite";
@@ -37,6 +37,8 @@ const AUTO_DELETE_EVERY_N_HOURS = process.env.AUTO_DELETE_EVERY_N_HOURS
   ? Number(process.env.AUTO_DELETE_EVERY_N_HOURS)
   : 24;
 
+const WEBROOT = process.env.WEBROOT ?? "";
+
 // fileNames: fileNames,
 // filesToConvert: fileNames.length,
 // convertedFiles : 0,
@@ -112,6 +114,7 @@ const app = new Elysia({
   serve: {
     maxRequestBodySize: Number.MAX_SAFE_INTEGER,
   },
+  prefix: WEBROOT,
 })
   .use(cookie())
   .use(html())
@@ -127,24 +130,36 @@ const app = new Elysia({
   )
   .use(
     staticPlugin({
-      assets: "src/public/",
+      assets: "public",
-      prefix: "/",
+      prefix: "",
     }),
   )
+  .get("/test", () => {
+    return (
+      <html lang="en">
+        <head>
+          <title>Hello World</title>
+        </head>
+        <body>
+          <h1>Hello</h1>
+        </body>
+      </html>
+    );
+  })
   .get("/setup", ({ redirect }) => {
     if (!FIRST_RUN) {
-      return redirect("/login", 302);
+      return redirect(`${WEBROOT}/login`, 302);
     }
 
     return (
-      <BaseHtml title="ConvertX | Setup">
+      <BaseHtml title="ConvertX | Setup" webroot={WEBROOT}>
         <main class="mx-auto w-full max-w-4xl px-4">
           <h1 class="my-8 text-3xl">Welcome to ConvertX!</h1>
           <article class="article p-0">
             <header class="w-full bg-neutral-800 p-4">
               Create your account
             </header>
-            <form method="post" action="/register" class="p-4">
+            <form method="post" action={`${WEBROOT}/register`} class="p-4">
               <fieldset class="mb-4 flex flex-col gap-4">
                 <label class="flex flex-col gap-1">
                   Email
@@ -191,13 +206,16 @@ const app = new Elysia({
   })
   .get("/register", ({ redirect }) => {
     if (!ACCOUNT_REGISTRATION) {
-      return redirect("/login", 302);
+      return redirect(`${WEBROOT}/login`, 302);
     }
 
     return (
-      <BaseHtml title="ConvertX | Register">
+      <BaseHtml webroot={WEBROOT} title="ConvertX | Register">
         <>
-          <Header accountRegistration={ACCOUNT_REGISTRATION} />
+          <Header
+            webroot={WEBROOT}
+            accountRegistration={ACCOUNT_REGISTRATION}
+          />
           <main class="w-full px-4">
             <article class="article">
               <form method="post" class="flex flex-col gap-4">
@@ -241,7 +259,7 @@ const app = new Elysia({
     "/register",
     async ({ body, set, redirect, jwt, cookie: { auth } }) => {
       if (!ACCOUNT_REGISTRATION && !FIRST_RUN) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       if (FIRST_RUN) {
@@ -296,13 +314,13 @@ const app = new Elysia({
         sameSite: "strict",
       });
 
-      return redirect("/", 302);
+      return redirect(`${WEBROOT}/`, 302);
     },
     { body: t.Object({ email: t.String(), password: t.String() }) },
   )
   .get("/login", async ({ jwt, redirect, cookie: { auth } }) => {
     if (FIRST_RUN) {
-      return redirect("/setup", 302);
+      return redirect(`${WEBROOT}/setup`, 302);
     }
 
     // if already logged in, redirect to home
@@ -310,16 +328,19 @@ const app = new Elysia({
       const user = await jwt.verify(auth.value);
 
       if (user) {
-        return redirect("/", 302);
+        return redirect(`${WEBROOT}/`, 302);
       }
 
       auth.remove();
     }
 
     return (
-      <BaseHtml title="ConvertX | Login">
+      <BaseHtml webroot={WEBROOT} title="ConvertX | Login">
         <>
-          <Header accountRegistration={ACCOUNT_REGISTRATION} />
+          <Header
+            webroot={WEBROOT}
+            accountRegistration={ACCOUNT_REGISTRATION}
+          />
           <main class="w-full px-4">
             <article class="article">
               <form method="post" class="flex flex-col gap-4">
@@ -350,7 +371,7 @@ const app = new Elysia({
                 <div role="group">
                   {ACCOUNT_REGISTRATION ? (
                     <a
-                      href="/register"
+                      href={`${WEBROOT}/register`}
                       role="button"
                       class="btn-primary w-full"
                     >
@@ -417,7 +438,7 @@ const app = new Elysia({
         sameSite: "strict",
       });
 
-      return redirect("/", 302);
+      return redirect(`${WEBROOT}/`, 302);
     },
     { body: t.Object({ email: t.String(), password: t.String() }) },
   )
@@ -426,22 +447,22 @@ const app = new Elysia({
       auth.remove();
     }
 
-    return redirect("/login", 302);
+    return redirect(`${WEBROOT}/login`, 302);
   })
   .post("/logoff", ({ redirect, cookie: { auth } }) => {
     if (auth?.value) {
       auth.remove();
     }
 
-    return redirect("/login", 302);
+    return redirect(`${WEBROOT}/login`, 302);
   })
   .get("/", async ({ jwt, redirect, cookie: { auth, jobId } }) => {
     if (FIRST_RUN) {
-      return redirect("/setup", 302);
+      return redirect(`${WEBROOT}/setup`, 302);
     }
 
     if (!auth?.value && !ALLOW_UNAUTHENTICATED) {
-      return redirect("/login", 302);
+      return redirect(`${WEBROOT}/login`, 302);
     }
 
     // validate jwt
@@ -461,7 +482,7 @@ const app = new Elysia({
             if (auth?.value) {
               auth.remove();
             }
-            return redirect("/login", 302);
+            return redirect(`${WEBROOT}/login`, 302);
           }
         }
       }
@@ -494,7 +515,7 @@ const app = new Elysia({
     }
 
     if (!user) {
-      return redirect("/login", 302);
+      return redirect(`${WEBROOT}/login`, 302);
     }
 
     // create a new job
@@ -524,9 +545,9 @@ const app = new Elysia({
     console.log("jobId set to:", id);
 
     return (
-      <BaseHtml>
+      <BaseHtml webroot={WEBROOT}>
         <>
-          <Header loggedIn />
+          <Header webroot={WEBROOT} loggedIn />
           <main class="w-full px-4">
             <article class="article">
               <h1 class="mb-4 text-xl">Convert</h1>
@@ -562,7 +583,7 @@ const app = new Elysia({
             </article>
             <form
               method="post"
-              action="/convert"
+              action={`${WEBROOT}/convert`}
               class="relative mx-auto mb-[35vh] w-full max-w-4xl"
             >
               <input type="hidden" name="file_names" id="file_names" />
@@ -727,16 +748,16 @@ const app = new Elysia({
     "/upload",
     async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
       if (!auth?.value) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       if (!jobId?.value) {
-        return redirect("/", 302);
+        return redirect(`${WEBROOT}/`, 302);
       }
 
       const existingJob = await db
@@ -744,7 +765,7 @@ const app = new Elysia({
         .get(jobId.value, user.id);
 
       if (!existingJob) {
-        return redirect("/", 302);
+        return redirect(`${WEBROOT}/`, 302);
       }
 
       const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
@@ -769,16 +790,16 @@ const app = new Elysia({
     "/delete",
     async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
       if (!auth?.value) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       if (!jobId?.value) {
-        return redirect("/", 302);
+        return redirect(`${WEBROOT}/`, 302);
       }
 
       const existingJob = await db
@@ -786,7 +807,7 @@ const app = new Elysia({
         .get(jobId.value, user.id);
 
       if (!existingJob) {
-        return redirect("/", 302);
+        return redirect(`${WEBROOT}/`, 302);
       }
 
       const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
@@ -799,16 +820,16 @@ const app = new Elysia({
     "/convert",
     async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
       if (!auth?.value) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       if (!jobId?.value) {
-        return redirect("/", 302);
+        return redirect(`${WEBROOT}/`, 302);
       }
 
       const existingJob = db
@@ -817,7 +838,7 @@ const app = new Elysia({
         .get(jobId.value, user.id);
 
       if (!existingJob) {
-        return redirect("/", 302);
+        return redirect(`${WEBROOT}/`, 302);
       }
 
       const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
@@ -838,7 +859,7 @@ const app = new Elysia({
       const fileNames = JSON.parse(body.file_names) as string[];
 
       if (!Array.isArray(fileNames) || fileNames.length === 0) {
-        return redirect("/", 302);
+        return redirect(`${WEBROOT}/`, 302);
       }
 
       db.query(
@@ -891,7 +912,7 @@ const app = new Elysia({
         });
 
       // Redirect the client immediately
-      return redirect(`/results/${jobId.value}`, 302);
+      return redirect(`${WEBROOT}/results/${jobId.value}`, 302);
     },
     {
       body: t.Object({
@@ -902,12 +923,12 @@ const app = new Elysia({
   )
   .get("/history", async ({ jwt, redirect, cookie: { auth } }) => {
     if (!auth?.value) {
-      return redirect("/login", 302);
+      return redirect(`${WEBROOT}/login`, 302);
     }
     const user = await jwt.verify(auth.value);
 
     if (!user) {
-      return redirect("/login", 302);
+      return redirect(`${WEBROOT}/login`, 302);
     }
 
     let userJobs = db
@@ -928,9 +949,9 @@ const app = new Elysia({
     userJobs = userJobs.filter((job) => job.num_files > 0);
 
     return (
-      <BaseHtml title="ConvertX | Results">
+      <BaseHtml webroot={WEBROOT} title="ConvertX | Results">
         <>
-          <Header loggedIn />
+          <Header webroot={WEBROOT} loggedIn />
           <main class="w-full px-4">
             <article class="article">
               <h1 class="mb-4 text-xl">Results</h1>
@@ -963,7 +984,7 @@ const app = new Elysia({
                             text-accent-500 underline
                             hover:text-accent-400
                           `}
-                          href={`/results/${job.id}`}
+                          href={`${WEBROOT}/results/${job.id}`}
                         >
                           View
                         </a>
@@ -982,7 +1003,7 @@ const app = new Elysia({
     "/results/:jobId",
     async ({ params, jwt, set, redirect, cookie: { auth, job_id } }) => {
       if (!auth?.value) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       if (job_id?.value) {
@@ -992,7 +1013,7 @@ const app = new Elysia({
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       const job = db
@@ -1015,9 +1036,9 @@ const app = new Elysia({
         .all(params.jobId);
 
       return (
-        <BaseHtml title="ConvertX | Result">
+        <BaseHtml webroot={WEBROOT} title="ConvertX | Result">
           <>
-            <Header loggedIn />
+            <Header webroot={WEBROOT} loggedIn />
             <main class="w-full px-4">
               <article class="article">
                 <div class="mb-4 flex items-center justify-between">
@@ -1075,7 +1096,7 @@ const app = new Elysia({
                               text-accent-500 underline
                               hover:text-accent-400
                             `}
-                            href={`/download/${outputPath}${file.output_file_name}`}
+                            href={`${WEBROOT}/download/${outputPath}${file.output_file_name}`}
                           >
                             View
                           </a>
@@ -1086,7 +1107,7 @@ const app = new Elysia({
                               text-accent-500 underline
                               hover:text-accent-400
                             `}
-                            href={`/download/${outputPath}${file.output_file_name}`}
+                            href={`${WEBROOT}/download/${outputPath}${file.output_file_name}`}
                             download={file.output_file_name}
                           >
                             Download
@@ -1098,7 +1119,7 @@ const app = new Elysia({
                 </table>
               </article>
             </main>
-            <script src="/results.js" defer />
+            <script src={`${WEBROOT}/results.js`} defer />
           </>
         </BaseHtml>
       );
@@ -1108,7 +1129,7 @@ const app = new Elysia({
     "/progress/:jobId",
     async ({ jwt, set, params, redirect, cookie: { auth, job_id } }) => {
       if (!auth?.value) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       if (job_id?.value) {
@@ -1118,7 +1139,7 @@ const app = new Elysia({
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       const job = db
@@ -1197,7 +1218,7 @@ const app = new Elysia({
                         text-accent-500 underline
                         hover:text-accent-400
                       `}
-                      href={`/download/${outputPath}${file.output_file_name}`}
+                      href={`${WEBROOT}/download/${outputPath}${file.output_file_name}`}
                     >
                       View
                     </a>
@@ -1208,7 +1229,7 @@ const app = new Elysia({
                         text-accent-500 underline
                         hover:text-accent-400
                       `}
-                      href={`/download/${outputPath}${file.output_file_name}`}
+                      href={`${WEBROOT}/download/${outputPath}${file.output_file_name}`}
                       download={file.output_file_name}
                     >
                       Download
@@ -1226,12 +1247,12 @@ const app = new Elysia({
     "/download/:userId/:jobId/:fileName",
     async ({ params, jwt, redirect, cookie: { auth } }) => {
       if (!auth?.value) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       const job = await db
@@ -1239,7 +1260,7 @@ const app = new Elysia({
         .get(user.id, params.jobId);
 
       if (!job) {
-        return redirect("/results", 302);
+        return redirect(`${WEBROOT}/results`, 302);
       }
       // parse from url encoded string
       const userId = decodeURIComponent(params.userId);
@@ -1252,18 +1273,18 @@ const app = new Elysia({
   )
   .get("/converters", async ({ jwt, redirect, cookie: { auth } }) => {
     if (!auth?.value) {
-      return redirect("/login", 302);
+      return redirect(`${WEBROOT}/login`, 302);
     }
 
     const user = await jwt.verify(auth.value);
     if (!user) {
-      return redirect("/login", 302);
+      return redirect(`${WEBROOT}/login`, 302);
     }
 
     return (
-      <BaseHtml title="ConvertX | Converters">
+      <BaseHtml webroot={WEBROOT} title="ConvertX | Converters">
         <>
-          <Header loggedIn />
+          <Header webroot={WEBROOT} loggedIn />
           <main class="w-full px-4">
             <article class="article">
               <h1 class="mb-4 text-xl">Converters</h1>
@@ -1322,12 +1343,12 @@ const app = new Elysia({
     async ({ params, jwt, redirect, cookie: { auth } }) => {
       // TODO: Implement zip download
       if (!auth?.value) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       const user = await jwt.verify(auth.value);
       if (!user) {
-        return redirect("/login", 302);
+        return redirect(`${WEBROOT}/login`, 302);
       }
 
       const job = await db
@@ -1335,12 +1356,12 @@ const app = new Elysia({
         .get(user.id, params.jobId);
 
       if (!job) {
-        return redirect("/results", 302);
+        return redirect(`${WEBROOT}/results`, 302);
       }
 
       // const userId = decodeURIComponent(params.userId);
       // const jobId = decodeURIComponent(params.jobId);
-      // const outputPath = `${outputDir}${userId}/${jobId}/`;
+      // const outputPath = `${outputDir}${userId}/`{jobId}/);
 
       // return Bun.zip(outputPath);
     },
@@ -1364,7 +1385,7 @@ if (process.env.NODE_ENV !== "production") {
 app.listen(3000);
 
 console.log(
-  `🦊 Elysia is running at http://${app.server?.hostname}:${app.server?.port}`,
+  `🦊 Elysia is running at http://${app.server?.hostname}:${app.server?.port}${WEBROOT}`,
 );
 
 const clearJobs = () => {

tailwind.config.js

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

tsconfig.json

@@ -27,4 +27,4 @@
     "noImplicitOverride": true
     // "noImplicitReturns": true
   }
-}
+}