Move images to static folder (newrelic#18203)

* feat: turn off mdx image import check

* chore: add src/images to protected files actions

* fix: link to image style guide page in protected file check

* fix: fix rss feed image src

* chore: add temp scripts

* add contributor code guide for image updates

* fix: cleanup images

* feat: move whats-new images to static folder

* chore: remove old images

* feat: move images from src to static

---------

Co-authored-by: Clark McAdoo <[email protected]>
Co-authored-by: Sunny Zanchi <[email protected]>

Author: 3 people

.github/workflows/protected-file-comment.yml

@@ -31,13 +31,20 @@ jobs:
           pattern: .*src/content/docs/apm/agents/ruby-agent/configuration/ruby-agent-configuration.mdx
           trustedAuthors: newrelic-ruby-agent-bot,kaylareopelle,hannahramadan,tannalynn,fallwith
 
+      - name: Prevent images added to src directory
+        id: images
+        uses: xalvarez/[email protected]
+        with:
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          pattern: .*src\/images\/*
+
       - name: Comment if JSON file is modified
         if: ${{ failure() && steps.attribute-dictionary.outcome == 'failure' }}
         uses: thollander/actions-comment-pull-request@v2
         with:
           message: |
             > [!WARNING]
-            > `attribute-dictionary.json` is an autogenerated file.
+            > **`attribute-dictionary.json` is an autogenerated file.**
             >
             > Changes to attribute dictionary should be made through the `attribute-dictionary` repo in GHE.
 
@@ -47,6 +54,16 @@ jobs:
         with:
           message: |
             > [!WARNING]
-            > `ruby-agent-configuration.mdx` is an autogenerated file.
+            > **`ruby-agent-configuration.mdx` is an autogenerated file.**
             > 
             > To change the Ruby agent configuration file, please submit an issue or open a PR in the [`newrelic/newrelic-ruby-agent`](https://github.com/newrelic/newrelic-ruby-agent) repo.
+
+      - name: Comment if images added to src directory
+        if: ${{ failure() && steps.images.outcome == 'failure' }}
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            > [!WARNING]
+            > **An image has been added to `src/images/`.** 
+            > 
+            > Image files must be in `static/images/`. [Guide to using images in docs-website](https://github.com/newrelic/docs-website/blob/master/src/content/docs/style-guide/images/embed-images.mdx)

gatsby-config.js

@@ -79,7 +79,7 @@ module.exports = {
         background_color: '#663399',
         theme_color: '#663399',
         display: 'minimal-ui',
-        icon: 'src/images/favicon.png', // This path is relative to the root of the site.
+        icon: 'static/images/favicon.png', // This path is relative to the root of the site.
       },
     },
     {

gatsby-node.js

@@ -31,7 +31,7 @@ exports.onCreateWebpackConfig = ({ actions }) => {
         zlib: false,
       },
       alias: {
-        images: path.resolve(__dirname, 'src/images/'),
+        images: path.resolve(__dirname, 'static/images/'),
       },
     },
   });

plugins/utils/handlers.js

@@ -1,10 +1,9 @@
 const all = require('mdast-util-to-hast/lib/all');
-const one = require('mdast-util-to-hast/lib/one');
 const { findAttribute } = require('../../codemods/utils/mdxast');
 const toString = require('mdast-util-to-string');
 const u = require('unist-builder');
-const { compileStyleObject } = require('../../rehype-plugins/utils/styles');
-const { set, get } = require('lodash');
+const path = require('path');
+const { get } = require('lodash');
 
 const stripNulls = (obj) =>
   Object.fromEntries(Object.entries(obj).filter(([, value]) => value != null));
@@ -16,8 +15,6 @@ const getAllAttributes = (node) =>
       }, {})
     : {};
 
-const getSrcUrl = (url) => url.replace('images/', '');
-
 const isBlockImage = (parent, node) => {
   const isBlock = [];
   const className = get(node, 'data.className', null);
@@ -82,13 +79,8 @@ const isBlockImage = (parent, node) => {
 };
 
 module.exports = {
-  image: (h, node, parent, imageHashMap) => {
-    const domain = 'https://docs.newrelic.com';
-    const srcUrl = getSrcUrl(node.url);
-
-    const src = imageHashMap[srcUrl]
-      ? new URL(imageHashMap[srcUrl], domain).href
-      : node.url;
+  image: (h, node, parent) => {
+    const src = path.join('https://docs.newrelic.com', node.url);
 
     const applyBlockImageAttributes = isBlockImage(parent, node);
 

scripts/moveWnImages.js

@@ -0,0 +1,47 @@
+const fs = require('fs');
+const glob = require('glob');
+
+const wnImages = glob.sync('src/content/whats-new/**/*.*', {
+  ignore: ['**/.gitkeep', '**/*.md'],
+});
+const wnImageDirs = glob.sync('src/content/whats-new/**/images', {});
+
+// images not in expected image folders:
+// 'src/components/backend.webp',
+// 'src/components/curlyAndDots.webp',
+// 'src/components/curlyAndDotsDM.webp',
+// 'src/components/devops.webp',
+// 'src/components/frontend.webp',
+
+// these i think can be remove ^
+
+// 'src/content/docs/apm/agents/net-agent/configuration/images/dotnetlogo.webp',
+// 'src/content/docs/new-relic-solutions/transition-user-menu.webp'
+
+// these just seem incorrect ^
+
+// get all images in whats new image dirs
+// then strip off the image file name to construct the new path
+
+// src/content/whats-new/2024/02/logs-live-archives-retention.webp is not in an image folder ( but also not used?)
+
+// wnImages.forEach((image) => {
+//   const imageName = image.split('/images/');
+//   console.log('Successfully renamed ', image, ` static/images/${imageName[1]}`);
+//   if (imageName[1] !== undefined) {
+//     fs.rename(image, `static/images/${imageName[1]}`, function (err) {
+//       if (err) throw err;
+//     });
+//   } else {
+//     console.log('❌', image);
+//   }
+// });
+
+// delete image directories and all contents (.gitignore's)
+// src/content/whats-new/2024/05/images/whats-new-05-08-sessiontraces.md
+// src/content/whats-new/2024/07/images/whats-new-07-02-apmk8s.md
+// there are two whats new posts in image directories we will need to pull out and rerun this
+
+wnImageDirs.forEach((dir) => {
+  fs.rmSync(dir, { recursive: true, force: true });
+});

scripts/updateImgSrc.js

@@ -0,0 +1,148 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const unified = require('unified');
+const remarkParse = require('remark-parse');
+const remarkMdx = require('remark-mdx');
+const remarkMdxjs = require('remark-mdxjs');
+const visit = require('unist-util-visit');
+const SKIP = require('unist-util-visit');
+const frontmatter = require('remark-frontmatter');
+const remarkStringify = require('remark-stringify');
+const fencedCodeBlock = require('./actions/utils/fencedCodeBlock');
+
+/**
+ * 1. Parse file.
+ * 2 if import,
+ *  - add to import array as an object with attributes as keys
+ *  - delete import from file
+ * 3. check if <img> OR component with img tag in an attribute (mdxValueExpresssion ex: techtile, collpaser)
+ * - pull the info from it's matching import statement
+ *  to replace its 'src' attribute
+ **/
+
+let allImports = {};
+
+const convertImages = () => (tree) => {
+  visit(
+    tree,
+    (node) => ['import'].includes(node.type),
+    (node, index, parent) => {
+      const importData = node.value.split(' ');
+
+      const importConst = importData[1];
+      const importPath = importData[3]
+        .replace(/"|'/g, '')
+        .replace('images/', '/images/');
+
+      allImports[importConst] = importPath;
+      parent.children.splice(index, 1);
+      // Skipping the removed node to avoid bugs caused by changing the tree while traversing it.
+      return [SKIP, index];
+    }
+  );
+
+  visit(
+    tree,
+    (node) =>
+      node.attributes?.some(
+        // some components have images embeded in their attributes
+        // ex: techtile icons, collapser titles
+        (attr) => attr?.value?.type === 'mdxValueExpression'
+      ),
+    (node) => {
+      const newAttributes = node.attributes.map((attr) => {
+        if (
+          attr.value.type === 'mdxValueExpression' &&
+          attr.value.value.includes('src={')
+        ) {
+          let attribute = attr.value.value;
+          // some collapsers have multiple images in a single title
+          // ex: src/i18n/content/pt/docs/infrastructure/host-integrations/installation/install-infrastructure-host-integrations.mdx
+          const oldSrcs = Array.from(attribute.matchAll(/src=\{(.*?)\}/g));
+          oldSrcs.forEach((src) => {
+            const oldSrc = src[1];
+            attribute = attribute.replace(
+              /src=\{.*?\}/,
+              `src="${allImports[oldSrc]}"`
+            );
+            console.log(
+              `🧱${node.name.toUpperCase()}: replacing ${oldSrc} with ${
+                allImports[oldSrc]
+              }`
+            );
+            return src;
+          });
+          attr.value.value = attribute;
+
+          return attr;
+        }
+        return attr;
+      });
+      node.attributes = newAttributes;
+    }
+  );
+
+  visit(
+    tree,
+    (node) => ['img'].includes(node.name),
+    (node) => {
+      const newAttributes = node.attributes.map((attr) => {
+        if (attr.name === 'src' && attr.value.type === 'mdxValueExpression') {
+          const attribute = attr.value.value;
+          attr.value = allImports[attribute];
+          console.log(
+            `🌠IMG: replacing ${attribute} with ${allImports[attribute]}`
+          );
+          return attr;
+        }
+        return attr;
+      });
+      node.attributes = newAttributes;
+    }
+  );
+};
+
+/**
+ * Main function to run convertImages. Can accept command line argument
+ * that has the path to an mdx file. Otherwise, convertImages gets ran
+ * on every mdx file.
+ * @returns {Array} - Resolved results from Promise
+ */
+const runConvertImages = async (paths = []) => {
+  let filePaths = [];
+  const processor = unified()
+    .use(remarkParse)
+    .use(remarkStringify, {
+      bullet: '*',
+      fences: true,
+      listItemIndent: '1',
+    })
+    .use(remarkMdx)
+    .use(remarkMdxjs)
+    .use(frontmatter, ['yaml'])
+    .use(fencedCodeBlock)
+    .use(convertImages);
+
+  if (paths.length === 1) {
+    filePaths = glob.sync(path.join(process.cwd(), paths[0]));
+  }
+
+  if (paths.length === 0) {
+    filePaths = glob.sync('src/install/**/*.mdx');
+  }
+
+  const allResults = await Promise.all(
+    filePaths.map(async (filePath) => {
+      allImports = {};
+      const fileData = fs.readFileSync(filePath, 'utf-8');
+      const { contents } = await processor.process(fileData);
+      fs.writeFileSync(filePath, contents, 'utf-8');
+    })
+  );
+
+  console.log(`Applied codemod to ${filePaths?.length} files`);
+  return allResults;
+};
+
+runConvertImages();

scripts/verify_mdx.js

@@ -22,7 +22,6 @@ const main = async () => {
     filePaths = glob.sync(`${__dirname}/../${dirPath}/**/*.mdx`);
   }
 
-  verifyImages(filePaths);
   await verifyMDX(filePaths);
 };
 

src/components/HomepageBanner.js

@@ -8,7 +8,7 @@ import {
   useTranslation,
   addPageAction,
 } from '@newrelic/gatsby-theme-newrelic';
-import bannerBackground from '../images/bannerBackground.svg';
+import bannerBackground from 'images/bannerBackground.svg';
 
 const HomepageBanner = () => {
   const bannerHeight = '250px';

src/components/backend.webp

@@ -14,7 +14,7 @@ redirects:
 freshnessValidatedDate: never
 ---
 
-New Relic's global data hosting structure consists of two regions: the European Union (EU) region and the United States (US) region. 
+New Relic's global data hosting structure consists of two regions: the European Union (EU) region and the United States (US) region.
 
 ## Requirements
 
@@ -23,7 +23,7 @@ Access to the New Relic EU region requires the latest versions of our agents.
 * For new customers: [Install the most recent agent version](/docs/agents/manage-apm-agents/installation/install-agent).
 * For existing customers: [Update to the most recent agent version](/docs/agents/manage-apm-agents/installation/update-new-relic-agent).
 
-Minimum <InlinePopover type="apm" /> agent version required:
+Minimum <InlinePopover type="apm"/> agent version required:
 
 * [Go 2.0.0](/docs/release-notes/agent-release-notes/go-release-notes) or higher
 * [Java 4.0.0](/docs/release-notes/agent-release-notes/java-release-notes) or higher
@@ -259,4 +259,4 @@ Customer Data from existing New Relic accounts cannot be transferred or shared a
 Use either of these options to verify whether your account data is hosted in the EU region's data center:
 
 * In APM, mouse over the application name to view the URL. If it begins with `rpm.eu.newrelic.com/`, it is an EU-based account.
-* Check your <InlinePopover type="licenseKey" />. If it begins with `EU`, it is an EU-based account.
+* Check your <InlinePopover type="licenseKey"/>. If it begins with `EU`, it is an EU-based account.