mirror of
https://github.com/C4illin/ConvertX.git
synced 2025-10-26 17:43:30 +00:00
Compare commits
84 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b28977ffe2 | ||
|
|
a47bb682a5 | ||
|
|
a17eca0a09 | ||
|
|
ea9250543e | ||
|
|
317c932c2a | ||
|
|
5b1703db68 | ||
|
|
60ba7c93fb | ||
|
|
22227130dd | ||
|
|
5daf66f5d0 | ||
|
|
aee1962607 | ||
|
|
0d42762b36 | ||
|
|
b97b12b449 | ||
|
|
bdf651df82 | ||
|
|
267ef14789 | ||
|
|
905adc5e1c | ||
|
|
52ed7274e9 | ||
|
|
a29238c265 | ||
|
|
48c6fb79fc | ||
|
|
8358396656 | ||
|
|
b30e5800c3 | ||
|
|
21a1b50ed8 | ||
|
|
e6a94fb21d | ||
|
|
bef1710e33 | ||
|
|
16b322d4e6 | ||
|
|
9bf64e42d5 | ||
|
|
5988fe8212 | ||
|
|
5df9c0b751 | ||
|
|
136a8b2d74 | ||
|
|
ccfb574d5d | ||
|
|
ad6eedea69 | ||
|
|
c3082db8f7 | ||
|
|
a1f8cbae66 | ||
|
|
bb34bdee87 | ||
|
|
11fcbc3f96 | ||
|
|
f7344e4c65 | ||
|
|
781310f3dc | ||
|
|
3f063644f2 | ||
|
|
081634b610 | ||
|
|
cf3da08c73 | ||
|
|
5f7234d6c1 | ||
|
|
6597c1d7ca | ||
|
|
ecb2c75008 | ||
|
|
d5eeef9f68 | ||
|
|
7456174022 | ||
|
|
bc4ad49285 | ||
|
|
f0d0e43929 | ||
|
|
8ca4f1587d | ||
|
|
1535377bfe | ||
|
|
83bf78fd57 | ||
|
|
4d9c4d64aa | ||
|
|
53fff594fc | ||
|
|
fe4aeaff03 | ||
|
|
2078cb0ee0 | ||
|
|
86a61d35d7 | ||
|
|
96fa7e2f55 | ||
|
|
7d2af46b0b | ||
|
|
57e2999866 | ||
|
|
6fb8ca4d82 | ||
|
|
c295e546bd | ||
|
|
f7abb9389c | ||
|
|
d7de154eda | ||
|
|
20bd111765 | ||
|
|
eadd0da291 | ||
|
|
52294465fb | ||
|
|
049e9163ce | ||
|
|
d466d2dbbc | ||
|
|
3f79ccaa2a | ||
|
|
1e9bde18c7 | ||
|
|
9af23346bf | ||
|
|
d310341fca | ||
|
|
d88a755c13 | ||
|
|
7c6085c685 | ||
|
|
7ed1ad21f2 | ||
|
|
8a2237fbd9 | ||
|
|
0e363f0731 | ||
|
|
4074647b67 | ||
|
|
c84968be50 | ||
|
|
0e53a99d43 | ||
|
|
bdd0cf556f | ||
|
|
2483274388 | ||
|
|
4c5129910a | ||
|
|
fe13a1b736 | ||
|
|
f1ac71b397 | ||
|
|
1b1067a03f |
7
.deepsource.toml
Normal file
7
.deepsource.toml
Normal file
@@ -0,0 +1,7 @@
|
||||
version = 1
|
||||
|
||||
[[analyzers]]
|
||||
name = "javascript"
|
||||
|
||||
[analyzers.meta]
|
||||
environment = ["nodejs"]
|
||||
@@ -1,46 +0,0 @@
|
||||
/** @type {import("eslint").Linter.Config} */
|
||||
const config = {
|
||||
root: true,
|
||||
parser: "@typescript-eslint/parser",
|
||||
plugins: ["isaacscript", "import"],
|
||||
extends: [
|
||||
"plugin:@typescript-eslint/recommended-type-checked",
|
||||
"plugin:@typescript-eslint/stylistic-type-checked",
|
||||
"plugin:prettier/recommended",
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ["./tsconfig.json"],
|
||||
},
|
||||
overrides: [
|
||||
// Template files don't have reliable type information
|
||||
{
|
||||
extends: ["plugin:@typescript-eslint/disable-type-checked"],
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
// These off/not-configured-the-way-we-want lint rules we like & opt into
|
||||
"@typescript-eslint/no-explicit-any": "error",
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"error",
|
||||
{ argsIgnorePattern: "^_", destructuredArrayIgnorePattern: "^_" },
|
||||
],
|
||||
"@typescript-eslint/consistent-type-imports": [
|
||||
"error",
|
||||
{ prefer: "type-imports", fixStyle: "inline-type-imports" },
|
||||
],
|
||||
"import/consistent-type-specifier-style": ["error", "prefer-inline"],
|
||||
|
||||
// For educational purposes we format our comments/jsdoc nicely
|
||||
"isaacscript/complete-sentences-jsdoc": "warn",
|
||||
"isaacscript/format-jsdoc-comments": "warn",
|
||||
|
||||
// These lint rules don't make sense for us but are enabled in the preset configs
|
||||
"@typescript-eslint/no-confusing-void-expression": "off",
|
||||
"@typescript-eslint/restrict-template-expressions": "off",
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
23
.github/dependabot.yml
vendored
23
.github/dependabot.yml
vendored
@@ -1,23 +0,0 @@
|
||||
# To get started with Dependabot version updates, you'll need to specify which
|
||||
# package ecosystems to update and where the package manifests are located.
|
||||
# Please see the documentation for all configuration options:
|
||||
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
|
||||
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: npm
|
||||
versioning-strategy: increase
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: daily
|
||||
commit-message:
|
||||
prefix: "build"
|
||||
include: "scope"
|
||||
open-pull-requests-limit: 10
|
||||
- package-ecosystem: github-actions
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: weekly
|
||||
commit-message:
|
||||
prefix: "build"
|
||||
include: "scope"
|
||||
28
.github/workflows/bun-dependabot.yml
vendored
28
.github/workflows/bun-dependabot.yml
vendored
@@ -1,28 +0,0 @@
|
||||
name: 'Dependabot: Update bun.lockb'
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
paths:
|
||||
- "package.json"
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
|
||||
jobs:
|
||||
update-bun-lockb:
|
||||
name: "Update bun.lockb"
|
||||
if: github.actor == 'dependabot[bot]'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: oven-sh/setup-bun@v2
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
ref: ${{ github.event.pull_request.head.ref }}
|
||||
- run: |
|
||||
bun install
|
||||
git add bun.lockb
|
||||
git config --global user.name 'dependabot[bot]'
|
||||
git config --global user.email 'dependabot[bot]@users.noreply.github.com'
|
||||
git commit --amend --no-edit
|
||||
git push --force
|
||||
36
CHANGELOG.md
36
CHANGELOG.md
@@ -1,5 +1,41 @@
|
||||
# Changelog
|
||||
|
||||
## [0.5.0](https://github.com/C4illin/ConvertX/compare/v0.4.1...v0.5.0) (2024-09-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add option to customize how often files are automatically deleted ([317c932](https://github.com/C4illin/ConvertX/commit/317c932c2a26280bf37ed3d3bf9b879413590f5a))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* improve file name replacement logic ([60ba7c9](https://github.com/C4illin/ConvertX/commit/60ba7c93fbdc961f3569882fade7cc13dee7a7a5))
|
||||
|
||||
## [0.4.1](https://github.com/C4illin/ConvertX/compare/v0.4.0...v0.4.1) (2024-09-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* allow non lowercase true and false values, fixes [#122](https://github.com/C4illin/ConvertX/issues/122) ([bef1710](https://github.com/C4illin/ConvertX/commit/bef1710e3376baa7e25c107ded20a40d18b8c6b0))
|
||||
|
||||
## [0.4.0](https://github.com/C4illin/ConvertX/compare/v0.3.3...v0.4.0) (2024-08-26)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add option for unauthenticated file conversions [#114](https://github.com/C4illin/ConvertX/issues/114) ([f0d0e43](https://github.com/C4illin/ConvertX/commit/f0d0e4392983c3e4c530304ea88e023fda9bcac0))
|
||||
* add resvg converter ([d5eeef9](https://github.com/C4illin/ConvertX/commit/d5eeef9f6884b2bb878508bed97ea9ceaa662995))
|
||||
* add robots.txt ([6597c1d](https://github.com/C4illin/ConvertX/commit/6597c1d7caeb4dfb6bc47b442e4dfc9840ad12b7))
|
||||
* Add search bar for formats ([53fff59](https://github.com/C4illin/ConvertX/commit/53fff594fc4d69306abcb2a5cad890fcd0953a58))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* keep unauthenticated user logged in if allowed [#114](https://github.com/C4illin/ConvertX/issues/114) ([bc4ad49](https://github.com/C4illin/ConvertX/commit/bc4ad492852fad8cb832a0c03485cccdd7f7b117))
|
||||
* pdf support in vips ([8ca4f15](https://github.com/C4illin/ConvertX/commit/8ca4f1587df7f358893941c656d78d75f04dac93))
|
||||
* Slow click on conversion popup does not work ([4d9c4d6](https://github.com/C4illin/ConvertX/commit/4d9c4d64aa0266f3928935ada68d91ac81f638aa))
|
||||
|
||||
## [0.3.3](https://github.com/C4illin/ConvertX/compare/v0.3.2...v0.3.3) (2024-07-30)
|
||||
|
||||
|
||||
|
||||
12
Dockerfile
12
Dockerfile
@@ -1,4 +1,5 @@
|
||||
FROM oven/bun:1.1.21-alpine as base
|
||||
FROM oven/bun:1.1.29-alpine AS base
|
||||
LABEL org.opencontainers.image.source="https://github.com/C4illin/ConvertX"
|
||||
WORKDIR /app
|
||||
|
||||
# install dependencies into temp directory
|
||||
@@ -13,6 +14,12 @@ RUN mkdir -p /temp/prod
|
||||
COPY package.json bun.lockb /temp/prod/
|
||||
RUN cd /temp/prod && bun install --frozen-lockfile --production
|
||||
|
||||
FROM base AS builder
|
||||
RUN apk --no-cache add curl gcc
|
||||
ENV PATH=/root/.cargo/bin:$PATH
|
||||
RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
|
||||
RUN cargo install resvg
|
||||
|
||||
# copy node_modules from temp directory
|
||||
# then copy all (non-ignored) project files into the image
|
||||
# FROM base AS prerelease
|
||||
@@ -40,12 +47,15 @@ RUN apk --no-cache add \
|
||||
graphicsmagick \
|
||||
ghostscript \
|
||||
vips-tools \
|
||||
vips-poppler \
|
||||
vips-jxl \
|
||||
libjxl-tools
|
||||
|
||||
# this might be needed for some latex use cases, will add it if needed.
|
||||
# texmf-dist-fontsextra \
|
||||
|
||||
COPY --from=install /temp/prod/node_modules node_modules
|
||||
COPY --from=builder /root/.cargo/bin/resvg /usr/local/bin/resvg
|
||||
# COPY --from=prerelease /app/src/index.tsx /app/src/
|
||||
# COPY --from=prerelease /app/package.json .
|
||||
COPY . .
|
||||
|
||||
34
README.md
34
README.md
@@ -20,8 +20,9 @@ A self-hosted online file converter. Supports 831 different formats. Written wit
|
||||
| Converter | Use case | Converts from | Converts to |
|
||||
|------------------------------------------------------------------------------|---------------|---------------|-------------|
|
||||
| [libjxl](https://github.com/libjxl/libjxl) | JPEG XL | 11 | 11 |
|
||||
| [resvg](https://github.com/RazrFalcon/resvg) | SVG | 1 | 1 |
|
||||
| [Vips](https://github.com/libvips/libvips) | Images | 45 | 23 |
|
||||
| [XeLaTeX](https://tug.org/xetex/) | Documents | 1 | 1 |
|
||||
| [XeLaTeX](https://tug.org/xetex/) | LaTeX | 1 | 1 |
|
||||
| [Pandoc](https://pandoc.org/) | Documents | 43 | 65 |
|
||||
| [GraphicsMagick](http://www.graphicsmagick.org/) | Images | 166 | 133 |
|
||||
| [FFmpeg](https://ffmpeg.org/) | Video | ~473 | ~280 |
|
||||
@@ -37,21 +38,25 @@ Any missing converter? Open an issue or pull request!
|
||||
services:
|
||||
convertx:
|
||||
image: ghcr.io/c4illin/convertx
|
||||
container_name: convertx
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "3000:3000"
|
||||
environment: # Defaults are listed below. All are optional.
|
||||
- ACCOUNT_REGISTRATION=false # true or false, doesn't matter for the first account (e.g. keep this to false if you only want one account)
|
||||
- JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234 # will use randomUUID() by default
|
||||
- HTTP_ALLOWED=false # setting this to true is unsafe, only set this to true locally
|
||||
- ALLOW_UNAUTHENTICATED=false # allows anyone to use the service without logging in, only set this to true locally
|
||||
- AUTO_DELETE_EVERY_N_HOURS=24 # checks every n hours for files older then n hours and deletes them, set to 0 to disable
|
||||
volumes:
|
||||
- convertx:/app/data
|
||||
```
|
||||
|
||||
<!-- or
|
||||
or
|
||||
|
||||
```bash
|
||||
docker run ghcr.io/c4illin/convertx:master -p 3000:3000 -e ACCOUNT_REGISTRATION=false -v /path/you/want:/app/data
|
||||
``` -->
|
||||
docker run -p 3000:3000 -v ./data:/app/data ghcr.io/c4illin/convertx
|
||||
```
|
||||
|
||||
Then visit `http://localhost:3000` in your browser and create your account. Don't leave it unconfigured and open, as anyone can register the first account.
|
||||
|
||||
@@ -61,14 +66,31 @@ If you get unable to open database file run `chown -R $USER:$USER path` on the p
|
||||
|
||||
Tutorial in french: https://belginux.com/installer-convertx-avec-docker/
|
||||
|
||||
## Screenshots
|
||||
|
||||

|
||||
|
||||
## Development
|
||||
|
||||
0. Install [Bun](https://bun.sh/) and Git
|
||||
1. Clone the repository
|
||||
2. `bun install`
|
||||
3. `bun run dev`
|
||||
|
||||
Pull requests are welcome! See below and open issues for the list of todos.
|
||||
|
||||
## Todo
|
||||
- [x] Add messages for errors in converters
|
||||
- [x] Add searchable list of formats
|
||||
- [ ] Add options for converters
|
||||
- [ ] Add more converters
|
||||
- [ ] Divide index.tsx into smaller components
|
||||
- [ ] Add tests
|
||||
- [ ] Add searchable list of formats
|
||||
- [ ] Make the upload button nicer and more easy to drop files on. Support copy paste as well if possible.
|
||||
- [ ] Make errors logs visible from the web ui
|
||||
- [ ] Add more converters:
|
||||
- [ ] [deark](https://github.com/jsummers/deark)
|
||||
- [ ] LibreOffice
|
||||
- [ ] [dvisvgm](https://github.com/mgieseki/dvisvgm)
|
||||
|
||||
## Contributors
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
|
||||
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"formatWithErrors": true,
|
||||
@@ -9,6 +9,9 @@
|
||||
"lineWidth": 80,
|
||||
"attributePosition": "auto"
|
||||
},
|
||||
"files": {
|
||||
"ignore": ["**/node_modules/**", "**/pico.lime.min.css"]
|
||||
},
|
||||
"organizeImports": { "enabled": true },
|
||||
"linter": {
|
||||
"enabled": true,
|
||||
|
||||
@@ -8,5 +8,6 @@ services:
|
||||
environment:
|
||||
- ACCOUNT_REGISTRATION=true
|
||||
- JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234
|
||||
- ALLOW_UNAUTHENTICATED=true
|
||||
ports:
|
||||
- 3000:3000
|
||||
|
||||
36
eslint.config.mjs
Normal file
36
eslint.config.mjs
Normal file
@@ -0,0 +1,36 @@
|
||||
import { fixupPluginRules } from "@eslint/compat";
|
||||
import tseslint from "typescript-eslint";
|
||||
import eslint from "@eslint/js";
|
||||
import deprecationPlugin from "eslint-plugin-deprecation";
|
||||
import eslintCommentsPlugin from "eslint-plugin-eslint-comments";
|
||||
import importPlugin from "eslint-plugin-import";
|
||||
import simpleImportSortPlugin from "eslint-plugin-simple-import-sort";
|
||||
|
||||
export default tseslint.config(
|
||||
{
|
||||
plugins: {
|
||||
"@typescript-eslint": tseslint.plugin,
|
||||
deprecation: fixupPluginRules(deprecationPlugin),
|
||||
"eslint-comments": eslintCommentsPlugin,
|
||||
import: fixupPluginRules(importPlugin),
|
||||
"simple-import-sort": simpleImportSortPlugin,
|
||||
},
|
||||
},
|
||||
{
|
||||
ignores: ["**/node_modules/**", "**/public/**"],
|
||||
},
|
||||
eslint.configs.recommended,
|
||||
...tseslint.configs.recommendedTypeChecked,
|
||||
...tseslint.configs.stylisticTypeChecked,
|
||||
{
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
projectService: true,
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
project: ["./tsconfig.json"],
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
BIN
images/preview.png
Normal file
BIN
images/preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
41
package.json
41
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "convertx-frontend",
|
||||
"version": "0.3.3",
|
||||
"version": "0.5.0",
|
||||
"scripts": {
|
||||
"dev": "bun run --watch src/index.tsx",
|
||||
"hot": "bun run --hot src/index.tsx",
|
||||
@@ -8,14 +8,15 @@
|
||||
"css": "cpy 'node_modules/@picocss/pico/css/pico.lime.min.css' 'src/public/' --flat",
|
||||
"lint": "run-p 'lint:*'",
|
||||
"lint:tsc": "tsc --noEmit",
|
||||
"lint:knip": "knip"
|
||||
"lint:knip": "knip",
|
||||
"lint:biome": "biome lint --error-on-warnings ./src"
|
||||
},
|
||||
"dependencies": {
|
||||
"@elysiajs/cookie": "^0.8.0",
|
||||
"@elysiajs/html": "1.0.2",
|
||||
"@elysiajs/jwt": "^1.1.0",
|
||||
"@elysiajs/jwt": "^1.1.1",
|
||||
"@elysiajs/static": "1.0.3",
|
||||
"elysia": "^1.1.4"
|
||||
"elysia": "^1.1.12"
|
||||
},
|
||||
"module": "src/index.tsx",
|
||||
"type": "module",
|
||||
@@ -23,26 +24,32 @@
|
||||
"start": "bun run src/index.tsx"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "1.8.3",
|
||||
"@biomejs/biome": "1.9.2",
|
||||
"@eslint/compat": "^1.1.1",
|
||||
"@eslint/js": "^9.9.1",
|
||||
"@ianvs/prettier-plugin-sort-imports": "^4.3.1",
|
||||
"@kitajs/ts-html-plugin": "^4.0.2",
|
||||
"@picocss/pico": "^2.0.6",
|
||||
"@total-typescript/ts-reset": "^0.5.1",
|
||||
"@types/bun": "^1.1.6",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"@types/node": "^22.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
||||
"@typescript-eslint/parser": "^7.18.0",
|
||||
"@total-typescript/ts-reset": "^0.6.1",
|
||||
"@types/bun": "^1.1.8",
|
||||
"@types/eslint": "^9.6.1",
|
||||
"@types/node": "^22.5.4",
|
||||
"@typescript-eslint/eslint-plugin": "^8.4.0",
|
||||
"@typescript-eslint/parser": "^8.4.0",
|
||||
"cpy-cli": "^5.0.0",
|
||||
"eslint": "^9.8.0",
|
||||
"eslint": "^9.9.1",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-isaacscript": "^3.12.2",
|
||||
"eslint-plugin-deprecation": "^3.0.0",
|
||||
"eslint-plugin-eslint-comments": "^3.2.0",
|
||||
"eslint-plugin-import": "^2.30.0",
|
||||
"eslint-plugin-isaacscript": "^4.0.0",
|
||||
"eslint-plugin-prettier": "^5.2.1",
|
||||
"knip": "^5.27.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"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": "^5.5.4",
|
||||
"typescript-eslint": "^8.4.0"
|
||||
},
|
||||
"trustedDependencies": [
|
||||
"@biomejs/biome"
|
||||
|
||||
6
renovate.json
Normal file
6
renovate.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"extends": [
|
||||
"config:recommended"
|
||||
]
|
||||
}
|
||||
@@ -25,6 +25,11 @@ import {
|
||||
properties as propertiesLibjxl,
|
||||
} from "./libjxl";
|
||||
|
||||
import {
|
||||
convert as convertresvg,
|
||||
properties as propertiesresvg,
|
||||
} from "./resvg";
|
||||
|
||||
import { normalizeFiletype } from "../helpers/normalizeFiletype";
|
||||
|
||||
// This should probably be reconstructed so that the functions are not imported instead the functions hook into this to make the converters more modular
|
||||
@@ -59,6 +64,10 @@ const properties: {
|
||||
properties: propertiesLibjxl,
|
||||
converter: convertLibjxl,
|
||||
},
|
||||
resvg: {
|
||||
properties: propertiesresvg,
|
||||
converter: convertresvg,
|
||||
},
|
||||
vips: {
|
||||
properties: propertiesImage,
|
||||
converter: convertImage,
|
||||
|
||||
37
src/converters/resvg.ts
Normal file
37
src/converters/resvg.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { exec } from "node:child_process";
|
||||
|
||||
export const properties = {
|
||||
from: {
|
||||
images: ["svg"],
|
||||
},
|
||||
to: {
|
||||
images: ["png"],
|
||||
},
|
||||
};
|
||||
|
||||
export function convert(
|
||||
filePath: string,
|
||||
fileType: string,
|
||||
convertTo: string,
|
||||
targetPath: string,
|
||||
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
|
||||
options?: any,
|
||||
): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
exec(`resvg "${filePath}" "${targetPath}"`, (error, stdout, stderr) => {
|
||||
if (error) {
|
||||
reject(`error: ${error}`);
|
||||
}
|
||||
|
||||
if (stdout) {
|
||||
console.log(`stdout: ${stdout}`);
|
||||
}
|
||||
|
||||
if (stderr) {
|
||||
console.error(`stderr: ${stderr}`);
|
||||
}
|
||||
|
||||
resolve("success");
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -113,22 +113,29 @@ export function convert(
|
||||
// .toFormat(convertTo)
|
||||
// .toFile(targetPath);
|
||||
// }
|
||||
let action = "copy";
|
||||
if (fileType === "pdf") {
|
||||
action = "pdfload";
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
exec(`vips copy "${filePath}" "${targetPath}"`, (error, stdout, stderr) => {
|
||||
if (error) {
|
||||
reject(`error: ${error}`);
|
||||
}
|
||||
exec(
|
||||
`vips ${action} "${filePath}" "${targetPath}"`,
|
||||
(error, stdout, stderr) => {
|
||||
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("success");
|
||||
});
|
||||
resolve("success");
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -73,6 +73,16 @@ if (process.env.NODE_ENV === "production") {
|
||||
}
|
||||
});
|
||||
|
||||
exec("resvg -V", (error, stdout) => {
|
||||
if (error) {
|
||||
console.error("resvg is not installed");
|
||||
}
|
||||
|
||||
if (stdout) {
|
||||
console.log(`resvg v${stdout.split("\n")[0]}`);
|
||||
}
|
||||
});
|
||||
|
||||
exec("bun -v", (error, stdout) => {
|
||||
if (error) {
|
||||
console.error("Bun is not installed. wait what");
|
||||
|
||||
345
src/index.tsx
345
src/index.tsx
@@ -1,12 +1,12 @@
|
||||
import { Database } from "bun:sqlite";
|
||||
import { randomUUID } from "node:crypto";
|
||||
import { rmSync } from "node:fs";
|
||||
import { mkdir, unlink } from "node:fs/promises";
|
||||
import cookie from "@elysiajs/cookie";
|
||||
import { html } from "@elysiajs/html";
|
||||
import { jwt } from "@elysiajs/jwt";
|
||||
import { jwt, type JWTPayloadSpec } from "@elysiajs/jwt";
|
||||
import { staticPlugin } from "@elysiajs/static";
|
||||
import { Database } from "bun:sqlite";
|
||||
import { Elysia, t } from "elysia";
|
||||
import { randomInt, randomUUID } from "node:crypto";
|
||||
import { rmSync } from "node:fs";
|
||||
import { mkdir, unlink } from "node:fs/promises";
|
||||
import { BaseHtml } from "./components/base";
|
||||
import { Header } from "./components/header";
|
||||
import {
|
||||
@@ -27,9 +27,15 @@ const uploadsDir = "./data/uploads/";
|
||||
const outputDir = "./data/output/";
|
||||
|
||||
const ACCOUNT_REGISTRATION =
|
||||
process.env.ACCOUNT_REGISTRATION === "true" || false;
|
||||
process.env.ACCOUNT_REGISTRATION?.toLowerCase() === "true" || false;
|
||||
|
||||
const HTTP_ALLOWED = process.env.HTTP_ALLOWED === "true" || false;
|
||||
const HTTP_ALLOWED =
|
||||
process.env.HTTP_ALLOWED?.toLowerCase() === "true" || false;
|
||||
const ALLOW_UNAUTHENTICATED =
|
||||
process.env.ALLOW_UNAUTHENTICATED?.toLowerCase() === "true" || false;
|
||||
const AUTO_DELETE_EVERY_N_HOURS = process.env.AUTO_DELETE_EVERY_N_HOURS
|
||||
? Number(process.env.AUTO_DELETE_EVERY_N_HOURS)
|
||||
: 24;
|
||||
|
||||
// fileNames: fileNames,
|
||||
// filesToConvert: fileNames.length,
|
||||
@@ -115,7 +121,7 @@ const app = new Elysia({
|
||||
schema: t.Object({
|
||||
id: t.String(),
|
||||
}),
|
||||
secret: process.env.JWT_SECRET || randomUUID(),
|
||||
secret: process.env.JWT_SECRET ?? randomUUID(),
|
||||
exp: "7d",
|
||||
}),
|
||||
)
|
||||
@@ -336,7 +342,7 @@ const app = new Elysia({
|
||||
.post(
|
||||
"/login",
|
||||
async function handler({ body, set, redirect, jwt, cookie: { auth } }) {
|
||||
const existingUser = await db
|
||||
const existingUser = db
|
||||
.query("SELECT * FROM users WHERE email = ?")
|
||||
.as(User)
|
||||
.get(body.email);
|
||||
@@ -403,25 +409,55 @@ const app = new Elysia({
|
||||
return redirect("/setup", 302);
|
||||
}
|
||||
|
||||
if (!auth?.value) {
|
||||
if (!auth?.value && !ALLOW_UNAUTHENTICATED) {
|
||||
return redirect("/login", 302);
|
||||
}
|
||||
|
||||
// validate jwt
|
||||
const user = await jwt.verify(auth.value);
|
||||
if (!user) {
|
||||
return redirect("/login", 302);
|
||||
let user: ({ id: string } & JWTPayloadSpec) | false = false;
|
||||
if (auth?.value) {
|
||||
user = await jwt.verify(auth.value);
|
||||
|
||||
if (user !== false && user.id) {
|
||||
if (Number.parseInt(user.id) < 2 ** 24 || !ALLOW_UNAUTHENTICATED) {
|
||||
// make sure user exists in db
|
||||
const existingUser = db
|
||||
.query("SELECT * FROM users WHERE id = ?")
|
||||
.as(User)
|
||||
.get(user.id);
|
||||
|
||||
if (!existingUser) {
|
||||
if (auth?.value) {
|
||||
auth.remove();
|
||||
}
|
||||
return redirect("/login", 302);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (ALLOW_UNAUTHENTICATED) {
|
||||
const newUserId = String(randomInt(2 ** 24, Number.MAX_SAFE_INTEGER));
|
||||
const accessToken = await jwt.sign({
|
||||
id: newUserId,
|
||||
});
|
||||
|
||||
user = { id: newUserId };
|
||||
if (!auth) {
|
||||
return {
|
||||
message: "No auth cookie, perhaps your browser is blocking cookies.",
|
||||
};
|
||||
}
|
||||
|
||||
// set cookie
|
||||
auth.set({
|
||||
value: accessToken,
|
||||
httpOnly: true,
|
||||
secure: !HTTP_ALLOWED,
|
||||
maxAge: 60 * 60 * 24 * 1,
|
||||
sameSite: "strict",
|
||||
});
|
||||
}
|
||||
|
||||
// make sure user exists in db
|
||||
const existingUser = await db
|
||||
.query("SELECT * FROM users WHERE id = ?")
|
||||
.as(User)
|
||||
.get(user.id);
|
||||
|
||||
if (!existingUser) {
|
||||
if (auth?.value) {
|
||||
auth.remove();
|
||||
}
|
||||
if (!user) {
|
||||
return redirect("/login", 302);
|
||||
}
|
||||
|
||||
@@ -473,27 +509,105 @@ const app = new Elysia({
|
||||
))}
|
||||
</select> */}
|
||||
</article>
|
||||
<form method="post" action="/convert">
|
||||
<form
|
||||
method="post"
|
||||
action="/convert"
|
||||
style={{ position: "relative" }}>
|
||||
<input type="hidden" name="file_names" id="file_names" />
|
||||
<article>
|
||||
<select name="convert_to" aria-label="Convert to" required>
|
||||
<option selected disabled value="">
|
||||
Convert to
|
||||
</option>
|
||||
{Object.entries(getAllTargets()).map(
|
||||
([converter, targets]) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<optgroup label={converter}>
|
||||
{targets.map((target) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<option value={`${target},${converter}`} safe>
|
||||
{target}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
),
|
||||
)}
|
||||
</select>
|
||||
<input
|
||||
type="search"
|
||||
name="convert_to_search"
|
||||
placeholder="Search for conversions"
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
<div class="select_container">
|
||||
<article
|
||||
class="convert_to_popup"
|
||||
hidden
|
||||
style={{
|
||||
flexDirection: "column",
|
||||
display: "flex",
|
||||
zIndex: 2,
|
||||
position: "absolute",
|
||||
maxHeight: "50vh",
|
||||
width: "90vw",
|
||||
overflowY: "scroll",
|
||||
margin: "0px",
|
||||
overflowX: "hidden",
|
||||
}}>
|
||||
{Object.entries(getAllTargets()).map(
|
||||
([converter, targets]) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<article
|
||||
class="convert_to_group"
|
||||
data-converter={converter}
|
||||
style={{
|
||||
borderColor: "gray",
|
||||
padding: "2px",
|
||||
}}
|
||||
>
|
||||
<header
|
||||
style={{ fontSize: "20px", fontWeight: "bold" }}
|
||||
safe>
|
||||
{converter}
|
||||
</header>
|
||||
|
||||
<ul
|
||||
class="convert_to_target"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: "5px",
|
||||
flexWrap: "wrap",
|
||||
}}>
|
||||
{targets.map((target) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<button
|
||||
// https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
|
||||
tabindex={0}
|
||||
class="target"
|
||||
data-value={`${target},${converter}`}
|
||||
data-target={target}
|
||||
data-converter={converter}
|
||||
style={{ fontSize: "15px", padding: "5px" }}
|
||||
type="button"
|
||||
safe
|
||||
>
|
||||
{target}
|
||||
</button>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
),
|
||||
)}
|
||||
</article>
|
||||
|
||||
{/* Hidden element which determines the format to convert the file too and the converter to use */}
|
||||
<select
|
||||
name="convert_to"
|
||||
aria-label="Convert to"
|
||||
required
|
||||
hidden>
|
||||
<option selected disabled value="">
|
||||
Convert to
|
||||
</option>
|
||||
{Object.entries(getAllTargets()).map(
|
||||
([converter, targets]) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<optgroup label={converter}>
|
||||
{targets.map((target) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<option value={`${target},${converter}`} safe>
|
||||
{target}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
),
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
</article>
|
||||
<input type="submit" value="Convert" />
|
||||
</form>
|
||||
@@ -507,24 +621,85 @@ const app = new Elysia({
|
||||
"/conversions",
|
||||
({ body }) => {
|
||||
return (
|
||||
<select name="convert_to" aria-label="Convert to" required>
|
||||
<option selected disabled value="">
|
||||
Convert to
|
||||
</option>
|
||||
{Object.entries(getPossibleTargets(body.fileType)).map(
|
||||
([converter, targets]) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<optgroup label={converter}>
|
||||
{targets.map((target) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<option value={`${target},${converter}`} safe>
|
||||
{target}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
),
|
||||
)}
|
||||
</select>
|
||||
<>
|
||||
<article
|
||||
class="convert_to_popup"
|
||||
hidden
|
||||
style={{
|
||||
flexDirection: "column",
|
||||
display: "flex",
|
||||
zIndex: 2,
|
||||
position: "absolute",
|
||||
maxHeight: "50vh",
|
||||
width: "90vw",
|
||||
overflowY: "scroll",
|
||||
margin: "0px",
|
||||
overflowX: "hidden",
|
||||
}}>
|
||||
{Object.entries(getPossibleTargets(body.fileType)).map(
|
||||
([converter, targets]) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<article
|
||||
class="convert_to_group"
|
||||
data-converter={converter}
|
||||
style={{
|
||||
borderColor: "gray",
|
||||
padding: "2px",
|
||||
}}
|
||||
>
|
||||
<header style={{ fontSize: "20px", fontWeight: "bold" }} safe>
|
||||
{converter}
|
||||
</header>
|
||||
|
||||
<ul
|
||||
class="convert_to_target"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: "5px",
|
||||
flexWrap: "wrap",
|
||||
}}>
|
||||
{targets.map((target) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<button
|
||||
// https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
|
||||
tabindex={0}
|
||||
class="target"
|
||||
data-value={`${target},${converter}`}
|
||||
data-target={target}
|
||||
data-converter={converter}
|
||||
style={{ fontSize: "15px", padding: "5px" }}
|
||||
type="button"
|
||||
safe
|
||||
>
|
||||
{target}
|
||||
</button>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
),
|
||||
)}
|
||||
</article>
|
||||
|
||||
<select name="convert_to" aria-label="Convert to" required hidden>
|
||||
<option selected disabled value="">
|
||||
Convert to
|
||||
</option>
|
||||
{Object.entries(getPossibleTargets(body.fileType)).map(
|
||||
([converter, targets]) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<optgroup label={converter}>
|
||||
{targets.map((target) => (
|
||||
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
|
||||
<option value={`${target},${converter}`} safe>
|
||||
{target}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
),
|
||||
)}
|
||||
</select>
|
||||
</>
|
||||
);
|
||||
},
|
||||
{ body: t.Object({ fileType: t.String() }) },
|
||||
@@ -561,13 +736,8 @@ const app = new Elysia({
|
||||
await Bun.write(`${userUploadsDir}${file.name}`, file);
|
||||
}
|
||||
} else {
|
||||
await Bun.write(
|
||||
`${userUploadsDir}${
|
||||
// biome-ignore lint/complexity/useLiteralKeys: ts bug
|
||||
body.file["name"]
|
||||
}`,
|
||||
body.file,
|
||||
);
|
||||
// biome-ignore lint/complexity/useLiteralKeys: weird error
|
||||
await Bun.write(`${userUploadsDir}${body.file["name"]}`, body.file);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -623,7 +793,7 @@ const app = new Elysia({
|
||||
return redirect("/", 302);
|
||||
}
|
||||
|
||||
const existingJob = await db
|
||||
const existingJob = db
|
||||
.query("SELECT * FROM jobs WHERE id = ? AND user_id = ?")
|
||||
.as(Jobs)
|
||||
.get(jobId.value, user.id);
|
||||
@@ -645,9 +815,7 @@ const app = new Elysia({
|
||||
);
|
||||
}
|
||||
|
||||
const convertTo = normalizeFiletype(
|
||||
body.convert_to.split(",")[0] as string,
|
||||
);
|
||||
const convertTo = normalizeFiletype(body.convert_to.split(",")[0] ?? "");
|
||||
const converterName = body.convert_to.split(",")[1];
|
||||
const fileNames = JSON.parse(body.file_names) as string[];
|
||||
|
||||
@@ -667,10 +835,13 @@ const app = new Elysia({
|
||||
Promise.all(
|
||||
fileNames.map(async (fileName) => {
|
||||
const filePath = `${userUploadsDir}${fileName}`;
|
||||
const fileTypeOrig = fileName.split(".").pop() as string;
|
||||
const fileTypeOrig = fileName.split(".").pop() ?? "";
|
||||
const fileType = normalizeFiletype(fileTypeOrig);
|
||||
const newFileExt = normalizeOutputFiletype(convertTo);
|
||||
const newFileName = fileName.replace(fileTypeOrig, newFileExt);
|
||||
const newFileName = fileName.replace(
|
||||
new RegExp(`${fileTypeOrig}(?!.*${fileTypeOrig})`),
|
||||
newFileExt,
|
||||
);
|
||||
const targetPath = `${userOutputDir}${newFileName}`;
|
||||
|
||||
const result = await mainConverter(
|
||||
@@ -793,7 +964,7 @@ const app = new Elysia({
|
||||
return redirect("/login", 302);
|
||||
}
|
||||
|
||||
const job = await db
|
||||
const job = db
|
||||
.query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
|
||||
.as(Jobs)
|
||||
.get(user.id, params.jobId);
|
||||
@@ -892,7 +1063,7 @@ const app = new Elysia({
|
||||
return redirect("/login", 302);
|
||||
}
|
||||
|
||||
const job = await db
|
||||
const job = db
|
||||
.query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
|
||||
.as(Jobs)
|
||||
.get(user.id, params.jobId);
|
||||
@@ -1077,14 +1248,14 @@ const app = new Elysia({
|
||||
return redirect("/results", 302);
|
||||
}
|
||||
|
||||
const userId = decodeURIComponent(params.userId);
|
||||
const jobId = decodeURIComponent(params.jobId);
|
||||
const outputPath = `${outputDir}${userId}/${jobId}/`;
|
||||
// const userId = decodeURIComponent(params.userId);
|
||||
// const jobId = decodeURIComponent(params.jobId);
|
||||
// const outputPath = `${outputDir}${userId}/${jobId}/`;
|
||||
|
||||
// return Bun.zip(outputPath);
|
||||
},
|
||||
)
|
||||
.onError(({ code, error, request }) => {
|
||||
.onError(({ error }) => {
|
||||
// log.error(` ${request.method} ${request.url}`, code, error);
|
||||
console.error(error);
|
||||
})
|
||||
@@ -1095,12 +1266,14 @@ console.log(
|
||||
);
|
||||
|
||||
const clearJobs = () => {
|
||||
// clear all jobs older than 24 hours
|
||||
// get all files older than 24 hours
|
||||
const jobs = db
|
||||
.query("SELECT * FROM jobs WHERE date_created < ?")
|
||||
.as(Jobs)
|
||||
.all(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString());
|
||||
.all(
|
||||
new Date(
|
||||
Date.now() - AUTO_DELETE_EVERY_N_HOURS * 60 * 60 * 1000,
|
||||
).toISOString(),
|
||||
);
|
||||
|
||||
for (const job of jobs) {
|
||||
// delete the directories
|
||||
@@ -1111,7 +1284,9 @@ const clearJobs = () => {
|
||||
db.query("DELETE FROM jobs WHERE id = ?").run(job.id);
|
||||
}
|
||||
|
||||
// run every 24 hours
|
||||
setTimeout(clearJobs, 24 * 60 * 60 * 1000);
|
||||
setTimeout(clearJobs, AUTO_DELETE_EVERY_N_HOURS * 60 * 60 * 1000);
|
||||
};
|
||||
clearJobs();
|
||||
|
||||
if (AUTO_DELETE_EVERY_N_HOURS > 0) {
|
||||
clearJobs();
|
||||
}
|
||||
|
||||
2
src/public/robots.txt
Normal file
2
src/public/robots.txt
Normal file
@@ -0,0 +1,2 @@
|
||||
User-agent: *
|
||||
Disallow: /
|
||||
@@ -3,7 +3,73 @@ const fileInput = document.querySelector('input[type="file"]');
|
||||
const fileNames = [];
|
||||
let fileType;
|
||||
|
||||
const selectContainer = document.querySelector("form > article");
|
||||
const selectContainer = document.querySelector("form .select_container");
|
||||
|
||||
const updateSearchBar = () => {
|
||||
const convertToInput = document.querySelector(
|
||||
"input[name='convert_to_search']",
|
||||
);
|
||||
const convertToPopup = document.querySelector(".convert_to_popup");
|
||||
const convertToGroupElements = document.querySelectorAll(".convert_to_group");
|
||||
const convertToGroups = {};
|
||||
const convertToElement = document.querySelector("select[name='convert_to']");
|
||||
|
||||
const showMatching = (search) => {
|
||||
for (const [targets, groupElement] of Object.values(convertToGroups)) {
|
||||
let matchingTargetsFound = 0;
|
||||
for (const target of targets) {
|
||||
if (target.dataset.target.includes(search)) {
|
||||
matchingTargetsFound++;
|
||||
target.hidden = false;
|
||||
} else {
|
||||
target.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (matchingTargetsFound === 0) {
|
||||
groupElement.hidden = true;
|
||||
} else {
|
||||
groupElement.hidden = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
for (const groupElement of convertToGroupElements) {
|
||||
const groupName = groupElement.dataset.converter;
|
||||
|
||||
const targetElements = groupElement.querySelectorAll(".target");
|
||||
const targets = Array.from(targetElements);
|
||||
|
||||
for (const target of targets) {
|
||||
target.onmousedown = () => {
|
||||
convertToElement.value = target.dataset.value;
|
||||
convertToInput.value = `${target.dataset.target} using ${target.dataset.converter}`;
|
||||
showMatching("");
|
||||
};
|
||||
}
|
||||
|
||||
convertToGroups[groupName] = [targets, groupElement];
|
||||
}
|
||||
|
||||
convertToInput.addEventListener("input", (e) => {
|
||||
showMatching(e.target.value.toLowerCase());
|
||||
});
|
||||
|
||||
convertToInput.addEventListener("blur", (e) => {
|
||||
// Keep the popup open even when clicking on a target button
|
||||
// for a split second to allow the click to go through
|
||||
if (e?.relatedTarget?.classList?.contains("target")) {
|
||||
convertToPopup.hidden = true;
|
||||
return;
|
||||
}
|
||||
|
||||
convertToPopup.hidden = true;
|
||||
});
|
||||
|
||||
convertToInput.addEventListener("focus", () => {
|
||||
convertToPopup.hidden = false;
|
||||
});
|
||||
};
|
||||
|
||||
// const convertFromSelect = document.querySelector("select[name='convert_from']");
|
||||
|
||||
@@ -49,6 +115,7 @@ fileInput.addEventListener("change", (e) => {
|
||||
.then((res) => res.text())
|
||||
.then((html) => {
|
||||
selectContainer.innerHTML = html;
|
||||
updateSearchBar();
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
}
|
||||
@@ -123,3 +190,5 @@ formConvert.addEventListener("submit", (e) => {
|
||||
const hiddenInput = document.querySelector("input[name='file_names']");
|
||||
hiddenInput.value = JSON.stringify(fileNames);
|
||||
});
|
||||
|
||||
updateSearchBar();
|
||||
|
||||
@@ -4,7 +4,7 @@ div.icon {
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
width: 50%
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
div.center {
|
||||
@@ -12,4 +12,48 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["ESNext"],
|
||||
"module": "esnext",
|
||||
"target": "esnext",
|
||||
"module": "ESNext",
|
||||
"target": "ES2021",
|
||||
"moduleResolution": "bundler",
|
||||
"moduleDetection": "force",
|
||||
"allowImportingTsExtensions": true,
|
||||
|
||||
Reference in New Issue
Block a user