diff options
author | 安竹洋平 <61961825+yasutakeyohei@users.noreply.github.com> | 2024-01-25 00:15:16 +0900 |
---|---|---|
committer | 安竹洋平 <61961825+yasutakeyohei@users.noreply.github.com> | 2024-01-25 00:15:16 +0900 |
commit | 02c3492b3d574812b5391979e04c399e350a26ed (patch) | |
tree | 2b492ac9564da6b201d035eb4434ea76e3f64478 /src/theme/Admonition | |
parent | 5970320e4994df7652eedea9e16770e1720342f8 (diff) |
initial commit
Diffstat (limited to 'src/theme/Admonition')
-rw-r--r-- | src/theme/Admonition/Layout/index.js | 99 | ||||
-rw-r--r-- | src/theme/Admonition/Type/Caution.js | 34 | ||||
-rw-r--r-- | src/theme/Admonition/Type/Danger.js | 32 | ||||
-rw-r--r-- | src/theme/Admonition/Type/Info.js | 32 | ||||
-rw-r--r-- | src/theme/Admonition/Type/Note.js | 32 | ||||
-rw-r--r-- | src/theme/Admonition/Type/Tip.js | 32 | ||||
-rw-r--r-- | src/theme/Admonition/Type/Warning.js | 32 | ||||
-rw-r--r-- | src/theme/Admonition/Types.js | 33 | ||||
-rw-r--r-- | src/theme/Admonition/index.js | 24 |
9 files changed, 350 insertions, 0 deletions
diff --git a/src/theme/Admonition/Layout/index.js b/src/theme/Admonition/Layout/index.js new file mode 100644 index 00000000..7bc2802b --- /dev/null +++ b/src/theme/Admonition/Layout/index.js @@ -0,0 +1,99 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import clsx from 'clsx'; +import { ThemeClassNames } from '@docusaurus/theme-common'; +import admonitionStyles from '@docusaurus/theme-classic/lib/theme/Admonition/Layout/styles.module.css'; +import headingStyles from '@docusaurus/theme-classic/lib/theme/Heading/styles.module.css'; + +function AdmonitionContainer({type, className, children}) { + return ( + <div + className={clsx( + ThemeClassNames.common.admonition, + ThemeClassNames.common.admonitionType(type), + admonitionStyles.admonition, + className, + )} + > + {children} + </div> + ); +} +function AdmonitionHeading({icon, id, title}) { + // 文字列冒頭の#の数を数える + const depth = title.match ? (title.match(/^#+/) || [''])[0].length : 0; + // #を省いたタイトルを得る + const trimmedTitle = depth > 0 ? title.replace(/^#+/, '').trim() : title; + // スクロール位置調整のcss + const classNames = clsx("anchor", "title", headingStyles.anchorWithStickyNavbar); + // depthに応じて見出しタグをレンダー + return ( + <div className={admonitionStyles.admonitionHeading}> + <span className={admonitionStyles.admonitionIcon}>{icon}</span> + {(() => { + if (depth == 3) { + return( + <h3 + id={id} + className={classNames} + > + {trimmedTitle} + </h3> + ) + } else if (depth == 4) { + return( + <h4 + id={id} + className={classNames} + > + {trimmedTitle} + </h4> + ) + } else if (depth == 5) { + return( + <h5 + id={id} + className={classNames} + > + {trimmedTitle} + </h5> + ) + } else if (depth == 6) { + return( + <h6 + id={id} + className={classNames} + > + {trimmedTitle} + </h6> + ) + } else { + return( + <> + {trimmedTitle} + </> + ) + } + })()} + </div> + ); +} +function AdmonitionContent({children}) { + return children ? ( + <div className={admonitionStyles.admonitionContent}>{children}</div> + ) : null; +} +export default function AdmonitionLayout(props) { + const {type, icon, title, children, className, id} = props; + return ( + <AdmonitionContainer type={type} className={className}> + <AdmonitionHeading title={title} icon={icon} id={id} /> + <AdmonitionContent>{children}</AdmonitionContent> + </AdmonitionContainer> + ); +} diff --git a/src/theme/Admonition/Type/Caution.js b/src/theme/Admonition/Type/Caution.js new file mode 100644 index 00000000..a7bc5440 --- /dev/null +++ b/src/theme/Admonition/Type/Caution.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import clsx from 'clsx'; +import Translate from '@docusaurus/Translate'; +import AdmonitionLayout from '../Layout'; +import IconWarning from '@docusaurus/theme-classic/lib/theme/Admonition/Icon/Warning'; +const infimaClassName = 'alert alert--warning'; +const defaultProps = { + icon: <IconWarning />, + title: ( + <Translate + id="theme.admonition.caution" + description="The default label used for the Caution admonition (:::caution)"> + caution + </Translate> + ), +}; +// TODO remove before v4: Caution replaced by Warning +// see https://github.com/facebook/docusaurus/issues/7558 +export default function AdmonitionTypeCaution(props) { + return ( + <AdmonitionLayout + {...defaultProps} + {...props} + className={clsx(infimaClassName, props.className)}> + {props.children} + </AdmonitionLayout> + ); +} diff --git a/src/theme/Admonition/Type/Danger.js b/src/theme/Admonition/Type/Danger.js new file mode 100644 index 00000000..39e37f69 --- /dev/null +++ b/src/theme/Admonition/Type/Danger.js @@ -0,0 +1,32 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import clsx from 'clsx'; +import Translate from '@docusaurus/Translate'; +import AdmonitionLayout from '../Layout'; +import IconDanger from '@docusaurus/theme-classic/lib/theme/Admonition/Icon/Danger'; +const infimaClassName = 'alert alert--danger'; +const defaultProps = { + icon: <IconDanger />, + title: ( + <Translate + id="theme.admonition.danger" + description="The default label used for the Danger admonition (:::danger)"> + danger + </Translate> + ), +}; +export default function AdmonitionTypeDanger(props) { + return ( + <AdmonitionLayout + {...defaultProps} + {...props} + className={clsx(infimaClassName, props.className)}> + {props.children} + </AdmonitionLayout> + ); +} diff --git a/src/theme/Admonition/Type/Info.js b/src/theme/Admonition/Type/Info.js new file mode 100644 index 00000000..44409a44 --- /dev/null +++ b/src/theme/Admonition/Type/Info.js @@ -0,0 +1,32 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import clsx from 'clsx'; +import Translate from '@docusaurus/Translate'; +import AdmonitionLayout from '../Layout'; +import IconInfo from '@docusaurus/theme-classic/lib/theme/Admonition/Icon/Info'; +const infimaClassName = 'alert alert--info'; +const defaultProps = { + icon: <IconInfo />, + title: ( + <Translate + id="theme.admonition.info" + description="The default label used for the Info admonition (:::info)"> + info + </Translate> + ), +}; +export default function AdmonitionTypeInfo(props) { + return ( + <AdmonitionLayout + {...defaultProps} + {...props} + className={clsx(infimaClassName, props.className)}> + {props.children} + </AdmonitionLayout> + ); +} diff --git a/src/theme/Admonition/Type/Note.js b/src/theme/Admonition/Type/Note.js new file mode 100644 index 00000000..01226d2f --- /dev/null +++ b/src/theme/Admonition/Type/Note.js @@ -0,0 +1,32 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import clsx from 'clsx'; +import Translate from '@docusaurus/Translate'; +import AdmonitionLayout from '../Layout'; +import IconNote from '@docusaurus/theme-classic/lib/theme/Admonition/Icon/Note'; +const infimaClassName = 'alert alert--secondary'; +const defaultProps = { + icon: <IconNote />, + title: ( + <Translate + id="theme.admonition.note" + description="The default label used for the Note admonition (:::note)"> + note + </Translate> + ), +}; +export default function AdmonitionTypeNote(props) { + return ( + <AdmonitionLayout + {...defaultProps} + {...props} + className={clsx(infimaClassName, props.className)}> + {props.children} + </AdmonitionLayout> + ); +} diff --git a/src/theme/Admonition/Type/Tip.js b/src/theme/Admonition/Type/Tip.js new file mode 100644 index 00000000..bbe7de19 --- /dev/null +++ b/src/theme/Admonition/Type/Tip.js @@ -0,0 +1,32 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import clsx from 'clsx'; +import Translate from '@docusaurus/Translate'; +import AdmonitionLayout from '../Layout'; +import IconTip from '@docusaurus/theme-classic/lib/theme/Admonition/Icon/Tip'; +const infimaClassName = 'alert alert--success'; +const defaultProps = { + icon: <IconTip />, + title: ( + <Translate + id="theme.admonition.tip" + description="The default label used for the Tip admonition (:::tip)"> + tip + </Translate> + ), +}; +export default function AdmonitionTypeTip(props) { + return ( + <AdmonitionLayout + {...defaultProps} + {...props} + className={clsx(infimaClassName, props.className)}> + {props.children} + </AdmonitionLayout> + ); +} diff --git a/src/theme/Admonition/Type/Warning.js b/src/theme/Admonition/Type/Warning.js new file mode 100644 index 00000000..ac28ae39 --- /dev/null +++ b/src/theme/Admonition/Type/Warning.js @@ -0,0 +1,32 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import clsx from 'clsx'; +import Translate from '@docusaurus/Translate'; +import AdmonitionLayout from '../Layout'; +import IconWarning from '@docusaurus/theme-classic/lib/theme/Admonition/Icon/Warning'; +const infimaClassName = 'alert alert--warning'; +const defaultProps = { + icon: <IconWarning />, + title: ( + <Translate + id="theme.admonition.warning" + description="The default label used for the Warning admonition (:::warning)"> + warning + </Translate> + ), +}; +export default function AdmonitionTypeWarning(props) { + return ( + <AdmonitionLayout + {...defaultProps} + {...props} + className={clsx(infimaClassName, props.className)}> + {props.children} + </AdmonitionLayout> + ); +} diff --git a/src/theme/Admonition/Types.js b/src/theme/Admonition/Types.js new file mode 100644 index 00000000..d5f1f089 --- /dev/null +++ b/src/theme/Admonition/Types.js @@ -0,0 +1,33 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import AdmonitionTypeNote from './Type/Note'; +import AdmonitionTypeTip from './Type/Tip'; +import AdmonitionTypeInfo from './Type/Info'; +import AdmonitionTypeWarning from './Type/Warning'; +import AdmonitionTypeDanger from './Type/Danger'; +import AdmonitionTypeCaution from './Type/Caution'; +const admonitionTypes = { + note: AdmonitionTypeNote, + tip: AdmonitionTypeTip, + info: AdmonitionTypeInfo, + warning: AdmonitionTypeWarning, + danger: AdmonitionTypeDanger, +}; +// Undocumented legacy admonition type aliases +// Provide hardcoded/untranslated retrocompatible label +// See also https://github.com/facebook/docusaurus/issues/7767 +const admonitionAliases = { + secondary: (props) => <AdmonitionTypeNote title="secondary" {...props} />, + important: (props) => <AdmonitionTypeInfo title="important" {...props} />, + success: (props) => <AdmonitionTypeTip title="success" {...props} />, + caution: AdmonitionTypeCaution, +}; +export default { + ...admonitionTypes, + ...admonitionAliases, +}; diff --git a/src/theme/Admonition/index.js b/src/theme/Admonition/index.js new file mode 100644 index 00000000..c66baaea --- /dev/null +++ b/src/theme/Admonition/index.js @@ -0,0 +1,24 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import {processAdmonitionProps} from '@docusaurus/theme-common'; +import AdmonitionTypes from './Types'; +function getAdmonitionTypeComponent(type) { + const component = AdmonitionTypes[type]; + if (component) { + return component; + } + console.warn( + `No admonition component found for admonition type "${type}". Using Info as fallback.`, + ); + return AdmonitionTypes.info; +} +export default function Admonition(unprocessedProps) { + const props = processAdmonitionProps(unprocessedProps); + const AdmonitionTypeComponent = getAdmonitionTypeComponent(props.type); + return <AdmonitionTypeComponent {...props} />; +} |