added contributor, guides and code of conduct

Author: John P Vajda

CODE_OF_CONDUCT.md

@@ -1,5 +1,46 @@
-### Hello! We're glad you've joined us. 
+# Contributor Covenant Code of Conduct
 
-We believe participation in our community should be a harassment free experience for everyone. 
+## Our Pledge
 
-Learn more about our guidelines and principles by reading our [Code of Conduct](https://opensource.newrelic.com/code-of-conduct/) on our Open Source Website.
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [email protected]. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

COMPONENT_GUIDE.md

@@ -0,0 +1,276 @@
+- [Globally available components](#globally-available-components)
+  - [Video](#video)
+    - [Usage](#usage)
+  - [Intro](#intro)
+    - [Usage](#usage-1)
+  - [Steps](#steps)
+    - [Usage](#usage-2)
+  - [Step](#step)
+    - [Usage](#usage-3)
+- [A code example](#a-code-example)
+- [Another code example](#another-code-example)
+  - [Code blocks](#code-blocks)
+    - [Usage](#usage-4)
+  - [Callouts](#callouts)
+    - [Usage](#usage-5)
+  - [Announcement Banner](#announcement-banner)
+
+# Globally available components
+
+## Video
+
+`<Video />` component provides formatting for videos in markdown.
+
+### Usage
+
+The Video component requires two props:
+
+- `id`: the video ID
+- `type`: the host of the video. Accepted values are:
+  - `wistia`
+  - `youtube`
+
+```md
+<Video id="zxunt1u1as" type="wistia"/>
+```
+
+## Intro
+
+The `<Intro />` component provides formatting for the title and introduction of the markdown document.
+
+### Usage
+
+It takes the title provided in the Frontmatter and accepts plain text for the description. An example of Frontmatter that will have a title of **Example Guide**:
+
+```
+---
+path: '/example'
+duration: '30 min'
+title: 'Example Guide'
+template: 'GuideTemplate'
+description: 'Example guide page'
+---
+```
+
+It also accepts a `<Video />` component as a child, which it will place on the left side of the description.
+
+```md
+<Intro>
+This is a description for the markdown guide.
+
+<Video id="zxunt1u1as" type="youtube"/>
+</Intro>
+```
+
+If there is a more than plain text and a `<Video />` (such as a code snippet or another component) the content will be posted on the left side below the description.
+
+## Steps
+
+The `<Steps />` is a required container for the individual `<Step />` components and will autonumber from top to bottom.
+
+### Usage
+
+The Steps component accepts `<Step/>` components as its children and will increment by the number of child components.
+
+```md
+<Steps>
+
+<Step>
+
+## Step 1
+
+Step 1 description.
+</Step>
+
+<Step>
+
+## Step 2
+
+Step 2 description
+</Step>
+
+</Steps>
+```
+
+If there is markdown content not wrapped by a `<Step />` component, it will still auto-increment for that content, so be sure to wrap all content with the Step component. For example:
+
+```md
+<Steps>
+
+<Step>
+This will read as Step 1 of 3.
+</Step>
+
+This will display as is with no step counter.
+
+<Step>
+This will read as Step 3 of 3.
+</Step>
+
+</Steps>
+```
+
+## Step
+
+### Usage
+
+The `<Step />` component renders a single step in the series of steps. This is
+meant to use in conjunction with `<Steps />`, so this component **MUST** be
+wrapped by `<Steps />` to work properly. The following example will contain 2
+steps:
+
+```md
+<Steps>
+  <Step>Some information about step 1</Step>
+  <Step>Some information about step 2</Step>
+</Steps>
+```
+
+The previous example will interpret the text inside of the `<Step />` as plain
+text. If you would like the `<Step />` component to interpret the text as
+markdown content, include a line break after the opening tag:
+
+```md
+<Step>
+
+# This is a title for the step.
+
+This is some information about this step.
+</Step>
+```
+
+You can intersperse code blocks inside of the step. Code snippets will always
+render in a right column next to the description.
+
+````md
+<Step>
+
+# A code example
+
+Run the following command in your terminal:
+
+```shell
+npm start
+```
+
+</Step>
+````
+
+You can include multiple code blocks in a single step. Code blocks will always
+be rendered to the right of the text that precedes it.
+
+````md
+<Step>
+
+# Another code example
+
+Run the following in your terminal:
+
+```shell
+npm start
+```
+
+When that is running, edit index.js and replace the component with the following
+code:
+
+```js
+return <div>Hello, {props.name}</div>;
+```
+
+</Step>
+````
+
+You can also use images in steps. To get an image to appear on the right side as with code blocks, you must use an HTML `img` tag, traditional markdown will not align the image to the right.
+
+```md
+<Step>
+
+# Image example
+
+A step description
+<img src="../images/folder/great-img.png" alt="and here's an image to follow">
+
+</Step>
+```
+
+> Note: keep in mind that a new line is necesary after an `img` tag to ensure proper rendering of subsequent text/markdown.
+
+## Code blocks
+
+Code blocks are automatically formatted by three backticks. This is our preferred method to delineate code snippets, but it's worth noting that markdown will also consider any text that is indented 4 spaces (or 1 tab) to be a code block.
+
+### Usage
+
+There are four props that can be supplied to a code snippet.
+
+- `language`: The first prop must be a code language. [Here](https://prismjs.com/#supported-languages) is a list of accepted languages for syntax highlighting.
+
+  ````md
+  ```jsx
+  ```
+  ````
+
+- `lineNumbers`: `true` or `false`. Will show line numbers of the left side of the code, defaults to `false`.
+
+  ````md
+  ```jsx lineNumbers=true
+  ```
+  ````
+
+- `lineHighlight`: Will highlight lines of code in the snippet. You can supply individual line numbers separted by commas, or ranges by using a hyphen. Be sure not to use any spaces.
+
+  ````md
+  ```jsx lineHighlight=1,3,6-8,10
+  ```
+  ````
+
+- `copy`: `true` or `false`. Will display or not display the copy button, defaults to `true`
+  ````md
+  ```jsx copy=false
+  ```
+  ````
+
+## Callouts
+
+Callouts direct your attention to information of special importance or to information that doesn't fit smoothly into the main text.
+
+- Caution: Screams at you that this could cause a crash or cost you data loss beyond the task at hand.
+- Important: Urges awareness that this could impair the task at hand or cost you time if you ignore the text.
+- Tip: Whispers to you that this is nice to know, like a shortcut, best practice, or reminder.
+
+### Usage
+
+```md
+<Caution>
+
+Text with `markdown`.
+
+</Caution>
+
+<Important>
+
+Text with `markdown`.
+
+</Important>
+
+<Tip>
+
+Text with `markdown`.
+
+</Tip>
+```
+
+All callouts have default titles that can be overridden like this:
+
+```md
+<Caution title="A custom title">
+
+Text
+
+</Caution>
+```
+
+## Announcement Banner
+
+To utilize the announcement banner that is available in the Global Theme please see these
+[instructions](https://github.com/newrelic/gatsby-theme-newrelic/tree/develop/packages/gatsby-theme-newrelic#announcements).