Merge branch 'develop' of https://github.com/sjyothi54/docs-website i…

…nto NR-231688

.github/workflows/auto-comment.yml

@@ -12,7 +12,7 @@ jobs:
             
             Thanks for your pull request! Your PR is in a queue, and a writer will take a look soon. We generally publish small edits within one business day, and larger edits within three days.
             
-            Gatsby Cloud will automatically generate a preview of your request, and will comment with a link when the preview is ready (usually 20 to 30 minutes).
+            We will automatically generate a preview of your request, and will comment with a link when the preview is ready (usually 10 to 20 minutes). If you add any more commits, you can comment `netlify build` on this PR to update the preview.
 
           issuesOpened: |
             Hi @{{ author }} 👋

.github/workflows/build-notification.yml

@@ -15,7 +15,7 @@ on:
         options:
           - building
           - ready
-          - failed
+          - error
       deployUrl:
         description: URL of live branch deploy
         required: false
@@ -60,7 +60,7 @@ jobs:
           END
               )
               ;;
-            "failed")
+            "error")
               comment_body=$(cat <<-END
           ### <span aria-hidden="true">❌</span> Deploy Preview failed!
 
@@ -92,8 +92,8 @@ jobs:
             -f context='netlify/build' \
             /repos/${{ env.repo }}/statuses/${{ inputs.sha }}
 
-      - name: update PR check - failed
-        if: ${{ inputs.buildStatus == 'failed' }}
+      - name: update PR check - error
+        if: ${{ inputs.buildStatus == 'error' }}
         env: 
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |

.github/workflows/manual-deploy-comment.yml

@@ -3,10 +3,20 @@ name: Netlify build manual deploy comment
 on:
   issue_comment:
     types: [created]
+  pull_request:
+    types: [opened]
 
 jobs:
   deploy-preview:
+    # when a contributor comments 'netlify build',
+    # but only on pull requests, not issues.
+    # or if a contributor opens a PR for the first time.
+    if: |
+       (github.event.comment.body == 'netlify build'
+         && github.event.issue.pull_request)
+         || github.event.action == 'opened'
     runs-on: ubuntu-latest
+
     steps:
       # we use `jq` to parse the GH API response
       - name: setup jq
@@ -15,13 +25,8 @@ jobs:
       - name: send request to Netlify build hook
         env: 
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        # when a contributor comments 'netlify build',
-        # but only on pull requests, not issues
-        if: |
-          contains(github.event.comment.body, 'netlify build')
-          && ${{ github.event.issue.pull_request }}
         run: |
-          gh_api_url=$(echo ${{ github.event.issue.pull_request.url }} | sed 's/https:\/\/api.github.com//')
+          gh_api_url=$(echo ${{ github.event.issue.pull_request.url || github.event.pull_request.url }} | sed 's/https:\/\/api.github.com//')
           gh_api_response=$(gh api $gh_api_url)
           branch_name=$(echo $gh_api_response | jq -r .head.ref)
           sha=$(echo $gh_api_response | jq -r .head.sha)

.gitignore

@@ -88,3 +88,6 @@ yarn-error.log
 .devcontainer
 
 src/images/infrastructure_screenshot_full_sonarqube-dashboard.webp
+
+# Local Netlify folder
+.netlify

CONTRIBUTING.md

@@ -105,8 +105,9 @@ If the workflows are enabled and running, you will want to disable them. You can
 2. Make your changes.
 3. Test your changes! Review the project's [READ ME](README.md) for instructions on how to build and run tests locally.
 4. Submit a `Pull Request` to this project with your changes.
-5. If/when your `PR` is accepted, the automation in this project will build the site and deploy a new version of the code to `docs.newrelic.com`.
-6. And you are done!
+5. A preview will start building automatically when a PR is opened. To update the preview after further commits, leave a comment on the PR that says `netlify build`.
+6. If/when your `PR` is accepted, the automation in this project will build the site and deploy a new version of the code to `docs.newrelic.com`.
+7. And you are done!
 
 ### Submitting a PR from a cloned repo
 
@@ -116,8 +117,9 @@ If the workflows are enabled and running, you will want to disable them. You can
 3. Make your changes.
 4. Test your changes! Review the project's [READ ME](README.md) for instructions on how to build and run tests locally.
 5. Submit a `Pull Request` to this project with your changes.
-6. If/when your `PR` is accepted, the automation in this project will build the site and deploy a new version of the code to `docs.newrelic.com`.
-7. And you are done!
+6. A preview will start building automatically when a PR is opened. To update the preview after further commits, leave a comment on the PR that says `netlify build`.
+7. If/when your `PR` is accepted, the automation in this project will build the site and deploy a new version of the code to `docs.newrelic.com`.
+8. And you are done!
 
 ### Using the `develop` branch
 

gatsby-config.js

@@ -374,7 +374,7 @@ module.exports = {
           },
         },
         layout: {
-          contentPadding: '1.5rem',
+          contentPadding: '5rem',
           maxWidth: '1600px',
           component: require.resolve('./src/layouts'),
           mobileBreakpoint: '760px',
@@ -457,6 +457,28 @@ module.exports = {
                 : '35094418',
             beacon: 'staging-bam-cell.nr-data.net',
             errorBeacon: 'staging-bam-cell.nr-data.net',
+            settings: {
+              session_replay: {
+                enabled: true,
+                block_selector: '',
+                mask_text_selector: '*',
+                sampling_rate: 5.0,
+                error_sampling_rate: 100.0,
+                mask_all_inputs: true,
+                collect_fonts: true,
+                inline_images: false,
+                inline_stylesheet: true,
+                mask_input_options: {},
+              },
+              distributed_tracing: { enabled: true },
+              privacy: { cookies_enabled: true },
+              ajax: {
+                deny_list: [
+                  'staging-bam-cell.nr-data.net',
+                  'docs.newrelic.com',
+                ],
+              },
+            },
           },
         },
         shouldUpdateScroll: {

gatsby-node.js

@@ -244,16 +244,10 @@ exports.createSchemaCustomization = (
     translationType: String
     eolDate: String
     downloadLink: String
-    signupBanner: SignupBanner
     features: [String]
     bugs: [String]
     security: [String]
   }
-  type SignupBanner {
-    cta: String
-    url: String
-    text: String
-  }
 
   `;
 
@@ -366,20 +360,6 @@ exports.createResolvers = ({ createResolvers }) => {
           hasOwnProperty(source, 'security') ? source.security : null,
       },
     },
-    SignupBanner: {
-      cta: {
-        resolve: (source) =>
-          hasOwnProperty(source, 'cta') ? source.cta : null,
-      },
-      url: {
-        resolve: (source) =>
-          hasOwnProperty(source, 'url') ? source.url : null,
-      },
-      text: {
-        resolve: (source) =>
-          hasOwnProperty(source, 'text') ? source.text : null,
-      },
-    },
   });
 };
 

netlify.toml

@@ -4,6 +4,10 @@ package = "@netlify/plugin-gatsby"
 [functions]
   included_files = ["!.cache/data/datastore/data.mdb","!.cache/query-engine"]
 
+[[edge_functions]]
+  path = "/*"
+  function = "osano-country"
+
 [[headers]]
 for = "/*"
 

netlify/edge-functions/osano-country.js

@@ -0,0 +1,53 @@
+import { HTMLRewriter } from 'https://ghuc.cc/worker-tools/html-rewriter/index.ts';
+
+export default async (request, context) => {
+  const response = await context.next();
+  const hasGdpr = new Set([
+    'AT',
+    'BE',
+    'BG',
+    'HR',
+    'CY',
+    'CZ',
+    'DK',
+    'EE',
+    'FI',
+    'FR',
+    'DE',
+    'GR',
+    'HU',
+    'IE',
+    'IT',
+    'LV',
+    'LT',
+    'LU',
+    'MT',
+    'NL',
+    'PL',
+    'PT',
+    'RO',
+    'SK',
+    'SI',
+    'ES',
+    'SE',
+  ]).has(context.geo.country.code);
+
+  if (hasGdpr) {
+    return new HTMLRewriter()
+      .on('script', {
+        element(element) {
+          const scriptSrc = element.getAttribute('src');
+          if (
+            typeof scriptSrc === 'string' &&
+            scriptSrc.startsWith('https://cmp.osano.com/')
+          ) {
+            element.setAttribute(
+              'src',
+              scriptSrc.replace(/variant=one/gi, 'variant=two')
+            );
+          }
+        },
+      })
+      .transform(response);
+  }
+};

package.json

@@ -10,7 +10,7 @@
     "@emotion/styled": "^11.3.0",
     "@mdx-js/mdx": "2.0.0-next.8",
     "@mdx-js/react": "2.0.0-next.8",
-    "@newrelic/gatsby-theme-newrelic": "9.3.0",
+    "@newrelic/gatsby-theme-newrelic": "9.4.2",
     "@splitsoftware/splitio-react": "^1.2.4",
     "ansi-colors": "^4.1.3",
     "cockatiel": "^3.0.0-beta.0",
@@ -220,4 +220,4 @@
   "bugs": {
     "url": "https://github.com/newrelic/docs-website/issues"
   }
-}
+}

src/@newrelic/gatsby-theme-newrelic/components/Logo.js

@@ -12,9 +12,6 @@ const Logo = ({ className, width }) => (
       .text-color {
         fill: #e7f6f6;
       }
-      .hexagon-color {
-        fill: var(--system-text-primary-light);
-      }
       .brand-color {
         fill: #1ce783;
       }
@@ -41,10 +38,6 @@ const Logo = ({ className, width }) => (
       d="M489.06,112.81a11.7,11.7,0,0,0,10.72,6.57c4.08,0,7.7-1.75,7.7-5.56s-3.35-4.36-9.11-5.56-11.79-2.55-11.79-9.72C486.58,92.31,492,88,499.44,88c6.3,0,11.46,3.08,13.53,7.23l-4.28,3.42a10.27,10.27,0,0,0-9.52-5.69c-4,0-6.69,2-6.69,5.15,0,3.29,3.08,3.89,8,5,6,1.41,12.93,2.61,12.93,10.25,0,6.7-6.1,11.12-13.6,11.12-6.37,0-12.73-2.75-15.41-8.17Z"
       transform="translate(-251.43 -50.58)"
     />
-    <polygon
-      className="hexagon-color"
-      points="0 25.33 44.19 0 88.38 25.33 88.38 73.18 44.19 98.52 0 73.18 0 25.33"
-    />
     <path
       className="brand-color"
       d="M283.62,100.83h24v4h-24Zm0,12h18v-4h-18Zm33-27.8v35.8a2,2,0,0,1-2,2h-38a2,2,0,0,1-2-2v-44a2,2,0,0,1,2-2h29.8a2,2,0,0,1,1.42.59l8.19,8.2A2,2,0,0,1,316.62,85Zm-4,33.8v-32h-8v-8h-26v40Zm-29-22h24v-4h-24Z"

src/@newrelic/gatsby-theme-newrelic/components/NavItem.js

@@ -87,26 +87,18 @@ const NavItem = ({
         --nav-link-padding: 1rem;
         display: ${matchesSearch || !searchTerm ? 'block' : 'none'};
         padding-left: ${parent == null ? '8px' : 'var(--nav-link-padding)'};
-        border-left: ${parent == null ? 'none' : 'solid #0D374A 2px'};
-        span {
-          font-weight: 700;
-        }
-        ${depth > 0 &&
-        css`
-          span {
-            font-weight: 600;
-          }
-        `}
-        ${depth > 1 &&
+        border-left: ${parent == null
+          ? 'none'
+          : 'solid var(--system-background-hover-dark) 2px'};
+
+        ${isExpanded &&
+        depth === 0 &&
         css`
-          border-left: solid rgba(231, 246, 246, 0.1) 2px;
-          span {
-            font-weight: 500;
-          }
+          span,
+          svg {
+            color: white;
+            opacity: 1;
         `}
-        a > div > span {
-          font-weight: 400;
-        }
 
         ${mobileBreakpoint &&
         css`
@@ -138,7 +130,9 @@ const NavItem = ({
           padding-left: ${root?.icon
             ? 'calc(var(--icon-size) + var(--icon-spacing))'
             : 'var(--nav-link-padding)'};
-
+          &:hover {
+            background: var(--system-background-hover-dark);
+          }
           ${mobileBreakpoint &&
           css`
             @media screen and (max-width: ${mobileBreakpoint}) {
@@ -149,7 +143,10 @@ const NavItem = ({
           `}
           ${isCurrentPage &&
           css`
-            background: #0d374a;
+            background: var(--system-background-hover-dark);
+            span {
+              font-weight: 600;
+            }
           `}
         `}
       >

src/@newrelic/gatsby-theme-newrelic/components/NavLink.js

@@ -45,7 +45,6 @@ const NavLink = ({
         margin: 0 calc(var(--nav-link-padding) * -1);
         font-size: 0.875rem;
         text-decoration: none;
-        border-radius: 0.25rem;
 
         &:hover {
           color: var(--secondary-text-color);