-
Notifications
You must be signed in to change notification settings - Fork 114
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #522 from newrelic/jerel/related-resources
Related resources
- Loading branch information
Showing
15 changed files
with
301 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { css } from '@emotion/core'; | ||
| import { Button, ExternalLink, Icon } from '@newrelic/gatsby-theme-newrelic'; | ||
| import { graphql, useStaticQuery } from 'gatsby'; | ||
| import Section from './Section'; | ||
| import Title from './Title'; | ||
|
|
||
| const Contribute = ({ pageContext }) => { | ||
| const { site } = useStaticQuery(graphql` | ||
| query { | ||
| site { | ||
| siteMetadata { | ||
| repository | ||
| } | ||
| } | ||
| } | ||
| `); | ||
|
|
||
| const { fileRelativePath } = pageContext; | ||
|
|
||
| const { | ||
| siteMetadata: { repository }, | ||
| } = site; | ||
|
|
||
| return ( | ||
| <Section> | ||
| <Title>Contribute</Title> | ||
| <Button | ||
| as={ExternalLink} | ||
| href={`${repository}/issues/new/choose`} | ||
| css={css` | ||
| margin-right: 0.5rem; | ||
| `} | ||
| variant={Button.VARIANT.PRIMARY} | ||
| size={Button.SIZE.SMALL} | ||
| > | ||
| <Icon | ||
| name={Icon.TYPE.GITHUB} | ||
| css={css` | ||
| margin-right: 0.5rem; | ||
| `} | ||
| /> | ||
| File an issue | ||
| </Button> | ||
| <Button | ||
| as={ExternalLink} | ||
| href={`${repository}/tree/main/${fileRelativePath}`} | ||
| variant={Button.VARIANT.NORMAL} | ||
| size={Button.SIZE.SMALL} | ||
| > | ||
| <Icon | ||
| name={Icon.TYPE.EDIT} | ||
| css={css` | ||
| margin-right: 0.5rem; | ||
| `} | ||
| /> | ||
| Edit this page | ||
| </Button> | ||
| </Section> | ||
| ); | ||
| }; | ||
|
|
||
| Contribute.propTypes = { | ||
| pageContext: PropTypes.shape({ | ||
| fileRelativePath: PropTypes.string, | ||
| }), | ||
| }; | ||
|
|
||
| export default Contribute; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { css } from '@emotion/core'; | ||
| import { graphql } from 'gatsby'; | ||
| import Section from './Section'; | ||
|
|
||
| const PageUpdated = ({ page }) => { | ||
| const { | ||
| fields: { gitAuthorTime }, | ||
| } = page; | ||
|
|
||
| return ( | ||
| <Section | ||
| css={css` | ||
| font-size: 0.875rem; | ||
| font-style: italic; | ||
| color: var(--color-neutrals-500); | ||
| .dark-mode & { | ||
| color: var(--color-dark-500); | ||
| } | ||
| `} | ||
| > | ||
| {`Page last modified on ${gitAuthorTime}`} | ||
| </Section> | ||
| ); | ||
| }; | ||
|
|
||
| PageUpdated.propTypes = { | ||
| page: PropTypes.shape({ | ||
| fields: PropTypes.shape({ | ||
| gitAuthorTime: PropTypes.string, | ||
| }), | ||
| }), | ||
| }; | ||
|
|
||
| export const query = graphql` | ||
| fragment PageUpdated_page on Mdx { | ||
| fields { | ||
| gitAuthorTime(formatString: "MMMM DD, YYYY") | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| export default PageUpdated; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { css } from '@emotion/core'; | ||
| import { graphql, Link } from 'gatsby'; | ||
| import { ExternalLink, Icon, Tag } from '@newrelic/gatsby-theme-newrelic'; | ||
| import Section from './Section'; | ||
| import Title from './Title'; | ||
|
|
||
| const SITE_TAGS = { | ||
| developer: 'https://developer.newrelic.com', | ||
| 'open source': 'https://opensource.newrelic.com', | ||
| docs: 'https://docs.newrelic.com', | ||
| }; | ||
|
|
||
| const findTag = (resource) => | ||
| resource.url.startsWith('/') | ||
| ? 'developer' | ||
| : Object.keys(SITE_TAGS).find((tag) => | ||
| resource.url.startsWith(SITE_TAGS[tag]) | ||
| ); | ||
|
|
||
| const normalizeDeveloperUrl = (url) => | ||
| url.replace('https://developer.newrelic.com', ''); | ||
|
|
||
| const Resources = ({ page }) => { | ||
| const { | ||
| frontmatter: { resources }, | ||
| } = page; | ||
|
|
||
| return resources?.length > 0 ? ( | ||
| <Section> | ||
| <Title>Resources</Title> | ||
| <nav> | ||
| <ul | ||
| css={css` | ||
| list-style: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| `} | ||
| > | ||
| {resources.map((resource) => { | ||
| const tag = findTag(resource); | ||
| const isDeveloperSite = tag === 'developer'; | ||
| const LinkElement = isDeveloperSite ? Link : ExternalLink; | ||
| const props = isDeveloperSite | ||
| ? { to: normalizeDeveloperUrl(resource.url) } | ||
| : { href: resource.url }; | ||
|
|
||
| return ( | ||
| <li | ||
| key={resource.url} | ||
| css={css` | ||
| margin-bottom: 1rem; | ||
| `} | ||
| > | ||
| <LinkElement | ||
| {...props} | ||
| css={css` | ||
| display: block; | ||
| margin-bottom: 0.25rem; | ||
| `} | ||
| > | ||
| <span | ||
| css={css` | ||
| vertical-align: middle; | ||
| `} | ||
| > | ||
| {resource.title} | ||
| </span> | ||
|
|
||
| {!isDeveloperSite && ( | ||
| <Icon | ||
| name={Icon.TYPE.EXTERNAL_LINK} | ||
| css={css` | ||
| margin-left: 0.25rem; | ||
| vertical-align: middle; | ||
| `} | ||
| /> | ||
| )} | ||
| </LinkElement> | ||
|
|
||
| <Tag>{tag}</Tag> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </nav> | ||
| </Section> | ||
| ) : null; | ||
| }; | ||
|
|
||
| Resources.propTypes = { | ||
| page: PropTypes.shape({ | ||
| frontmatter: PropTypes.shape({ | ||
| resources: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| title: PropTypes.string, | ||
| url: PropTypes.string, | ||
| }) | ||
| ), | ||
| }).isRequired, | ||
| }).isRequired, | ||
| }; | ||
|
|
||
| export const query = graphql` | ||
| fragment Resources_page on Mdx { | ||
| frontmatter { | ||
| resources { | ||
| title | ||
| url | ||
| } | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| export default Resources; |
Oops, something went wrong.