From 8684ba884eda2e65411391d2eef7e5db0acae5d1 Mon Sep 17 00:00:00 2001 From: Jeff Matthews Date: Wed, 20 Dec 2023 09:50:15 -0600 Subject: [PATCH 1/5] COMDOX-840: First attempt to shadow MDXFilter for Feedback position --- .../components/MDXFilter/index.js | 412 +++++++++++++++++ src/@adobe/gatsby-theme-aio/conf/globals.js | 21 + src/@adobe/gatsby-theme-aio/utils/index.js | 425 ++++++++++++++++++ 3 files changed, 858 insertions(+) create mode 100644 src/@adobe/gatsby-theme-aio/components/MDXFilter/index.js create mode 100644 src/@adobe/gatsby-theme-aio/conf/globals.js create mode 100644 src/@adobe/gatsby-theme-aio/utils/index.js diff --git a/src/@adobe/gatsby-theme-aio/components/MDXFilter/index.js b/src/@adobe/gatsby-theme-aio/components/MDXFilter/index.js new file mode 100644 index 000000000..75a646915 --- /dev/null +++ b/src/@adobe/gatsby-theme-aio/components/MDXFilter/index.js @@ -0,0 +1,412 @@ +/* + * Copyright 2020 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import React, { Children, cloneElement, useContext } from 'react'; +import { withPrefix } from 'gatsby'; +import { MDXProvider } from '@mdx-js/react'; +import { css } from '@emotion/react'; +import '@spectrum-css/divider'; +import '@spectrum-css/actiongroup'; +import Context from '@adobe/gatsby-theme-aio'; +import { + layoutColumns, + findSelectedPage, + findSelectedPageSiblings, + findSelectedPageNextPrev, + findSelectedTopPage, + findSelectedTopPageMenu, + findSelectedPages, + DESKTOP_SCREEN_WIDTH, + SIDENAV_WIDTH, + DEFAULT_HOME, + rootFix, + rootFixPages, + cleanRootFix +} from '../../utils'; + +import { Footer } from '@adobe/gatsby-theme-aio'; +import { Contributors } from '@adobe/gatsby-theme-aio'; +import { Feedback } from '@adobe/gatsby-theme-aio'; +import { GitHubActions } from '@adobe/gatsby-theme-aio'; +import { Breadcrumbs } from '@adobe/gatsby-theme-aio'; +import { Attribution } from '@adobe/gatsby-theme-aio'; +import { Edition } from '@adobe/gatsby-theme-aio'; +import { OnThisPage } from '@adobe/gatsby-theme-aio'; +import { NextSteps } from '@adobe/gatsby-theme-aio'; +import { NextPrev } from '@adobe/gatsby-theme-aio'; + +import { jsDocFilter } from '@adobe/gatsby-theme-aio'; + +import { MDXComponents } from '@adobe/gatsby-theme-aio'; +import { MDXBlocks } from '@adobe/gatsby-theme-aio'; + +// Filters custom MDX components out of the markdown +const filterChildren = ({ childrenArray, query, hasSideNav }) => { + const filteredChildren = []; + + let heroChild = null; + let resourcesChild = null; + + while (childrenArray.length) { + const child = childrenArray[0]; + let ignoredChildrenCount = 0; + + // Verify if child is a custom MDX component + Object.keys(MDXBlocks).forEach((customComponent) => { + if (child?.props?.mdxType === customComponent) { + ignoredChildrenCount++; + + let slots = []; + // Custom MDX components have slots and/or repeat props to identify markdown content + // It's currently not possible to Interleaving Markdown in JSX with MDX v1 (https://github.com/mdx-js/mdx/issues/628) + if (child.props.slots || child.props.repeat) { + const repeat = Math.max(parseInt(child.props.repeat) || 1, 1); + + for (let i = 0; i < repeat; i++) { + slots = slots.concat( + // Set default slots to element if repeat is defined + (child.props.slots || 'element') + .split(',') + .map((slot, k) => [`${slot.trim()}${repeat === 1 ? '' : i}`, childrenArray[slots.length + k + 1]]) + ); + } + } + + if (slots.length) { + ignoredChildrenCount += slots.length; + + const props = Object.fromEntries(slots); + + if (child.props.mdxType === 'Variant') { + // Set the query to define if the Variant should show its content + props.query = query; + } + + if (child.props.mdxType === 'Hero' && hasSideNav) { + props.width = `calc(${DESKTOP_SCREEN_WIDTH} - ${SIDENAV_WIDTH});`; + } + + const childClone = cloneElement(child, { + ...props + }); + + if (child.props.mdxType === 'Hero') { + // Only 1 Hero per page allowed + heroChild = heroChild || childClone; + } else if (child.props.mdxType === 'Resources') { + // Only 1 Resources per page allowed + resourcesChild = resourcesChild || childClone; + } else { + filteredChildren.push(childClone); + } + } else { + filteredChildren.push(child); + } + } + }); + + if (ignoredChildrenCount === 0) { + ignoredChildrenCount++; + + filteredChildren.push(child); + } + + childrenArray = childrenArray.splice(ignoredChildrenCount); + } + + return { + filteredChildren, + heroChild, + resourcesChild + }; +}; + +export default ({ children, pageContext, query }) => { + const { hasSideNav, siteMetadata, location, allSitePage, allMdx, allGithub, allGithubContributors } = + useContext(Context); + const isTranscludedContent = typeof pageContext === 'undefined'; + let childrenArray = Children.toArray(children); + + if (isTranscludedContent || pageContext?.frontmatter?.layout === 'none') { + const { filteredChildren } = filterChildren({ childrenArray: jsDocFilter(childrenArray), query, hasSideNav }); + return isTranscludedContent ? ( + {filteredChildren} + ) : ( + + {filteredChildren} +