Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-07 22:15:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Ability to change title and icons V2!

Browse Source 
Results of criticism in pull request #182
This commit is contained in:
Aimsucks
2022-06-07 01:35:50 +00:00
parent 6af5166aa5
commit 838f196937
6 changed files with 43 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/Settings/AdvancedSettings.tsx
View File

@@ -1,49 +1,38 @@
import { TextInput, Group, Button } from '@mantine/core'; import { TextInput, Group, Button } from '@mantine/core';
import { useState } from 'react'; import { useForm } from '@mantine/form';
import { useConfig } from '../../tools/state'; import { useConfig } from '../../tools/state';
export default function TitleChanger() { export default function TitleChanger() {
const { config, loadConfig, setConfig, getConfigs } = useConfig(); 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 = () => { const form = useForm({
initialValues: {
title: config.settings.title,
logo: config.settings.logo,
favicon: config.settings.favicon,
},
});
const saveChanges = (values: { title: string; logo: string; favicon: string }) => {
setConfig({ setConfig({
...config, ...config,
title: customTitle || "Homarr 🦞", settings: {
logo: customLogo || "/imgs/logo.png", ...config.settings,
favicon: customFavicon || "/favicon.svg", title: values.title,
logo: values.logo,
favicon: values.favicon,
},
}); });
} };
return ( return (
<Group grow direction="column"> <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
<TextInput <TextInput label="Page title" placeholder="'Homarr 🦞" {...form.getInputProps('title')} />
label="Page title" <TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
defaultValue={config.title} <TextInput label="Favicon" placeholder="/favicon.svg" {...form.getInputProps('favicon')} />
value={customTitle} <Group grow position="center" mt="xl">
onChange={(event) => setCustomTitle(event.currentTarget.value)} <Button type="submit">Save</Button>
/>
<TextInput
label="Logo"
defaultValue={config.logo}
value={customLogo}
onChange={(event) => setCustomLogo(event.currentTarget.value)}
/>
<TextInput
label="Favicon"
defaultValue={config.favicon}
value={customFavicon}
onChange={(event) => setCustomFavicon(event.currentTarget.value)}
/>
<Button
variant="gradient"
gradient={{ from: 'red', to: 'orange' }}
onClick={() => saveChanges()}
>
Save
</Button>
</Group> </Group>
</form>
); );
} }

4
src/components/layout/HeaderConfig.tsx
View File

@@ -7,8 +7,8 @@ export function HeaderConfig(props: any) {
return ( return (
<Head> <Head>
<title>{config.title ?? "Homarr 🦞"}</title> <title>{config.settings.title || 'Homarr 🦞'}</title>
<link rel="shortcut icon" href={config.favicon ?? "/favicon.svg"} /> <link rel="shortcut icon" href={config.settings.favicon || '/favicon.svg'} />
</Head> </Head>
); );
} }

8
src/components/layout/Layout.tsx
View File

@@ -2,6 +2,7 @@ import { AppShell, createStyles } from '@mantine/core';
import { Header } from './Header'; import { Header } from './Header';
import { Footer } from './Footer'; import { Footer } from './Footer';
import Aside from './Aside'; import Aside from './Aside';
import { HeaderConfig } from './HeaderConfig';
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
main: {}, main: {},
@@ -10,11 +11,8 @@ const useStyles = createStyles((theme) => ({
export default function Layout({ children, style }: any) { export default function Layout({ children, style }: any) {
const { classes, cx } = useStyles(); const { classes, cx } = useStyles();
return ( return (
<AppShell <AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
aside={<Aside />} <HeaderConfig />
header={<Header />}
footer={<Footer links={[]} />}
>
<main <main
className={cx(classes.main)} className={cx(classes.main)}
style={{ style={{

5
src/components/layout/Logo.tsx
View File

@@ -10,7 +10,7 @@ export function Logo({ style }: any) {
<Group spacing="xs"> <Group spacing="xs">
<Image <Image
width={50} width={50}
src={config.logo ?? "/imgs/logo.png"} src={config.settings.logo || '/imgs/logo.png'}
style={{ style={{
position: 'relative', position: 'relative',
}} }}
@@ -28,8 +28,7 @@ export function Logo({ style }: any) {
variant="gradient" variant="gradient"
gradient={{ from: 'red', to: 'orange', deg: 145 }} gradient={{ from: 'red', to: 'orange', deg: 145 }}
> >
{/* Added the .replace to remove emojis because they get screwed up by the gradient */} {config.settings.title || 'Homarr'}
{config.title.replace(/([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '') ?? "Homarr"}
</Text> </Text>
</NextLink> </NextLink>
</Group> </Group>

16
src/tools/state.tsx
View File

@@ -15,17 +15,17 @@ type configContextType = {
const configContext = createContext<configContextType>({ const configContext = createContext<configContextType>({
config: { config: {
name: 'default', name: 'default',
title: 'Homarr 🦞',
logo: '/imgs/logo.png',
favicon: '/favicon.svg',
services: [], services: [],
settings: { settings: {
searchUrl: 'https://google.com/search?q=', searchUrl: 'https://google.com/search?q=',
title: '',
logo: '',
favicon: '',
}, },
modules: {}, modules: {},
}, },
setConfig: () => { }, setConfig: () => {},
loadConfig: async (name: string) => { }, loadConfig: async (name: string) => {},
getConfigs: async () => [], getConfigs: async () => [],
}); });
@@ -44,12 +44,12 @@ type Props = {
export function ConfigProvider({ children }: Props) { export function ConfigProvider({ children }: Props) {
const [config, setConfigInternal] = useState<Config>({ const [config, setConfigInternal] = useState<Config>({
name: 'default', name: 'default',
title: 'Homarr 🦞',
logo: '/imgs/logo.png',
favicon: '/favicon.svg',
services: [], services: [],
settings: { settings: {
searchUrl: 'https://www.google.com/search?q=', searchUrl: 'https://www.google.com/search?q=',
title: '',
logo: '',
favicon: '',
}, },
modules: {}, modules: {},
}); });

6
src/tools/types.ts
View File

@@ -2,13 +2,13 @@ import { OptionValues } from '../components/modules/modules';
export interface Settings { export interface Settings {
searchUrl: string; searchUrl: string;
title: string;
logo: string;
favicon: string;
} }
export interface Config { export interface Config {
name: string; name: string;
title: string;
logo: string;
favicon: string;
services: serviceItem[]; services: serviceItem[];
settings: Settings; settings: Settings;
modules: { modules: {