Merge branch 'develop' into NR-310861

.github/CODEOWNERS

@@ -1,21 +1,21 @@
 # .github directory & its subdirectories
-/.github/ @newrelic/docs-engineering
+/.github/ @newrelic/DOCS-ENG
 
 # Changes to yarn.lock & package.json file
-package.json @newrelic/docs-engineering
-yarn.lock @newrelic/docs-engineering
+package.json @newrelic/DOCS-ENG
+yarn.lock @newrelic/DOCS-ENG
 
 # all javascript files
-*.js @newrelic/docs-engineering
+*.js @newrelic/DOCS-ENG
 
-/plugins/ @newrelic/docs-engineering
+/plugins/ @newrelic/DOCS-ENG
 
 # .github directory & its subdirectories
-/scripts/ @newrelic/docs-engineering
+/scripts/ @newrelic/DOCS-ENG
 
 # Whats new files (pings individual project marketing managers)
 
 /src/content/whats-new/ @john-withers @aalfano7
 
 # Otel files
-/src/docs/more-integrations/open-source-telemetry-integrations/opentelemetry/ @newrelic/opentelemetry-community
+/src/content/docs/opentelemetry @newrelic/OTELCOMM

.github/auto_assign.yml

@@ -7,10 +7,10 @@ reviewers:
   - rhetoric101
   - ally-sassman
   - jeff-colucci
-  - bradleycamacho
   - nbaenam
   - cbehera-newrelic
   - akristen
+  - adutta-newrelic
 
 # A number of reviewers added to the pull request
 # Set 0 to add all the reviewers (default: 0)

.github/workflows/check-translations-and-deserialize.yml

@@ -77,7 +77,7 @@ jobs:
           base: develop
           delete-branch: true
           reviewers: jmiraNR
-          team-reviewers: docs-engineering
+          team-reviewers: DOCS-ENG
 
       - name: Remove Completed Batches From Queue
         if: steps.fetch-deserialize.outputs.successfulTranslations != 0 && steps.create-pr.outcome == 'success'
@@ -150,7 +150,7 @@ jobs:
           base: develop
           delete-branch: true
           reviewers: jmiraNR
-          team-reviewers: docs-engineering
+          team-reviewers: DOCS-ENG
 
       - name: Remove Completed Batches From Queue
         if: steps.fetch-deserialize.outputs.successfulTranslations != 0 && steps.create-pr.outcome == 'success'

.github/workflows/update-attribute-dictionary-json.yml

@@ -56,4 +56,4 @@ jobs:
           body: ''
           base: develop
           delete-branch: true
-          team-reviewers: docs-engineering
+          team-reviewers: DOCS-ENG

.github/workflows/update-whats-new-ids.yml

@@ -29,7 +29,7 @@ jobs:
           node-version: 22.4
 
       - name: Install dependencies
-        run: yarn add [email protected] [email protected]
+        run: yarn add vfile-glob@^1.0.0 to-vfile@^6.1.0
 
       - name: Generate new IDs
         run: yarn run generate-whatsnew-ids
@@ -43,10 +43,16 @@ jobs:
           git diff-index --quiet HEAD ./src/data/whats-new-ids.json || git commit -m 'chore(whats-new-ids): updated ids'
           echo "commit=true" >> $GITHUB_OUTPUT
 
-        # Push directly to the `develop` branch so we get the changes included in the release PR
-      - name: Push Commit
+      - name: Create Pull Request
+        id: create-pr
         if: steps.commit-changes.outputs.commit == 'true'
-        uses: ad-m/[email protected]
+        uses: peter-evans/create-pull-request@v5
         with:
-          github_token: ${{ secrets.DOCS_ENG_BOT_TOKEN }}
-          branch: develop
+          token: ${{ secrets.DOCS_ENG_BOT_TOKEN }}
+          title: Updated whats new ids
+          body: ''
+          branch: whats-new-id
+          branch-suffix: short-commit-hash
+          base: develop
+          delete-branch: true
+          team-reviewers: DOC

gatsby-config.js

@@ -131,7 +131,7 @@ module.exports = {
             resolve: 'gatsby-remark-images',
             options: {
               maxWidth: 850,
-              linkImagesToOriginal: false,
+              linkImagesToOriginal: true,
               backgroundColor: 'transparent',
               disableBgImageOnAlpha: true,
             },

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.8.1",
+    "@newrelic/gatsby-theme-newrelic": "9.10.6",
     "@splitsoftware/splitio-react": "^1.2.4",
     "ansi-colors": "^4.1.3",
     "cockatiel": "^3.0.0-beta.0",
@@ -189,7 +189,7 @@
   "scripts": {
     "add-files-to-translate": "node scripts/actions/add-files-to-translation-queue.js",
     "build:production": "ENVIRONMENT=production yarn run build",
-    "build": "node scripts/createNetlifyRedirects.mjs & NODE_OPTIONS='--max-old-space-size=5120' gatsby build --prefix-paths",
+    "build": "scripts/build.sh",
     "check-for-outdated-translations": "node scripts/actions/check-for-outdated-translations.js",
     "clean": "gatsby clean",
     "convert-to-webp": "node scripts/convertPNGs.mjs",

scripts/actions/webdriver-desktop.mjs

@@ -98,7 +98,9 @@ const navTest = async () => {
 };
 
 const searchTest = async () => {
-  const [searchInput] = await waitForXPath('//aside//input');
+  const [searchInput] = await waitForXPath(
+    './/input[@placeholder="Search docs"]'
+  );
   console.log('\nClicking search input');
   await searchInput.click();
   const activeEl = await driver.executeScript('return document.activeElement');

scripts/actions/webdriver-mobile.mjs

@@ -47,7 +47,8 @@ const main = async () => {
   await driver.get(testUrl + 'docs/mdx-test-page/');
   await navTest();
   await collapserTest();
-  await searchTest();
+  // TODO: reenable after fixing mobile search focus behavior
+  // await searchTest();
 
   // this step isn't necessary in synthetics
   await driver.quit();
@@ -106,7 +107,7 @@ const navTest = async () => {
 };
 
 const searchTest = async () => {
-  const [searchButton] = await waitForXPath('//a[contains(@href, "?q=")]');
+  const [searchButton] = await waitForXPath('.//*[@id="mobile-search-expand"]');
   console.log('\nClicking search input');
   await searchButton.click();
   // sleep is required here on mobile to account for the click delay

scripts/build.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+if [[ -z "${BUILD_LANG}" ]]; then
+  echo "BUILD_LANG env var required 🥸 set BUILD_LANG=en for a default build"
+  exit 1
+else 
+ exec node scripts/createNetlifyRedirects.mjs & NODE_OPTIONS='--max-old-space-size=5120' gatsby build --prefix-paths
+fi

src/components/HomepageBanner.js

@@ -1,20 +1,13 @@
-import React, { useState } from 'react';
-import { navigate } from '@reach/router';
+import React from 'react';
 
 import { css } from '@emotion/react';
-import {
-  Link,
-  SearchInput,
-  useTranslation,
-  addPageAction,
-} from '@newrelic/gatsby-theme-newrelic';
+import { useTranslation } from '@newrelic/gatsby-theme-newrelic';
 import bannerBackground from 'images/bannerBackground.svg';
 
 const HomepageBanner = () => {
-  const bannerHeight = '250px';
+  const bannerHeight = '200px';
   const mobileBreakpoint = '450px';
   const { t } = useTranslation();
-  const [searchTerm, setSearchTerm] = useState('');
 
   return (
     <section
@@ -26,30 +19,28 @@ const HomepageBanner = () => {
         background-size: cover;
         background-position: center;
         display: flex;
-        flex-direction: column;
         align-items: center;
         min-height: ${bannerHeight};
+        justify-content: center;
 
         @media screen and (max-width: 550px) {
           justify-content: center;
           background-size: 150%;
           background-position: center 20px;
         }
         @media screen and (max-width: ${mobileBreakpoint}) {
-          min-height: 200px;
           background-size: 200%;
           background-position: center 8px;
         }
       `}
     >
       <h1
         css={css`
-          font-size: 2.5rem;
+          font-size: 3rem;
           font-weight: 500;
           color: #1ce783;
-          padding-top: 3rem;
-          margin-bottom: 1.5rem;
           text-align: center;
+          margin: 0 20px;
 
           line-height: 1;
           @media screen and (max-width: 550px) {
@@ -63,75 +54,6 @@ const HomepageBanner = () => {
       >
         {t('strings.home.pageTitle')}
       </h1>
-      <SearchInput
-        placeholder={t('strings.home.search.placeholder')}
-        size={SearchInput.SIZE.MEDIUM}
-        value={searchTerm || ''}
-        iconName={SearchInput.ICONS.SEARCH}
-        isIconClickable
-        alignIcon={SearchInput.ICON_ALIGNMENT.RIGHT}
-        onChange={(e) => setSearchTerm(e.target.value)}
-        onSubmit={() => {
-          addPageAction({
-            eventName: 'swiftypeSearchInput',
-            category: 'SearchInput',
-            searchTerm,
-            searchLocation: 'homepage',
-          });
-          navigate(`?q=${searchTerm || ''}`);
-        }}
-        css={css`
-          max-width: 880px;
-          width: 80%;
-          svg {
-            color: var(--primary-text-color);
-          }
-        `}
-      />
-      <div
-        css={css`
-          margin-top: 0.75rem;
-          width: 40%;
-          color: white;
-          display: flex;
-          align-items: baseline;
-          justify-content: center;
-          width: 100%;
-          flex-wrap: wrap;
-          font-weight: 500;
-          font-size: 1rem;
-          a {
-            margin-left: 0.25rem;
-            &:hover {
-              color: var(--brand-button-primary-accent);
-            }
-          }
-          @media screen and (max-width: 550px) {
-            font-size: 0.75rem;
-          }
-
-          @media screen and (max-width: ${mobileBreakpoint}) {
-            display: none;
-          }
-        `}
-      >
-        <p>{t('strings.home.search.popularSearches.title')}: </p>
-        <Link to="?q=nrql">
-          {t('strings.home.search.popularSearches.options.0')},
-        </Link>
-        <Link to="?q=logs">
-          {t('strings.home.search.popularSearches.options.1')},
-        </Link>
-        <Link to="?q=alert">
-          {t('strings.home.search.popularSearches.options.2')},
-        </Link>
-        <Link to="?q=best practices">
-          {t('strings.home.search.popularSearches.options.3')},
-        </Link>
-        <Link to="?q=kubernetes">
-          {t('strings.home.search.popularSearches.options.4')}
-        </Link>
-      </div>
     </section>
   );
 };

src/components/MDXContainer.js

@@ -1,7 +1,6 @@
 import {
   ExternalLink,
   Link,
-  Lightbox,
   MDXLink,
   MDX,
   MarkdownContainer,
@@ -53,30 +52,43 @@ const defaultComponents = {
         }
       />
     ) : (
-      <Lightbox>
-        <img
-          width={props.width ? props.width : 'auto'}
-          src={props.src}
-          // this prevents images from stretching if the width is set to a percent value
-          className={cx(props.className, props.width && 'unbound')}
-          alt={props.alt ? props.alt : 'Docs site'}
-          title={props.title}
-          style={
-            props.style
-              ? {
-                  ...props.style,
-                  borderRadius: '0.25rem',
-                  maxWidth: '100%',
-                  margin: '0 0.25rem',
-                }
-              : {
-                  borderRadius: '0.25rem',
-                  maxWidth: '100%',
-                  margin: '0 0.25rem',
-                }
-          }
-        />
-      </Lightbox>
+      <span
+        style={{
+          position: 'relative',
+          display: 'block',
+          textAlign: 'center',
+          margin: '1em 0',
+        }}
+      >
+        <a
+          href={props.src}
+          target="_blank"
+          rel="noreferrer"
+          style={{ display: 'inline-block' }}
+        >
+          <img
+            width={props.width ? props.width : 'auto'}
+            src={props.src}
+            alt={props.alt ? props.alt : 'Docs site'}
+            title={props.title}
+            style={
+              props.style
+                ? {
+                    ...props.style,
+                    borderRadius: '0.25rem',
+                    maxWidth: '100%',
+                    margin: '0 0.25rem',
+                  }
+                : {
+                    borderRadius: '0.25rem',
+                    maxWidth: '100%',
+                    margin: '0 0.25rem',
+                  }
+            }
+            loading="lazy"
+          />
+        </a>
+      </span>
     ),
   DocTile: (props) => (
     <DocTile

src/components/Navigation.js

@@ -32,7 +32,7 @@ const Navigation = ({ nav, className }) => {
       css={css`
         height: 100%;
         overflow: auto;
-        margin: 16px 0;
+        margin: 0 0 16px;
         -ms-overflow-style: none;
         scrollbar-width: none;
         &::-webkit-scrollbar {