This repo contains Gatsby themes used by New Relic Gatsby sites, including:
- docs.newrelic.com - GitHub repository
- newrelic.com/instant-observability - GitHub repository
- developer.newrelic.com - GitHub repository
- opensource.newrelic.com - GitHub repository
In your terminal:
git clone [email protected]:newrelic/gatsby-theme-newrelic.git
cd gatsby-theme-newrelic
yarnYou can use the Demo Site included to test out changes to the theme. It's a much smaller package to build and serve than our other sites, so it's ideal for testing out changes to plugin behaviour, styling and our component library.
To run the Demo Site, simply use either of the following commands:
yarn start...or...
yarn workspace demo developIt should only take ~30 seconds to build and you should see...
success Building development bundle...in the terminal, then you can visit http://localhost:8001 in your browser :)
We use MDX files for content which lets you seamlessly write JSX in your Markdown documents. This means you can write content in regular Markdown format as well as including React componenets in the same file. Gatsby will then do all the heavy-lifting to convert these to HTML to serve in the browser.
For this example we will show how to add some content to a page and see the render results in the browser. We will use the build-hello-world-app document for testing, so with the develop server still running, navigate to and open the following in your favourite code editor:
demo/src/content/build-apps/build-hello-world-app.mdx
You should see something like the following (possibly less wine coloured):
- Frontmatter - This is
key/valuemetadata you can provide for Gatsby which we won't go into now, but you can read more about here - Markdown - This is regular Markdown language, and we'll include a guide on writing Markdown as well as a great resource for practicing online
- JSX/Components - These are the React components to super-charge your content, you can see the full list of components included in the theme here
Firstly we'll add some standard Markdown to the page, including a Header, bulleted list and link. Feel free to edit the examples:
## My First Edit
Look at me ma i'm creating content for
- New Relic
- Gatsby Theme
- [My inspiration](https://newrelic.com/)Next we'll add a Button component that links to a site when you click it:
<Button variant="primary" to="https://newrelic.com/">
Call Friends
</Button>Your code should now look something like this...
...and as long as your develop server is still running the page should automatically reload with the new content...
Because we've added a Header, My First Edit should now be included in the On this page section on the right. Fresh! :D
With your new found confidence, check out the full documentation for the theme where you'll find more examples for:
We're currently developing this package, and will provide test information as we build out the library.
New Relic hosts and moderates an online forum where customers can interact with New Relic employees as well as other customers to get help and share best practices. Like all official New Relic open source projects, there's a related Community topic in the New Relic Explorers Hub.
We encourage your contributions to improve gatsby-theme-newrelic! Keep in mind
when you submit your pull request, you'll need to sign the CLA via the
click-through using CLA-Assistant. You only have to sign the CLA one time per
project. If you have any questions, or to execute our corporate CLA, required
if your contribution is on behalf of a company, please drop us an email at
[email protected].
gatsby-theme-newrelic is licensed under the Apache
2.0 License.
The gatsby-theme-newrelic also uses source code from third-party libraries. You can find full details on which libraries are used and the terms under which they are licensed in the third-party notices document.