diff --git a/packages/docusaurus-playground/docs/index.md b/packages/docusaurus-playground/docs/index.md index 8badbc5..ed09bf9 100644 --- a/packages/docusaurus-playground/docs/index.md +++ b/packages/docusaurus-playground/docs/index.md @@ -40,6 +40,18 @@ You can type this command into Command Prompt, Powershell, Terminal, or any othe The command also installs all necessary dependencies you need to run Docusaurus. +``` +import React from 'react'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; + +const Hello = () => { +const {siteConfig} = useDocusaurusContext(); + const {title, tagline} = siteConfig; + + return
{`${title} ยท ${tagline}`}
; +}; +``` + ## Start your site Run the development server: diff --git a/packages/docusaurus-playground/src/theme/CodeBlock/Container/styles.module.css b/packages/docusaurus-playground/src/theme/CodeBlock/Container/styles.module.css deleted file mode 100644 index 3c79968..0000000 --- a/packages/docusaurus-playground/src/theme/CodeBlock/Container/styles.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.codeBlockContainer { - background: var(--prism-background-color); - color: var(--prism-color); - margin-bottom: var(--ifm-leading); - box-shadow: var(--ifm-global-shadow-lw); - border-radius: var(--ifm-code-border-radius); -} diff --git a/packages/logos-docusaurus-theme/src/client/components/Button/Button.tsx b/packages/logos-docusaurus-theme/src/client/components/Button/Button.tsx new file mode 100644 index 0000000..4d77fd8 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/Button/Button.tsx @@ -0,0 +1,19 @@ +import clsx from 'clsx' +import React, { HTMLProps } from 'react' +import styles from './style.module.scss' + +type TProps = { + children: React.ReactNode +} + +export const Button = ( + props: TProps & HTMLProps, +): JSX.Element => { + const { children, className, ...rest } = props + + return ( + + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/Button/ButtonWithIcon.tsx b/packages/logos-docusaurus-theme/src/client/components/Button/ButtonWithIcon.tsx new file mode 100644 index 0000000..ded9b82 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/Button/ButtonWithIcon.tsx @@ -0,0 +1,23 @@ +import React, { HTMLProps } from 'react' +import { Button } from './Button' +import styles from './style.module.scss' + +type TProps = { + children: React.ReactNode + icon: JSX.Element +} + +export const ButtonWithIcon = ({ + children, + icon, + ...rest +}: TProps & HTMLProps): JSX.Element => { + return ( + + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/Button/LinkButton.tsx b/packages/logos-docusaurus-theme/src/client/components/Button/LinkButton.tsx new file mode 100644 index 0000000..4bf31f0 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/Button/LinkButton.tsx @@ -0,0 +1,22 @@ +import Link from '@docusaurus/Link' +import React, { HTMLProps } from 'react' +import { Button } from './Button' +import { ButtonWithIcon } from './ButtonWithIcon' +import styles from './style.module.scss' + +type TProps = { + children: React.ReactNode + linkProps: HTMLProps +} + +export const LinkButton = ({ + children, + linkProps, + ...rest +}: TProps & HTMLProps): JSX.Element => { + return ( + + + + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/Button/LinkButtonWithIcon.tsx b/packages/logos-docusaurus-theme/src/client/components/Button/LinkButtonWithIcon.tsx new file mode 100644 index 0000000..720b5c8 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/Button/LinkButtonWithIcon.tsx @@ -0,0 +1,26 @@ +import Link from '@docusaurus/Link' +import React, { HTMLProps } from 'react' +import { Button } from './Button' +import { ButtonWithIcon } from './ButtonWithIcon' +import styles from './style.module.scss' + +type TProps = { + children: React.ReactNode + linkProps: HTMLProps + icon: JSX.Element +} + +export const LinkButtonWithIcon = ({ + children, + linkProps, + icon, + ...rest +}: TProps & HTMLProps): JSX.Element => { + return ( + + + {children} + + + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx new file mode 100644 index 0000000..b190b0e --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx @@ -0,0 +1,144 @@ +import { useColorMode } from '@docusaurus/theme-common' +import { clsx } from 'clsx' +import React from 'react' + +import styles from './style.module.scss' + +import ArrowLCircleSvg from '../../static/icons/arrow-left-circle.svg' +import ArrowRCircleSvg from '../../static/icons/arrow-right-circle.svg' +import DiscordSvg from '../../static/icons/discord.svg' +import DiscourseSvg from '../../static/icons/discourse.svg' +import DotSvg from '../../static/icons/dot.svg' +import DropdownSvg from '../../static/icons/dropdown.svg' +import FolderSvg from '../../static/icons/folder.svg' +import GithubSvg from '../../static/icons/github.svg' +import GScholarSvg from '../../static/icons/gscholar.svg' +import LinkedinSvg from '../../static/icons/linkedin.svg' +import SearchSvg from '../../static/icons/search.svg' +import StatusSvg from '../../static/icons/status.svg' +import TelegramSvg from '../../static/icons/telegram.svg' +import TwitterSvg from '../../static/icons/twitter.svg' +import CopySvg from '../../static/icons/copy.svg' + +type TIconProps = { + size?: 's' | 'm' | 'l' + className?: string +} + +type TProps = { + children?: JSX.Element + fill?: string +} & TIconProps + +export const Icon = (props: TProps): JSX.Element => { + const { children, size = 'm' } = props + const { colorMode, setColorMode } = useColorMode() + + return ( +
+ {children} +
+ ) +} + +export const IconArrowRightCircle = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconArrowLeftCircle = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconFolder = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconGithub = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconDiscord = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconStatus = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconTwitter = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconTelegram = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconDiscourse = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconLinkedin = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconDot = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconFolderFilled = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconSearch = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconDropdown = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconGScholar = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconCopy = (props: TIconProps): JSX.Element => ( + + + +) diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/SocialmediaLink.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/SocialmediaLink.tsx new file mode 100644 index 0000000..4694323 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/Icon/SocialmediaLink.tsx @@ -0,0 +1,78 @@ +import React from 'react' +import { + IconDiscord, + IconDiscourse, + IconTwitter, + IconGithub, + IconStatus, + IconTelegram, + IconGScholar, +} from './Icon' +import { ECommunityProviders } from '@logos-theme/types/ui.types' + +type TProps = { + handler: string + provider: ECommunityProviders +} + +export const SocialMediaItem = (props: TProps): JSX.Element => { + switch (props.provider) { + case 'twitter': + return ( + + + + ) + case 'discord': + return ( + + + + ) + case 'github': + return ( + + + + ) + case 'telegram': + return ( + + + + ) + case 'status': + return ( + + + + ) + case 'discourse': + return ( + -1 + ? props.handler + : `https://${props.handler}` + } + target={'_blank'} + > + + + ) + case ECommunityProviders.gscholar: + return ( + + + + ) + default: + return <> + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/index.ts b/packages/logos-docusaurus-theme/src/client/components/Icon/index.ts new file mode 100644 index 0000000..7aebbe9 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/Icon/index.ts @@ -0,0 +1 @@ +export * from './Icon' diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss b/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss new file mode 100644 index 0000000..63efbd5 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss @@ -0,0 +1,29 @@ +.icon { + display: flex; + &.s { + svg { + width: 10px; + } + } + &.m { + svg { + width: 20px; + } + } + &.l { + svg { + width: 40px; + } + } + + &.dark { + .fill { + fill: var(--ifm-color-black); + } + .stroke { + stroke: var(--ifm-color-white); + } + } + &.light { + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalReferenceCard/ExternalReferenceCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalReferenceCard/ExternalReferenceCard.tsx index 8b474bf..848f767 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalReferenceCard/ExternalReferenceCard.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalReferenceCard/ExternalReferenceCard.tsx @@ -6,7 +6,7 @@ import { IconFolder, IconFolderFilled, IconGithub, -} from '../../Icon/index' +} from '../../Icon/Icon' import styles from './style.module.scss' type TProps = { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.tsx index 500071f..02b355d 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.tsx @@ -2,7 +2,7 @@ import Link from '@docusaurus/Link' import clsx from 'clsx' import React from 'react' import { ButtonWithIcon } from '../../Button/ButtonWithIcon' -import { IconArrowRightCircle, IconDot } from '../../Icon/index' +import { IconArrowRightCircle, IconDot } from '../../Icon/Icon' import styles from './style.module.scss' type TProps = { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TeamList/TeamList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/TeamList/TeamList.tsx index ec31cc8..abb68ac 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/TeamList/TeamList.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TeamList/TeamList.tsx @@ -6,7 +6,7 @@ import { useTeam } from '@logos-theme/lib/team.utils' import { ECommunityProviders } from '@logos-theme/types/ui.types' import clsx from 'clsx' import React from 'react' -import { SocialMediaItem } from '../../Icon/SocialmediaLink' +import { SocialMediaItem } from '@logos-theme/components/Icon/SocialmediaLink' import styles from './style.module.scss' type TProps = { diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/copy.svg b/packages/logos-docusaurus-theme/src/client/static/icons/copy.svg new file mode 100644 index 0000000..c8e2f22 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/static/icons/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/docusaurus-playground/src/theme/Admonition/index.js b/packages/logos-docusaurus-theme/src/client/theme/Admonition/index.js similarity index 100% rename from packages/docusaurus-playground/src/theme/Admonition/index.js rename to packages/logos-docusaurus-theme/src/client/theme/Admonition/index.js diff --git a/packages/docusaurus-playground/src/theme/Admonition/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/Admonition/styles.module.css similarity index 100% rename from packages/docusaurus-playground/src/theme/Admonition/styles.module.css rename to packages/logos-docusaurus-theme/src/client/theme/Admonition/styles.module.css diff --git a/packages/docusaurus-playground/src/theme/CodeBlock/Container/index.js b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/index.js similarity index 60% rename from packages/docusaurus-playground/src/theme/CodeBlock/Container/index.js rename to packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/index.js index bb90ffe..78b7627 100644 --- a/packages/docusaurus-playground/src/theme/CodeBlock/Container/index.js +++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/index.js @@ -1,16 +1,13 @@ import React from 'react' import clsx from 'clsx' -import { ThemeClassNames, usePrismTheme } from '@docusaurus/theme-common' -import { getPrismCssVariables } from '@docusaurus/theme-common/internal' +import { ThemeClassNames } from '@docusaurus/theme-common' import styles from './styles.module.css' + export default function CodeBlockContainer({ as: As, ...props }) { - const prismTheme = usePrismTheme() - const prismCssVariables = getPrismCssVariables(prismTheme) return ( (undefined) + const handleCopyCode = useCallback(() => { copy(code) setIsCopied(true) @@ -16,7 +18,9 @@ export default function CopyButton({ code, className }) { setIsCopied(false) }, 1000) }, [code]) + useEffect(() => () => window.clearTimeout(copyTimeout.current), []) + return (