diff --git a/example/src/pages/index.md b/example/src/pages/index.md index 9ab27e53d7..ee8ea70e0c 100644 --- a/example/src/pages/index.md +++ b/example/src/pages/index.md @@ -1,17 +1,10 @@ --- title: Overview - Adobe Analytics description: This is an overview page of Adobe Analytics -resources: - - text: Adobe Analytics Product Docs - link: https://adobe.io - - text: Adobe Analytics Github Repo - link: https://adobe.io contributors: - https://github.com/icaraps - https://github.com/macdonst - https://github.com/simonwex - - https://github.com/schaulinsan - - https://github.com/duynguyen --- @@ -22,6 +15,13 @@ contributors: Adobe Product API offers limitless ways to integrate your most important customer data into key business processes. Adobe Product API offer limitless ways. + + +#### Resources + +* [Quickstart Guide](https://adobe.io) +* [Adobe Analytics Github Repo](https://adobe.io) + ## Overview This documentation provides instructions for Adobe Analytics 2.0 APIs. For working with Analytics 1.4 APIs, see [Analytics 1.4 API Documentation](https://adobe.io). diff --git a/packages/gatsby-theme-spectrum/src/components/ContentBlock.js b/packages/gatsby-theme-spectrum/src/components/ContentBlock.js index 2b80f21385..2c96751674 100644 --- a/packages/gatsby-theme-spectrum/src/components/ContentBlock.js +++ b/packages/gatsby-theme-spectrum/src/components/ContentBlock.js @@ -14,24 +14,27 @@ import React from 'react'; import { css } from '@emotion/core'; import { layoutColumns } from './utils'; import '@spectrum-css/typography'; -import PropTypes from "prop-types"; +import PropTypes from 'prop-types'; const imageWidth = '100px'; const ContentBlock = ({ width, heading, link, text, image }) => (
- {image && React.cloneElement(image, { - css: css` + {image && + React.cloneElement(image, { + css: css` position: absolute; top: var(--spectrum-heading-m-margin-top, var(--spectrum-alias-heading-m-margin-top)); left: calc(-${imageWidth} - var(--spectrum-global-dimension-static-size-400)); @@ -39,15 +42,18 @@ const ContentBlock = ({ width, heading, link, text, image }) => ( align-items: flex-start; height: 100%; width: ${imageWidth}; - ` - })} - {heading ?? } + ` + })} + {heading ?? ( + + )} {link} {text}
); - ContentBlock.propTypes = { width: PropTypes.string, heading: PropTypes.func, @@ -56,4 +62,4 @@ ContentBlock.propTypes = { link: PropTypes.func }; -export { ContentBlock } \ No newline at end of file +export { ContentBlock }; diff --git a/packages/gatsby-theme-spectrum/src/components/Heading4.js b/packages/gatsby-theme-spectrum/src/components/Heading4.js new file mode 100644 index 0000000000..3aa3f35efd --- /dev/null +++ b/packages/gatsby-theme-spectrum/src/components/Heading4.js @@ -0,0 +1,20 @@ +/* + * 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 from 'react'; +import '@spectrum-css/typography'; + +export const Heading4 = ({ children, className, ...props }) => ( +

+ {children} +

+); diff --git a/packages/gatsby-theme-spectrum/src/components/Hero.js b/packages/gatsby-theme-spectrum/src/components/Hero.js index 1228d0727d..cc57baf90b 100644 --- a/packages/gatsby-theme-spectrum/src/components/Hero.js +++ b/packages/gatsby-theme-spectrum/src/components/Hero.js @@ -15,7 +15,7 @@ import { css } from '@emotion/core'; import { Flex } from '@react-spectrum/layout'; import { View } from '@react-spectrum/view'; import '@spectrum-css/typography'; -import PropTypes from "prop-types"; +import PropTypes from 'prop-types'; const Hero = ({ background = '#1D7DEE', heading, text, image }) => { return ( @@ -43,21 +43,21 @@ const Hero = ({ background = '#1D7DEE', heading, text, image }) => { ` })} - {image && - - {React.cloneElement(image, { - className: '', - css: css` - margin: 0; - & img { - min-width: 750px; - max-height: 210px; - object-fit: contain; - } - ` - })} - - } + {image && ( + + {React.cloneElement(image, { + className: '', + css: css` + margin: 0; + & img { + min-width: 750px; + max-height: 210px; + object-fit: contain; + } + ` + })} + + )} ); @@ -70,4 +70,4 @@ Hero.propTypes = { image: PropTypes.func }; -export { Hero } \ No newline at end of file +export { Hero }; diff --git a/packages/gatsby-theme-spectrum/src/components/Layout.js b/packages/gatsby-theme-spectrum/src/components/Layout.js index 520889e210..cd192e96a4 100644 --- a/packages/gatsby-theme-spectrum/src/components/Layout.js +++ b/packages/gatsby-theme-spectrum/src/components/Layout.js @@ -18,12 +18,12 @@ import './Layout.css'; import { Flex } from '@react-spectrum/layout'; import { View } from '@react-spectrum/view'; -import LinkOut from '@spectrum-icons/workflow/LinkOut'; import '@spectrum-css/typography'; import { Heading1 } from './Heading1'; import { Heading2 } from './Heading2'; import { Heading3 } from './Heading3'; +import { Heading4 } from './Heading4'; import { Paragraph } from './Paragraph'; import { List } from './List'; import { Code } from './Code'; @@ -32,6 +32,7 @@ import { Link } from './Link'; import { Image } from './Image'; import { Footer } from './Footer'; +import { Resources } from './Resources'; import { Hero } from './Hero'; import { ContentBlock } from './ContentBlock'; import { Contributors } from './Contributors'; @@ -39,13 +40,15 @@ import { Feedback } from './Feedback'; const customComponents = { Hero, - ContentBlock + ContentBlock, + Resources }; const mdxComponents = { h1: Heading1, h2: Heading2, h3: Heading3, + h4: Heading4, p: Paragraph, ul: List, code: Code, @@ -60,6 +63,7 @@ const filterChildren = (children) => { const filteredChildren = []; let heroChild; + let resourcesChild; while (childrenArray.length) { const child = childrenArray[0]; @@ -81,6 +85,8 @@ const filterChildren = (children) => { if (child.props.mdxType === 'Hero') { heroChild = childClone; + } else if (child.props.mdxType === 'Resources') { + resourcesChild = childClone; } else { filteredChildren.push(childClone); } @@ -98,12 +104,13 @@ const filterChildren = (children) => { return { filteredChildren, - heroChild + heroChild, + resourcesChild }; }; export default ({ children, pageContext }) => { - const { filteredChildren, heroChild } = filterChildren(children); + const { filteredChildren, heroChild, resourcesChild } = filterChildren(children); return ( @@ -146,43 +153,7 @@ export default ({ children, pageContext }) => { - {pageContext.frontmatter.resources && ( - - )} + {resourcesChild && resourcesChild}