feat: poppler working for some formats

.deepsource.toml

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

.eslintrc.cjs

@@ -0,0 +1,55 @@
+/** @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

@@ -0,0 +1,23 @@
+# 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

@@ -0,0 +1,28 @@
+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,10 +58,9 @@ jobs:
       # https://github.com/docker/build-push-action
       - name: Build and push Docker image
         id: build-and-push
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v5
         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

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

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

@@ -1,21 +0,0 @@
-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

@@ -46,5 +46,4 @@ package-lock.json
 /output
 /db
 /data
-/Bruno
+/Bruno
-/tsconfig.tsbuildinfo

.vscode/settings.json

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

CHANGELOG.md

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

Debian.Dockerfile

@@ -1,63 +0,0 @@
-FROM oven/bun:1-debian as base
-WORKDIR /app
-
-# install dependencies into temp directory
-# this will cache them and speed up future builds
-FROM base AS install
-RUN mkdir -p /temp/dev
-COPY package.json bun.lockb /temp/dev/
-RUN cd /temp/dev && bun install --frozen-lockfile
-
-# install with --production (exclude devDependencies)
-RUN mkdir -p /temp/prod
-COPY package.json bun.lockb /temp/prod/
-RUN cd /temp/prod && bun install --frozen-lockfile --production
-
-# FROM base AS install-libjxl-tools
-# download
-
-
-
-# copy node_modules from temp directory
-# then copy all (non-ignored) project files into the image
-# FROM base AS prerelease
-# COPY --from=install /temp/dev/node_modules node_modules
-# COPY . .
-
-# # [optional] tests & build
-# ENV NODE_ENV=production
-# RUN bun test
-# RUN bun run build
-
-# copy production dependencies and source code into final image
-FROM base AS release
-LABEL maintainer="Emrik Östling (C4illin)"
-LABEL description="ConvertX: self-hosted online file converter supporting 700+ file formats."
-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 \
-  && apt-get install -y \
-  pandoc \
-  texlive-latex-recommended \
-  texlive-fonts-recommended \
-  texlive-latex-extra \
-  ffmpeg \
-  graphicsmagick \
-  ghostscript \
-  libvips-tools
-
-# # libjxl is not available in the official debian repositories
-# RUN wget https://github.com/libjxl/libjxl/releases/download/v0.10.2/jxl-debs-amd64-debian-bullseye-v0.10.2.tar.gz -O /tmp/jxl-debs-amd64-debian-bullseye-v0.10.2.tar.gz \
-#   && mkdir -p /tmp/libjxl \
-#   && tar -xvf /tmp/jxl-debs-amd64-debian-bullseye-v0.10.2.tar.gz -C /tmp/libjxl \
-#   && dpkg -i /tmp/libjxl/libjxl_0.10.2_amd64.deb /tmp/libjxl/jxl_0.10.2_amd64.deb \
-#   && rm -rf /tmp/jxl-debs-amd64-debian-bullseye-v0.10.2.tar.gz /tmp/libjxl
-
-COPY --from=install /temp/prod/node_modules node_modules
-# COPY --from=prerelease /app/src/index.tsx /app/src/
-# COPY --from=prerelease /app/package.json .
-COPY . .
-
-EXPOSE 3000/tcp
-ENTRYPOINT [ "bun", "run", "./src/index.tsx" ]

Dockerfile

@@ -1,5 +1,4 @@
-FROM oven/bun:1.1.29-alpine AS base
+FROM oven/bun:1-debian as base
-LABEL org.opencontainers.image.source="https://github.com/C4illin/ConvertX"
 WORKDIR /app
 
 # install dependencies into temp directory
@@ -14,12 +13,6 @@ 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
@@ -38,28 +31,21 @@ LABEL description="ConvertX: self-hosted online file converter supporting 700+ f
 LABEL repo="https://github.com/C4illin/ConvertX"
 
 # install additional dependencies
-RUN apk --no-cache add  \
+RUN rm -rf /var/lib/apt/lists/partial && apt-get update -o Acquire::CompressionTypes::Order::=gz \
+  && apt-get install -y \
   pandoc \
-  texlive \
+  texlive-latex-recommended \
-  texlive-xetex \
+  texlive-fonts-recommended \
-  texmf-dist-latexextra \
+  texlive-latex-extra \
   ffmpeg \
   graphicsmagick \
   ghostscript \
-  vips-tools \
+  libvips-tools
-  vips-poppler \
-  vips-jxl \
-  libjxl-tools
-
-# this might be needed for some latex use cases, will add it if needed.
-#   texmf-dist-fontsextra \
 
 COPY --from=install /temp/prod/node_modules node_modules
-COPY --from=builder /root/.cargo/bin/resvg /usr/local/bin/resvg
 # COPY --from=prerelease /app/src/index.tsx /app/src/
 # COPY --from=prerelease /app/package.json .
 COPY . .
 
 EXPOSE 3000/tcp
-ENV NODE_ENV=production
 ENTRYPOINT [ "bun", "run", "./src/index.tsx" ]

README.md

@@ -1,13 +1,8 @@
 ![ConvertX](images/logo.png)
 # ConvertX
 [![Docker](https://github.com/C4illin/ConvertX/actions/workflows/docker-publish.yml/badge.svg?branch=main)](https://github.com/C4illin/ConvertX/actions/workflows/docker-publish.yml)
-[![GitHub Release](https://img.shields.io/github/v/release/C4illin/ConvertX)](https://github.com/C4illin/ConvertX/pkgs/container/convertx)
-![GitHub commits since latest release](https://img.shields.io/github/commits-since/C4illin/ConvertX/latest)
-![GitHub repo size](https://img.shields.io/github/repo-size/C4illin/ConvertX)
-![Docker container size](https://ghcr-badge.egpl.dev/c4illin/convertx/size?color=%230375b6&tag=latest&label=image+size&trim=)
-![GitHub top language](https://img.shields.io/github/languages/top/C4illin/ConvertX)
 
-A self-hosted online file converter. Supports 831 different formats. Written with TypeScript, Bun and Elysia.
+A self-hosted online file converter. Supports 831 different formats. Written with Typescript, Bun and Elysia.
 
 ## Features
 
@@ -17,46 +12,38 @@ A self-hosted online file converter. Supports 831 different formats. Written wit
 
 ## Converters supported
 
-| Converter                                                                    | Use case      | Converts from | Converts to |
+| Converter      | Use case      | Converts from | Converts to |
-|------------------------------------------------------------------------------|---------------|---------------|-------------|
+|----------------|---------------|---------------|-------------|
-| [libjxl](https://github.com/libjxl/libjxl)                                   | JPEG XL       | 11            | 11          |
+| Vips           | Images (fast) | 45            | 23          |
-| [resvg](https://github.com/RazrFalcon/resvg)                                 | SVG           | 1             | 1           |
+| PDFLaTeX       | Documents     | 1             | 1           |
-| [Vips](https://github.com/libvips/libvips)                                   | Images        | 45            | 23          |
+| Pandoc         | Documents     | 43            | 65          |
-| [XeLaTeX](https://tug.org/xetex/)                                            | LaTeX         | 1             | 1           |
+| GraphicsMagick | Images        | 166           | 133         |
-| [Pandoc](https://pandoc.org/)                                                | Documents     | 43            | 65          |
+| FFmpeg         | Video         | ~473          | ~280        |
-| [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
+    image: ghcr.io/c4illin/convertx:main
-    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 -p 3000:3000 -v ./data:/app/data ghcr.io/c4illin/convertx
+docker run ghcr.io/c4illin/convertx:master -p 3000:3000 -e ACCOUNT_REGISTRATION=false -v /path/you/want:/app/data
-```
+``` -->
 
 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.
 
@@ -66,31 +53,13 @@ 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
-- [ ] Make the upload button nicer and more easy to drop files on. Support copy paste as well if possible.
+- [ ] Add searchable list of formats
-- [ ] 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": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
   "formatter": {
     "enabled": true,
     "formatWithErrors": true,
@@ -9,9 +9,6 @@
     "lineWidth": 80,
     "attributePosition": "auto"
   },
-  "files": {
-    "ignore": ["**/node_modules/**", "**/pico.lime.min.css"]
-  },
   "organizeImports": { "enabled": true },
   "linter": {
     "enabled": true,

compose.yaml

@@ -2,12 +2,10 @@ services:
   convertx:
     build:
       context: .
-      # dockerfile: Debian.Dockerfile
     volumes:
       - ./data:/app/data
     environment:
       - ACCOUNT_REGISTRATION=true
       - JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234
-      - ALLOW_UNAUTHENTICATED=true
     ports:
       - 3000:3000

eslint.config.mjs

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

package.json

@@ -1,57 +1,40 @@
 {
   "name": "convertx-frontend",
-  "version": "0.5.0",
+  "version": "1.0.50",
   "scripts": {
     "dev": "bun run --watch src/index.tsx",
     "hot": "bun run --hot src/index.tsx",
     "format": "biome format --write ./src",
-    "css": "cpy 'node_modules/@picocss/pico/css/pico.lime.min.css' 'src/public/' --flat",
+    "css": "cpy 'node_modules/@picocss/pico/css/pico.lime.min.css' 'src/public/' --flat"
-    "lint": "run-p 'lint:*'",
-    "lint:tsc": "tsc --noEmit",
-    "lint:knip": "knip",
-    "lint:biome": "biome lint --error-on-warnings ./src"
   },
   "dependencies": {
     "@elysiajs/cookie": "^0.8.0",
-    "@elysiajs/html": "1.0.2",
+    "@elysiajs/html": "^1.0.2",
-    "@elysiajs/jwt": "^1.1.1",
+    "@elysiajs/jwt": "^1.0.2",
-    "@elysiajs/static": "1.0.3",
+    "@elysiajs/static": "^1.0.3",
-    "elysia": "^1.1.12"
+    "elysia": "^1.0.22",
+    "node-poppler": "^7.2.0"
   },
   "module": "src/index.tsx",
-  "type": "module",
   "bun-create": {
     "start": "bun run src/index.tsx"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.2",
+    "@biomejs/biome": "1.7.3",
-    "@eslint/compat": "^1.1.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
-    "@eslint/js": "^9.9.1",
+    "@kitajs/ts-html-plugin": "^4.0.1",
-    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-    "@kitajs/ts-html-plugin": "^4.0.2",
     "@picocss/pico": "^2.0.6",
-    "@total-typescript/ts-reset": "^0.6.1",
+    "@total-typescript/ts-reset": "^0.5.1",
-    "@types/bun": "^1.1.8",
+    "@types/bun": "^1.1.3",
-    "@types/eslint": "^9.6.1",
+    "@types/eslint": "^8.56.10",
-    "@types/node": "^22.5.4",
+    "@types/node": "^20.12.13",
-    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@types/ws": "^8.5.10",
-    "@typescript-eslint/parser": "^8.4.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-deprecation": "^3.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-eslint-comments": "^3.2.0",
+    "prettier": "^3.2.5",
-    "eslint-plugin-import": "^2.30.0",
+    "typescript": "^5.4.5"
-    "eslint-plugin-isaacscript": "^4.0.0",
+  }
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "knip": "^5.29.2",
-    "npm-run-all2": "^6.2.2",
-    "prettier": "^3.3.3",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.4.0"
-  },
-  "trustedDependencies": [
-    "@biomejs/biome"
-  ]
 }

renovate.json

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

src/components/base.tsx

@@ -1,7 +1,4 @@
-export const BaseHtml = ({
+export const BaseHtml = ({ children, title = "ConvertX" }) => (
-  children,
-  title = "ConvertX",
-}: { children: JSX.Element; title?: string }) => (
   <html lang="en">
     <head>
       <meta charset="UTF-8" />

src/components/header.tsx

@@ -30,7 +30,7 @@ export const Header = ({
   }
 
   return (
-    <header class="container">
+    <header className="container">
       <nav>
         <ul>
           <li>
@@ -50,4 +50,4 @@ export const Header = ({
       </nav>
     </header>
   );
-};
+};

src/converters/ffmpeg.ts

@@ -260,7 +260,6 @@ export const properties = {
       "mpegts",
       "mpegtsraw",
       "mpegvideo",
-      "mpg",
       "mpjpeg",
       "mpl2",
       "mpo",

src/converters/libjxl.ts

@@ -1,71 +0,0 @@
-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,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
-): 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("success");
-    });
-  });
-}

src/converters/main.ts

@@ -16,19 +16,11 @@ import {
 } from "./graphicsmagick";
 
 import {
-  convert as convertxelatex,
+  convert as convertPdflatex,
-  properties as propertiesxelatex,
+  properties as propertiesPdflatex,
-} from "./xelatex";
+} from "./pdflatex";
 
-import {
+import { convert as convertPoppler, properties as propertiesPoppler } from "./poppler";
-  convert as convertLibjxl,
-  properties as propertiesLibjxl,
-} from "./libjxl";
-
-import {
-  convert as convertresvg,
-  properties as propertiesresvg,
-} from "./resvg";
 
 import { normalizeFiletype } from "../helpers/normalizeFiletype";
 
@@ -60,21 +52,17 @@ const properties: {
     ) => any;
   };
 } = {
-  libjxl: {
-    properties: propertiesLibjxl,
-    converter: convertLibjxl,
-  },
-  resvg: {
-    properties: propertiesresvg,
-    converter: convertresvg,
-  },
   vips: {
     properties: propertiesImage,
     converter: convertImage,
   },
-  xelatex: {
+  pdflatex: {
-    properties: propertiesxelatex,
+    properties: propertiesPdflatex,
-    converter: convertxelatex,
+    converter: convertPdflatex,
+  },
+  poppler: {
+    properties: propertiesPoppler,
+    converter: convertPoppler,
   },
   pandoc: {
     properties: propertiesPandoc,
@@ -120,8 +108,9 @@ export async function mainConverter(
 
       for (const key in converterObj.properties.from) {
         if (
-          converterObj?.properties?.from[key]?.includes(fileType) &&
+          // HOW??
-          converterObj?.properties?.to[key]?.includes(convertTo)
+          converterObj.properties.from[key].includes(fileType) &&
+          converterObj.properties.to[key].includes(convertTo)
         ) {
           converterFunc = converterObj.converter;
           break;
@@ -210,7 +199,7 @@ for (const converterName in properties) {
 }
 possibleInputs.sort();
 
-const getPossibleInputs = () => {
+export const getPossibleInputs = () => {
   return possibleInputs;
 };
 
@@ -225,9 +214,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];
     }
   }
 }
@@ -246,9 +235,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

@@ -0,0 +1,119 @@
+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

@@ -127,15 +127,9 @@ export function convert(
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   options?: any,
 ): 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 ${option} "${filePath}" -f ${fileType} -t ${convertTo} -o "${targetPath}"`,
+      `pandoc "${filePath}" -f ${fileType} -t ${convertTo} -o "${targetPath}"`,
       (error, stdout, stderr) => {
         if (error) {
           reject(`error: ${error}`);

src/converters/pdflatex.ts

@@ -19,13 +19,9 @@ export function convert(
 ): Promise<string> {
   return new Promise((resolve, reject) => {
     // const fileName: string = (targetPath.split("/").pop() as string).replace(".pdf", "")
-    const outputPath = targetPath
+    const outputPath = targetPath.split("/").slice(0, -1).join("/").replace("./", "")
-      .split("/")
-      .slice(0, -1)
-      .join("/")
-      .replace("./", "");
     exec(
-      `latexmk -xelatex -interaction=nonstopmode -output-directory="${outputPath}" "${filePath}"`,
+      `pdflatex -interaction=nonstopmode -output-directory="${outputPath}" "${filePath}"`,
       (error, stdout, stderr) => {
         if (error) {
           reject(`error: ${error}`);

src/converters/poppler.ts

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

src/converters/resvg.ts

@@ -1,37 +0,0 @@
-import { exec } from "node:child_process";
-
-export const properties = {
-  from: {
-    images: ["svg"],
-  },
-  to: {
-    images: ["png"],
-  },
-};
-
-export function convert(
-  filePath: string,
-  fileType: string,
-  convertTo: string,
-  targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
-): Promise<string> {
-  return new Promise((resolve, reject) => {
-    exec(`resvg "${filePath}" "${targetPath}"`, (error, stdout, stderr) => {
-      if (error) {
-        reject(`error: ${error}`);
-      }
-
-      if (stdout) {
-        console.log(`stdout: ${stdout}`);
-      }
-
-      if (stderr) {
-        console.error(`stderr: ${stderr}`);
-      }
-
-      resolve("success");
-    });
-  });
-}

src/converters/vips.ts

@@ -113,29 +113,22 @@ export function convert(
   //     .toFormat(convertTo)
   //     .toFile(targetPath);
   // }
-  let action = "copy";
-  if (fileType === "pdf") {
-    action = "pdfload";
-  }
 
   return new Promise((resolve, reject) => {
-    exec(
+    exec(`vips copy "${filePath}" "${targetPath}"`, (error, stdout, stderr) => {
-      `vips ${action} "${filePath}" "${targetPath}"`,
+      if (error) {
-      (error, stdout, stderr) => {
+        reject(`error: ${error}`);
-        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("success");
-      },
+    });
-    );
   });
 }

src/helpers/normalizeFiletype.ts

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

src/helpers/printVersions.ts

@@ -1,95 +0,0 @@
-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("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/public/robots.txt

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

src/public/script.js

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

src/public/style.css

@@ -1,10 +1,16 @@
+article {
+  /* height: 300px; */
+  /* width: 300px; */
+
+}
+
 div.icon {
   height: 100px;
   width: 100px;
 }
 
 button[type="submit"] {
-  width: 50%;
+  width: 50%
 }
 
 div.center {
@@ -12,48 +18,4 @@ div.center {
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}
-
-@media (max-width: 99999999999px) {
-  .convert_to_popup {
-    width: 50vw !important;
-    height: 50vh;
-  }
-}
-
-@media (max-width: 850px) {
-  .convert_to_popup {
-    width: 60vw !important;
-    height: 60vh;
-  }
-}
-
-@media (max-width: 575px) {
-  .convert_to_popup {
-    width: 80vw !important;
-    height: 75vh;
-  }
-}
-
-@media (max-height: 1000px) {
-  .convert_to_popup {
-    height: 40vh;
-  }
-}
-@media (max-height: 650px) {
-  .convert_to_popup {
-    height: 30vh;
-  }
-}
-
-@media (max-height: 500px) {
-  .convert_to_popup {
-    height: 25vh;
-  }
-}
-
-@media (max-height: 400px) {
-  .convert_to_popup {
-    height: 15vh;
-  }
-}

tsconfig.json

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