Merge pull request #1877 from newrelic/develop

Release 🚀

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.68.3](https://github.com/newrelic/developer-website/compare/v1.68.2...v1.68.3) (2021-11-08)
+
+
+### Bug Fixes
+
+* added white background for quickstart icons ([f4cec54](https://github.com/newrelic/developer-website/commit/f4cec5476202346aeac42b40182ad1b7c02f1d7c))
+
+## [1.68.2](https://github.com/newrelic/developer-website/compare/v1.68.1...v1.68.2) (2021-11-05)
+
+
+### Bug Fixes
+
+* fix for install button having signup as link too often ([d74c7fd](https://github.com/newrelic/developer-website/commit/d74c7fd69f850e79e8067e8323e454baba72fdbd))
+
 ## [1.68.1](https://github.com/newrelic/developer-website/compare/v1.68.0...v1.68.1) (2021-11-03)
 
 

COMPONENT_GUIDE.md

@@ -20,7 +20,7 @@ It takes the title provided in the front matter and accepts plain text for the d
 ```
 ---
 path: '/example'
-duration: '30 min'
+duration: 30
 title: 'Example Guide'
 template: 'GuideTemplate'
 description: 'Example guide page'

CONTRIBUTING.md

@@ -45,6 +45,8 @@
   - [Updating the SDK documentation bundle](#updating-the-sdk-documentation-bundle)
     - [Step 1: Update the release number in `gatsby-config`](#step-1-update-the-release-number-in-gatsby-config)
     - [Step 2: Add any new APIs or components to our constants list](#step-2-add-any-new-apis-or-components-to-our-constants-list)
+      - [How to identify new components, APIs](#how-to-identify-new-components-apis)
+      - [Adding new components](#adding-new-components)
     - [Step 3: Add any new APIs or components to the navigation](#step-3-add-any-new-apis-or-components-to-the-navigation)
 
 <!-- /TOC -->
@@ -401,16 +403,27 @@ need to happen:
 - We use a [local Gatsby plugin `gatsby-source-newrelic-sdk`](https://github.com/newrelic/developer-website/tree/develop/plugins/gatsby-source-newrelic-sdk)
   to source our documentation into GraphQL. This plugin has some configuration that tells it what release number to use.
 
-- [Update `gatsby-config.js`](https://github.com/newrelic/developer-website/blob/ae42737f5f1cf556f3c44d864655c9a571739e28/gatsby-config.js#L161)
+- [Update `gatsby-config.js`](https://github.com/newrelic/developer-website/blob/develop/gatsby-config.js#L198)
   with the new release number to update the bundle release version.
 
-- To obtain the version release number visit the `one-core` repository on Github enterprise and look at the release version in `sdk-loader.js`. You can use the one-core site to confirm if any issues are developer site specific or occurring in the SDK.
+  ```json
+  {
+      resolve: 'gatsby-source-newrelic-sdk',
+      options: {
+        release: 'release-3250',
+      },
+  }
+  ```
+
+- To obtain the version release number visit the `one-core` repository on Github enterprise and look at the release version in `one-core/src/constants/sdk.js `. You can use the one-core docs site to confirm if any issues are developer site specific or occurring in the SDK.
 
 ### Step 2: Add any new APIs or components to our constants list
 
 #### How to identify new components, APIs
 
-At the moment, we don't have a rigorous or automatic process for identifying new components and APIs that we need to document. The goto manual process is to just eyeball the difference between the components we have on the site (or in constants.js), and what's displayed on the one-core site.
+At the moment, we don't have a rigorous or automatic process for identifying new components and APIs that we need to document. The goto manual process is to just eyeball the difference between the components we have on the site (or in `constants.js`), and what's displayed on the one-core site.
+
+You can also check a file that resides in the One Core repository found in `/src/__snapshots__/index.spec.js.snap` that provides a visual check for SDK components and their levels of exposure.
 
 It is possible to see a list of components from the SDK itself. If you run the site with the updated SDK version, you can enter `Object.entries(window.__NR1_SDK__.default).map(array => array[0])` into the dev console in the browser for the running site. That will show you an array containing component and API names. You can use this to try and compare differences, but some manual investigation is still necessary, since the SDK also contains pre-release and internal-only components.
 

STYLE_GUIDE.md

@@ -286,7 +286,7 @@ The value that is assigned to the key slug is used in order to navigate to your
 ### GuideTemplate Frontmatter slugs
 
 - `path`: the relative path to the file
-- `duration`: the estimated time to complete the exercise
+- `duration`: the estimated time to complete the exercise in minutes
 - `title`: the title of the page
 - `template`: the Gatsby template used
 - `description`: the description of the page
@@ -312,7 +312,7 @@ The value that is assigned to the key slug is used in order to navigate to your
 ```md
 ---
 path: '/build-apps/add-time-picker-guide'
-duration: '20 min'
+duration: 20
 title: 'Add the time picker to a sample application'
 template: 'GuideTemplate'
 description: 'Learn how to add a time picker to a sample application'

gatsby-config.js

@@ -1,4 +1,5 @@
 const quote = (str) => `"${str}"`;
+const resolveQuickstartSlug = require('./src/utils/resolveQuickstartSlug');
 
 module.exports = {
   flags: {
@@ -59,10 +60,23 @@ module.exports = {
             refetch: Boolean(process.env.BUILD_RELATED_CONTENT),
             engineKey: 'Ad9HfGjDw4GRkcmJjUut',
             limit: 5,
-            getSlug: ({ node }) => node.frontmatter?.path,
+            getSlug: ({ node }) => {
+              if (node.internal.type === 'Mdx') {
+                return node.frontmatter.path;
+              } else if (node.internal.type === 'Quickstarts') {
+                return resolveQuickstartSlug(node.name, node.id);
+              }
+            },
             getParams: ({ node }) => {
-              const { tags, title } = node.frontmatter;
-
+              let tags = [];
+              let title = '';
+              if (node.frontmatter) {
+                tags = node.frontmatter.tags;
+                title = node.frontmatter.title;
+              } else {
+                tags = node.keywords;
+                title = node.title;
+              }
               return {
                 q: tags ? tags.map(quote).join(' OR ') : title,
                 search_fields: {
@@ -87,7 +101,8 @@ module.exports = {
               };
             },
             filter: ({ node }) =>
-              node.frontmatter?.template === 'GuideTemplate',
+              node.frontmatter?.template === 'GuideTemplate' ||
+              node.internal.type === 'Quickstarts',
           },
         },
         newrelic: {
@@ -196,7 +211,7 @@ module.exports = {
     {
       resolve: 'gatsby-source-newrelic-sdk',
       options: {
-        release: 'release-3250',
+        release: 'release-3366',
       },
     },
     'gatsby-plugin-embed-pages',

gatsby-node.js

@@ -1,7 +1,7 @@
 const path = require(`path`);
 const { execSync } = require('child_process');
 const { createFilePath } = require('gatsby-source-filesystem');
-const slugify = require('./src/utils/slugify.js');
+const resolveQuickstartSlug = require('./src/utils/resolveQuickstartSlug.js');
 
 const kebabCase = (string) =>
   string
@@ -208,7 +208,7 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
     createNodeField({
       node,
       name: 'slug',
-      value: `/instant-observability/${slugify(node.name)}/${node.id}`,
+      value: `${resolveQuickstartSlug(node.name, node.id)}`,
     });
   }
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "developer-website",
   "private": true,
-  "version": "1.68.1",
+  "version": "1.68.3",
   "dependencies": {
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.3.0",
@@ -123,4 +123,4 @@
     "url": "https://github.com/newrelic/developer-website/issues"
   },
   "snyk": true
-}
+}

src/components/DevSiteSeo.js

@@ -19,15 +19,17 @@ function DevSiteSeo({ description, meta, title, tags, location, type }) {
   );
 
   const crazyEgg = (location) => {
-    if (location.pathname === '/instant-observability/') {
+    if (
+      location.pathname === '/' ||
+      location.pathname === '/instant-observability/'
+    )
       return (
         <script
           type="text/javascript"
           src="//script.crazyegg.com/pages/scripts/0045/9836.js"
           async="async"
         />
       );
-    }
   };
 
   const metaDescription = description || site.siteMetadata.description;

src/components/FeaturedGuideTile.js

@@ -65,8 +65,7 @@ const FeaturedGuideTile = ({
           `}
           name="fe-clock"
         />
-
-        {duration}
+        {duration} min
       </div>
     </div>
     <h3

src/components/GuideTile/GuideTile.js

@@ -8,7 +8,7 @@ const GuideTile = ({ duration, title, description, className, to }) => (
     as={Link}
     to={to}
     className={className}
-    base={Surface.BASE.PRIMARY}
+    base={Surface.BASE.SECONDARY}
     interactive
     css={css`
       display: grid;
@@ -19,39 +19,14 @@ const GuideTile = ({ duration, title, description, className, to }) => (
       transition: all 0.15s ease-out;
     `}
   >
-    <div
+    <h3
       css={css`
-        display: grid;
-        grid-template-columns: 1fr auto;
-        grid-gap: 0.5rem;
-        align-items: baseline;
+        font-size: 1rem;
+        margin-bottom: 0.5rem;
       `}
     >
-      <h3>{title}</h3>
-      <div
-        css={css`
-          font-size: 0.75rem;
-          display: flex;
-          align-items: center;
-          text-align: right;
-          color: var(--accent-text-color);
-          padding: 0.3rem 0 0.2rem 1.2rem;
-          justify-self: end;
-        `}
-      >
-        {duration ? (
-          <Icon
-            css={css`
-              margin-right: 0.25rem;
-            `}
-            name="fe-clock"
-          />
-        ) : (
-          <span>&nbsp;</span>
-        )}
-        {duration}
-      </div>
-    </div>
+      {title}
+    </h3>
     <p
       css={css`
         font-size: 0.875rem;
@@ -63,6 +38,23 @@ const GuideTile = ({ duration, title, description, className, to }) => (
     >
       {description}
     </p>
+
+    {duration && (
+      <div
+        css={css`
+          font-size: 0.75rem;
+          display: inline-flex;
+          gap: 0.25rem;
+          align-items: center;
+          color: var(--accent-text-color);
+          border-radius: 0.25rem;
+          justify-self: start;
+        `}
+      >
+        <Icon name="fe-clock" />
+        {duration} min
+      </div>
+    )}
   </Surface>
 );
 

src/components/PackTile.js

@@ -83,10 +83,10 @@ const PackTile = ({
           object-fit: scale-down;
           width: ${view === VIEWS.GRID ? 100 : 25}%;
           padding: 0 ${view === VIEWS.GRID ? 5 : 1}%;
-          margin: 10px auto;
+          margin: 0 auto 10px;
 
           .dark-mode & {
-            background-color: rgb(231 231 231 / 0);
+            background-color: white;
           }
 
           ${view === VIEWS.LIST &&

src/data/nav.yml

@@ -169,7 +169,7 @@
       url: https://opensource.newrelic.com/nerdpacks/
 
 - title: Contribute to quickstarts
-  icon: zap
+  icon: fe-zap
   url: '/contribute-to-quickstarts'
   pages:
     - title: Build a quickstart
@@ -493,7 +493,7 @@
         - title: All things open
           url: '/all-things-open'
 - title: Instant Observability
-  icon: box
+  icon: fe-box
   url: '/instant-observability'
 - title: Nerd Bytes
   icon: nr-nerd-bytes

src/markdown-pages/automate-workflows/5-mins-tag-resources.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/5-mins-tag-resources'
-duration: '5 min'
+duration: 5
 title: 'Quickly tag a set of resources'
 template: 'GuideTemplate'
 description: 'Add tags to applications you instrument for easier filtering and organization.'

src/markdown-pages/automate-workflows/automated-tagging.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/automated-tagging'
-duration: '30 min'
+duration: 30
 title: 'Automate tagging of your entire stack'
 template: 'GuideTemplate'
 description: 'A quick demo application that automates the provisioning, deployment, instrumentation, and tagging of a simple app.'

src/markdown-pages/automate-workflows/diagnose-problems/error-alerts.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/diagnose-problems/error-alerts'
-duration: '20 min'
+duration: 20
 title: 'Diagnose error alerts'
 template: 'GuideTemplate'
 description: 'Learn how to use New Relic to diagnose error alerts in your services.'
@@ -255,4 +255,5 @@ Now, as a Telco Lite developer, you have enough information to debug the issue c
 
 This procedure is part of a lab that teaches you how to diagnose common issues using New Relic. Now that you've diagnosed all the issues affecting Telco Lite, [tear down your services](/automate-workflows/diagnose-problems/tear-down).
 
-</Callout>
+</Callout>
+

src/markdown-pages/automate-workflows/diagnose-problems/high-response-times.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/diagnose-problems/high-response-times'
-duration: '15 min'
+duration: 15
 title: 'Diagnose high response time'
 template: 'GuideTemplate'
 description: 'Learn how to use New Relic to diagnose high response times in your services.'

src/markdown-pages/automate-workflows/diagnose-problems/spin-up-acme.mdx

@@ -3,7 +3,7 @@ path: '/automate-workflows/diagnose-problems/spin-up-acme'
 title: 'Spin up Acme Telco Lite architecture'
 template: 'GuideTemplate'
 description: 'Set up your your environment to deploy Acme Telco Lite.'
-duration: '15 min'
+duration: 15
 procIdx: 1
 ---
 

src/markdown-pages/automate-workflows/diagnose-problems/tear-down.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/diagnose-problems/tear-down'
-duration: '15 min'
+duration: 15
 title: 'Tear Down Telco Lite'
 template: 'GuideTemplate'
 description: 'Once you finish diagnosing all the issues affecting Telco Lite, tear down your services.'

src/markdown-pages/automate-workflows/diagnose-problems/view-your-services.mdx

@@ -3,7 +3,7 @@ path: '/automate-workflows/diagnose-problems/view-your-services'
 title: 'View your services'
 template: 'GuideTemplate'
 description: 'View your services in New Relic to diagnose the problem.'
-duration: '5 min'
+duration: 5
 procIdx: 2
 ---
 

src/markdown-pages/automate-workflows/get-started-kubernetes.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/get-started-kubernetes'
-duration: '20 min'
+duration: 20
 title: 'Set up New Relic using the Kubernetes operator'
 template: 'GuideTemplate'
 description: 'Learn how to provision New Relic resources using the [Kubernetes operator](https://github.com/newrelic/newrelic-kubernetes-operator).'

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

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/get-started-new-relic-cli'
-duration: '20 min'
+duration: 20
 title: 'Get started with the New Relic CLI'
 template: 'GuideTemplate'
 description: 'Learn the essentials of the New Relic CLI, from install and configuration to basic usage.'

src/markdown-pages/automate-workflows/get-started-terraform.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/get-started-terraform'
-duration: '30 min'
+duration: 30
 title: 'Getting started with New Relic and Terraform'
 template: 'GuideTemplate'
 description: 'Learn how to provision New Relic resources using [Terraform](https://www.terraform.io/).'