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