feat: add custom branding (#575)

Co-authored-by: Emrik Östling <emrik.ostling@gmail.com>
This commit is contained in:
Kanashimo
2026-09-15 20:59:04 +02:00
committed by GitHub
parent 0ca17dad7f
commit 75feea0d9c
8 changed files with 37 additions and 6 deletions
+1
View File
@@ -96,6 +96,7 @@ All are optional, JWT_SECRET is recommended to be set.
| 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/" |
| BRANDING | ConvertX | Custom string that allows you to change the display name of the website in the header (max 26 characters) |
| FFMPEG_ARGS | | Arguments to pass to the input file of ffmpeg, e.g. `-hwaccel vaapi`. See https://github.com/C4illin/ConvertX/issues/190 for more info about hw-acceleration. |
| FFMPEG_OUTPUT_ARGS | | Arguments to pass to the output of ffmpeg, e.g. `-preset veryfast` |
| HIDE_HISTORY | false | Hide the history page |
+5 -1
View File
@@ -4,12 +4,14 @@ export const Header = ({
allowUnauthenticated,
hideHistory,
webroot = "",
branding = "ConvertX",
}: {
loggedIn?: boolean;
accountRegistration?: boolean;
allowUnauthenticated?: boolean;
hideHistory?: boolean;
webroot?: string;
branding?: string;
}) => {
let rightNav: JSX.Element;
if (loggedIn) {
@@ -93,7 +95,9 @@ export const Header = ({
<ul>
<li>
<strong>
<a href={`${webroot}/`}>ConvertX</a>
<a href={`${webroot}/`} safe>
{branding.length < 26 ? branding : branding.slice(0, 26)}
</a>
</strong>
</li>
</ul>
+2
View File
@@ -12,6 +12,8 @@ export const AUTO_DELETE_EVERY_N_HOURS = process.env.AUTO_DELETE_EVERY_N_HOURS
export const HIDE_HISTORY = process.env.HIDE_HISTORY?.toLowerCase() === "true" || false;
export const BRANDING = process.env.BRANDING ?? "ConvertX";
export const WEBROOT = process.env.WEBROOT ?? "";
export const LANGUAGE = process.env.LANGUAGE?.toLowerCase() || "en";
+9 -1
View File
@@ -3,7 +3,14 @@ import { BaseHtml } from "../components/base";
import { Header } from "../components/header";
import db from "../db/db";
import { Filename, Jobs } from "../db/types";
import { ALLOW_UNAUTHENTICATED, HIDE_HISTORY, LANGUAGE, TIMEZONE, WEBROOT } from "../helpers/env";
import {
ALLOW_UNAUTHENTICATED,
HIDE_HISTORY,
LANGUAGE,
TIMEZONE,
WEBROOT,
BRANDING,
} from "../helpers/env";
import { userService } from "./user";
import { EyeIcon } from "../icons/eye";
import { DeleteIcon } from "../icons/delete";
@@ -36,6 +43,7 @@ export const history = new Elysia().use(userService).get(
<>
<Header
webroot={WEBROOT}
branding={BRANDING}
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
hideHistory={HIDE_HISTORY}
loggedIn
+7 -2
View File
@@ -2,7 +2,7 @@ import Elysia from "elysia";
import { BaseHtml } from "../components/base";
import { Header } from "../components/header";
import { getAllInputs, getAllTargets } from "../converters/main";
import { ALLOW_UNAUTHENTICATED, WEBROOT } from "../helpers/env";
import { ALLOW_UNAUTHENTICATED, WEBROOT, BRANDING } from "../helpers/env";
import { userService } from "./user";
export const listConverters = new Elysia().use(userService).get(
@@ -11,7 +11,12 @@ export const listConverters = new Elysia().use(userService).get(
return (
<BaseHtml webroot={WEBROOT} title="ConvertX | Converters">
<>
<Header webroot={WEBROOT} allowUnauthenticated={ALLOW_UNAUTHENTICATED} loggedIn />
<Header
webroot={WEBROOT}
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
branding={BRANDING}
loggedIn
/>
<main
class={`
w-full flex-1 px-2
+7 -2
View File
@@ -4,7 +4,7 @@ import { Header } from "../components/header";
import db from "../db/db";
import { Filename, Jobs } from "../db/types";
import { buildDownloadUrl } from "../helpers/buildDownloadUrl";
import { ALLOW_UNAUTHENTICATED, WEBROOT } from "../helpers/env";
import { ALLOW_UNAUTHENTICATED, WEBROOT, BRANDING } from "../helpers/env";
import { DownloadIcon } from "../icons/download";
import { DeleteIcon } from "../icons/delete";
import { EyeIcon } from "../icons/eye";
@@ -175,7 +175,12 @@ export const results = new Elysia()
return (
<BaseHtml webroot={WEBROOT} title="ConvertX | Result">
<>
<Header webroot={WEBROOT} allowUnauthenticated={ALLOW_UNAUTHENTICATED} loggedIn />
<Header
webroot={WEBROOT}
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
loggedIn
branding={BRANDING}
/>
<main
class={`
w-full flex-1 px-2
+2
View File
@@ -13,6 +13,7 @@ import {
HTTP_ALLOWED,
UNAUTHENTICATED_USER_SHARING,
WEBROOT,
BRANDING,
} from "../helpers/env";
import { FIRST_RUN, userService } from "./user";
@@ -109,6 +110,7 @@ export const root = new Elysia().use(userService).get(
<>
<Header
webroot={WEBROOT}
branding={BRANDING}
accountRegistration={ACCOUNT_REGISTRATION}
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
hideHistory={HIDE_HISTORY}
+4
View File
@@ -9,6 +9,7 @@ import {
HIDE_HISTORY,
HTTP_ALLOWED,
WEBROOT,
BRANDING,
} from "../helpers/env";
import { userService } from "../services/user";
@@ -89,6 +90,7 @@ export const user = new Elysia()
<>
<Header
webroot={WEBROOT}
branding={BRANDING}
accountRegistration={ACCOUNT_REGISTRATION}
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
hideHistory={HIDE_HISTORY}
@@ -211,6 +213,7 @@ export const user = new Elysia()
<>
<Header
webroot={WEBROOT}
branding={BRANDING}
accountRegistration={ACCOUNT_REGISTRATION}
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
hideHistory={HIDE_HISTORY}
@@ -346,6 +349,7 @@ export const user = new Elysia()
<>
<Header
webroot={WEBROOT}
branding={BRANDING}
accountRegistration={ACCOUNT_REGISTRATION}
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
hideHistory={HIDE_HISTORY}