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

✨ Ability to change title and icons

Browse Source
This commit is contained in:
Aimsucks
2022-06-07 00:07:56 +00:00
parent 7935fb6616
commit 6af5166aa5
7 changed files with 174 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Settings/AdvancedSettings.tsx Normal file
View File

@@ -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 (
<Group grow direction="column">
<TextInput
label="Page title"
defaultValue={config.title}
value={customTitle}
onChange={(event) => setCustomTitle(event.currentTarget.value)}
/>
<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>
);
}

9
src/components/Settings/SettingsMenu.tsx
View File

@@ -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,6 +39,8 @@ function SettingsMenu(props: any) {
);
return (
<Tabs>
<Tabs.Tab label="Settings">
<Group direction="column" grow>
<Group grow direction="column" spacing={0}>
<Text>Search engine</Text>
@@ -126,6 +130,11 @@ function SettingsMenu(props: any) {
</Text>
</Group>
</Group>
</Tabs.Tab>
<Tabs.Tab label="Advanced">
<AdvancedSettings />
</Tabs.Tab>
</Tabs>
);
}

14
src/components/layout/HeaderConfig.tsx Normal file
View File

@@ -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 (
<Head>
<title>{config.title ?? "Homarr 🦞"}</title>
<link rel="shortcut icon" href={config.favicon ?? "/favicon.svg"} />
</Head>
);
}

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

@@ -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 (
<Group spacing="xs">
<Image
width={50}
src="/imgs/logo.png"
src={config.logo ?? "/imgs/logo.png"}
style={{
position: 'relative',
}}
@@ -25,7 +28,8 @@ export function Logo({ style }: any) {
variant="gradient"
gradient={{ from: 'red', to: 'orange', deg: 145 }}
>
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"}
</Text>
</NextLink>
</Group>

3
src/tools/getConfig.ts
View File

@@ -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=',

6
src/tools/state.tsx
View File

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

3
src/tools/types.ts
View File

@@ -6,6 +6,9 @@ export interface Settings {
export interface Config {
name: string;
title: string;
logo: string;
favicon: string;
services: serviceItem[];
settings: Settings;
modules: {