✨ feat: add custom logo

package.json

@@ -56,6 +56,7 @@
     "@ant-design/icons": "^5",
     "@babel/plugin-syntax-import-assertions": "^7",
     "@commitlint/cli": "^17",
+    "@giscus/react": "^2.2.8",
     "@lobehub/lint": "latest",
     "@lobehub/ui": "latest",
     "@types/lodash-es": "^4",

src/components/Logo/KitchenLogo.tsx

@@ -0,0 +1,21 @@
+import { type CSSProperties, memo } from 'react';
+
+import { darkLogo, lightLogo } from './style';
+
+interface LogoProps {
+  size?: number;
+  style?: CSSProperties;
+  themeMode: 'dark' | 'light';
+}
+
+const KitchenLogo = memo<LogoProps>(({ size, style, themeMode }) => {
+  return (
+    <img
+      alt="logo"
+      src={themeMode === 'dark' ? darkLogo : lightLogo}
+      style={{ height: size, ...style }}
+    />
+  );
+});
+
+export default KitchenLogo;

src/components/Logo/index.tsx

@@ -1,24 +1,40 @@
+import { Logo as LobeLogo } from '@lobehub/ui';
+import { Space } from 'antd';
+import isEqual from 'fast-deep-equal';
 import { type CSSProperties, memo } from 'react';
+import { shallow } from 'zustand/shallow';
 
-import { ImgProps } from '@/types/index';
+import { useAppStore } from '@/store';
 
-import { darkLogo, lightLogo } from './style';
+import KitchenLogo from './KitchenLogo';
 
-export interface LogoProps extends ImgProps {
+export interface LogoProps {
   size?: number;
   style?: CSSProperties;
-  themeMode: 'dark' | 'light';
 }
 
-const Logo = memo<LogoProps>(({ size = 20, style, themeMode, ...props }) => {
-  return (
-    <img
-      alt="logo"
-      src={themeMode === 'dark' ? darkLogo : lightLogo}
-      style={{ height: size, ...style }}
-      {...props}
-    />
-  );
+const Logo = memo<LogoProps>(({ size = 32, style }) => {
+  const setting = useAppStore((st) => st.setting, isEqual);
+  const themeMode = useAppStore((st) => st.themeMode, shallow);
+
+  if (setting.logoType === 'kitchen') {
+    return <KitchenLogo size={size * 0.75} style={style} themeMode={themeMode} />;
+  }
+
+  if (setting.logoType === 'custom') {
+    return (
+      <Space align="center" size={size * 0.3}>
+        {setting.logoCustomUrl ? (
+          <img alt="logo" src={setting.logoCustomUrl} style={{ height: size, ...style }} />
+        ) : (
+          <LobeLogo size={size} style={style} />
+        )}
+        <b style={{ fontSize: size * 0.6 }}>{setting.logoCustomTitle}</b>
+      </Space>
+    );
+  }
+
+  return <LobeLogo extra="SD" size={size} style={style} type="combine" />;
 });
 
 export default Logo;

src/components/Modal/index.tsx

@@ -0,0 +1,35 @@
+import { Icon } from '@lobehub/ui';
+import { Modal as AntModal, type ModalProps as AntModalProps } from 'antd';
+import { X } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from './style';
+
+export type ModalProps = AntModalProps;
+
+const Modal = memo<ModalProps>(({ className, title, open, onCancel, children, ...props }) => {
+  const { cx, styles } = useStyles();
+
+  return (
+    <AntModal
+      cancelText={'Cancel'}
+      className={cx(styles.modal, className)}
+      closeIcon={<Icon icon={X} />}
+      footer={null}
+      onCancel={onCancel}
+      open={open}
+      title={
+        <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
+          {title}
+        </Flexbox>
+      }
+      width={800}
+      {...props}
+    >
+      {children}
+    </AntModal>
+  );
+});
+
+export default Modal;

src/components/Modal/style.ts

@@ -0,0 +1,11 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css }) => ({
+  modal: css`
+    height: 70%;
+
+    .ant-modal-header {
+      margin-bottom: 24px;
+    }
+  `,
+}));

src/components/index.ts

@@ -1 +1,2 @@
 export { default as Logo, type LogoProps } from './Logo';
+export { default as Modal, type ModalProps } from './Modal';

src/layouts/index.tsx

@@ -1,5 +1,8 @@
 import { DivProps, ThemeProvider, colors } from '@lobehub/ui';
-import { generateColorPalette } from '@lobehub/ui/es/styles/algorithms/generateColorPalette';
+import {
+  generateColorNeutralPalette,
+  generateColorPalette,
+} from '@lobehub/ui/es/styles/algorithms/generateColorPalette';
 import isEqual from 'fast-deep-equal';
 import qs from 'query-string';
 import { memo, useCallback, useEffect } from 'react';
@@ -8,6 +11,7 @@ import { shallow } from 'zustand/shallow';
 import { useIsDarkMode } from '@/hooks/useIsDarkMode';
 import { useAppStore } from '@/store';
 import GlobalStyle from '@/styles/index';
+import { neutralColorScales } from '@/styles/neutralColors';
 
 const Layout = memo<DivProps>(({ children }) => {
   const { onSetThemeMode, onInit, themeMode } = useAppStore(
@@ -32,10 +36,18 @@ const Layout = memo<DivProps>(({ children }) => {
   }, [isDarkMode]);
 
   const genCustomToken = useCallback(() => {
-    if (!setting.primaryColor) return {};
-    const scale = colors[setting.primaryColor];
+    let primaryTokens = {};
+    let neutralTokens = {};
+    if (setting.primaryColor) {
+      const scale = colors[setting.primaryColor];
+      primaryTokens = generateColorPalette({ appearance: themeMode, scale, type: 'Primary' });
+    }
+    if (setting.neutralColor) {
+      const scale = neutralColorScales[setting.neutralColor];
+      neutralTokens = generateColorNeutralPalette({ appearance: themeMode, scale });
+    }
 
-    return generateColorPalette({ appearance: themeMode, scale, type: 'Primary' });
+    return { ...primaryTokens, ...neutralTokens };
   }, [setting.primaryColor, themeMode]);
 
   return (

src/pages/Content/style.ts

@@ -56,6 +56,18 @@ export const useStyles = createStyles(
           border-top-right-radius: 0;
           border-bottom-left-radius: 0;
         }
+
+        .block.gradio-html:has(div.prose) {
+          display: block;
+
+          p {
+            color: ${isDarkMode ? token.colorPrimaryText : token.colorPrimaryTextHover};
+
+            b {
+              color: ${isDarkMode ? token.colorPrimaryText : token.colorPrimaryTextHover};
+            }
+          }
+        }
       `,
       draggablePanel: css`
         .draggable-line {

src/pages/Footer/data.tsx

@@ -29,7 +29,13 @@ export const columns: FProps['columns'] = [
         description: 'Artist Inspired Styles',
         openExternal: true,
         title: 'Cheat Sheet',
-        url: 'https://supagruen.github.io/StableDiffusion-CheatSheet/',
+        url: 'https://supagruen.github.io/StableDiffusion-CheatSheet',
+      },
+      {
+        description: 'Image Resizing',
+        openExternal: true,
+        title: 'Birme',
+        url: 'https://www.birme.net/?target_width=512&target_height=512',
       },
     ],
     title: 'Resources',

src/pages/Header/Actions.tsx

@@ -1,7 +1,6 @@
-import { GithubOutlined } from '@ant-design/icons';
 import { ActionIcon } from '@lobehub/ui';
-import { Modal, Popover, Space } from 'antd';
-import { Bold, Github, LucideIcon, Moon, Settings2, Sun } from 'lucide-react';
+import { Space } from 'antd';
+import { Github, LucideIcon, Moon, Settings, Sun } from 'lucide-react';
 import qs from 'query-string';
 import { memo, useCallback, useState } from 'react';
 import { shallow } from 'zustand/shallow';
@@ -21,6 +20,7 @@ interface ActionsProps {
 }
 
 const Actions = memo<ActionsProps>(() => {
+  const [isSettingOpen, setIsSettingOpen] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const themeMode = useAppStore((st) => st.themeMode, shallow);
 
@@ -31,56 +31,22 @@ const Actions = memo<ActionsProps>(() => {
     window.location.replace(qs.stringifyUrl(gradioURL));
   }, [themeMode]);
 
-  const showModal = () => setIsModalOpen(true);
-
-  const handleCancel = () => setIsModalOpen(false);
-
   return (
     <>
       <Space.Compact>
         <a href="https://civitai.com/" rel="noreferrer" target="_blank">
           <ActionIcon icon={CivitaiLogo} title="Civitai" />
         </a>
-        <a
-          href="https://www.birme.net/?target_width=512&target_height=512"
-          rel="noreferrer"
-          target="_blank"
-        >
-          <ActionIcon icon={Bold} title="Birme" />
-        </a>
-        <ActionIcon icon={Github} onClick={showModal} title="Feedback" />
-        <Popover
-          content={<Setting />}
-          title={<h3 style={{ lineHeight: 2, margin: 0 }}>⚙ Setting</h3>}
-          trigger="click"
-        >
-          <ActionIcon icon={Settings2} title="Setting" />
-        </Popover>
+        <ActionIcon icon={Github} onClick={() => setIsModalOpen(true)} title="Feedback" />
         <ActionIcon
           icon={themeMode === 'light' ? Sun : Moon}
           onClick={handleSetTheme}
           title="Switch Theme"
         />
+        <ActionIcon icon={Settings} onClick={() => setIsSettingOpen(true)} title="Setting" />
       </Space.Compact>
-      <Modal
-        footer={false}
-        onCancel={handleCancel}
-        open={isModalOpen}
-        title={
-          <a
-            href="https://github.com/canisminor1990/sd-webui-kitchen-theme"
-            rel="noreferrer"
-            target="_blank"
-          >
-            <Space>
-              <GithubOutlined />
-              {'canisminor1990/sd-webui-kitchen-theme'}
-            </Space>
-          </a>
-        }
-      >
-        <Giscus themeMode={themeMode} />
-      </Modal>
+      <Setting onCancel={() => setIsSettingOpen(false)} open={isSettingOpen} />
+      <Giscus onCancel={() => setIsModalOpen(false)} open={isModalOpen} themeMode={themeMode} />
     </>
   );
 });

src/pages/Header/index.tsx

@@ -1,8 +1,10 @@
-import { Header as H, Logo } from '@lobehub/ui';
+import { Header as H, Tooltip } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
+import { homepage, name, version } from '@/../package.json';
+import { Logo } from '@/components';
 import { useAppStore } from '@/store';
 import { DivProps } from '@/types/index';
 
@@ -19,12 +21,14 @@ const Header = memo<DivProps>(({ children }) => {
       actionsStyle={{ flex: 0 }}
       logo={
         <a
-          href="https://github.com/canisminor1990/sd-webui-kitchen-theme"
+          href={homepage}
           rel="noreferrer"
-          style={{ color: theme.colorText }}
+          style={{ alignItems: 'center', color: theme.colorText, display: 'flex' }}
           target="_blank"
         >
-          <Logo extra="SD" type="combine" />
+          <Tooltip title={`${name} v${version}`}>
+            <Logo />
+          </Tooltip>
         </a>
       }
       nav={

src/slots/Giscus/index.tsx

@@ -1,32 +1,52 @@
-import { memo, useEffect } from 'react';
+import GiscusComponent from '@giscus/react';
+import { Icon } from '@lobehub/ui';
+import { Space } from 'antd';
+import { Github } from 'lucide-react';
+import { memo } from 'react';
+
+import { author, homepage, name } from '@/../package.json';
+import { Modal, type ModalProps } from '@/components';
 
 import { useStyles } from './style';
 
 interface GiscusProps {
+  onCancel?: ModalProps['onCancel'];
+  open?: ModalProps['open'];
   themeMode: 'light' | 'dark';
 }
-const Giscus = memo<GiscusProps>(({ themeMode }) => {
-  const { styles, cx } = useStyles();
-
-  useEffect(() => {
-    // giscus
-    const giscus: HTMLScriptElement = document.createElement('script');
-    giscus.src = 'https://giscus.app/client.js';
-    giscus.dataset.repo = 'canisminor1990/sd-webui-kitchen-theme';
-    giscus.dataset.repoId = 'R_kgDOJCPcNg';
-    giscus.dataset.mapping = 'number';
-    giscus.dataset.term = '53';
-    giscus.dataset.reactionsEnabled = '1';
-    giscus.dataset.emitMetadata = '0';
-    giscus.dataset.inputPosition = 'bottom';
-    giscus.dataset.theme = themeMode;
-    giscus.dataset.lang = 'en';
-    giscus.crossOrigin = 'anonymous';
-    giscus.async = true;
-    document.querySelectorAll('head')[0].append(giscus);
-  }, []);
+const Giscus = memo<GiscusProps>(({ themeMode, open, onCancel }) => {
+  const { styles } = useStyles();
 
-  return <div className={cx('giscus', styles.container)} id="giscus" />;
+  return (
+    <Modal
+      onCancel={onCancel}
+      open={open}
+      title={
+        <a href={homepage} rel="noreferrer" target="_blank">
+          <Space>
+            <Icon icon={Github} />
+            {`${author}/${name}`}
+          </Space>
+        </a>
+      }
+    >
+      <div className={styles.container}>
+        <GiscusComponent
+          emitMetadata="0"
+          id="giscus"
+          inputPosition="top"
+          lang="en"
+          loading="lazy"
+          mapping="number"
+          reactionsEnabled="1"
+          repo="canisminor1990/sd-webui-kitchen-theme"
+          repoId="R_kgDOJCPcNg"
+          term="53"
+          theme={themeMode}
+        />
+      </div>
+    </Modal>
+  );
 });
 
 export default Giscus;