merge and fix something small

COMPONENT_GUIDE.md

@@ -199,10 +199,31 @@ Callouts direct your attention to information of special importance or to inform
 
 ### Usage
 
-* Caution: `<Caution>Text</Caution>`
-* Important: `<Important>Text</Important>`
-* Tip: `<Tip>Text</Important>`
+```jsx
+<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:
 
-`<Caution title="A custom title">Text</Caution>`
+```jsx
+<Caution title="A custom title">
+
+Text
+
+</Caution>```

package.json

@@ -27,6 +27,7 @@
     "node-sass": "^4.14.1",
     "normalize.css": "^8.0.1",
     "prism-react-renderer": "^1.1.1",
+    "prismjs": "^1.20.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

src/components/CodeSnippet.js

@@ -6,6 +6,11 @@ import FeatherIcon from './FeatherIcon';
 import styles from './CodeSnippet.module.scss';
 import useClipboard from '../hooks/useClipboard';
 import useFormattedCode from '../hooks/useFormattedCode';
+import Prism from 'prism-react-renderer/prism';
+
+(typeof global !== 'undefined' ? global : window).Prism = Prism;
+
+require('prismjs/components/prism-ruby');
 
 const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
   const language = className.replace('language-', '');

src/components/GuideTile.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import FeatherIcon from './FeatherIcon';
+import NewRelicIcon from '../components/NewRelicIcon';
 import cx from 'classnames';
 import { navigate } from 'gatsby';
 import styles from './GuideTile.module.scss';
@@ -9,7 +10,7 @@ const GuideTile = ({ icon, minutes, title, description, path, className }) => (
   <div className={cx(styles.tile, className, { [styles.tileWithIcon]: icon })}>
     {icon && (
       <div className={styles.iconContainer}>
-        <FeatherIcon name={icon} size="2.5rem" />
+        <NewRelicIcon name={icon} size="2.5rem" />
       </div>
     )}
 

src/components/Navigation.js

@@ -4,6 +4,7 @@ import { Link } from 'gatsby';
 import cx from 'classnames';
 import { BreadcrumbContext } from './BreadcrumbContext';
 import FeatherIcon from './FeatherIcon';
+import NewRelicIcon from './NewRelicIcon';
 import pages from '../data/sidenav.json';
 import matchSearchString from '../utils/matchSearchString';
 
@@ -36,6 +37,12 @@ const NavigationItems = ({
 }) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
   const isHomePage = crumbs.length === 0 && depthLevel === 0;
+  const iconLibrary = {
+    'Collect data': 'collectData',
+    'Build apps': 'buildApps',
+    'Automate workflows': 'automation',
+    'Explore docs': 'developerDocs',
+  };
 
   const groupedPages = pages.reduce((groups, page) => {
     const { group = '' } = page;
@@ -64,7 +71,7 @@ const NavigationItems = ({
 
           const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
           const headerIcon = depthLevel === 0 && (
-            <FeatherIcon
+            <NewRelicIcon
               className={styles.headerIcon}
               name={iconLibrary[page.displayName]}
             />
@@ -174,8 +181,9 @@ const filterPageNames = (pages, searchTerm, parent = []) => {
 };
 
 const Navigation = ({ className, searchTerm }) => {
+  const searchTermSanitized = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
   const filteredPageNames =
-    searchTerm !== '' ? filterPageNames(pages, searchTerm) : undefined;
+    searchTerm !== '' ? filterPageNames(pages, searchTermSanitized) : undefined;
 
   return (
     <nav
@@ -185,7 +193,7 @@ const Navigation = ({ className, searchTerm }) => {
     >
       <ul className={styles.listNav}>
         <NavigationItems
-          searchTerm={searchTerm}
+          searchTerm={searchTermSanitized}
           pages={pages}
           filteredPageNames={filteredPageNames}
         />

src/components/NewRelicIcon.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './NewRelicIcon.module.scss';
+
+const NewRelicIcon = ({ className, name, size = '1em' }) => {
+  const paths = NEWRELIC_ICONS[name];
+
+  return paths ? (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className={cx(styles.icon, className)}
+      style={{ width: size, height: size }}
+    >
+      {paths}
+    </svg>
+  ) : null;
+};
+
+const NEWRELIC_ICONS = {
+  automation: (
+    <>
+      <g>
+        <path
+          class="st0"
+          d="M14.6,14.3l1.4-0.8l-1.9-3.3l-1.4,0.8c-0.7-0.6-1.5-1.1-2.4-1.4V7.9H6.4v1.6C5.5,9.8,4.7,10.3,4,10.9l-1.4-0.8
+		l-1.9,3.3L2,14.3c-0.2,1-0.2,1.8,0,2.8l-1.4,0.8l1.9,3.3L4,20.4c0.7,0.6,1.5,1.1,2.4,1.4v1.6h3.9v-1.6c0.9-0.3,1.7-0.8,2.4-1.4
+		l1.4,0.8l1.9-3.3l-1.4-0.8C14.8,16.1,14.8,15.2,14.6,14.3z"
+        />
+        <circle class="st0" cx="8.3" cy="15.7" r="2.6" />
+      </g>
+      <g>
+        <path
+          class="st2"
+          d="M22.7,4.2l0.8-0.5l-1.2-2l-0.8,0.5c-0.4-0.4-0.9-0.7-1.5-0.8v-1h-2.3v1c-0.5,0.2-1,0.5-1.5,0.8l-0.8-0.5
+		l-1.2,2l0.8,0.5c-0.1,0.6-0.1,1.1,0,1.7l-0.8,0.5l1.2,2l0.8-0.5c0.4,0.4,0.9,0.7,1.5,0.8v1h2.3v-1c0.5-0.2,1-0.5,1.5-0.8l0.8,0.5
+		l1.2-2l-0.8-0.5C22.9,5.3,22.9,4.8,22.7,4.2z"
+        />
+        <circle class="st2" cx="18.9" cy="5.1" r="1.6" />
+      </g>
+    </>
+  ),
+  buildApps: (
+    <>
+      <polygon points="11.5,7.5 .5,4.5 12,1.5 23.5,4.5"></polygon>
+      <polyline points="23.5,4.463 23.5,18.5 11.5,22.5 .5,18.5 .5,4.463"></polyline>
+      <line x1="11.5" x2="11.5" y1="7.5" y2="22.5"></line>
+    </>
+  ),
+  collectData: (
+    <>
+      <path d="M15.799 16.5h2.396c0 0 4.305-.561 4.305-4.783 0-2.675-2.209-4.874-4.955-4.773 -1.073-2.266-3.373-3.835-6.045-3.835 -3.563 0-6.468 2.784-6.676 6.294 -2.232-.467-4.324 1.232-4.324 3.509 0 3.645 3.826 3.588 3.826 3.588h2.863"></path>
+      <line x1="11.5" x2="11.5" y1="11" y2="22"></line>
+      <polyline points="14.5,14 11.5,11 8.5,14"></polyline>
+    </>
+  ),
+  developerDocs: (
+    <>
+      <path d="M16.5 2.5c0 0-1.893 0-2 0 -2 0-3 1.5-3 3.5 0-2-1-3.5-3-3.5 -.5 0-8 0-8 0v16c0 0 6.5 0 8 0 2 0 3 1 3 3 0-2 1-3 3-3 1.5 0 8 0 8 0v-16h-2"></path>
+      <line x1="11.5" x2="11.5" y1="6" y2="21"></line>
+      <polygon points="20.5,10 18.5,8 16.5,10 16.5,1.5 20.5,1.5"></polygon>
+    </>
+  ),
+};
+
+NewRelicIcon.propTypes = {
+  className: PropTypes.string,
+  name: PropTypes.oneOf(Object.keys(NEWRELIC_ICONS)).isRequired,
+  size: PropTypes.string,
+};
+
+export default NewRelicIcon;

src/components/NewRelicIcon.module.scss

@@ -0,0 +1,7 @@
+.icon {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}

src/data/sidenav.json

@@ -18,6 +18,10 @@
         "displayName": "Create a Flex integration",
         "url": "/noop"
       },
+      {
+        "displayName": "Add a custom New Relic event",
+        "url": "/noop"
+      },
       {
         "displayName": "Write NRQL queries",
         "url": "/noop"

src/markdown-pages/custom-events.mdx

@@ -0,0 +1,65 @@
+---
+path: '/collect-data/custom-events'
+duration: '30 min'
+title: 'Create custom New Relic events'
+template: 'GuideTemplate'
+description: 'Create custom New Relic events'
+---
+
+## _Measure what you need by creating your own event types._
+<br/>
+
+Whereas adding [custom attributes](/collect-data/custom-attributes) adds metadata to an existing event, a custom event creates an entirely new event type. Create custom events to define, visualize, and get alerts on additional data, just as you would with any data we provide from our core agents.  
+<br/>
+
+_Custom events can be inserted through the Agent APIs or directly via the Insights Insert API. The following example shows how to send a custom event named CLIRun that tracks when a command line tool written in Ruby has its process exit due to an exception._
+
+```ruby
+# Hook into the runtime 'at_exit' event
+at_exit do
+  # Name the custom event
+  payload = { 'eventType' => 'CLIRun' }
+
+  # Check to see if the process is exiting due to an error
+  if $!.nil? || $!.is_a?(SystemExit) && $!.success?
+    payload[:status] = 0
+  else
+    # Gather any known errors
+    errors = ""
+    (Thread.current[:errors] ||= []).each do |err|
+      errors += "#{err}\n"
+    end
+    payload[:errors] = errors
+  end
+
+  # Send the errors to New Relic as a custom event
+  insights_url = URI.parse("https://insights-collector.newrelic.com/v1/accounts/YOUR_ACCOUNT_ID/events")
+  headers = { "x-insert-key" => "YOUR_API_KEY", "content-type" => "application/json" }
+
+  http = Net::HTTP.new(insights_url.host, insights_url.port)
+  http.use_ssl = true
+  request = Net::HTTP::Post.new(insights_url.request_uri, headers)
+  request.body = payload.to_json
+
+  puts "Sending run summary to Insights: #{payload.to_json}"
+  begin
+    response = http.request(request)
+    puts "Response from Insights: #{response.body}"
+  rescue Exception => e
+    puts "There was an error posting to Insights. Error: #{e.inspect}"
+  end
+end
+```
+<br/>
+
+_Here, a NRQL query retrieves information about the custom event, and the result can be added to a dashboard._
+<br/>
+
+![nrql query example](../images/UC2-sec2-query.png)
+
+```
+SELECT count(*) FROM CLIRun FACET errors SINCE 1 week ago
+```
+<br/>
+
+[Learn more about custom events.](https://docs.newrelic.com/docs/insights/insights-data-sources/custom-data/introduction-event-api)

src/markdown-pages/get-started-new-relic-cli.mdx

@@ -3,7 +3,7 @@ path: '/guides/get-started-new-relic-cli'
 duration: '20 min'
 title: 'Get started with the New Relic CLI'
 template: 'GuideTemplate'
-description: 'This guide walks you through the essentials of the New Relic CLI, from install and configuration to basic usage.'
+description: 'Learn the essentials of the New Relic CLI, from install and configuration to basic usage.'
 ---
 
 <Intro>
@@ -198,4 +198,4 @@ If you'd like to engage with other community members, visit our [New Relic Explo
 
 - [New Relic CLI commands reference](https://github.com/newrelic/newrelic-cli/blob/master/docs/cli/newrelic.md)
 - [New Relic CLI repository on GitHub](https://github.com/newrelic/newrelic-cli)
-- [New Relic documentation](https://docs.newrelic.com)
+- [New Relic documentation](https://docs.newrelic.com)