diff --git a/data/social.ts b/data/social.ts index c5598c46..f01b7cfb 100644 --- a/data/social.ts +++ b/data/social.ts @@ -11,6 +11,13 @@ export type Social = { discord?: string } +type SocialValue = { + href?: string + title: string + icon: string + color: string +} + const social: Social = { github: 'https://github.com/kuizuo', twitter: 'https://twitter.com/kuizuo', @@ -24,7 +31,7 @@ const social: Social = { discord: 'https://discord.gg/M8cVcjDxkz', } -const SOCIAL = { +const socialSet: Record = { github: { href: social.github, title: 'GitHub', @@ -87,4 +94,4 @@ const SOCIAL = { }, } -export default SOCIAL +export default socialSet diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 26bff1fb..4dcf595a 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -107,7 +107,7 @@ const config: Config = { title: '更多', items: [ { label: '友链', position: 'right', to: 'friends' }, - { label: '导航', position: 'right', to: 'resource' }, + { label: '导航', position: 'right', to: 'resources' }, { html: ` diff --git a/src/components/SocialLinks/index.tsx b/src/components/SocialLinks/index.tsx index b18eb0ab..6e67db55 100644 --- a/src/components/SocialLinks/index.tsx +++ b/src/components/SocialLinks/index.tsx @@ -1,6 +1,5 @@ import React from 'react' -import { useThemeConfig } from '@docusaurus/theme-common' -import { ThemeConfig } from '@docusaurus/preset-classic' +import Tooltip from '@site/src/components/Tooltip' import { Icon } from '@iconify/react' import social from '@site/data/social' import styles from './styles.module.scss' @@ -27,9 +26,11 @@ interface Props { function SocialLink({ href, icon, title, color, ...prop }: Props) { return ( - - {typeof icon === 'string' ? : icon} - + + + {typeof icon === 'string' ? : icon} + + ) } diff --git a/src/pages/project/_components/ShowcaseTooltip/index.tsx b/src/components/Tooltip/index.tsx similarity index 85% rename from src/pages/project/_components/ShowcaseTooltip/index.tsx rename to src/components/Tooltip/index.tsx index 93f33d98..73911197 100644 --- a/src/pages/project/_components/ShowcaseTooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -11,40 +11,28 @@ interface Props { children: React.ReactElement } -export default function Tooltip({ - children, - id, - anchorEl, - text, - delay, -}: Props): JSX.Element { +export default function Tooltip({ children, id, anchorEl, text, delay }: Props): JSX.Element { const [open, setOpen] = useState(false) - const [referenceElement, setReferenceElement] = useState( - null, - ) + const [referenceElement, setReferenceElement] = useState(null) const [popperElement, setPopperElement] = useState(null) const [arrowElement, setArrowElement] = useState(null) const [container, setContainer] = useState(null) - const { styles: popperStyles, attributes } = usePopper( - referenceElement, - popperElement, - { - modifiers: [ - { - name: 'arrow', - options: { - element: arrowElement, - }, + const { styles: popperStyles, attributes } = usePopper(referenceElement, popperElement, { + modifiers: [ + { + name: 'arrow', + options: { + element: arrowElement, }, - { - name: 'offset', - options: { - offset: [0, 8], - }, + }, + { + name: 'offset', + options: { + offset: [0, 8], }, - ], - }, - ) + }, + ], + }) const timeout = useRef(null) const tooltipId = `${id}_tooltip` @@ -77,7 +65,7 @@ export default function Tooltip({ timeout.current = window.setTimeout(() => { setOpen(true) - }, delay || 400) + }, delay || 300) } const handleClose = () => { diff --git a/src/pages/project/_components/ShowcaseTooltip/styles.module.css b/src/components/Tooltip/styles.module.css similarity index 82% rename from src/pages/project/_components/ShowcaseTooltip/styles.module.css rename to src/components/Tooltip/styles.module.css index 778d2b70..59b1b938 100644 --- a/src/pages/project/_components/ShowcaseTooltip/styles.module.css +++ b/src/components/Tooltip/styles.module.css @@ -15,14 +15,6 @@ visibility: hidden; } -.tooltipArrow, -.tooltipArrow::before { - position: absolute; - width: 8px; - height: 8px; - background: inherit; -} - .tooltipArrow::before { visibility: visible; content: ''; diff --git a/src/pages/project/_components/ShowcaseCard/index.tsx b/src/pages/project/_components/ShowcaseCard/index.tsx index 2168d139..73fa2db9 100644 --- a/src/pages/project/_components/ShowcaseCard/index.tsx +++ b/src/pages/project/_components/ShowcaseCard/index.tsx @@ -5,7 +5,7 @@ import Link from '@docusaurus/Link' import Translate from '@docusaurus/Translate' import styles from './styles.module.css' import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon' -import Tooltip from '../ShowcaseTooltip' +import Tooltip from '@site/src/components/Tooltip' import { Tags, TagList, type TagType, type Project, type Tag } from '@site/data/projects' import { sortBy } from '@site/src/utils/jsUtils' diff --git a/src/pages/resource/_components/ResourceCard/index.tsx b/src/pages/resources/_components/ResourceCard/index.tsx similarity index 94% rename from src/pages/resource/_components/ResourceCard/index.tsx rename to src/pages/resources/_components/ResourceCard/index.tsx index a0287d3e..0c04a847 100644 --- a/src/pages/resource/_components/ResourceCard/index.tsx +++ b/src/pages/resources/_components/ResourceCard/index.tsx @@ -4,7 +4,7 @@ import Link from '@docusaurus/Link' import styles from './styles.module.css' import { type Resource } from '@site/data/resources' -import Tooltip from '../../../project/_components/ShowcaseTooltip' +import Tooltip from '@site/src/components/Tooltip' const ResourceCard = memo(({ resource }: { resource: Resource }) => (