diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx
new file mode 100644
index 000000000..63c242176
--- /dev/null
+++ b/src/components/Settings/AdvancedSettings.tsx
@@ -0,0 +1,49 @@
+import { TextInput, Group, Button } from '@mantine/core';
+import { useState } from 'react';
+import { useConfig } from '../../tools/state';
+
+export default function TitleChanger() {
+ const { config, loadConfig, setConfig, getConfigs } = useConfig();
+ const [customTitle, setCustomTitle] = useState(config.title);
+ const [customLogo, setCustomLogo] = useState(config.logo);
+ const [customFavicon, setCustomFavicon] = useState(config.favicon);
+
+ const saveChanges = () => {
+ setConfig({
+ ...config,
+ title: customTitle || "Homarr 🦞",
+ logo: customLogo || "/imgs/logo.png",
+ favicon: customFavicon || "/favicon.svg",
+ });
+ }
+
+ return (
+
+ setCustomTitle(event.currentTarget.value)}
+ />
+ setCustomLogo(event.currentTarget.value)}
+ />
+ setCustomFavicon(event.currentTarget.value)}
+ />
+
+
+ );
+}
diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx
index 956db2ec7..2cdb79db9 100644
--- a/src/components/Settings/SettingsMenu.tsx
+++ b/src/components/Settings/SettingsMenu.tsx
@@ -8,6 +8,7 @@ import {
TextInput,
Drawer,
Anchor,
+ Tabs
} from '@mantine/core';
import { useColorScheme, useHotkeys } from '@mantine/hooks';
import { useState } from 'react';
@@ -18,6 +19,7 @@ import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
import ConfigChanger from '../Config/ConfigChanger';
import SaveConfigComponent from '../Config/SaveConfig';
import ModuleEnabler from './ModuleEnabler';
+import AdvancedSettings from './AdvancedSettings';
function SettingsMenu(props: any) {
const { config, setConfig } = useConfig();
@@ -37,95 +39,102 @@ function SettingsMenu(props: any) {
);
return (
-
-
- Search engine
- {
- setSearchUrl(e);
- setConfig({
- ...config,
- settings: {
- ...config.settings,
- searchUrl: e,
- },
- });
- }
- }
- data={matches}
- />
- {searchUrl === 'Custom' && (
- {
- setCustomSearchUrl(event.currentTarget.value);
- setConfig({
- ...config,
- settings: {
- ...config.settings,
- searchUrl: event.currentTarget.value,
- },
- });
- }}
- />
- )}
-
-
-
-
-
-
- Tip: You can upload your config file by dragging and dropping it onto the page!
-
-
-
- component="a" href="https://github.com/ajnart/homarr" size="lg">
-
-
+
+
+
+
+ Search engine
+ {
+ setSearchUrl(e);
+ setConfig({
+ ...config,
+ settings: {
+ ...config.settings,
+ searchUrl: e,
+ },
+ });
+ }
+ }
+ data={matches}
+ />
+ {searchUrl === 'Custom' && (
+ {
+ setCustomSearchUrl(event.currentTarget.value);
+ setConfig({
+ ...config,
+ settings: {
+ ...config.settings,
+ searchUrl: event.currentTarget.value,
+ },
+ });
+ }}
+ />
+ )}
+
+
+
+
+
- {CURRENT_VERSION}
+ Tip: You can upload your config file by dragging and dropping it onto the page!
+
+
+ component="a" href="https://github.com/ajnart/homarr" size="lg">
+
+
+
+ {CURRENT_VERSION}
+
+
+
+ Made with ❤️ by @
+
+ ajnart
+
+
+
-
- Made with ❤️ by @
-
- ajnart
-
-
-
-
+
+
+
+
+
);
}
diff --git a/src/components/layout/HeaderConfig.tsx b/src/components/layout/HeaderConfig.tsx
new file mode 100644
index 000000000..277dc73bb
--- /dev/null
+++ b/src/components/layout/HeaderConfig.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Head from 'next/head';
+import { useConfig } from '../../tools/state';
+
+export function HeaderConfig(props: any) {
+ const { config } = useConfig();
+
+ return (
+
+ {config.title ?? "Homarr 🦞"}
+
+
+ );
+}
diff --git a/src/components/layout/Logo.tsx b/src/components/layout/Logo.tsx
index 2c37a6f99..4b1e4c442 100644
--- a/src/components/layout/Logo.tsx
+++ b/src/components/layout/Logo.tsx
@@ -1,13 +1,16 @@
import { Group, Image, Text } from '@mantine/core';
import { NextLink } from '@mantine/next';
import * as React from 'react';
+import { useConfig } from '../../tools/state';
export function Logo({ style }: any) {
+ const { config } = useConfig();
+
return (
- Homarr
+ {/* Added the .replace to remove emojis because they get screwed up by the gradient */}
+ {config.title.replace(/([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '') ?? "Homarr"}
diff --git a/src/tools/getConfig.ts b/src/tools/getConfig.ts
index 64082af04..8fd1815a2 100644
--- a/src/tools/getConfig.ts
+++ b/src/tools/getConfig.ts
@@ -10,6 +10,9 @@ export function getConfig(name: string) {
configName: name,
config: {
name: name.toString(),
+ title: 'Homarr 🦞',
+ logo: '/imgs/logo.png',
+ favicon: '/favicon.svg',
services: [],
settings: {
searchUrl: 'https://www.google.com/search?q=',
diff --git a/src/tools/state.tsx b/src/tools/state.tsx
index 21e4da1dc..e0b108591 100644
--- a/src/tools/state.tsx
+++ b/src/tools/state.tsx
@@ -15,14 +15,17 @@ type configContextType = {
const configContext = createContext({
config: {
name: 'default',
+ title: 'Homarr 🦞',
+ logo: '/imgs/logo.png',
+ favicon: '/favicon.svg',
services: [],
settings: {
searchUrl: 'https://google.com/search?q=',
},
modules: {},
},
- setConfig: () => {},
- loadConfig: async (name: string) => {},
+ setConfig: () => { },
+ loadConfig: async (name: string) => { },
getConfigs: async () => [],
});
@@ -41,6 +44,9 @@ type Props = {
export function ConfigProvider({ children }: Props) {
const [config, setConfigInternal] = useState({
name: 'default',
+ title: 'Homarr 🦞',
+ logo: '/imgs/logo.png',
+ favicon: '/favicon.svg',
services: [],
settings: {
searchUrl: 'https://www.google.com/search?q=',
diff --git a/src/tools/types.ts b/src/tools/types.ts
index d8058f044..5820ed3b5 100644
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -6,6 +6,9 @@ export interface Settings {
export interface Config {
name: string;
+ title: string;
+ logo: string;
+ favicon: string;
services: serviceItem[];
settings: Settings;
modules: {