UI fork: React converter, folder convert, PWA, shortcuts, README

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: zardoy

.github/workflows/gh-fork-deploy.yml

@@ -0,0 +1,49 @@
+name: Fork Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ["master", "main"]
+
+permissions:
+  contents: write
+
+concurrency:
+  group: "gh-fork-deploy"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: "latest"
+          cache: true
+
+      - name: Install dependencies
+        run: bun i --frozen-lockfile
+
+      - name: Build
+        run: bun run build
+
+      - name: Generate cache
+        run: bun run buildCache.js dist/cache.json
+
+      - name: Move assets into dist/convert
+        run: bash external/post-build.sh
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          publish_branch: gh-pages
+          force_orphan: true
+          cname: fco.tools

.gitignore

@@ -4,3 +4,4 @@ node_modules
 start.sh
 dist
 cache.json
+.DS_Store

README.md

@@ -1,144 +1,47 @@
-# [Convert to it!](https://convert.to.it/)
-**Truly universal online file converter.**
+# Convert it! — Test fork
 
-Many online file conversion tools are **boring** and **insecure**. They only allow conversion between two formats in the same medium (images to images, videos to videos, etc.), and they require that you _upload your files to some server_.
+> Rolling experimental improvements, opinionated features & workflows.
 
-This is not just terrible for privacy, it's also incredibly lame. What if you _really_ need to convert an AVI video to a PDF document? Try to find an online tool for that, I dare you.
+---
 
-[Convert.to.it](https://convert.to.it/) aims to be a tool that "just works". You're almost _guaranteed_ to get an output - perhaps not always the one you expected, but it'll try its best to not leave you hanging.
+## Features
 
-For a semi-technical overview of this tool, check out the video: https://youtu.be/btUbcsTbVA8
+- **Beautiful UI** — Dark theme, clear hierarchy, reskins planned.
+- **Open as folder & convert many files** — Use **In Folder Convert** and the File System Access API: pick a folder, choose formats, convert. Files are written **directly into that folder** — no download step. Optional: move originals into `_originals/` after conversion.
+- **Drag & drop** — Drop files or folders onto the page. **Ctrl+V** (or Cmd+V) to paste from clipboard.
+- **Quick shortcuts** — **Press `1`** with a single file loaded to convert to the first suggested format instantly. Type to filter formats, **Esc** to clear. Suggested formats are sorted by category and your **recently used** choices.
+- **Single-file workflow** — **Drag out** the converted file from the browser into any folder (no download clutter). Or use **Share** (Web Share API) or **Download**. Optional auto-download for single-file conversions.
+- **Batch options** — Convert multiple files without folder write access? **Download N files** or **Download as ZIP** (one archive).
+- **PWA** — Install as an app from the browser for a native-like launcher (no offline support in this fork).
 
-## Usage
+---
 
-1. Go to [convert.to.it](https://convert.to.it/)
-2. Click the big blue box to add your file (or just drag it on to the window).
-3. An input format should have been automatically selected. If it wasn't, yikes! Try searching for it, or if it's really not there, see the "Issues" section below.
-4. Select an output format from the second list. If you're on desktop, that's the one on the right side. If you're on mobile, it'll be somewhere lower down.
-5. Click **Convert**!
-6. Hopefully, after a bit (or a lot) of thinking, the program will spit out the file you wanted. If not, see the "Issues" section below.
+## Was this vibecoded?
 
-## Issues
+**Yes.** (The scroll/filter perf probably gives it away.)
 
-Ever since the YouTube video released, we've been getting spammed with issues suggesting the addition of all kinds of niche file formats. To keep things organized, I've decided to specify what counts as a valid issue and what doesn't.
+One goal was to push the limits of prompting: you still need solid knowledge of web APIs, browser gotchas, and power-user shortcuts to get a decent frontend. Without that, this UI wouldn’t exist.
 
-> [!IMPORTANT]
-> **SIMPLY ASKING FOR A FILE FORMAT TO BE ADDED IS NOT A MEANINGFUL ISSUE!**
+---
 
-There are thousands of file formats out there. It can take hours to add support for just one. The math is simple - we can't possibly support every single file. As such, simply listing your favorite file formats is not helpful. We already know that there are formats we don't support, we don't need tickets to tell us that.
+## Is that all?
 
-When suggesting a file format, you must _at minimum_:
-- Make sure that there isn't already an issue about the same thing, and that we don't already support the format.
-- Explain what you expect the conversion to be like (what medium is it converting to/from). It's important to note here that simply parsing the underlying data is _not sufficient_. Imagine if we only treated SVG images as raw XML data and didn't support converting them to raster images - that would defeat the point.
-- Provide links to existing browser-based solutions if possible, or at the very least a reference for implementing the format, and make sure the license is compatible with GPL-2.0.
+**Mostly**. A few ideas didn’t pan out (yet):
 
-If this seems like a lot, please remember - a developer will have to do 100x more work to actually implement the format. Doing a bit of research not only saves them precious time, it also weeds out "unserious" proposals that would only bloat our to-do list.
+**Copy to clipboard**
+Nice in theory, but many file MIME types can’t be written to the async Clipboard API without errors, so clipboard paste isn’t reliable for arbitrary converted files. We use **drag-out** instead.
 
-**If you're submitting a bug report,** you only need to do step 1 - check if the problem isn't already reported by someone else. Bug reports are generally quite important otherwise.
+**Chrome extension**
+Still under consideration. A quick UI triggered from the extension could be handy, but you can already “install” the site as an app. Replacing file inputs on random sites with a custom converter UI doesn’t seem like a reliable workflow yet — need to understand real use cases better.
 
-Though please note, "converting X to Y doesn't work" is **not** a bug report.  However, "converting X to Y works but not how I expected" likely **is** a bug report.
+**Electron app**
+Under strong consideration. Using real FFmpeg in a desktop gives much better performance and also native explorer integration would be a big thing. Might happen in a few days if i dont forget of this repo.
 
-## Deployment
+**Mobile native app**
+Out of scope for now; could be revisited later.
 
-### Local development (Bun + Vite)
+---
 
-1. Clone this repository ***WITH SUBMODULES***. You can use `git clone --recursive https://github.com/p2r3/convert` for that. Omitting submodules will leave you missing a few dependencies.
-2. Install [Bun](https://bun.sh/).
-3. Run `bun install` to install dependencies.
-4. Run `bunx vite` to start the development server.
+## Credits
 
-_The following steps are optional, but recommended for performance:_
-
-When you first open the page, it'll take a while to generate the list of supported formats for each tool. If you open the console, you'll see it complaining a bunch about missing caches.
-
-After this is done (indicated by a `Built initial format list` message in the console), use `printSupportedFormatCache()` to get a JSON string with the cache data. You can then save this string to `cache.json` to skip that loading screen on startup.
-
-### Docker (prebuilt image)
-
-Docker compose files live in the `docker/` directory, so run compose with `-f` from the repository root:
-
-```bash
-docker compose -f docker/docker-compose.yml up -d
-```
-
-Alternatively download the `docker-compose.yml` separately and start it by executing `docker compose up -d` in the same directory.
-
-This runs the container on `http://localhost:8080/convert/`.
-
-### Docker (local build for development)
-
-Use the override file to build the image locally:
-
-```bash
-docker compose -f docker/docker-compose.yml -f docker/docker-compose.override.yml up --build -d
-```
-
-The first Docker build is expected to be slow because Chromium and related system packages are installed in the build stage (needed for puppeteer in `buildCache.js`). Later builds are usually much faster due to Docker layer caching.
-
-## Contributing
-
-The best way to contribute is by adding support for new file formats (duh). Here's how that works:
-
-### Creating a handler
-
-Each "tool" used for conversion has to be normalized to a standard form - effectively a "wrapper" that abstracts away the internal processes. These wrappers are available in [src/handlers](src/handlers/).
-
-Below is a super barebones handler that does absolutely nothing. You can use this as a starting point for adding a new format:
-
-```ts
-// file: dummy.ts
-
-import type { FileData, FileFormat, FormatHandler } from "../FormatHandler.ts";
-import CommonFormats from "src/CommonFormats.ts";
-
-class dummyHandler implements FormatHandler {
-
-  public name: string = "dummy";
-  public supportedFormats?: FileFormat[];
-  public ready: boolean = false;
-
-  async init () {
-    this.supportedFormats = [
-      // Example PNG format, with both input and output disabled
-      CommonFormats.PNG.builder("png")
-        .markLossless()
-        // .allowFrom()
-        // .allowTo()
-    ];
-    this.ready = true;
-  }
-
-  async doConvert (
-    inputFiles: FileData[],
-    inputFormat: FileFormat,
-    outputFormat: FileFormat
-  ): Promise<FileData[]> {
-    const outputFiles: FileData[] = [];
-    return outputFiles;
-  }
-
-}
-
-export default dummyHandler;
-```
-
-For more details on how all of these components work, refer to the doc comments in [src/FormatHandler.ts](src/FormatHandler.ts). You can also take a look at existing handlers to get a more practical example.
-
-There are a few additional things that I want to point out in particular:
-
-- Pay attention to the naming system. If your tool is called `dummy`, then the class should be called `dummyHandler`, and the file should be called `dummy.ts`.
-- The handler is responsible for setting the output file's name. This is done to allow for flexibility in rare cases where the _full_ file name matters. Of course, in most cases, you'll only have to swap the file extension.
-- The handler is also responsible for ensuring that any byte buffers that enter or exit the handler _do not get mutated_. If necessary, clone the buffer by wrapping it in `new Uint8Array()`.
-- When handling MIME types, run them through [normalizeMimeType](src/normalizeMimeType.ts) first. One file can have multiple valid MIME types, which isn't great when you're trying to match them algorithmically.
-- When implementing a new file format, please treat the file as the media that it represents, not the data that it contains. For example, if you were making an SVG handler, you should treat the file as an _image_, not as XML.
-
-### Adding dependencies
-
-If your tool requires an external dependency (which it likely does), there are currently two well-established ways of going about this:
-
-- If it's an `npm` package, just install it to the project like you normally would.
-- If it's a Git repository, add it as a submodule to [src/handlers](src/handlers).
-
-**Please try to avoid CDNs (Content Delivery Networks).** They're really cool on paper, but they don't work well with TypeScript, and each one introduces a tiny bit of instability. For a project that leans heavily on external dependencies, those bits of instability can add up fast.
-
-- If you need to load a WebAssembly binary (or similar), add its path to [vite.config.js](vite.config.js) and target it under `/convert/wasm/`. **Do not link to node_modules**.
+**ORIGINAL MAINTAINER:** [p2r3/convert](https://github.com/p2r3/convert) — the universal in-browser converter.