Merge pull request #182 from C4illin/feature/#180/add-webroot-env-var…

…iable
C4illin · Nov 6, 2024 · 1589f8d · 1589f8d
2 parents 53a8f66 + 7d1db72
commit 1589f8d
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -47,12 +47,8 @@ services:
     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
+    environment:
+      - JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234 # will use randomUUID() if unset
     volumes:
       - convertx:/app/data
 ```
@@ -67,6 +63,19 @@ Then visit `http://localhost:3000` in your browser and create your account. Don'
 
 If you get unable to open database file run `chown -R $USER:$USER path` on the path you choose.
 
+### Environment variables
+
+All are optional, JWT_SECRET is recommended to be set.
+
+| Name                      | Default | Description |
+|---------------------------|---------|-------------|
+| JWT_SECRET                | when unset it will use the value from randomUUID() | A long and secret string used to sign the JSON Web Token |
+| ACCOUNT_REGISTRATION      | false | Allow users to register accounts |
+| HTTP_ALLOWED              | false | Allow HTTP connections, only set this to true locally |
+| ALLOW_UNAUTHENTICATED     | false | Allow unauthenticated users to use the service, only set this to true locally |
+| AUTO_DELETE_EVERY_N_HOURS | 24 | Checks every n hours for files older then n hours and deletes them, set to 0 to disable |
+| WEBROOT                   | "" | The address to the root path setting this to "/convert" will serve the website on "example.com/convert/" |
+
 ### Tutorial
 
 Tutorial in french: <https://belginux.com/installer-convertx-avec-docker/>

diff --git a/compose.yaml b/compose.yaml
@@ -11,5 +11,6 @@ services:
       - HTTP_ALLOWED=true # setting this to true is unsafe, only set this to true locally
       - ALLOW_UNAUTHENTICATED=true # allows anyone to use the service without logging in, only set this to true locally
       - AUTO_DELETE_EVERY_N_HOURS=1 # checks every n hours for files older then n hours and deletes them, set to 0 to disable
+      - WEBROOT=/convertx # the root path of the web interface, leave empty to disable
     ports:
       - 3000:3000
diff --git a/public/results.js b/public/results.js
@@ -1,3 +1,5 @@
+const webroot = document.querySelector("meta[name='webroot']").content;
+
 window.downloadAll = function () {
   // Get all download links
   const downloadLinks = document.querySelectorAll("a[download]");
@@ -18,7 +20,7 @@ let progressElem = document.querySelector("progress");
 const refreshData = () => {
   // console.log("Refreshing data...", progressElem.value, progressElem.max);
   if (progressElem.value !== progressElem.max) {
-    fetch(`/progress/${jobId}`, {
+    fetch(`${webroot}/progress/${jobId}`, {
       method: "POST",
     })
       .then((res) => res.text())

diff --git a/public/script.js b/public/script.js
@@ -1,3 +1,5 @@
+const webroot = document.querySelector("meta[name='webroot']").content;
+
 // Select the file input element
 const fileInput = document.querySelector('input[type="file"]');
 const dropZone = document.getElementById("dropzone");
@@ -132,7 +134,7 @@ fileInput.addEventListener("change", (e) => {
       //   }
       // }
 
-      fetch("/conversions", {
+      fetch(`${webroot}/conversions`, {
         method: "POST",
         body: JSON.stringify({ fileType: fileType }),
         headers: {
@@ -180,7 +182,7 @@ const deleteRow = (target) => {
     setTitle();
   }
 
-  fetch("/delete", {
+  fetch(`${webroot}/delete`, {
     method: "POST",
     body: JSON.stringify({ filename: filename }),
     headers: {
@@ -201,7 +203,7 @@ const uploadFiles = (files) => {
     formData.append("file", file, file.name);
   }
 
-  fetch("/upload", {
+  fetch(`${webroot}/upload`, {
     method: "POST",
     body: formData,
   })
@@ -212,7 +214,7 @@ const uploadFiles = (files) => {
     .catch((err) => console.log(err));
 };
 
-const formConvert = document.querySelector("form[action='/convert']");
+const formConvert = document.querySelector(`form[action='${webroot}/convert']`);
 
 formConvert.addEventListener("submit", () => {
   const hiddenInput = document.querySelector("input[name='file_names']");

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

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -3,9 +3,11 @@ import { Html } from "@kitajs/html";
 export const Header = ({
   loggedIn,
   accountRegistration,
+  webroot = "",
 }: {
   loggedIn?: boolean;
   accountRegistration?: boolean;
+  webroot?: string;
 }) => {
   let rightNav: JSX.Element;
   if (loggedIn) {
@@ -17,7 +19,7 @@ export const Header = ({
               text-accent-600 transition-all
               hover:text-accent-500 hover:underline
             `}
-            href="/history"
+            href={`${webroot}/history`}
           >
             History
           </a>
@@ -28,7 +30,7 @@ export const Header = ({
               text-accent-600 transition-all
               hover:text-accent-500 hover:underline
             `}
-            href="/logoff"
+            href={`${webroot}/logoff`}
           >
             Logout
           </a>
@@ -44,7 +46,7 @@ export const Header = ({
               text-accent-600 transition-all
               hover:text-accent-500 hover:underline
             `}
-            href="/login"
+            href={`${webroot}/login`}
           >
             Login
           </a>
@@ -56,7 +58,7 @@ export const Header = ({
                 text-accent-600 transition-all
                 hover:text-accent-500 hover:underline
               `}
-              href="/register"
+              href={`${webroot}/register`}
             >
               Register
             </a>
@@ -72,7 +74,7 @@ export const Header = ({
         <ul>
           <li>
             <strong>
-              <a href="/">ConvertX</a>
+              <a href={`${webroot}/`}>ConvertX</a>
             </strong>
           </li>
         </ul>