From fb694009d296a86d64c4acb5a111d41e1fd8c4e0 Mon Sep 17 00:00:00 2001 From: Damian Stasik <920747+damianstasik@users.noreply.github.com> Date: Mon, 18 Sep 2023 15:33:42 +0200 Subject: [PATCH] Refactor admonition component (#106) --- src/components/Button/index.tsx | 2 +- src/components/HowToSupport/index.tsx | 34 +++--- src/components/LatestNews/index.tsx | 2 +- src/components/Supporters/index.tsx | 2 +- src/css/custom.css | 4 +- src/icons/dots.svg | 4 +- src/icons/expand.svg | 4 +- src/icons/humidity.svg | 4 +- src/icons/layers.svg | 6 +- src/icons/scale.svg | 6 +- src/pages/supporters.tsx | 2 +- src/theme/Admonition/index.tsx | 137 ++++++++++++++++++++++++ src/theme/BlogLastPost/index.tsx | 2 +- src/theme/BlogListItem/index.tsx | 2 +- src/theme/BlogPostItem/Header/index.tsx | 2 +- src/theme/DocItem/Content.tsx | 2 +- src/theme/DocSidebarItem/Category.tsx | 4 +- src/theme/DocSidebarItem/Link.tsx | 4 +- src/theme/TOC/index.tsx | 2 +- tailwind.config.js | 2 +- 20 files changed, 182 insertions(+), 45 deletions(-) create mode 100644 src/theme/Admonition/index.tsx diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 04a06c75..81032e69 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -14,7 +14,7 @@ export default function Button({ children, variant, ...rest }: ButtonProps) { className={clsx( "border font-semibold h-12 px-6 flex items-center hover:no-underline transition-colors", variant === "primary" && - "bg-yellow-500 text-gray-900 hover:bg-yellow-600 border-yellow-500 hover:border-yellow-600-hover hover:text-gray-900", + "bg-brand-500 text-gray-900 hover:bg-brand-600 border-brand-500 hover:border-brand-600-hover hover:text-gray-900", variant === "secondary" && "border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-50 bg-transparent hover:border-gray-900 dark:hover:border-gray-50 hover:text-gray-900 dark:hover:text-gray-50 aria-selected:border-gray-900 dark:aria-selected:border-gray-50" )} diff --git a/src/components/HowToSupport/index.tsx b/src/components/HowToSupport/index.tsx index bdb5917f..a00589eb 100644 --- a/src/components/HowToSupport/index.tsx +++ b/src/components/HowToSupport/index.tsx @@ -35,12 +35,12 @@ export default function HowToSupport() { xmlns="http://www.w3.org/2000/svg" aria-hidden > - + @@ -67,26 +67,26 @@ export default function HowToSupport() { > @@ -130,11 +130,11 @@ export default function HowToSupport() { aria-hidden > @@ -152,7 +152,7 @@ export default function HowToSupport() { aria-hidden > @@ -180,19 +180,19 @@ export default function HowToSupport() { aria-hidden > diff --git a/src/components/LatestNews/index.tsx b/src/components/LatestNews/index.tsx index 7120371c..664167c1 100644 --- a/src/components/LatestNews/index.tsx +++ b/src/components/LatestNews/index.tsx @@ -22,7 +22,7 @@ export default function LatestNews({ recentPosts }) { diff --git a/src/components/Supporters/index.tsx b/src/components/Supporters/index.tsx index 077db05d..20b42d0d 100644 --- a/src/components/Supporters/index.tsx +++ b/src/components/Supporters/index.tsx @@ -21,7 +21,7 @@ function SupporterType({ type, withSeparator, count }: SupporterTypeProps) { {count && ( {count} diff --git a/src/css/custom.css b/src/css/custom.css index c8212fbd..5aab7356 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -15,7 +15,7 @@ html[data-theme="light"] { } html[data-theme="dark"] { - --ifm-color-primary: theme("colors.yellow.500"); + --ifm-color-primary: theme("colors.brand.500"); --ifm-background-color: theme("colors.blue.950"); --ifm-navbar-search-input-background-color: theme("colors.gray.800"); --search-local-hit-background: theme("colors.blue.900"); @@ -26,7 +26,7 @@ html[data-theme="dark"] { } html[data-theme="light"] { - --ifm-color-primary: theme("colors.yellow.700"); + --ifm-color-primary: theme("colors.brand.700"); --ifm-background-color: theme("colors.gray.50"); --ifm-navbar-search-input-background-color: theme("colors.gray.150"); --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,'); diff --git a/src/icons/dots.svg b/src/icons/dots.svg index 1a527c0c..bcc73412 100644 --- a/src/icons/dots.svg +++ b/src/icons/dots.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/icons/expand.svg b/src/icons/expand.svg index c0318245..d07d2acb 100644 --- a/src/icons/expand.svg +++ b/src/icons/expand.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/icons/humidity.svg b/src/icons/humidity.svg index e7ae2518..e949bc62 100644 --- a/src/icons/humidity.svg +++ b/src/icons/humidity.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/icons/layers.svg b/src/icons/layers.svg index f576e695..7eaed18f 100644 --- a/src/icons/layers.svg +++ b/src/icons/layers.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/icons/scale.svg b/src/icons/scale.svg index 54c3c375..fc519675 100644 --- a/src/icons/scale.svg +++ b/src/icons/scale.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/pages/supporters.tsx b/src/pages/supporters.tsx index 081cfaa8..fa9a8201 100644 --- a/src/pages/supporters.tsx +++ b/src/pages/supporters.tsx @@ -43,7 +43,7 @@ export default function SupportersPage() { > {type} {supporters.length} diff --git a/src/theme/Admonition/index.tsx b/src/theme/Admonition/index.tsx new file mode 100644 index 00000000..1f0eedea --- /dev/null +++ b/src/theme/Admonition/index.tsx @@ -0,0 +1,137 @@ +import React, { type ReactNode } from "react"; +import clsx from "clsx"; +import type { Props } from "@theme/Admonition"; + +function NoteIcon() { + return ( + + + + ); +} + +function DangerIcon() { + return ( + + + + ); +} + +function CautionIcon() { + return ( + + + + ); +} + +type AdmonitionConfig = { + iconComponent: React.ComponentType; + className: string; + label: ReactNode; +}; + +const AdmonitionConfigs: Record = { + note: { + className: + "bg-sky-100 border-sky-300 text-sky-700 dark:bg-sky-950 dark:border-sky-700 dark:text-sky-200", + iconComponent: NoteIcon, + label: "Note", + }, + danger: { + className: + "bg-red-100 border-red-300 text-red-700 dark:bg-red-950 dark:border-red-700 dark:text-red-200", + iconComponent: DangerIcon, + label: "Danger", + }, + warning: { + className: + "bg-yellow-100 border-yellow-500 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-700 dark:text-yellow-200", + iconComponent: CautionIcon, + label: "Warning", + }, +}; + +function getAdmonitionConfig(type: string) { + const config = (AdmonitionConfigs as { [key: string]: AdmonitionConfig })[ + type + ]; + + if (config) { + return config; + } + + return AdmonitionConfigs.note; +} + +// Workaround because it's difficult in MDX v1 to provide a MDX title as props +// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682 +function extractMDXAdmonitionTitle(children: ReactNode): { + mdxAdmonitionTitle: ReactNode | undefined; + rest: ReactNode; +} { + const items = React.Children.toArray(children); + const mdxAdmonitionTitle = items.find( + (item) => + React.isValidElement(item) && + (item.props as { mdxType: string } | null)?.mdxType === + "mdxAdmonitionTitle" + ); + const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}; + return { + mdxAdmonitionTitle, + rest, + }; +} + +function processAdmonitionProps(props: Props): Props { + const { mdxAdmonitionTitle, rest } = extractMDXAdmonitionTitle( + props.children + ); + return { + ...props, + title: props.title ?? mdxAdmonitionTitle, + children: rest, + }; +} + +export default function Admonition(props: Props) { + const { + children, + type, + title, + icon: iconProp, + } = processAdmonitionProps(props); + + const typeConfig = getAdmonitionConfig(type); + const titleLabel = title ?? typeConfig.label; + const { iconComponent: IconComponent } = typeConfig; + const icon = iconProp ?? ; + return ( +
+
+ + {icon} + + {titleLabel} +
+
{children}
+
+ ); +} diff --git a/src/theme/BlogLastPost/index.tsx b/src/theme/BlogLastPost/index.tsx index f0fd1684..2432a607 100644 --- a/src/theme/BlogLastPost/index.tsx +++ b/src/theme/BlogLastPost/index.tsx @@ -22,7 +22,7 @@ export default function BlogLastPost({ item }) { diff --git a/src/theme/BlogListItem/index.tsx b/src/theme/BlogListItem/index.tsx index 76bb9418..ada70c43 100644 --- a/src/theme/BlogListItem/index.tsx +++ b/src/theme/BlogListItem/index.tsx @@ -17,7 +17,7 @@ export default function BlogListItem({ item }) { diff --git a/src/theme/BlogPostItem/Header/index.tsx b/src/theme/BlogPostItem/Header/index.tsx index a947ee88..38602d31 100644 --- a/src/theme/BlogPostItem/Header/index.tsx +++ b/src/theme/BlogPostItem/Header/index.tsx @@ -13,7 +13,7 @@ export default function BlogPostItemHeader() { diff --git a/src/theme/DocItem/Content.tsx b/src/theme/DocItem/Content.tsx index 6adf4311..ed36939c 100644 --- a/src/theme/DocItem/Content.tsx +++ b/src/theme/DocItem/Content.tsx @@ -3,7 +3,7 @@ import MDXContent from "@theme/MDXContent"; export default function DocItemContent({ children }) { return ( -
+
{children}
); diff --git a/src/theme/DocSidebarItem/Category.tsx b/src/theme/DocSidebarItem/Category.tsx index 400fbce0..ef881bc5 100644 --- a/src/theme/DocSidebarItem/Category.tsx +++ b/src/theme/DocSidebarItem/Category.tsx @@ -114,9 +114,9 @@ export default function DocSidebarItemCategory({
    • diff --git a/tailwind.config.js b/tailwind.config.js index 33a729fc..952543ec 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,7 +8,7 @@ module.exports = { fontSize: { "5xl": "2.5rem", }, - yellow: { + brand: { 900: "#332c05", 850: "#4d4107", 800: "#66570a",