-
-
Notifications
You must be signed in to change notification settings - Fork 222
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d7e13b6
commit 34ea7aa
Showing
23 changed files
with
1,135 additions
and
465 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { createStyles } from 'antd-style'; | ||
|
||
export const useStyles = createStyles(({ css }) => ({ | ||
modal: css` | ||
height: 70%; | ||
.ant-modal-header { | ||
margin-bottom: 24px; | ||
} | ||
`, | ||
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
export { default as Logo, type LogoProps } from './Logo'; | ||
export { default as Modal, type ModalProps } from './Modal'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
Oops, something went wrong.