From 3bf45a2e0b71f56ea03e9a21c334d322129d4d7b Mon Sep 17 00:00:00 2001 From: jakmro Date: Thu, 19 Dec 2024 11:27:33 +0100 Subject: [PATCH 1/5] Add matching details section in the docs --- docs/src/theme/MDXComponents.js | 13 +++ docs/src/theme/MDXComponents/Details.js | 20 ++++ .../theme/MDXComponents/DetailsStyling.tsx | 100 ++++++++++++++++++ .../src/theme/MDXComponents/styles.module.css | 50 +++++++++ docs/static/img/Arrow-dark.svg | 3 + docs/static/img/Arrow.svg | 3 + 6 files changed, 189 insertions(+) create mode 100644 docs/src/theme/MDXComponents.js create mode 100644 docs/src/theme/MDXComponents/Details.js create mode 100644 docs/src/theme/MDXComponents/DetailsStyling.tsx create mode 100644 docs/src/theme/MDXComponents/styles.module.css create mode 100644 docs/static/img/Arrow-dark.svg create mode 100644 docs/static/img/Arrow.svg diff --git a/docs/src/theme/MDXComponents.js b/docs/src/theme/MDXComponents.js new file mode 100644 index 0000000000..063991b817 --- /dev/null +++ b/docs/src/theme/MDXComponents.js @@ -0,0 +1,13 @@ +// Import the original mapper +import MDXComponents from '@theme-original/MDXComponents'; +import InteractiveExample from '@site/src/components/InteractiveExample'; +import CollapsibleCode from '@site/src/components/CollapsibleCode'; + +export default { + // Re-use the default mapping + ...MDXComponents, + // Map the "" tag to our Highlight component + // `Highlight` will receive all props that were passed to `` in MDX + InteractiveExample, + CollapsibleCode, +}; \ No newline at end of file diff --git a/docs/src/theme/MDXComponents/Details.js b/docs/src/theme/MDXComponents/Details.js new file mode 100644 index 0000000000..1acf21b8a9 --- /dev/null +++ b/docs/src/theme/MDXComponents/Details.js @@ -0,0 +1,20 @@ +import React from 'react'; +import DetailsStyling from '@site/src/theme/MDXComponents/DetailsStyling'; + +const MDXDetails = (props) => { + const items = React.Children.toArray(props.children); + // Split summary item from the rest to pass it as a separate prop to the + // Details theme component + const summary = items.find( + (item) => React.isValidElement(item) && item.props?.mdxType === 'summary' + ); + + const children = <>{items.filter((item) => item !== summary)}; + return ( + + {children} + + ); +}; + +export default MDXDetails; \ No newline at end of file diff --git a/docs/src/theme/MDXComponents/DetailsStyling.tsx b/docs/src/theme/MDXComponents/DetailsStyling.tsx new file mode 100644 index 0000000000..767324d9d3 --- /dev/null +++ b/docs/src/theme/MDXComponents/DetailsStyling.tsx @@ -0,0 +1,100 @@ +import { useCollapsible, Collapsible } from '@docusaurus/theme-common'; + +import clsx from 'clsx'; +import React from 'react'; +import { useRef, useState } from 'react'; + +import styles from './styles.module.css'; +import useIsBrowser from '@docusaurus/useIsBrowser'; +import ThemedImage from '@theme/ThemedImage'; +import useBaseUrl from '@docusaurus/useBaseUrl'; + +const DetailsStyling = ({ summary, children, ...props }): JSX.Element => { + const isBrowser = useIsBrowser(); + const { collapsed, setCollapsed } = useCollapsible({ + initialState: !props.open, + }); + + const arrowIcon = { + light: useBaseUrl('/img/Arrow.svg'), + dark: useBaseUrl('img/Arrow-dark.svg'), + }; + + const detailsRef = useRef(null); + const [open, setOpen] = useState(props.open); + + // As we need to modify our own summary, we need to extract original content of summary + const extractedSummaryElement = summary.props.children; + + return ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions +
{ + const target = e.target as HTMLElement; + // Prevent a double-click to highlight summary text + if (isInSummary(target) && e.detail > 1) { + e.preventDefault(); + } + }} + onClick={(e) => { + e.stopPropagation(); // For isolation of multiple nested details/summary + const target = e.target as HTMLElement; + const shouldToggle = + isInSummary(target) && hasParent(target, detailsRef.current!); + if (!shouldToggle) { + return; + } + e.preventDefault(); + if (collapsed) { + setCollapsed(false); + setOpen(true); + } else { + setCollapsed(true); + // Don't do this, it breaks close animation! + // setOpen(false); + } + }}> + + + +

{extractedSummaryElement}

+ + + { + setCollapsed(newCollapsed); + setOpen(!newCollapsed); + }}> +
{children}
+ +
+ ); +}; + +function isInSummary(node: HTMLElement | null): boolean { + if (!node) { + return false; + } + return node.tagName === 'SUMMARY' || isInSummary(node.parentElement); +} + +function hasParent(node: HTMLElement | null, parent: HTMLElement): boolean { + if (!node) { + return false; + } + return node === parent || hasParent(node.parentElement, parent); +} + +export default DetailsStyling; \ No newline at end of file diff --git a/docs/src/theme/MDXComponents/styles.module.css b/docs/src/theme/MDXComponents/styles.module.css new file mode 100644 index 0000000000..474f352536 --- /dev/null +++ b/docs/src/theme/MDXComponents/styles.module.css @@ -0,0 +1,50 @@ +.details { + background-color: var(--swm-details-foreground); + box-shadow: -8px 8px 0 var(--swm-details-background); + + color: var(--swm-details-color); + } + + .details a { + color: var(--swm-details-color); + } + + .details > summary { + display: flex; + align-items: center; + cursor: pointer; + list-style: none; + padding: 1.5em 2em; + } + + .details > summary > p { + margin: 0; + } + + /* TODO: deprecation, need to remove this after Safari will support `::marker` */ + .details > summary::-webkit-details-marker { + display: none; + } + + .arrow { + height: 12px; + width: 12px; + margin-right: 1.5rem; + left: 0; + + transition: var(--swm-expandable-transition); + } + + .details[open]:not(.isBrowser) > summary > .arrow, + /* When JS works: we use the data-attribute for arrow animation */ + .details[data-collapsed='false'].isBrowser > summary > .arrow { + transform: rotate(180deg); + } + + .collapsibleContent { + padding: 0 2em 1.5em 2em; + } + + .collapsibleContent > *:last-child { + margin-bottom: 0; + } \ No newline at end of file diff --git a/docs/static/img/Arrow-dark.svg b/docs/static/img/Arrow-dark.svg new file mode 100644 index 0000000000..b781299278 --- /dev/null +++ b/docs/static/img/Arrow-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/static/img/Arrow.svg b/docs/static/img/Arrow.svg new file mode 100644 index 0000000000..cb808e2ac1 --- /dev/null +++ b/docs/static/img/Arrow.svg @@ -0,0 +1,3 @@ + + + From f0703f1c3b125f7af1427d840940ab868b33af07 Mon Sep 17 00:00:00 2001 From: jakmro Date: Thu, 19 Dec 2024 11:49:49 +0100 Subject: [PATCH 2/5] Format code --- docs/src/theme/MDXComponents.js | 14 ++++---- docs/src/theme/MDXComponents/Details.js | 2 +- .../theme/MDXComponents/DetailsStyling.tsx | 9 ++--- lefthook.yml | 35 +++++++++++++++++++ 4 files changed, 48 insertions(+), 12 deletions(-) create mode 100644 lefthook.yml diff --git a/docs/src/theme/MDXComponents.js b/docs/src/theme/MDXComponents.js index 063991b817..4477c07669 100644 --- a/docs/src/theme/MDXComponents.js +++ b/docs/src/theme/MDXComponents.js @@ -4,10 +4,10 @@ import InteractiveExample from '@site/src/components/InteractiveExample'; import CollapsibleCode from '@site/src/components/CollapsibleCode'; export default { - // Re-use the default mapping - ...MDXComponents, - // Map the "" tag to our Highlight component - // `Highlight` will receive all props that were passed to `` in MDX - InteractiveExample, - CollapsibleCode, -}; \ No newline at end of file + // Re-use the default mapping + ...MDXComponents, + // Map the "" tag to our Highlight component + // `Highlight` will receive all props that were passed to `` in MDX + InteractiveExample, + CollapsibleCode, +}; diff --git a/docs/src/theme/MDXComponents/Details.js b/docs/src/theme/MDXComponents/Details.js index 1acf21b8a9..47305d4988 100644 --- a/docs/src/theme/MDXComponents/Details.js +++ b/docs/src/theme/MDXComponents/Details.js @@ -17,4 +17,4 @@ const MDXDetails = (props) => { ); }; -export default MDXDetails; \ No newline at end of file +export default MDXDetails; diff --git a/docs/src/theme/MDXComponents/DetailsStyling.tsx b/docs/src/theme/MDXComponents/DetailsStyling.tsx index 767324d9d3..8d79b5d7d2 100644 --- a/docs/src/theme/MDXComponents/DetailsStyling.tsx +++ b/docs/src/theme/MDXComponents/DetailsStyling.tsx @@ -27,7 +27,6 @@ const DetailsStyling = ({ summary, children, ...props }): JSX.Element => { const extractedSummaryElement = summary.props.children; return ( - // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
{ // Don't do this, it breaks close animation! // setOpen(false); } - }}> + }} + > @@ -76,7 +76,8 @@ const DetailsStyling = ({ summary, children, ...props }): JSX.Element => { onCollapseTransitionEnd={(newCollapsed) => { setCollapsed(newCollapsed); setOpen(!newCollapsed); - }}> + }} + >
{children}
@@ -97,4 +98,4 @@ function hasParent(node: HTMLElement | null, parent: HTMLElement): boolean { return node === parent || hasParent(node.parentElement, parent); } -export default DetailsStyling; \ No newline at end of file +export default DetailsStyling; diff --git a/lefthook.yml b/lefthook.yml new file mode 100644 index 0000000000..f6e5dfe59c --- /dev/null +++ b/lefthook.yml @@ -0,0 +1,35 @@ +# EXAMPLE USAGE: +# +# Refer for explanation to following link: +# https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md +# +# pre-push: +# commands: +# packages-audit: +# tags: frontend security +# run: yarn audit +# gems-audit: +# tags: backend security +# run: bundle audit +# +# pre-commit: +# parallel: true +# commands: +# eslint: +# glob: "*.{js,ts,jsx,tsx}" +# run: yarn eslint {staged_files} +# rubocop: +# tags: backend style +# glob: "*.rb" +# exclude: '(^|/)(application|routes)\.rb$' +# run: bundle exec rubocop --force-exclusion {all_files} +# govet: +# tags: backend style +# files: git ls-files -m +# glob: "*.go" +# run: go vet {files} +# scripts: +# "hello.js": +# runner: node +# "any.go": +# runner: go run From 9621aca2e54d6a4c7c477b56d9f5e56bdeee42d7 Mon Sep 17 00:00:00 2001 From: jakmro Date: Thu, 19 Dec 2024 12:00:39 +0100 Subject: [PATCH 3/5] Remove unused components --- docs/src/theme/MDXComponents.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/docs/src/theme/MDXComponents.js b/docs/src/theme/MDXComponents.js index 4477c07669..47d54a1fb6 100644 --- a/docs/src/theme/MDXComponents.js +++ b/docs/src/theme/MDXComponents.js @@ -1,13 +1,7 @@ // Import the original mapper import MDXComponents from '@theme-original/MDXComponents'; -import InteractiveExample from '@site/src/components/InteractiveExample'; -import CollapsibleCode from '@site/src/components/CollapsibleCode'; export default { // Re-use the default mapping ...MDXComponents, - // Map the "" tag to our Highlight component - // `Highlight` will receive all props that were passed to `` in MDX - InteractiveExample, - CollapsibleCode, }; From dfc95e80d7069015ff80d334173eae31d6c1a5a2 Mon Sep 17 00:00:00 2001 From: jakmro Date: Thu, 19 Dec 2024 12:08:06 +0100 Subject: [PATCH 4/5] Remove spaces --- docs/src/theme/MDXComponents.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/theme/MDXComponents.js b/docs/src/theme/MDXComponents.js index 47d54a1fb6..c7bfa21c24 100644 --- a/docs/src/theme/MDXComponents.js +++ b/docs/src/theme/MDXComponents.js @@ -2,6 +2,6 @@ import MDXComponents from '@theme-original/MDXComponents'; export default { - // Re-use the default mapping - ...MDXComponents, + // Re-use the default mapping + ...MDXComponents, }; From e2e4f53e484daeb10e66f6ca6dae4f40cba283d6 Mon Sep 17 00:00:00 2001 From: jakmro Date: Thu, 19 Dec 2024 12:11:26 +0100 Subject: [PATCH 5/5] Remove lefthook.yml --- lefthook.yml | 35 ----------------------------------- 1 file changed, 35 deletions(-) delete mode 100644 lefthook.yml diff --git a/lefthook.yml b/lefthook.yml deleted file mode 100644 index f6e5dfe59c..0000000000 --- a/lefthook.yml +++ /dev/null @@ -1,35 +0,0 @@ -# EXAMPLE USAGE: -# -# Refer for explanation to following link: -# https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md -# -# pre-push: -# commands: -# packages-audit: -# tags: frontend security -# run: yarn audit -# gems-audit: -# tags: backend security -# run: bundle audit -# -# pre-commit: -# parallel: true -# commands: -# eslint: -# glob: "*.{js,ts,jsx,tsx}" -# run: yarn eslint {staged_files} -# rubocop: -# tags: backend style -# glob: "*.rb" -# exclude: '(^|/)(application|routes)\.rb$' -# run: bundle exec rubocop --force-exclusion {all_files} -# govet: -# tags: backend style -# files: git ls-files -m -# glob: "*.go" -# run: go vet {files} -# scripts: -# "hello.js": -# runner: node -# "any.go": -# runner: go run