From c3f8c6b50bd04b0015b1f1beba85c357ae24bf74 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 25 May 2023 00:18:54 +0900 Subject: [PATCH] remove unnecessary parts --- .../src/client/components/Button/Button.tsx | 19 -- .../components/Button/ButtonWithIcon.tsx | 23 -- .../client/components/Button/LinkButton.tsx | 22 -- .../components/Button/LinkButtonWithIcon.tsx | 26 -- .../src/client/components/Button/index.tsx | 1 - .../components/Button/style.module.scss | 7 - .../src/client/components/Icon/Icon.tsx | 136 --------- .../components/Icon/SocialmediaLink.tsx | 78 ----- .../src/client/components/Icon/index.tsx | 1 - .../client/components/Icon/style.module.scss | 29 -- .../IconButton/IconButton.module.scss | 17 -- .../components/IconButton/IconButton.tsx | 20 -- .../src/client/components/IconButton/index.ts | 1 - .../src/client/css/custom.scss | 17 +- .../client/theme/ColorModeToggle/index.tsx | 56 ---- .../theme/ColorModeToggle/styles.module.css | 8 - .../DocCategoryGeneratedIndexPage/index.tsx | 69 ----- .../styles.module.css | 23 -- .../src/client/theme/DocItem/Layout/index.tsx | 66 ----- .../theme/DocItem/Layout/styles.module.scss | 53 ---- .../theme/DocPage/Layout/Main/index.tsx | 32 -- .../DocPage/Layout/Main/styles.module.scss | 41 --- .../theme/DocPage/Layout/Sidebar/index.tsx | 54 ---- .../DocPage/Layout/Sidebar/styles.module.css | 24 -- .../src/client/theme/DocPage/Layout/index.tsx | 46 --- .../theme/DocPage/Layout/styles.module.scss | 28 -- .../client/theme/DocSidebar/Desktop/index.tsx | 29 -- .../DocSidebar/Desktop/styles.module.css | 48 --- .../theme/DocSidebarItem/Category/index.tsx | 215 -------------- .../src/client/theme/Footer/Layout/index.tsx | 72 ----- .../theme/Footer/Layout/style.module.scss | 81 ------ .../src/client/theme/Icon/LightMode/index.tsx | 7 - .../src/client/theme/Layout/index.tsx | 15 - .../src/client/theme/Layout/styles.scss | 37 --- .../MobileSearch/MobileSearch.module.scss | 33 --- .../Content/MobileSearch/MobileSearch.tsx | 28 -- .../Navbar/Content/MobileSearch/index.ts | 1 - .../theme/Navbar/Content/ShareButton.tsx | 21 -- .../src/client/theme/Navbar/Content/index.tsx | 166 ----------- .../theme/Navbar/Content/styles.module.scss | 275 ------------------ .../Navbar/MobileSidebar/Header/index.tsx | 32 -- .../MobileSidebar/SecondaryMenu/index.tsx | 40 --- .../SecondaryMenu/styles.module.scss | 21 -- .../src/client/theme/Navbar/index.scss | 86 ------ .../src/client/theme/Navbar/index.tsx | 30 -- .../theme/NavbarItem/DropdownNavbarItem.scss | 27 -- .../theme/NavbarItem/DropdownNavbarItem.tsx | 190 ------------ .../LocaleDropdownNavbarItem/index.tsx | 63 ---- .../styles.module.css | 4 - .../SearchInput/SearchInput.module.scss | 6 +- .../SearchBar/SearchInput/SearchInput.tsx | 5 +- .../TOCCollapsible/CollapseButton/index.tsx | 33 --- .../CollapseButton/styles.module.scss | 29 -- .../src/client/theme/TOCCollapsible/index.tsx | 44 --- .../theme/TOCCollapsible/styles.module.css | 44 --- 55 files changed, 17 insertions(+), 2562 deletions(-) delete mode 100644 packages/logos-docusaurus-theme/src/client/components/Button/Button.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/Button/ButtonWithIcon.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/Button/LinkButton.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/Button/LinkButtonWithIcon.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/Button/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/Button/style.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/Icon/SocialmediaLink.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/Icon/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/components/IconButton/IconButton.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/components/IconButton/IconButton.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/IconButton/index.ts delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.css delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocCategoryGeneratedIndexPage/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocCategoryGeneratedIndexPage/styles.module.css delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/styles.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Icon/LightMode/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Layout/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Layout/styles.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/MobileSearch/MobileSearch.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/MobileSearch/MobileSearch.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/MobileSearch/index.ts delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/ShareButton.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/styles.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/styles.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/index.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/styles.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/styles.module.css diff --git a/packages/logos-docusaurus-theme/src/client/components/Button/Button.tsx b/packages/logos-docusaurus-theme/src/client/components/Button/Button.tsx deleted file mode 100644 index 4d77fd8..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/Button/Button.tsx +++ /dev/null @@ -1,19 +0,0 @@ -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 deleted file mode 100644 index ded9b82..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/Button/ButtonWithIcon.tsx +++ /dev/null @@ -1,23 +0,0 @@ -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 deleted file mode 100644 index 4bf31f0..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/Button/LinkButton.tsx +++ /dev/null @@ -1,22 +0,0 @@ -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 deleted file mode 100644 index 720b5c8..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/Button/LinkButtonWithIcon.tsx +++ /dev/null @@ -1,26 +0,0 @@ -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/Button/index.tsx b/packages/logos-docusaurus-theme/src/client/components/Button/index.tsx deleted file mode 100644 index 8486fd6..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/Button/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './Button' diff --git a/packages/logos-docusaurus-theme/src/client/components/Button/style.module.scss b/packages/logos-docusaurus-theme/src/client/components/Button/style.module.scss deleted file mode 100644 index a80194f..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/Button/style.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.buttonWithIconContainer { - display: flex; - gap: 40px; - min-width: 110px; - align-content: center; - justify-content: space-between; -} diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx deleted file mode 100644 index 64f8e03..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx +++ /dev/null @@ -1,136 +0,0 @@ -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' - -type TIconProps = { - size?: 's' | 'm' | 'l' -} - -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 => ( - - - -) diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/SocialmediaLink.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/SocialmediaLink.tsx deleted file mode 100644 index 4694323..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/Icon/SocialmediaLink.tsx +++ /dev/null @@ -1,78 +0,0 @@ -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.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/index.tsx deleted file mode 100644 index 7aebbe9..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/Icon/index.tsx +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index 68ba0f8..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -.icon { - display: flex; - &.s { - svg { - width: 10px; - } - } - &.m { - svg { - width: 20px; - } - } - &.l { - svg { - width: 40px; - } - } - - &.dark { - .fill { - fill: var(--ifm-color-black); - } - .stroke { - stroke: rgb(var(--lsd-surface-primary)); - } - } - &.light { - } -} diff --git a/packages/logos-docusaurus-theme/src/client/components/IconButton/IconButton.module.scss b/packages/logos-docusaurus-theme/src/client/components/IconButton/IconButton.module.scss deleted file mode 100644 index 9ce3a4d..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/IconButton/IconButton.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -.root { - -webkit-tap-highlight-color: transparent; - align-items: center; - display: flex; - justify-content: center; - width: 100%; - height: 100%; - border-radius: 50%; - transition: background var(--ifm-transition-fast); - - width: 2rem; - height: 2rem; -} - -.root:hover { - background: var(--ifm-color-emphasis-200); -} diff --git a/packages/logos-docusaurus-theme/src/client/components/IconButton/IconButton.tsx b/packages/logos-docusaurus-theme/src/client/components/IconButton/IconButton.tsx deleted file mode 100644 index ed96c23..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/IconButton/IconButton.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import clsx from 'clsx' -import React from 'react' -import styles from './IconButton.module.scss' - -export const IconButton: React.FC< - React.DetailedHTMLProps< - React.ButtonHTMLAttributes, - HTMLButtonElement - > & {} -> = ({ children, className, ...props }) => { - return ( - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/components/IconButton/index.ts b/packages/logos-docusaurus-theme/src/client/components/IconButton/index.ts deleted file mode 100644 index a37a7fc..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/IconButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './IconButton' diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 67a905c..3693312 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -12,6 +12,7 @@ --ifm-navbar-link-color: rgb(var(--lsd-text-primary)); --ifm-dropdown-link-color: rgb(var(--lsd-text-secondary)); --ifm-dropdown-hover-background-color: rgb(var(--lsd-surface-secondary)); + --ifm-menu-color-active: rgb(var(--lsd-text-secondary)); /* Colors. */ /*--ifm-dark-value: 10%;*/ @@ -21,13 +22,13 @@ /*--ifm-lighter-value: -30%;*/ /*--ifm-lightest-value: -50%;*/ - --ifm-background-color: #f8f8fa; + --ifm-background-color: rgb(var(--lsd-surface-primary)); --ifm-color-white: #fff; --ifm-color-black: #000; - --ifm-color-primary: #000; - --ifm-color-secondary: #eeeef0; + --ifm-color-primary: rgb(var(--lsd-theme-primary)); + --ifm-color-secondary: rgb(var(--lsd-theme-secondary)); --ifm-color-gray-0: rgb(var(--lsd-surface-primary)); --ifm-color-gray-100: #f8f8fa; @@ -61,9 +62,7 @@ --ifm-hover-overlay: rgba(0, 0, 0, 0.05); /* Typography. */ - --ifm-font-family-base: system-ui, -apple-system, Helvetica, Arial, Segoe UI, - sans-serif, BlinkMacSystemFont, 'Segoe UI', sans-serif, 'Apple Color Emoji', - 'Segoe UI Emoji', 'Segoe UI Symbol'; + --ifm-font-family-base: var(--lsd-typography-generic-font-family); --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --lgs-font-family-secondary: Georgia, 'Times New Roman', serif; @@ -187,7 +186,7 @@ @include utils.responsive('lg', 'down') { :root { - --ifm-background-color: #ffffff; + --ifm-background-color: rgb(var(--lsd-surface-primary)); } } @@ -207,6 +206,10 @@ svg * { color: rgb(var(--lsd-text-primary)) !important; } +.dropdown__link--active { + color: rgb(var(--lsd-text-secondary)) !important; +} + /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { --ifm-hero-background-color: #f8f8fa; diff --git a/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx deleted file mode 100644 index 6341879..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { translate } from '@docusaurus/Translate' -import useIsBrowser from '@docusaurus/useIsBrowser' -import { IconButton } from '@logos-theme/components/IconButton/index' -import type { Props } from '@theme/ColorModeToggle' -import IconDarkMode from '@theme/Icon/DarkMode' -import IconLightMode from '@theme/Icon/LightMode' -import clsx from 'clsx' -import React from 'react' -import styles from './styles.module.css' - -function ColorModeToggle({ className, value, onChange }: Props): JSX.Element { - const isBrowser = useIsBrowser() - - const title = translate( - { - message: 'Switch between dark and light mode (currently {mode})', - id: 'theme.colorToggle.ariaLabel', - description: 'The ARIA label for the navbar color mode toggle', - }, - { - mode: - value === 'dark' - ? translate({ - message: 'dark mode', - id: 'theme.colorToggle.ariaLabel.mode.dark', - description: 'The name for the dark color mode', - }) - : translate({ - message: 'light mode', - id: 'theme.colorToggle.ariaLabel.mode.light', - description: 'The name for the light color mode', - }), - }, - ) - - return ( -
- onChange(value === 'dark' ? 'light' : 'dark')} - > - - - -
- ) -} - -export default React.memo(ColorModeToggle) diff --git a/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.css deleted file mode 100644 index d94cb13..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.css +++ /dev/null @@ -1,8 +0,0 @@ -[data-theme='light'] .darkToggleIcon, -[data-theme='dark'] .lightToggleIcon { - display: none; -} - -.toggleButtonDisabled { - cursor: not-allowed; -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocCategoryGeneratedIndexPage/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocCategoryGeneratedIndexPage/index.tsx deleted file mode 100644 index 04dc559..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocCategoryGeneratedIndexPage/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { - PageMetadata, - useCurrentSidebarCategory, -} from '@docusaurus/theme-common' -import useBaseUrl from '@docusaurus/useBaseUrl' -import DocBreadcrumbs from '@theme/DocBreadcrumbs' -import DocCardList from '@theme/DocCardList' -import type { Props } from '@theme/DocCategoryGeneratedIndexPage' -import DocPaginator from '@theme/DocPaginator' -import DocVersionBadge from '@theme/DocVersionBadge' -import DocVersionBanner from '@theme/DocVersionBanner' -import Heading from '@theme/Heading' -import React from 'react' -import styles from './styles.module.css' - -function DocCategoryGeneratedIndexPageMetadata({ - categoryGeneratedIndex, -}: Props): JSX.Element { - return ( - - ) -} - -function DocCategoryGeneratedIndexPageContent({ - categoryGeneratedIndex, -}: Props): JSX.Element { - const category = useCurrentSidebarCategory() - return ( -
- - - -
- - {categoryGeneratedIndex.title} - - {categoryGeneratedIndex.description && ( -

{categoryGeneratedIndex.description}

- )} -
-
- -
-
- -
-
- ) -} - -export default function DocCategoryGeneratedIndexPage( - props: Props, -): JSX.Element { - return ( - <> - - - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocCategoryGeneratedIndexPage/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocCategoryGeneratedIndexPage/styles.module.css deleted file mode 100644 index 328ab6d..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocCategoryGeneratedIndexPage/styles.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.generatedIndexPage { - padding: 0 var(--ifm-spacing-horizontal); -} - -@media (min-width: 997px) { - .generatedIndexPage { - max-width: 75% !important; - } - - .list article:nth-last-child(-n + 2) { - margin-bottom: 0 !important; - } -} - -/* Duplicated from .markdown h1 */ -.title { - --ifm-h1-font-size: 3rem; - margin-bottom: calc(1.25 * var(--ifm-leading)); -} - -.list article:last-child { - margin-bottom: 0 !important; -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx deleted file mode 100644 index 171de13..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { useWindowSize } from '@docusaurus/theme-common' -import { useDoc } from '@docusaurus/theme-common/internal' -import DocItemContent from '@theme/DocItem/Content' -import DocItemFooter from '@theme/DocItem/Footer' -import { Props } from '@theme/DocItem/Layout' -import DocItemPaginator from '@theme/DocItem/Paginator' -import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop' -import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile' -import DocVersionBadge from '@theme/DocVersionBadge' -import DocVersionBanner from '@theme/DocVersionBanner' -import clsx from 'clsx' -import React from 'react' -import styles from './styles.module.scss' - -/** - * Decide if the toc should be rendered, on mobile or desktop viewports - */ -function useDocTOC() { - const { frontMatter, toc } = useDoc() - const windowSize = useWindowSize() - - const hidden = frontMatter.hide_table_of_contents - const canRender = !hidden && toc.length > 0 - - const mobile = canRender ? : undefined - - const desktop = - canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? ( - - ) : undefined - - return { - hidden, - mobile, - desktop, - } -} - -export default function DocItemLayout({ children }: Props): JSX.Element { - const docTOC = useDocTOC() - const windowSize = useWindowSize() - - return ( -
-
- -
-
-
- {/**/} - - {docTOC.mobile} - {children} - -
- -
-
-
- {windowSize !== 'mobile' &&
- ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss deleted file mode 100644 index ac293c5..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss +++ /dev/null @@ -1,53 +0,0 @@ -@use '../../../css/utils'; - -.root { - width: 100%; - margin: 0 !important; -} - -.docItemCol { - flex-grow: 1; - min-width: 0; -} - -.root > aside { - width: calc(2 / 12 * 100vw); - flex-basis: calc(2 / 12 * 100vw); - flex-grow: 0; - flex-shrink: 0; -} - -.tocDesktopWrapper { - width: 16.66vw; - flex-basis: 16.66vw; - flex-grow: 0; - flex-shrink: 0; - font-size: var(--ifm-h6-font-size); - a { - font-size: var(--ifm-h6-font-size); - } -} - -.docItemContainer > div { - flex-grow: 1; -} - -.docItemContainer header + *, -.docItemContainer article > *:first-child { - margin-top: 0; -} - -.docItemContainer article header:first-child { - display: none; -} - -@include utils.responsive('lg', 'down') { - .docItemContainer > div:first-child { - } -} - -@media (min-width: 997px) { - .docItemCol { - max-width: 75% !important; - } -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/index.tsx deleted file mode 100644 index 6782ecd..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { useDocsSidebar } from '@docusaurus/theme-common/internal' -import type { Props } from '@theme/DocPage/Layout/Main' -import clsx from 'clsx' -import React from 'react' -import styles from './styles.module.scss' - -export default function DocPageLayoutMain({ - hiddenSidebarContainer, - children, -}: Props): JSX.Element { - const sidebar = useDocsSidebar() - - return ( -
-
-
- {children} -
-
- ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.scss deleted file mode 100644 index 852af51..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use '../../../../css/utils'; - -.docMainContainer { - display: flex; - width: 100%; -} - -.sidebarSpace { - width: 0; -} - -@include utils.responsive('lg', 'up') { - .sidebarSpace { - transition: var(--ifm-transition-fast) ease, - flex var(--ifm-transition-fast) ease; - flex-shrink: 0; - width: var(--doc-sidebar-width); - max-width: var(--doc-sidebar-max-width); - } -} - -.docMainContainerEnhanced .sidebarSpace { - width: 0; -} - -.docItemWrapper { - width: 100%; - min-width: 0; -} - -@media (min-width: 997px) { - .docMainContainer { - flex-grow: 1; - } - - .docMainContainerEnhanced { - } - - .docItemWrapperEnhanced { - } -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx deleted file mode 100644 index 9ff0326..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { useLocation } from '@docusaurus/router' -import { ThemeClassNames } from '@docusaurus/theme-common' -import { useDocsSidebar } from '@docusaurus/theme-common/internal' -import { - globalStore, - selectHiddenSidebar, -} from '@logos-theme/containers/GlobalStore/index' -import type { Props } from '@theme/DocPage/Layout/Sidebar' -import DocSidebar from '@theme/DocSidebar' -import clsx from 'clsx' -import React, { ReactNode } from 'react' -import styles from './styles.module.css' - -// Reset sidebar state when sidebar changes -// Use React key to unmount/remount the children -// See https://github.com/facebook/docusaurus/issues/3414 -function ResetOnSidebarChange({ children }: { children: ReactNode }) { - const sidebar = useDocsSidebar() - return ( - - {children} - - ) -} - -export default function DocPageLayoutSidebar({ sidebar }: Props): JSX.Element { - const { pathname } = useLocation() - const dispatch = globalStore.useDispatch() - const hiddenSidebar = globalStore.useSelector(selectHiddenSidebar) - - return ( - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css deleted file mode 100644 index 982c397..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css +++ /dev/null @@ -1,24 +0,0 @@ -:root { - --doc-sidebar-width: 300px; - --doc-sidebar-hidden-width: 30px; -} - -.docSidebarContainer { - display: none; -} - -@media (min-width: 997px) { - .docSidebarContainer { - display: block; - width: var(--doc-sidebar-width); - margin-top: calc(-1 * var(--ifm-navbar-height)); - will-change: width; - transition: width var(--ifm-transition-fast) ease; - clip-path: inset(0); - } - - .docSidebarContainerHidden { - width: var(--doc-sidebar-hidden-width); - cursor: pointer; - } -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx deleted file mode 100644 index 85dd819..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useDocsSidebar } from '@docusaurus/theme-common/internal' -import { - globalStore, - selectHiddenSidebar, -} from '@logos-theme/containers/GlobalStore/index' -import BackToTopButton from '@theme/BackToTopButton' -import type { Props } from '@theme/DocPage/Layout' -import DocPageLayoutMain from '@theme/DocPage/Layout/Main' -import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar' -import Layout from '@theme/Layout' -import React from 'react' -import styles from './styles.module.scss' - -const DocPageWrapper: React.FC> = ({ - children, -}) => { - const sidebar = useDocsSidebar() - - const dispatch = globalStore.useDispatch() - const hiddenSidebarContainer = globalStore.useSelector(selectHiddenSidebar) - const setHiddenSidebarContainer = dispatch.setHiddenSidebar - - return ( -
- {sidebar && ( - - )} - - {children} - -
- ) -} - -export default function DocPageLayout({ children }: Props): JSX.Element { - return ( - - - {children} - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/styles.module.scss deleted file mode 100644 index 8442398..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/styles.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -.docPage { - width: 100%; - position: relative; - - display: grid; - - & > main, - & > aside { - grid-area: 1 / 1; - } - - & > main { - width: 100%; - min-width: 0; - } - - & > aside { - max-width: var(--doc-sidebar-max-width); - - & > div { - width: 100%; - } - } -} - -.docsWrapper { - display: flex; -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/index.tsx deleted file mode 100644 index 15c0da2..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { useThemeConfig } from '@docusaurus/theme-common' -import type { Props } from '@theme/DocSidebar/Desktop' -import Content from '@theme/DocSidebar/Desktop/Content' -import Logo from '@theme/Logo' -import clsx from 'clsx' -import React from 'react' -import styles from './styles.module.css' - -function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }: Props) { - const { - navbar: { hideOnScroll }, - docs: {}, - } = useThemeConfig() - - return ( -
- {hideOnScroll && } - -
- ) -} - -export default React.memo(DocSidebarDesktop) diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css deleted file mode 100644 index 599787b..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css +++ /dev/null @@ -1,48 +0,0 @@ -@media (min-width: 997px) { - .sidebar { - display: flex; - flex-direction: column; - max-height: 100vh; - height: 100%; - position: sticky; - top: 0; - padding-top: var(--ifm-navbar-height); - width: var(--doc-sidebar-width); - transition: opacity 50ms ease; - font-size: var(--ifm-h6-font-size); - } - - .sidebar nav { - padding: 1rem 0 0.5rem var(--ifm-spacing-horizontal); - } - - .sidebarWithHideableNavbar { - padding-top: 0; - } - - .sidebarHidden { - opacity: 0; - height: 0; - overflow: hidden; - visibility: hidden; - } - - .sidebarLogo { - display: flex !important; - align-items: center; - margin: 0 var(--ifm-navbar-padding-horizontal); - min-height: var(--ifm-navbar-height); - max-height: var(--ifm-navbar-height); - color: inherit !important; - text-decoration: none !important; - } - - .sidebarLogo img { - margin-right: 0.5rem; - height: 2rem; - } -} - -.sidebarLogo { - display: none; -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx deleted file mode 100644 index 0e7bca2..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx +++ /dev/null @@ -1,215 +0,0 @@ -import React, { type ComponentProps, useEffect, useMemo } from 'react' -import clsx from 'clsx' -import { - ThemeClassNames, - useThemeConfig, - usePrevious, - Collapsible, - useCollapsible, -} from '@docusaurus/theme-common' -import { - isActiveSidebarItem, - findFirstCategoryLink, - useDocSidebarItemsExpandedState, - isSamePath, -} from '@docusaurus/theme-common/internal' -import Link from '@docusaurus/Link' -import { translate } from '@docusaurus/Translate' -import useIsBrowser from '@docusaurus/useIsBrowser' -import DocSidebarItems from '@theme/DocSidebarItems' -import type { Props } from '@theme/DocSidebarItem/Category' -import { - IconArrowLeftCircle, - IconArrowRightCircle, - IconDropdown, -} from '@logos-theme/components/Icon/index' - -// If we navigate to a category and it becomes active, it should automatically -// expand itself -function useAutoExpandActiveCategory({ - isActive, - collapsed, - updateCollapsed, -}: { - isActive: boolean - collapsed: boolean - updateCollapsed: (b: boolean) => void -}) { - const wasActive = usePrevious(isActive) - useEffect(() => { - const justBecameActive = isActive && !wasActive - if (justBecameActive && collapsed) { - updateCollapsed(false) - } - }, [isActive, wasActive, collapsed, updateCollapsed]) -} - -/** - * When a collapsible category has no link, we still link it to its first child - * during SSR as a temporary fallback. This allows to be able to navigate inside - * the category even when JS fails to load, is delayed or simply disabled - * React hydration becomes an optional progressive enhancement - * see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188 - * see https://github.com/facebook/docusaurus/issues/3030 - */ -function useCategoryHrefWithSSRFallback( - item: Props['item'], -): string | undefined { - const isBrowser = useIsBrowser() - return useMemo(() => { - if (item.href) { - return item.href - } - // In these cases, it's not necessary to render a fallback - // We skip the "findFirstCategoryLink" computation - if (isBrowser || !item.collapsible) { - return undefined - } - return findFirstCategoryLink(item) - }, [item, isBrowser]) -} - -function CollapseButton({ - categoryLabel, - onClick, -}: { - categoryLabel: string - onClick: ComponentProps<'button'>['onClick'] -}) { - return ( - - - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/MobileSearch/index.ts b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/MobileSearch/index.ts deleted file mode 100644 index 251136d..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/MobileSearch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './MobileSearch' diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/ShareButton.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/ShareButton.tsx deleted file mode 100644 index 4e89720..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/ShareButton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import copy2clipboard from 'copy-to-clipboard' -import React from 'react' -import { IconButton } from '@logos-theme/components/IconButton/index' -import Icon from '../../../static/icons/share.svg' -import styles from './styles.module.scss' - -export const ShareButton: React.FC<{}> = ({}) => { - return ( - { - if (typeof navigator?.share === 'function') navigator.share() - else copy2clipboard(window.location.href) - }} - className={styles.shareButton} - > - - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx deleted file mode 100644 index d7fc762..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import { useActivePlugin } from '@docusaurus/plugin-content-docs/client' -import { useThemeConfig } from '@docusaurus/theme-common' -import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal' -import { IconSearch } from '@logos-theme/components/Icon/index' -import { IconButton } from '@logos-theme/components/IconButton/index' -import { - globalStore, - selectHiddenSidebar, -} from '@logos-theme/containers/GlobalStore/index' -import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle' -import NavbarLogo from '@theme/Navbar/Logo' -import NavbarSearch from '@theme/Navbar/Search' -import NavbarItem, { Props as NavbarItemConfig } from '@theme/NavbarItem' -import SearchBar from '@theme/SearchBar' -import clsx from 'clsx' -import React, { useState } from 'react' -import ChevronIcon from '../../../static/icons/chevron-left.svg' -import HamburgerIcon from '../../../static/icons/hamburger-menu.svg' -import { MobileSearch } from './MobileSearch/MobileSearch' -import { ShareButton } from './ShareButton' -import styles from './styles.module.scss' - -function useNavbarItems() { - // TODO temporary casting until ThemeConfig type is improved - return useThemeConfig().navbar.items as NavbarItemConfig[] -} - -function NavbarItems({ items }: { items: NavbarItemConfig[] }): JSX.Element { - return ( - <> - {items.map((item, i) => ( - - ))} - - ) -} - -const SidebarToggleButton: React.FC<{ - className: string - onToggle: () => void - shown: boolean -}> = ({ className, onToggle, shown }) => { - return ( - - ) -} - -export default function NavbarContent(): JSX.Element { - const navbarItems = useNavbarItems() - const activePlugin = useActivePlugin() - - const localeDropdown = navbarItems.find( - (item) => item.type === 'localeDropdown', - ) - const docsVersionDropdowns = navbarItems.filter( - (item) => - item.type === 'docsVersionDropdown' && - (!activePlugin?.pluginId || activePlugin.pluginId === item.docsPluginId), - ) - const items = navbarItems.filter( - (item) => - !item.type || - !['localeDropdown', 'version', 'docsVersionDropdown'].includes( - item.type as string, - ), - ) - - const mobileSidebar = useNavbarMobileSidebar() - - const dispatch = globalStore.useDispatch() - const hiddenDesktopSidebar = globalStore.useSelector(selectHiddenSidebar) - - const [mobileSearch, setMobileSearch] = useState(false) - - return ( -
-
- - -
- -
-
-
- -
-
- - - -
-
-
- -
-
- -
- - - {docsVersionDropdowns && } - {localeDropdown && ( - <> -
- - - )} -
- -
- {localeDropdown && } - setMobileSearch(true)} - > - - -
- -
- setMobileSearch(false)} - /> -
-
- ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/styles.module.scss deleted file mode 100644 index f9818ea..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/styles.module.scss +++ /dev/null @@ -1,275 +0,0 @@ -@use '../../../css/utils'; - -.root { - width: 100%; - margin: 0; - - & > div { - display: flex; - flex-direction: row; - align-items: center; - flex-grow: 0; - } - - & > div:first-child { - max-width: var(--doc-sidebar-max-width); - background: rgb(var(--lsd-surface-primary)); - } - - & > .headerMiddle { - justify-content: space-between; - flex-grow: 1; - background: rgb(var(--lsd-surface-primary)); - padding-top: var(--ifm-navbar-padding-vertical); - //padding-bottom: var(--ifm-navbar-padding-vertical); - } -} - -.leftContainer { - display: flex; - flex-direction: row; - align-items: center; - - transition: 0.2s; - transform: translateX(0); - - &.shifted { - transform: translateX( - calc(-1 * min(var(--doc-sidebar-max-width), 16.66vw) + 64px) - ); - } -} - -.headerRight { - justify-content: flex-end; -} - -.navbarLogoWrapper { - & > * { - margin: 0; - } -} - -.menu { - @extend %menu-common; - - display: flex; - flex-direction: row; -} - -.sidebarButton { - border: none; - background: none; - - cursor: pointer; - - @extend %menu-common; - - width: 52px; - height: 36px; - - &.expand { - svg, - svg * { - fill: currentColor; - } - } - - &:not(.expand) { - svg, - svg * { - stroke: currentColor; - } - } -} - -%menu-common { - padding: 6px; - background-color: rgb(var(--lsd-surface-primary)); - border-radius: 1rem; -} - -.headerRight { - & > *:not(:last-child) { - margin-right: 34px; - } -} - -.divider { - height: 11px; - width: 1px; - - background-color: #d9d9d9; // TODO: use infima variables -} - -.shareButton { - svg, - svg * { - fill: currentColor; - } -} - -.searchContainer > div { - padding: 0; -} - -@include utils.responsive('lg', 'down') { - .root { - padding: 0 var(--ifm-spacing-horizontal); - } - - .root > * { - width: auto; - flex: 0 0 auto; - padding: 0; - } - - .root > div:first-child { - flex: 0 0 auto; - } - - .headerMiddle { - .leftContainer.shifted { - transform: none; - } - - nav { - display: none; - } - } - - .headerRight { - display: none !important; - } - - .searchContainer { - display: none; - } -} - -.headerRightMobile { - visibility: visible; - display: flex !important; - - flex: 1 1 auto !important; - - align-items: center; - justify-content: flex-end; - - & > div { - display: initial; - } - - & > div:first-child { - border-radius: 12px; - padding: 4px 12px; - height: 2.125rem; - - a { - font-size: 0.875rem; - } - - svg { - margin-left: 0.75rem; - vertical-align: middle; - } - - margin-right: 0.75rem; - } - - .searchButton { - background-color: #eeeef1; - padding: 7px 13px; - border-radius: 12px; - } - - transition: all 0.8s, opacity 0.4s; - transform: translateX(0%); - - &.shifted { - transform: translateX(-100%); - opacity: 0%; - } -} - -/* -Hide color mode toggle in small viewports - */ -@media (max-width: 996px) { - .colorModeToggle { - display: none; - } -} - -@include utils.responsive('lg', 'up') { - .sidebarButton.mobile { - display: none; - } -} - -@include utils.responsive('lg', 'down') { - .sidebarButton.desktop { - display: none; - } - - .root > div:first-child, - .headerMiddle { - transition: 1s; - } -} - -.root { - & > div:first-child, - .headerMiddle { - opacity: 1; - visibility: visible; - } -} - -.root.activeMobileSearch { - & > div:first-child, - .headerMiddle { - opacity: 0; - visibility: hidden; - } -} - -.mobileSearchContainer { - top: 0; - left: 0; - width: 100% !important; - height: 100%; - position: absolute; - - background-color: rgb(var(--lsd-surface-primary)); - transform: translateX(100%); - opacity: 0; - transition: 0.6s ease-in-out; - visibility: hidden; - - &.visible { - opacity: 1; - transform: translateX(0%); - visibility: visible; - } -} - -.headerRightMobile { - display: none !important; - visibility: hidden; - - flex-grow: 1 !important; -} - -@include utils.responsive('lg', 'down') { - .headerRightMobile { - display: flex !important; - visibility: visible; - } -} - -.links { - a svg { - display: none !important; - } -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx deleted file mode 100644 index 9b01340..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal' -import { IconArrowLeftCircle } from '@logos-theme/components/Icon/index' -import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle' -import NavbarLogo from '@theme/Navbar/Logo' -import React from 'react' - -function CloseButton() { - const mobileSidebar = useNavbarMobileSidebar() - return ( - - ) -} - -export default function NavbarMobileSidebarHeader(): JSX.Element { - return ( -
-
- - -
- -
- ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx deleted file mode 100644 index 057b364..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useThemeConfig } from '@docusaurus/theme-common' -import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal' -import Translate from '@docusaurus/Translate' -import { ButtonWithIcon } from '@logos-theme/components/Button/ButtonWithIcon' -import { IconArrowLeftCircle } from '@logos-theme/components/Icon/index' -import React, { type ComponentProps } from 'react' -import styles from './styles.module.scss' - -function SecondaryMenuBackButton(props: ComponentProps<'button'>) { - return ( - } - {...props} - > - - Main Menu - - - ) -} - -// The secondary menu slides from the right and shows contextual information -// such as the docs sidebar -export default function NavbarMobileSidebarSecondaryMenu(): JSX.Element | null { - const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0 - const secondaryMenu = useNavbarSecondaryMenu() - return ( - <> - {/* edge-case: prevent returning to the primaryMenu when it's empty */} - {!isPrimaryMenuEmpty && ( - secondaryMenu.hide()} /> - )} - {secondaryMenu.content} - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/styles.module.scss deleted file mode 100644 index b0d8ec5..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/styles.module.scss +++ /dev/null @@ -1,21 +0,0 @@ -.backButton { - display: block; - width: 100%; - - & > div { - flex-direction: row-reverse; - - color: #373738; - font-size: 0.875rem; - - svg { - * { - stroke: #909091; - } - } - } - - border: 1px solid #eeeef1; - padding: 12px 18px; - margin-bottom: 8px; -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/index.scss b/packages/logos-docusaurus-theme/src/client/theme/Navbar/index.scss deleted file mode 100644 index b957078..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/index.scss +++ /dev/null @@ -1,86 +0,0 @@ -@use '../../css/utils'; - -.navbar-sidebar__brand { - --ifm-navbar-padding-horizontal: 1rem; -} - -.navbar { - --ifm-navbar-height: 3.875rem; - --ifm-navbar-shadow: none; - --ifm-navbar-padding-horizontal: 0px; - --ifm-navbar-padding-vertical: 0.5rem; - - padding-top: 0; - padding-bottom: 0; - - background: none; -} - -@include utils.responsive('lg', 'down') { - .navbar { - background: rgb(var(--lsd-surface-primary)); - } -} - -.overflow-hidden { - overflow: hidden !important; -} - -.menu__caret { - z-index: 1; - width: 3.5rem; - - &::before { - content: initial; - } - - &:hover { - background: initial; - } -} - -.navbar-sidebar__item.menu, -.theme-doc-sidebar-menu { - li a, - .theme-doc-sidebar-item-category a { - padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); - border-radius: var(--ifm-button-border-radius); - - font-size: var(--ifm-font-size-base); - color: #373738; - - .menu__link--active { - background-color: #eeeef0; - } - } - - .menu__list-item-collapsible { - border-radius: var(--ifm-button-border-radius); - - a::after { - display: none; - } - - .dropdown-icon { - position: absolute; - right: 1.125rem; - } - } - - li.menu__list-item { - .dropdown-icon { - transform: rotate(0deg); - transition: transform var(--ifm-transition-fast); - } - - &--collapsed { - .dropdown-icon { - transform: rotate(-90deg); - } - } - } - - li:not(:first-child) { - margin-top: calc(var(--ifm-list-item-margin) / 2); - } -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/index.tsx deleted file mode 100644 index f4b4def..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import Navbar from '@docusaurus/theme-classic/lib/theme/Navbar' -import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal' -import type { WrapperProps } from '@docusaurus/types' -import type NavbarType from '@theme/Navbar' -import React, { useEffect } from 'react' -import './index.scss' - -type Props = WrapperProps - -export default function NavbarWrapper(props: Props): JSX.Element { - const mobileSidebar = useNavbarMobileSidebar() - - useEffect(() => { - if (mobileSidebar.shown) { - document - .querySelector('#__docusaurus') - ?.classList?.add?.('overflow-hidden') - } else { - document - .querySelector('#__docusaurus') - ?.classList?.remove?.('overflow-hidden') - } - }, [mobileSidebar.shown]) - - return ( - <> - - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.scss b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.scss deleted file mode 100644 index 5aba1eb..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.scss +++ /dev/null @@ -1,27 +0,0 @@ -.navbar__item.dropdown { - background-color: rgb(var(--lsd-theme-secondary)); - border-radius: var(--lsd); - padding: var(--ifm-button-padding-vertical) - var(--ifm-button-padding-horizontal); - font-size: var(--ifm-h6-font-size); - - & > .navbar__link { - &::after { - display: none; - } - - & + svg { - margin-left: 0.75rem; - } - } - - ul { - margin-top: 5px; - } -} - -[data-theme='dark'] { - .navbar__item.dropdown { - background-color: rgb(var(--lsd-theme-primary)); - } -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx deleted file mode 100644 index 37c34c6..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx +++ /dev/null @@ -1,190 +0,0 @@ -import React, { useState, useRef, useEffect } from 'react' -import clsx from 'clsx' -import { - isRegexpStringMatch, - useCollapsible, - Collapsible, -} from '@docusaurus/theme-common' -import { isSamePath, useLocalPathname } from '@docusaurus/theme-common/internal' -import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink' -import NavbarItem, { LinkLikeNavbarItemProps } from '@theme/NavbarItem' -import type { - DesktopOrMobileNavBarItemProps, - Props, -} from '@theme/NavbarItem/DropdownNavbarItem' -import './DropdownNavbarItem.scss' -import DropdownIcon from '../../static/icons/dropdown.svg' - -function isItemActive( - item: LinkLikeNavbarItemProps, - localPathname: string, -): boolean { - if (isSamePath(item.to, localPathname)) { - return true - } - if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) { - return true - } - if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) { - return true - } - return false -} - -function containsActiveItems( - items: readonly LinkLikeNavbarItemProps[], - localPathname: string, -): boolean { - return items.some((item) => isItemActive(item, localPathname)) -} - -function DropdownNavbarItemDesktop({ - items, - position, - className, - onClick, - ...props -}: DesktopOrMobileNavBarItemProps) { - const dropdownRef = useRef(null) - const [showDropdown, setShowDropdown] = useState(false) - - useEffect(() => { - const handleClickOutside = (event: MouseEvent | TouchEvent) => { - if ( - !dropdownRef.current || - dropdownRef.current.contains(event.target as Node) - ) { - return - } - setShowDropdown(false) - } - - document.addEventListener('mousedown', handleClickOutside) - document.addEventListener('touchstart', handleClickOutside) - - return () => { - document.removeEventListener('mousedown', handleClickOutside) - document.removeEventListener('touchstart', handleClickOutside) - } - }, [dropdownRef]) - - return ( -
- e.preventDefault()} - onKeyDown={(e) => { - if (e.key === 'Enter') { - e.preventDefault() - setShowDropdown(!showDropdown) - } - }} - > - {props.children ?? props.label} - - -
    - {items.map((childItemProps, i) => ( - { - if (i === items.length - 1 && e.key === 'Tab') { - e.preventDefault() - setShowDropdown(false) - const nextNavbarItem = dropdownRef.current!.nextElementSibling - if (nextNavbarItem) { - const targetItem = - nextNavbarItem instanceof HTMLAnchorElement - ? nextNavbarItem - : // Next item is another dropdown; focus on the inner - // anchor element instead so there's outline - nextNavbarItem.querySelector('a')! - targetItem.focus() - } - } - }} - activeClassName="dropdown__link--active" - {...childItemProps} - key={i} - /> - ))} -
-
- ) -} - -function DropdownNavbarItemMobile({ - items, - className, - position, // Need to destructure position from props so that it doesn't get passed on. - onClick, - ...props -}: DesktopOrMobileNavBarItemProps) { - const localPathname = useLocalPathname() - const containsActive = containsActiveItems(items, localPathname) - - const { collapsed, toggleCollapsed, setCollapsed } = useCollapsible({ - initialState: () => !containsActive, - }) - - // Expand/collapse if any item active after a navigation - useEffect(() => { - if (containsActive) { - setCollapsed(!containsActive) - } - }, [localPathname, containsActive, setCollapsed]) - - return ( -
  • - { - e.preventDefault() - toggleCollapsed() - }} - > - {props.children ?? props.label} - - - {items.map((childItemProps, i) => ( - - ))} - -
    • - ) -} - -export default function DropdownNavbarItem({ - mobile = false, - ...props -}: Props): JSX.Element { - const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop - return -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx deleted file mode 100644 index 39b8844..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { useAlternatePageUtils } from '@docusaurus/theme-common/internal' -import { translate } from '@docusaurus/Translate' -import useDocusaurusContext from '@docusaurus/useDocusaurusContext' -import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem' -import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem' -import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem' -import React from 'react' - -export default function LocaleDropdownNavbarItem({ - mobile, - dropdownItemsBefore, - dropdownItemsAfter, - ...props -}: Props): JSX.Element { - const { - i18n: { currentLocale, locales, localeConfigs }, - } = useDocusaurusContext() - const alternatePageUtils = useAlternatePageUtils() - - const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { - const to = `pathname://${alternatePageUtils.createUrl({ - locale, - fullyQualified: false, - })}` - return { - label: localeConfigs[locale]!.label, - lang: localeConfigs[locale]!.htmlLang, - to, - target: '_self', - autoAddBaseUrl: false, - className: - // eslint-disable-next-line no-nested-ternary - locale === currentLocale - ? // Similar idea as DefaultNavbarItem: select the right Infima active - // class name. This cannot be substituted with isActive, because the - // target URLs contain `pathname://` and therefore are not NavLinks! - mobile - ? 'menu__link--active' - : 'dropdown__link--active' - : '', - } - }) - - const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter] - - // Mobile is handled a bit differently - const dropdownLabel = mobile - ? translate({ - message: 'Languages', - id: 'theme.navbar.mobileLanguageDropdown.label', - description: 'The label for the mobile language switcher dropdown', - }) - : localeConfigs[currentLocale]!.label - - return ( - {currentLocale.toUpperCase()}} - items={items} - /> - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css deleted file mode 100644 index 8804a08..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.iconLanguage { - vertical-align: text-bottom; - margin-right: 5px; -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchInput/SearchInput.module.scss b/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchInput/SearchInput.module.scss index b933770..1b205cf 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchInput/SearchInput.module.scss +++ b/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchInput/SearchInput.module.scss @@ -24,7 +24,7 @@ } .root.expanded input { - background: #eeeef0; + background: rgb(var(--lsd-surface-primary)); width: 334px; } @@ -67,11 +67,11 @@ [data-theme='dark'] { .root input { - color: currentColor; + color: rgb(var(--lsd-text-primary)); } .root.expanded input { - background-color: var(--ifm-background-color); + background-color: rgb(var(--lsd-surface-primary)); } } diff --git a/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchInput/SearchInput.tsx b/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchInput/SearchInput.tsx index 06bc225..8e5f47e 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchInput/SearchInput.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchInput/SearchInput.tsx @@ -4,6 +4,7 @@ import clsx from 'clsx' import React from 'react' import { useMedia } from 'react-use' import styles from './SearchInput.module.scss' +import { Typography } from '@acid-info/lsd-react' export type SearchInputProps = Omit< React.HTMLProps, @@ -61,7 +62,9 @@ export const SearchInput: React.FC = ({ className={clsx(styles.root, expanded && styles.expanded, className)} {...props} > - Search + + Search + - - - Contents - - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/styles.module.scss deleted file mode 100644 index d061ee1..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/styles.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -.tocCollapsibleButton { - font-size: inherit; - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - padding: 0.75rem 1.125rem; -} - -.tocCollapsibleButton > div { - width: 12px; - height: 12px; - transform: translateY(-4px); - - svg { - * { - stroke: #909090; - } - - transform: rotate(270deg); - transition: transform var(--ifm-transition-fast); - } -} - -.tocCollapsibleButtonExpanded > div { - svg { - transform: rotate(90deg); - } -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/index.tsx deleted file mode 100644 index 0b3910a..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react' -import clsx from 'clsx' -import { useCollapsible, Collapsible } from '@docusaurus/theme-common' -import TOCItems from '@theme/TOCItems' -import CollapseButton from '@theme/TOCCollapsible/CollapseButton' -import type { Props } from '@theme/TOCCollapsible' - -import styles from './styles.module.css' - -export default function TOCCollapsible({ - toc, - className, - minHeadingLevel, - maxHeadingLevel, -}: Props): JSX.Element { - const { collapsed, toggleCollapsed } = useCollapsible({ - initialState: true, - }) - return ( -
    - - -
    -
    -
    - - -
    - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/styles.module.css deleted file mode 100644 index fb915ee..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/styles.module.css +++ /dev/null @@ -1,44 +0,0 @@ -.tocCollapsible { - background-color: transparent; - border-radius: var(--ifm-global-radius); - border: 1px solid #eeeef1; - margin: 1rem 0; -} - -.tocCollapsible, -.tocCollapsible * { - font-size: 0.875rem; - color: var(--ifm-black-color); -} - -.divider { - width: 100%; - padding: 0rem 1.125rem; -} - -.divider > div { - height: 1px; - background-color: #eeeef1; -} - -.tocCollapsibleContent > ul { - border-left: none; - padding: 0.75rem 1.125rem; - font-size: 15px; -} - -.tocCollapsibleContent ul li { - margin: 4px 0; -} - -.tocCollapsible ul > li li { - margin: 0 2.25rem; -} - -.tocCollapsibleContent a { - display: block; -} - -.tocCollapsibleExpanded { - transform: none; -}