start on pandoc

.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.gitignore
+README.md
+LICENSE
+.vscode
+Makefile
+helm-charts
+.env
+.editorconfig
+.idea
+coverage*

.gitignore

@@ -46,3 +46,4 @@ package-lock.json
 /output
 /db
 /data
+/Bruno

Dockerfile

@@ -0,0 +1,45 @@
+# use the official Bun image
+# see all versions at https://hub.docker.com/r/oven/bun/tags
+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
+
+# install pandoc
+RUN apt-get update && apt-get install -y pandoc
+
+# 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
+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 . .
+
+# copy pandoc
+COPY --from=install /usr/bin/pandoc /usr/bin/pandoc
+
+# run the app
+USER bun
+EXPOSE 3000/tcp
+ENTRYPOINT [ "bun", "run", "./src/index.tsx" ]

README.Docker.md

@@ -0,0 +1,22 @@
+### Building and running your application
+
+When you're ready, start your application by running:
+`docker compose up --build`.
+
+Your application will be available at http://localhost:3000.
+
+### Deploying your application to the cloud
+
+First, build your image, e.g.: `docker build -t myapp .`.
+If your cloud uses a different CPU architecture than your development
+machine (e.g., you are on a Mac M1 and your cloud provider is amd64),
+you'll want to build the image for that platform, e.g.:
+`docker build --platform=linux/amd64 -t myapp .`.
+
+Then, push it to your registry, e.g. `docker push myregistry.com/myapp`.
+
+Consult Docker's [getting started](https://docs.docker.com/go/get-started-sharing/)
+docs for more detail on building and pushing.
+
+### References
+* [Docker's Node.js guide](https://docs.docker.com/language/nodejs/)

biome.json

@@ -13,7 +13,7 @@
   "linter": {
     "enabled": true,
     "rules": {
-			"recommended": false,
+      "recommended": true,
       "complexity": {
         "noBannedTypes": "error",
         "noUselessThisAlias": "error",
@@ -49,7 +49,6 @@
     "formatter": {
       "jsxQuoteStyle": "double",
       "quoteProperties": "asNeeded",
-			"trailingComma": "all",
       "semicolons": "always",
       "arrowParentheses": "always",
       "bracketSpacing": true,
@@ -57,6 +56,5 @@
       "quoteStyle": "double",
       "attributePosition": "auto"
     }
-	},
+  }
-	"overrides": [{ "include": ["./cli/template/**/*.{ts,tsx}"] }]
 }

compose.yaml

@@ -0,0 +1,10 @@
+services:
+  convertx:
+    build:
+      context: .
+    volumes:
+      - ./data:/app/data
+    environment:
+      NODE_ENV: production
+    ports:
+      - 3000:3000

package.json

@@ -28,7 +28,6 @@
     "@types/ws": "^8.5.10",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
-    "bun-types": "^1.1.8",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "prettier": "^3.2.5",

prettier.config.cjs

@@ -6,7 +6,6 @@ const config = {
   printWidth: 80,
   singleQuote: false,
   semi: true,
-  trailingComma: "all",
   tabWidth: 2,
   plugins: ["@ianvs/prettier-plugin-sort-imports"],
 };

src/components/base.tsx

@@ -6,7 +6,7 @@ export const BaseHtml = ({ children, title = "ConvertX" }) => (
       <title>{title}</title>
       <link rel="stylesheet" href="/pico.lime.min.css" />
       <link rel="stylesheet" href="/style.css" />
-      <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+      <script src="https://unpkg.com/htmx.org@1.9.12" />
     </head>
     <body>{children}</body>
   </html>

src/components/header.tsx

@@ -25,7 +25,7 @@ export const Header = ({ loggedIn }: { loggedIn?: boolean }) => {
   }
 
   return (
-    <header class="container-fluid">
+    <header class="container">
       <nav>
         <ul>
           <li>

src/converters/main.ts

@@ -1,18 +1,60 @@
-import { properties, convert } from "./sharp";
+import {
+  properties as propertiesImage,
+  convert as convertImage,
+} from "./sharp";
+
+import {
+  properties as propertiesPandoc,
+  convert as convertPandoc,
+} from "./pandoc";
+
+import { normalizeFiletype } from "../helpers/normalizeFiletype";
 
 export async function mainConverter(
   inputFilePath: string,
   fileType: string,
   convertTo: string,
   targetPath: string,
-	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
   options?: any,
 ) {
   // Check if the fileType and convertTo are supported by the sharp converter
-	if (properties.from.includes(fileType) && properties.to.includes(convertTo)) {
+  if (
+    propertiesImage.from.includes(fileType) &&
+    propertiesImage.to.includes(convertTo)
+  ) {
     // Use the sharp converter
     try {
-			await convert(inputFilePath, fileType, convertTo, targetPath, options);
+      await convertImage(
+        inputFilePath,
+        fileType,
+        convertTo,
+        targetPath,
+        options,
+      );
+      console.log(
+        `Converted ${inputFilePath} from ${fileType} to ${convertTo} successfully.`,
+      );
+    } catch (error) {
+      console.error(
+        `Failed to convert ${inputFilePath} from ${fileType} to ${convertTo}.`,
+        error,
+      );
+    }
+  }
+  // Check if the fileType and convertTo are supported by the pandoc converter
+  else if (
+    propertiesPandoc.from.includes(fileType) &&
+    propertiesPandoc.to.includes(convertTo)
+  ) {
+    // Use the pandoc converter
+    try {
+      await convertPandoc(
+        inputFilePath,
+        fileType,
+        convertTo,
+        targetPath,
+        options,
+      );
       console.log(
         `Converted ${inputFilePath} from ${fileType} to ${convertTo} successfully.`,
       );
@@ -24,16 +66,23 @@ export async function mainConverter(
     }
   } else {
     console.log(
-			`The sharp converter does not support converting from ${fileType} to ${convertTo}.`,
+      `Neither the sharp nor pandoc converter support converting from ${fileType} to ${convertTo}.`,
     );
   }
 }
 
-export function possibleConversions(fileType: string) {
+const possibleConversions: { [key: string]: string[] } = {};
-	// Check if the fileType is supported by the sharp converter
+
-	if (properties.from.includes(fileType)) {
+for (const from of [...propertiesImage.from, ...propertiesPandoc.from]) {
-		return properties.to;
+  possibleConversions[from] = [...propertiesImage.to, ...propertiesPandoc.to];
 }
 
-	return [];
+export const getPossibleConversions = (from: string): string[] => {
-}
+  const fromClean = normalizeFiletype(from);
+
+  return possibleConversions[fromClean] || ([] as string[]);
+};
+
+export const getAllTargets = () => {
+  return [...propertiesImage.to, ...propertiesPandoc.to];
+};

src/converters/pandoc.ts

@@ -0,0 +1,17 @@
+import { exec } from "node:child_process";
+
+export const properties = {
+  from: [
+    "md", "html", "docx", "pdf", "tex", "txt", "bibtex", "biblatex", "commonmark", "commonmark_x", "creole", "csljson", "csv", "tsv", "docbook", "dokuwiki", "endnotexml", "epub", "fb2", "gfm", "haddock", "ipynb", "jats", "jira", "json", "latex", "markdown", "markdown_mmd", "markdown_phpextra", "markdown_strict", "mediawiki", "man", "muse", "native", "odt", "opml", "org", "ris", "rtf", "rst", "t2t", "textile", "tikiwiki", "twiki", "vimwiki"
+  ],
+  to: [
+    "asciidoc", "asciidoctor", "beamer", "bibtex", "biblatex", "commonmark", "commonmark_x", "context", "csljson", "docbook", "docbook4", "docbook5", "docx", "dokuwiki", "epub", "epub3", "epub2", "fb2", "gfm", "haddock", "html", "html5", "html4", "icml", "ipynb", "jats_archiving", "jats_articleauthoring", "jats_publishing", "jats", "jira", "json", "latex", "man", "markdown", "markdown_mmd", "markdown_phpextra", "markdown_strict", "markua", "mediawiki", "ms", "muse", "native", "odt", "opml", "opendocument", "org", "pdf", "plain", "pptx", "rst", "rtf", "texinfo", "textile", "slideous", "slidy", "dzslides", "revealjs", "s5", "tei", "xwiki", "zimwiki"
+  ]
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+export function convert(filePath: string, fileType: string, convertTo: string, targetPath: string, options?: any) {
+  return exec(
+    `pandoc ${filePath} -f ${fileType} -t ${convertTo} -o ${targetPath}`,
+  );
+}

src/index.tsx

@@ -8,14 +8,19 @@ import { Database } from "bun:sqlite";
 import { Elysia, t } from "elysia";
 import { BaseHtml } from "./components/base";
 import { Header } from "./components/header";
-import { mainConverter, possibleConversions } from "./converters/main";
+import {
+  mainConverter,
+  getPossibleConversions,
+  getAllTargets,
+} from "./converters/main";
 import { normalizeFiletype } from "./helpers/normalizeFiletype";
 
 const db = new Database("./data/mydb.sqlite", { create: true });
 const uploadsDir = "./data/uploads/";
 const outputDir = "./data/output/";
 
-const jobs = {};
+const accountRegistration =
+  process.env.ACCOUNT_REGISTRATION === "true" || false;
 
 // fileNames: fileNames,
 // filesToConvert: fileNames.length,
@@ -31,19 +36,42 @@ CREATE TABLE IF NOT EXISTS users (
 );
 CREATE TABLE IF NOT EXISTS file_names (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
-  job_id TEXT NOT NULL,
+  job_id INTEGER NOT NULL,
   file_name TEXT NOT NULL,
-  output_file_name TEXT NOT NULL
+  output_file_name TEXT NOT NULL,
+  FOREIGN KEY (job_id) REFERENCES jobs(id)
 );
 CREATE TABLE IF NOT EXISTS jobs (
 	id INTEGER PRIMARY KEY AUTOINCREMENT,
 	user_id INTEGER NOT NULL,
-	job_id TEXT NOT NULL,
 	date_created TEXT NOT NULL,
-  status TEXT DEFAULT 'pending',
+  status TEXT DEFAULT 'not started',
-  converted_files INTEGER DEFAULT 0
+  num_files INTEGER DEFAULT 0,
+  FOREIGN KEY (user_id) REFERENCES users(id)
 );`);
 
+interface IUser {
+  id: number;
+  email: string;
+  password: string;
+}
+
+interface IFileNames {
+  id: number;
+  job_id: number;
+  file_name: string;
+  output_file_name: string;
+}
+
+interface IJobs {
+  finished_files: number;
+  id: number;
+  user_id: number;
+  date_created: string;
+  status: string;
+  num_files: number;
+}
+
 // enable WAL mode
 db.exec("PRAGMA journal_mode = WAL;");
 
@@ -70,17 +98,32 @@ const app = new Elysia()
     return (
       <BaseHtml title="ConvertX | Register">
         <Header />
-        <main class="container-fluid">
+        <main class="container">
+          <article>
             <form method="post">
-            <input type="email" name="email" placeholder="Email" required />
+              <fieldset>
+                <label>
+                  Email
+                  <input
+                    type="email"
+                    name="email"
+                    placeholder="Email"
+                    required
+                  />
+                </label>
+                <label>
+                  Password
                   <input
                     type="password"
                     name="password"
                     placeholder="Password"
                     required
                   />
+                </label>
+              </fieldset>
               <input type="submit" value="Register" />
             </form>
+          </article>
         </main>
       </BaseHtml>
     );
@@ -99,20 +142,26 @@ const app = new Elysia()
       }
       const savedPassword = await Bun.password.hash(body.password);
 
-      db.run(
+      db.query("INSERT INTO users (email, password) VALUES (?, ?)").run(
-        "INSERT INTO users (email, password) VALUES (?, ?)",
         body.email,
         savedPassword,
       );
 
-      const user = await db
+      const user = (await db
         .query("SELECT * FROM users WHERE email = ?")
-        .get(body.email);
+        .get(body.email)) as IUser;
 
       const accessToken = await jwt.sign({
         id: String(user.id),
       });
 
+      if (!auth) {
+        set.status = 500;
+        return {
+          message: "No auth cookie, perhaps your browser is blocking cookies.",
+        };
+      }
+
       // set cookie
       auth.set({
         value: accessToken,
@@ -133,15 +182,29 @@ const app = new Elysia()
     return (
       <BaseHtml title="ConvertX | Login">
         <Header />
-        <main class="container-fluid">
+        <main class="container">
+          <article>
             <form method="post">
-            <input type="email" name="email" placeholder="Email" required />
+              <fieldset>
+                <label>
+                  Email
+                  <input
+                    type="email"
+                    name="email"
+                    placeholder="Email"
+                    required
+                  />
+                </label>
+                <label>
+                  Password
                   <input
                     type="password"
                     name="password"
                     placeholder="Password"
                     required
                   />
+                </label>
+              </fieldset>
               <div role="group">
                 <a href="/register" role="button" class="secondary">
                   Register an account
@@ -149,14 +212,26 @@ const app = new Elysia()
                 <input type="submit" value="Login" />
               </div>
             </form>
+          </article>
         </main>
       </BaseHtml>
     );
   })
-  .post("/login", async function handler({ body, set, jwt, cookie: { auth } }) {
+  .post(
-    const existingUser = await db
+    "/login",
+    async function handler({ body, set, redirect, jwt, cookie: { auth } }) {
+      // if already logged in, redirect to home
+      if (auth?.value) {
+        const user = await jwt.verify(auth.value);
+        if (user) {
+          return redirect("/");
+        }
+        auth.remove();
+      }
+
+      const existingUser = (await db
         .query("SELECT * FROM users WHERE email = ?")
-      .get(body.email);
+        .get(body.email)) as IUser;
 
       if (!existingUser) {
         set.status = 403;
@@ -181,7 +256,13 @@ const app = new Elysia()
         id: String(existingUser.id),
       });
 
-    // set cookie
+      if (!auth) {
+        set.status = 500;
+        return {
+          message: "No auth cookie, perhaps your browser is blocking cookies.",
+        };
+      }
+
       // set cookie
       auth.set({
         value: accessToken,
@@ -196,7 +277,8 @@ const app = new Elysia()
       set.headers = {
         Location: "/",
       };
-  })
+    },
+  )
   .get("/logout", ({ redirect, cookie: { auth } }) => {
     if (auth?.value) {
       auth.remove();
@@ -211,6 +293,9 @@ const app = new Elysia()
     return redirect("/login");
   })
   .get("/", async ({ jwt, redirect, cookie: { auth, jobId } }) => {
+    if (!auth?.value) {
+      return redirect("/login");
+    }
     // validate jwt
     const user = await jwt.verify(auth.value);
     if (!user) {
@@ -218,9 +303,9 @@ const app = new Elysia()
     }
 
     // make sure user exists in db
-    const existingUser = await db
+    const existingUser = (await db
       .query("SELECT * FROM users WHERE id = ?")
-      .get(user.id);
+      .get(user.id)) as IUser;
 
     if (!existingUser) {
       if (auth?.value) {
@@ -229,28 +314,36 @@ const app = new Elysia()
       return redirect("/login");
     }
 
-    // create a unique job id
+    // create a new job
+    db.query("INSERT INTO jobs (user_id, date_created) VALUES (?, ?)").run(
+      user.id,
+      new Date().toISOString(),
+    );
+
+    const id = (
+      db
+        .query("SELECT id FROM jobs WHERE user_id = ? ORDER BY id DESC")
+        .get(user.id) as { id: number }
+    ).id;
+
+    if (!jobId) {
+      return { message: "Cookies should be enabled to use this app." };
+    }
+
     jobId.set({
-      value: randomUUID(),
+      value: id,
       httpOnly: true,
       secure: true,
       maxAge: 24 * 60 * 60,
       sameSite: "strict",
     });
 
-    // insert job id into db
-    db.run(
-      "INSERT INTO jobs (user_id, job_id, date_created) VALUES (?, ?, ?)",
-      user.id,
-      jobId.value,
-      new Date().toISOString(),
-    );
-
     return (
       <BaseHtml>
         <Header loggedIn />
-        <main class="container-fluid">
+        <main class="container">
           <article>
+            <h1>Convert</h1>
             <table id="file-list" />
             <input type="file" name="file" multiple />
           </article>
@@ -261,12 +354,10 @@ const app = new Elysia()
                 <option selected disabled value="">
                   Convert to
                 </option>
-                <option>JPG</option>
+                {getAllTargets().map((target) => (
-                <option>PNG</option>
+                  // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
-                <option>SVG</option>
+                  <option value={target}>{target}</option>
-                <option>PDF</option>
+                ))}
-                <option>DOCX</option>
-                <option>Yaml</option>
               </select>
             </article>
             <input type="submit" value="Convert" />
@@ -276,10 +367,22 @@ const app = new Elysia()
       </BaseHtml>
     );
   })
+  .post("/conversions", ({ body }) => {
+    console.log(body);
+    return (
+      <select name="convert_to" aria-label="Convert to" required>
+        <option selected disabled value="">
+          Convert to
+        </option>
+        {getPossibleConversions(body.fileType).map((target) => (
+          // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
+          <option value={target}>{target}</option>
+        ))}
+      </select>
+    );
+  })
   .post("/upload", async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
-    // validate jwt
     if (!auth?.value) {
-      // redirect to login
       return redirect("/login");
     }
 
@@ -288,7 +391,17 @@ const app = new Elysia()
       return redirect("/login");
     }
 
-    // let filesUploaded = [];
+    if (!jobId?.value) {
+      return redirect("/");
+    }
+
+    const existingJob = await db
+      .query("SELECT * FROM jobs WHERE id = ? AND user_id = ?")
+      .get(jobId.value, user.id);
+
+    if (!existingJob) {
+      return redirect("/");
+    }
 
     const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
 
@@ -307,15 +420,26 @@ const app = new Elysia()
       message: "Files uploaded successfully.",
     };
   })
-  .post("/delete", async ({ body, set, jwt, cookie: { auth, jobId } }) => {
+  .post("/delete", async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
+    if (!auth?.value) {
+      return redirect("/login");
+    }
+
     const user = await jwt.verify(auth.value);
     if (!user) {
-      // redirect to login
+      return redirect("/login");
-      set.status = 302;
+    }
-      set.headers = {
+
-        Location: "/login",
+    if (!jobId?.value) {
-      };
+      return redirect("/");
-      return;
+    }
+
+    const existingJob = await db
+      .query("SELECT * FROM jobs WHERE id = ? AND user_id = ?")
+      .get(jobId.value, user.id);
+
+    if (!existingJob) {
+      return redirect("/");
     }
 
     const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
@@ -324,21 +448,28 @@ const app = new Elysia()
   })
   .post(
     "/convert",
-    async ({ body, set, redirect, jwt, cookie: { auth, jobId } }) => {
+    async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
+      if (!auth?.value) {
+        return redirect("/login");
+      }
+
       const user = await jwt.verify(auth.value);
       if (!user) {
-        // redirect to login
+        return redirect("/login");
-        set.status = 302;
-        set.headers = {
-          Location: "/login",
-        };
-        return;
       }
 
       if (!jobId?.value) {
         return redirect("/");
       }
 
+      const existingJob = (await db
+        .query("SELECT * FROM jobs WHERE id = ? AND user_id = ?")
+        .get(jobId.value, user.id)) as IJobs;
+
+      if (!existingJob) {
+        return redirect("/");
+      }
+
       const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
       const userOutputDir = `${outputDir}${user.id}/${jobId.value}/`;
 
@@ -353,51 +484,67 @@ const app = new Elysia()
       }
 
       const convertTo = normalizeFiletype(body.convert_to);
-      const fileNames = JSON.parse(body.file_names);
+      const fileNames: string[] = JSON.parse(body.file_names) as string[];
 
-      jobs[jobId.value] = {
+      if (!Array.isArray(fileNames) || fileNames.length === 0) {
-        fileNames: fileNames,
+        return redirect("/");
-        filesToConvert: fileNames.length,
+      }
-        convertedFiles: 0,
+
-        outputFiles: [],
+      db.run(
-      };
+        "UPDATE jobs SET num_files = ? WHERE id = ?",
+        fileNames.length,
+        jobId.value,
+      );
+
+      const query = db.query(
+        "INSERT INTO file_names (job_id, file_name, output_file_name) VALUES (?, ?, ?)",
+      );
 
       for (const fileName of fileNames) {
         const filePath = `${userUploadsDir}${fileName}`;
-        const fileTypeOrig = fileName.split(".").pop();
+        const fileTypeOrig = fileName.split(".").pop() as string;
         const fileType = normalizeFiletype(fileTypeOrig);
         const newFileName = fileName.replace(fileTypeOrig, convertTo);
         const targetPath = `${userOutputDir}${newFileName}`;
 
         await mainConverter(filePath, fileType, convertTo, targetPath);
-        jobs[jobId.value].convertedFiles++;
+        query.run(jobId.value, fileName, newFileName);
-        jobs[jobId.value].outputFiles.push(newFileName);
       }
 
-      console.log(
+      return redirect(`/results/${jobId.value}`);
-        "sending to results page...",
-        `http://${app.server?.hostname}:${app.server?.port}/results/${jobId.value}`,
-      );
-
-      // redirect to results
-      set.status = 302;
-      set.headers = {
-        Location: `/results/${jobId.value}`,
-      };
     },
   )
-  .get("/results", async ({ params, jwt, set, redirect, cookie: { auth } }) => {
+  .get("/histt", async ({ jwt, redirect, cookie: { auth } }) => {
+    console.log("results page");
     if (!auth?.value) {
+      console.log("no auth value");
       return redirect("/login");
     }
     const user = await jwt.verify(auth.value);
+
     if (!user) {
+      console.log("no user");
       return redirect("/login");
     }
 
-    const userJobs = await db
+    const userJobs = db
       .query("SELECT * FROM jobs WHERE user_id = ?")
-      .all(user.id);
+      .all(user.id) as {
+      id: number;
+      user_id: number;
+      date_created: string;
+      status: string;
+      num_files: number;
+      finished_files: number;
+    }[];
+
+    for (const job of userJobs) {
+      const files = db
+        .query("SELECT * FROM file_names WHERE job_id = ?")
+        .all(job.id) as IFileNames[];
+
+      job.finished_files = files.length;
+    }
 
     return (
       <BaseHtml title="ConvertX | Results">
@@ -405,24 +552,128 @@ const app = new Elysia()
         <main class="container-fluid">
           <article>
             <h1>Results</h1>
-            <ul>
+            <table>
+              <thead>
+                <tr>
+                  <th>Time</th>
+                  <th>Files</th>
+                  <th>Files Done</th>
+                  <th>Status</th>
+                  <th>View</th>
+                </tr>
+              </thead>
+              <tbody>
                 {userJobs.map((job) => (
-                <li>
+                  // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
-                  <a href={`/results/${job.job_id}`}>{job.job_id}</a>
+                  <tr>
-                </li>
+                    <td>{job.date_created}</td>
+                    <td>{job.num_files}</td>
+                    <td>{job.finished_files}</td>
+                    <td>{job.status}</td>
+                    <td>
+                      <a href={`/results/${job.id}`}>View</a>
+                    </td>
+                  </tr>
                 ))}
-            </ul>
+              </tbody>
+            </table>
           </article>
         </main>
       </BaseHtml>
     );
-
-
-    // list all jobs belonging to the user
   })
   .get(
     "/results/:jobId",
-    async ({ params, jwt, set, redirect, cookie: { auth } }) => {
+    async ({ params, jwt, set, redirect, cookie: { auth, job_id } }) => {
+      if (!auth?.value) {
+        return redirect("/login");
+      }
+
+      if (job_id?.value) {
+        // clear the job_id cookie since we are viewing the results
+        job_id.remove();
+      }
+
+      const user = await jwt.verify(auth.value);
+      if (!user) {
+        return redirect("/login");
+      }
+
+      const job = (await db
+        .query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
+        .get(user.id, params.jobId)) as IJobs;
+
+      if (!job) {
+        set.status = 404;
+        return {
+          message: "Job not found.",
+        };
+      }
+
+      const outputPath = `${user.id}/${params.jobId}/`;
+
+      const files = db
+        .query("SELECT * FROM file_names WHERE job_id = ?")
+        .all(params.jobId) as IFileNames[];
+
+      return (
+        <BaseHtml title="ConvertX | Result">
+          <Header loggedIn />
+          <main class="container-fluid">
+            <article>
+              <div class="grid">
+                <h1>Results</h1>
+                <div>
+                  <button
+                    type="button"
+                    style={{ width: "10rem", float: "right" }}
+                  >
+                    Download All
+                  </button>
+                </div>
+              </div>
+              <progress max={job.num_files} value={files.length} />
+              <table>
+                <thead>
+                  <tr>
+                    <th>Converted File Name</th>
+                    <th>View</th>
+                    <th>Download</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {files.map((file) => (
+                    // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
+                    <tr>
+                      <td>{file.output_file_name}</td>
+                      <td>
+                        <a
+                          href={`/download/${outputPath}${file.output_file_name}`}
+                        >
+                          View
+                        </a>
+                      </td>
+                      <td>
+                        <a
+                          href={`/download/${outputPath}${file.output_file_name}`}
+                          download={file.output_file_name}
+                        >
+                          Download
+                        </a>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </article>
+          </main>
+        </BaseHtml>
+      );
+    },
+  )
+  .get(
+    "/download/:userId/:jobId/:fileName",
+    async ({ params, jwt, redirect, cookie: { auth } }) => {
       if (!auth?.value) {
         return redirect("/login");
       }
@@ -433,35 +684,15 @@ const app = new Elysia()
       }
 
       const job = await db
-        .query("SELECT * FROM jobs WHERE user_id = ? AND job_id = ?")
+        .query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
         .get(user.id, params.jobId);
 
       if (!job) {
-        set.status = 404;
+        return redirect("/results");
-        return {
-          message: "Job not found.",
-        };
       }
 
-      return (
+      const filePath = `${outputDir}${params.userId}/${params.jobId}/${params.fileName}`;
-        <BaseHtml>
+      return Bun.file(filePath);
-          <Header loggedIn />
-          <main class="container-fluid">
-            <article>
-              <h1>Results</h1>
-              <ul>
-                {jobs[params.jobId].outputFiles.map((file: string) => (
-                  <li>
-                    <a href={`/output/${user.id}/${params.jobId}/${file}`}>
-                      {file}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </article>
-          </main>
-        </BaseHtml>
-      );
     },
   )
   .onError(({ code, error, request }) => {

src/pages/register.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ConvertX | Register</title>
-  <link rel="stylesheet" href="pico.lime.min.css">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <header class="container-fluid">
-    <nav>
-      <ul>
-        <li><a href="/">ConvertX</a></strong></li>
-      </ul>
-      <ul>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Services</a></li>
-        <li><button class="secondary">Products</button></li>
-      </ul>
-    </nav>
-  </header>
-
-  <main class="container-fluid">
-    <form method="post">
-      <input type="email" name="email" placeholder="Email" required>
-      <input type="password" name="password" placeholder="Password" required>
-      <input type="submit" value="Register">
-    </form>
-  </main>
-
-</body>
-
-</html>

src/public/script.js

@@ -1,7 +1,9 @@
 // Select the file input element
 const fileInput = document.querySelector('input[type="file"]');
 const fileNames = [];
+let fileType;
 
+const selectElem = document.querySelector("select[name='convert_to']");
 
 // Add a 'change' event listener to the file input element
 fileInput.addEventListener("change", (e) => {
@@ -22,6 +24,29 @@ fileInput.addEventListener("change", (e) => {
       <td><button class="secondary" onclick="deleteRow(this)">x</button></td>
     `;
 
+    if (!fileType) {
+      fileType = file.name.split(".").pop();
+      console.log(file.type);
+      fileInput.setAttribute("accept", `.${fileType}`);
+
+      const title = document.querySelector("h1");
+      title.textContent = `Convert .${fileType}`;
+
+      fetch("/conversions", {
+        method: "POST",
+        body: JSON.stringify({ fileType: fileType }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+        .then((res) => res.text()) // Convert the response to text
+        .then((html) => {
+          console.log(html);
+          selectElem.outerHTML = html; // Set the HTML
+        })
+        .catch((err) => console.log(err));
+    }
+
     // Append the row to the file-list table
     fileList.appendChild(row);
 
@@ -74,7 +99,6 @@ const uploadFiles = (files) => {
     .catch((err) => console.log(err));
 };
 
-
 const formConvert = document.querySelector("form[action='/convert']");
 
 formConvert.addEventListener("submit", (e) => {

tsconfig.json

@@ -21,7 +21,7 @@
       "bun-types" // add Bun global
     ],
     // non bun init
-    // "plugins": [{ "name": "@kitajs/ts-html-plugin" }],
+    "plugins": [{ "name": "@kitajs/ts-html-plugin" }],
     "noUncheckedIndexedAccess": true,
     // "noUnusedLocals": true,
     // "noUnusedParameters": true,