fix: fix nav merge conflict

CHANGELOG.md

@@ -1,3 +1,22 @@
+# [1.40.0](https://github.com/newrelic/developer-website/compare/v1.39.0...v1.40.0) (2021-04-02)
+
+
+### Bug Fixes
+
+* **logo:** remove  rogue semicolons so fill colors render ([8fca904](https://github.com/newrelic/developer-website/commit/8fca9042375123d847220c16431aac27a982090e))
+
+
+### Features
+
+* **logo:** update logo in side nav and footer ([8e6e205](https://github.com/newrelic/developer-website/commit/8e6e205765d9d2a7e6fe7d71a71e620fea309a1c))
+
+# [1.39.0](https://github.com/newrelic/developer-website/compare/v1.38.0...v1.39.0) (2021-03-29)
+
+
+### Features
+
+* **embeds:** create embed pages ([e84f1e8](https://github.com/newrelic/developer-website/commit/e84f1e895a3c1d3240845943ceb54fcc61e7245f))
+
 # [1.38.0](https://github.com/newrelic/developer-website/compare/v1.37.0...v1.38.0) (2021-03-24)
 
 

COMPONENT_GUIDE.md

@@ -168,95 +168,191 @@ A step description
 
 > Note: keep in mind that a new line is necessary after an `img` tag to ensure proper rendering of subsequent text/markdown.
 
-# Tutorial 
+# Tutorial
 
 ## Usage
 
-The `<Tutorial/>` component can be used to help a user step through changes in code by highlighting the difference between each step. It utilizes children `<Steps>` and `<Step>` components to find codeblocks with new code based off of the starting code. You can set the starting code as the first child of the `<Tutorial>` with the `<Project>` component. In order to use the tutorial component, you must set a `fileName` for your codeblocks so that the parser can find the corresponding codeblocks with changes in them. 
+You can use the `Tutorial` component walk a user through changes in code by automatically highlighting the difference between each step.
+
+### Define your starting codebase
+
+First, use a `Project` component to define your starting codebase:
 
 ````md
-  <Tutorial>
+<Tutorial>
+
+<Project>
+
+```jsx fileName=first-file.js
+const myCode = "here is my first file"
+```
 
-  <Project>
+```jsx fileName=second-file.js
+const myCode = "here is my second file"
+```
 
-  ```jsx fileName="myfile.js"
-  const myCode = "here is my starting code" 
-  ```
+</Project>
 
-  </Project>
+</Tutorial>
+````
 
-  ## Here is my tutorial! 
+In order to use the tutorial component, you must set a `fileName` for your codeblocks so that the parser can find the corresponding codeblocks with changes in them.
 
-  <Steps>
+Note that you can set up multiple code files in your `Project` component. The parser will track changes in each of the codeblocks throughout the `Tutorial`. Each codeblock is presented in its own tab, which mimics how a user might actually edit these files in their IDE.
 
-  <Step>
+### Update code in tutorial steps
 
-  ```jsx fileName="myfile.js"
-  const myCode = "here is my code" 
-  const myNewCode = "here is my new code"
-  ```
+Use `Steps` to show changes to your starting files:
 
-  </Step>
+````md
+<Tutorial>
 
-  <Step>
+<Project>
 
-  ```jsx fileName="myfile.js"
-  const myCode = "here is my code" 
-  const myNewCode = "here is my new code"
-  const evenMoreNewCode = "he is even more new code"
-  ```
+```jsx fileName=first-file.js
+const myCode = "here is my first file"
+```
 
-  </Step>
+```jsx fileName=second-file.js
+const myCode = "here is my second file"
+```
+
+</Project>
+
+## Here is my tutorial!
+
+<Steps>
+
+<Step>
+
+Update your first file:
+
+```jsx fileName=first-file.js
+const myCode = "here is my first file"
+const myNewCode = "here is my new code"
+```
+
+</Step>
+
+<Step>
+
+Update your second file:
+
+```jsx fileName=second-file.js
+const myCode = "here is my second file"
+const myNewCode = "here is my new code"
+```
+
+</Step>
+
+<Step>
+
+Update your first file again:
+
+```jsx fileName=first-file.js
+const myCode = "here is my first file"
+const myNewCode = "here is my new code"
+const evenMoreNewCode = "here is even more new code"
+```
+
+</Step>
+
+</Steps>
 
-  </Tutorial>
+</Tutorial>
 ````
 
-In this example, for the first step the second line (`myNewCode`) will be highlighted, and for the second step, the third line (`evenMoreNewCode`) will be highlighted.
+In the first step's rendered codeblock, the second line (`myNewCode`) in _first-file.js_ will be highlighted. In the second step, the second line (`myNewCode`) in second-file.js_ will be highlighted. In the third step, the third line (`evenMoreNewCode`) iin _first-file.js_ will be highlighted.
 
-You can also pass in multiple codeblocks to the `<Project>` component and the parser will track all changes in each of the codeblocks. The multiple codeblocks will show up as tabs of the same editor, mimicking how a user might actually be editing these files in their IDE. For example: 
+Even though a single file is highlighted in each step, all files are rendered in tabs for each step on the page. Your reader can then toggle between the files to see what the current state of the whole codebase is.
+
+## Things to keep in mind
+
+Here are some things to keep in mind when using the `Tutorial` component in your developer guides.
+
+### Only change code in one file per step
+
+While every file is shown in a tabulated codeblock in every step, you can only change code in one file per step. This is because when you include a file change in a `Tutorial` step, the file that was changed is presented first in the tabulated codeblock.
+
+`Tutorial` doesn't know how to render a tabulated codeblock when multiple files are changed in the same step:
 
 ````md
-  <Tutorial>
+<Tutorial>
+
+<Project>
+
+```jsx fileName=first-file.js
+const myCode = "here is my first file"
+```
+
+```jsx fileName=second-file.js
+const myCode = "here is my second file"
+```
+
+</Project>
+
+## Here is my tutorial!
+
+<Steps>
+
+<Step>
+
+Update your first file and second file in the same step:
+
+```jsx fileName=first-file.js
+const myCode = "here is my first file"
+const myNewCode = "here is my new code"
+```
+
+```jsx fileName=second-file.js
+const myCode = "here is my second file"
+const myNewCode = "here is my new code"
+```
+
+</Step>
+
+</Steps>
+
+</Tutorial>
+````
 
-  <Project>
+This won't render properly in your guide.
 
-  ```jsx fileName="myfile.js"
-  const myCode = "here is my starting code" 
-  ```
+### `Tutorial` doesn't show subtractive changes
 
-  ```css fileName="mystyles.css"
-  .myStyle {
-    color: blue;
-  } 
-  ```
+Some code diff tools show additive changes (you created a new line) and subtractive changes (you deleted a line). `Tutorial` doesn't call to attention any code deletions.
 
-  </Project>
+````md
+<Tutorial>
 
-  ## Here is my tutorial! 
+<Project>
 
-  <Steps>
+```jsx fileName=first-file.js
+const myCode = "here is my first file"
+const moreCode = "here is more code"
+const evenMoreCode = "here is even more code"
+```
 
-  <Step>
+</Project>
 
-  ```jsx fileName="myfile.js"
-  const myCode = "here is my code" 
-  const myNewCode = "here is my new code"
-  ```
+## Here is my tutorial!
 
-  </Step>
+<Steps>
 
-  <Step>
+<Step>
 
-  ```css fileName="mystyles.css"
-  .myStyle {
-    color: blue;
-    font-size: 1000px;
-  } 
-  ```
+Delete `moreCode`:
 
-  </Step>
+```jsx fileName=first-file.js
+const myCode = "here is my first file"
+const evenMoreCode = "here is even more code"
+```
+
+</Step>
+
+</Steps>
 
-  </Tutorial>
+</Tutorial>
 ````
 
-In this example, in the first step, line 2 will be highlighted (`myNewCode`) and in the second step, line 3 will be highlighted (`font-size: 1000px`). Both steps will have both files, where as the default file shown will be `myfile.js` for the first step and `mystyles.css` for the second step. Users can toggle between the two files to see what the current state of the code is.
+In this case, `Tutorial` will show _first-file.js_, but it won't indicate that the second constant (`moreCode`) was removed.

CONTRIBUTING.md

@@ -83,7 +83,7 @@ you can use the Github `Edit This File` button to submit a change.
 
 ### Cloning vs Forking
 
-To be able to [Clone](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) this repository and contribute you will need to be given write access to the repository. This is reserved for New Relic Employees only. Contact the Developer Experience team (developer-website-content Slack channel) if you need write access.
+To be able to [Clone](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) this repository and contribute you will need to be given write access to the repository. This is reserved for New Relic Employees only. Contact the Developer Experience team (#help-deven-websites Slack channel) if you need write access.
 
 As a non New Relic employee you can [Fork](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) the repository and contribute as needed.
 

STYLE_GUIDE.md

@@ -39,6 +39,7 @@
     - [GuideTemplate Frontmatter slugs](#guidetemplate-frontmatter-slugs)
     - [GuideTemplate Frontmatter example](#guidetemplate-frontmatter-example)
   - [Reusable components](#reusable-components)
+  - [Embed guides](#embed-guides)
   - [Grammar and formatting](#grammar-and-formatting)
     - [Format titles](#format-titles)
     - [Format headers](#format-headers)
@@ -339,6 +340,22 @@ tags:
 In order to drive simplicity and ease of use New Relic has provided a set of reusable components you can leverage
 when creating documentation. Refer to our [Component Guide](COMPONENT_GUIDE.md) for more information.
 
+## Embed guides
+
+Each guide on the site (in frontmatter `template: GuideTemplate`) has an embed page automatically generated. The page URL has the same path as the guide with `/embed` appended to the end. The embed page contains only the body content of the `.mdx` file and no other site components (nav, header, footer, etc). The page defaults to light mode.
+
+### Example
+
+If there's a guide with this URL:
+
+    https://developer.newrelic.com/path/to/guide
+
+The embed page URL would be:
+
+    https://developer.newrelic.com/path/to/guide/embed
+
+You can use the embed URL in an `<iframe src=EMBED_URL />` on another site to display guide content.
+
 ## Grammar and formatting
 
 ### Format titles

gatsby-browser.js

@@ -49,24 +49,4 @@ const onInitialClientRender = () => {
   }
 };
 
-const onRouteUpdate = ({ location }) => {
-  if (process.env.NODE_ENV !== `production` || typeof ga !== `function`) {
-    return null;
-  }
-
-  // wrap inside a timeout to make sure react-helmet is done with it's changes (https://github.com/gatsbyjs/gatsby/issues/9139)
-  // reactHelmet is using requestAnimationFrame: https://github.com/nfl/react-helmet/blob/5.2.0/src/HelmetUtils.js#L296-L299
-  const sendPageView = () => {
-    const pagePath = location
-      ? location.pathname + location.search + location.hash
-      : undefined;
-    window.ga(`set`, `page`, pagePath);
-    window.ga(`send`, `pageview`);
-  };
-
-  // Minimum delay for reactHelmet's requestAnimationFrame
-  setTimeout(sendPageView, 32);
-
-  return null;
-};
-export { onRouteUpdate, wrapPageElement, onInitialClientRender };
+export { wrapPageElement, onInitialClientRender };

gatsby-config.js

@@ -16,19 +16,12 @@ module.exports = {
     {
       resolve: '@newrelic/gatsby-theme-newrelic',
       options: {
-        gaTrackingId: 'UA-3047412-33',
         layout: {
           contentPadding: '2rem',
           maxWidth: '1700px',
           component: require.resolve('./src/layouts'),
           mobileBreakpoint: '760px',
         },
-        // workaround until this is no longer needed.
-        // https://github.com/newrelic/gatsby-theme-newrelic/issues/302
-        i18n: {
-          translationsPath: `${__dirname}/src/i18n/translations`,
-          additionalLocales: [],
-        },
         prism: {
           languages: ['yaml', 'sass', 'scss', 'java'],
         },
@@ -102,6 +95,20 @@ module.exports = {
             },
           },
         },
+        tessen: {
+          product: 'DEV',
+          subproduct: 'TDEV',
+          segmentWriteKey: 'Ako0hclX8WGHwl9rm4n5uxLtT4wgEtuU',
+          trackPageViews: true,
+          pageView: {
+            name: 'pageView',
+            category: 'DocPageView',
+            getProperties: ({ location, env }) => ({
+              path: location.pathname,
+              env: env === 'production' ? 'prod' : env,
+            }),
+          },
+        },
       },
     },
     'gatsby-plugin-sass',
@@ -155,6 +162,7 @@ module.exports = {
         release: 'release-2046',
       },
     },
+    'gatsby-plugin-embed-pages',
     'gatsby-plugin-meta-redirect',
     {
       resolve: 'gatsby-plugin-gdpr-tracking',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "developer-website",
   "private": true,
-  "version": "1.38.0",
+  "version": "1.40.0",
   "dependencies": {
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",