mirror of
https://github.com/wavetermdev/docusaurus-og.git
synced 2026-08-05 13:46:35 -07:00
remove unnecessary parts
This commit is contained in:
jinhojang6
@@ -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<HTMLButtonElement>,
|
||||
): JSX.Element => {
|
||||
const { children, className, ...rest } = props
|
||||
|
||||
return (
|
||||
<button className={clsx('button', className)} {...(rest as any)}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -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<HTMLButtonElement>): JSX.Element => {
|
||||
return (
|
||||
<Button {...rest}>
|
||||
<div className={styles.buttonWithIconContainer}>
|
||||
<div>{children}</div>
|
||||
{icon}
|
||||
</div>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
@@ -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<HTMLAnchorElement>
|
||||
}
|
||||
|
||||
export const LinkButton = ({
|
||||
children,
|
||||
linkProps,
|
||||
...rest
|
||||
}: TProps & HTMLProps<HTMLButtonElement>): JSX.Element => {
|
||||
return (
|
||||
<Link {...linkProps}>
|
||||
<Button {...rest}>{children}</Button>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -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<HTMLAnchorElement>
|
||||
icon: JSX.Element
|
||||
}
|
||||
|
||||
export const LinkButtonWithIcon = ({
|
||||
children,
|
||||
linkProps,
|
||||
icon,
|
||||
...rest
|
||||
}: TProps & HTMLProps<HTMLButtonElement>): JSX.Element => {
|
||||
return (
|
||||
<Link {...linkProps}>
|
||||
<ButtonWithIcon {...rest} icon={icon}>
|
||||
{children}
|
||||
</ButtonWithIcon>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from './Button'
|
||||
@@ -1,7 +0,0 @@
|
||||
.buttonWithIconContainer {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
min-width: 110px;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -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 (
|
||||
<div
|
||||
className={clsx(
|
||||
styles.icon,
|
||||
colorMode === 'dark' ? styles.dark : styles.light,
|
||||
styles[size],
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const IconArrowRightCircle = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<ArrowRCircleSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconArrowLeftCircle = (props: TIconProps): JSX.Element => (
|
||||
<Icon>
|
||||
<ArrowLCircleSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconFolder = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<FolderSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconGithub = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<GithubSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconDiscord = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<DiscordSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconStatus = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<StatusSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconTwitter = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<TwitterSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconTelegram = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<TelegramSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconDiscourse = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<DiscourseSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconLinkedin = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<LinkedinSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconDot = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<DotSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconFolderFilled = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<FolderSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconSearch = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<SearchSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconDropdown = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<DropdownSvg />
|
||||
</Icon>
|
||||
)
|
||||
|
||||
export const IconGScholar = (props: TIconProps): JSX.Element => (
|
||||
<Icon {...props}>
|
||||
<GScholarSvg />
|
||||
</Icon>
|
||||
)
|
||||
@@ -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 (
|
||||
<a href={`https://twitter.com/${props.handler}`} target={'_blank'}>
|
||||
<IconTwitter />
|
||||
</a>
|
||||
)
|
||||
case 'discord':
|
||||
return (
|
||||
<a
|
||||
href={`https://discordapp.com/users/${props.handler}`}
|
||||
target={'_blank'}
|
||||
>
|
||||
<IconDiscord />
|
||||
</a>
|
||||
)
|
||||
case 'github':
|
||||
return (
|
||||
<a href={`https://github.com/${props.handler}`} target={'_blank'}>
|
||||
<IconGithub />
|
||||
</a>
|
||||
)
|
||||
case 'telegram':
|
||||
return (
|
||||
<a href={`https://t.me/${props.handler}`} target={'_blank'}>
|
||||
<IconTelegram />
|
||||
</a>
|
||||
)
|
||||
case 'status':
|
||||
return (
|
||||
<a href={`https://join.status.im/u/${props.handler}`} target={'_blank'}>
|
||||
<IconStatus />
|
||||
</a>
|
||||
)
|
||||
case 'discourse':
|
||||
return (
|
||||
<a
|
||||
href={
|
||||
props.handler.indexOf('http') > -1
|
||||
? props.handler
|
||||
: `https://${props.handler}`
|
||||
}
|
||||
target={'_blank'}
|
||||
>
|
||||
<IconDiscourse />
|
||||
</a>
|
||||
)
|
||||
case ECommunityProviders.gscholar:
|
||||
return (
|
||||
<a
|
||||
href={`https://scholar.google.com/citations?user=${props.handler}`}
|
||||
target={'_blank'}
|
||||
>
|
||||
<IconGScholar />
|
||||
</a>
|
||||
)
|
||||
default:
|
||||
return <></>
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from './Icon'
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
-17
@@ -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);
|
||||
}
|
||||
@@ -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>,
|
||||
HTMLButtonElement
|
||||
> & {}
|
||||
> = ({ children, className, ...props }) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={clsx('clean-btn', styles.root, className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from './IconButton'
|
||||
@@ -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;
|
||||
|
||||
@@ -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 (
|
||||
<div className={clsx(styles.toggle, className)}>
|
||||
<IconButton
|
||||
title={title}
|
||||
aria-label={title}
|
||||
disabled={!isBrowser}
|
||||
className={clsx(!isBrowser && styles.toggleButtonDisabled)}
|
||||
onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
|
||||
>
|
||||
<IconLightMode
|
||||
className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
|
||||
/>
|
||||
<IconDarkMode
|
||||
className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
|
||||
/>
|
||||
</IconButton>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ColorModeToggle)
|
||||
@@ -1,8 +0,0 @@
|
||||
[data-theme='light'] .darkToggleIcon,
|
||||
[data-theme='dark'] .lightToggleIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggleButtonDisabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
-69
@@ -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 (
|
||||
<PageMetadata
|
||||
title={categoryGeneratedIndex.title}
|
||||
description={categoryGeneratedIndex.description}
|
||||
keywords={categoryGeneratedIndex.keywords}
|
||||
// TODO `require` this?
|
||||
image={useBaseUrl(categoryGeneratedIndex.image)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DocCategoryGeneratedIndexPageContent({
|
||||
categoryGeneratedIndex,
|
||||
}: Props): JSX.Element {
|
||||
const category = useCurrentSidebarCategory()
|
||||
return (
|
||||
<div className={styles.generatedIndexPage}>
|
||||
<DocVersionBanner />
|
||||
<DocBreadcrumbs />
|
||||
<DocVersionBadge />
|
||||
<header>
|
||||
<Heading as="h1" className={styles.title}>
|
||||
{categoryGeneratedIndex.title}
|
||||
</Heading>
|
||||
{categoryGeneratedIndex.description && (
|
||||
<p>{categoryGeneratedIndex.description}</p>
|
||||
)}
|
||||
</header>
|
||||
<article className="margin-top--lg">
|
||||
<DocCardList items={category.items} className={styles.list} />
|
||||
</article>
|
||||
<footer className="margin-top--lg">
|
||||
<DocPaginator
|
||||
previous={categoryGeneratedIndex.navigation.previous}
|
||||
next={categoryGeneratedIndex.navigation.next}
|
||||
/>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function DocCategoryGeneratedIndexPage(
|
||||
props: Props,
|
||||
): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<DocCategoryGeneratedIndexPageMetadata {...props} />
|
||||
<DocCategoryGeneratedIndexPageContent {...props} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
-23
@@ -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;
|
||||
}
|
||||
@@ -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 ? <DocItemTOCMobile /> : undefined
|
||||
|
||||
const desktop =
|
||||
canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
|
||||
<DocItemTOCDesktop />
|
||||
) : undefined
|
||||
|
||||
return {
|
||||
hidden,
|
||||
mobile,
|
||||
desktop,
|
||||
}
|
||||
}
|
||||
|
||||
export default function DocItemLayout({ children }: Props): JSX.Element {
|
||||
const docTOC = useDocTOC()
|
||||
const windowSize = useWindowSize()
|
||||
|
||||
return (
|
||||
<div className={clsx(styles.root, 'row')}>
|
||||
<div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
|
||||
<DocVersionBanner />
|
||||
<div className={clsx(styles.docItemContainer)}>
|
||||
<div>
|
||||
<article>
|
||||
{/*<DocBreadcrumbs />*/}
|
||||
<DocVersionBadge />
|
||||
{docTOC.mobile}
|
||||
<DocItemContent>{children}</DocItemContent>
|
||||
<DocItemFooter />
|
||||
</article>
|
||||
<DocItemPaginator />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{windowSize !== 'mobile' && <aside className={clsx('col')} />}
|
||||
<div className={clsx(styles.tocDesktopWrapper, 'col')}>
|
||||
{docTOC.desktop}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user