Sunny/refactor verify mdx

codemods/utils/mdxast-esm.mjs

@@ -0,0 +1,20 @@
+import { unified } from 'unified11';
+import remarkParse from 'remark-parse10';
+import remarkFrontmatter from 'remark-frontmatter5';
+import remarkMdx from 'remark-mdx2.3';
+import remarkStringify from 'remark-stringify10';
+
+export const createAST = (mdxText) => {
+  const mdxAst = unified()
+    .use(remarkParse)
+    .use(remarkStringify, {
+      bullet: '*',
+      fences: true,
+      listItemIndent: '1',
+    })
+    .use(remarkMdx)
+    .use(remarkFrontmatter, ['yaml'])
+    .parse(mdxText);
+
+  return mdxAst;
+};

codemods/utils/mdxast.js

@@ -16,6 +16,9 @@ const isMdxElement = curry(
   (name, node) => isMdxBlockElement(name, node) || isMdxSpanElement(name, node)
 );
 
+const isEmptyParagraph = (el) =>
+  el.type === 'paragraph' && el.children.length === 0;
+
 const hasOnlyChild = curry(
   (name, node) => node.children.length === 1 && isType(name, node.children[0])
 );
@@ -122,6 +125,12 @@ const containsImport = (tree, node) => {
   });
 };
 
+const getNodeText = (node) =>
+  node.children
+    .filter((child) => child.type === 'text')
+    .map((child) => child.value)
+    .join();
+
 module.exports = {
   addAttribute,
   containsImport,
@@ -140,4 +149,6 @@ module.exports = {
   removeChild,
   isType,
   setAttribute,
+  getNodeText,
+  isEmptyParagraph,
 };

package.json

@@ -226,7 +226,7 @@
     "trigger-i18n-merge": "node scripts/actions/trigger-i18n-merge.js",
     "update-attribute-dictionary-json": "node scripts/actions/update-attribute-dictionary-json.mjs",
     "verify-install-page": "node scripts/verifyInstallPage.js",
-    "verify-mdx": "node scripts/verify_mdx.js",
+    "verify-mdx": "node scripts/verify-mdx/cli.mjs",
     "webdriver-desktop": "node scripts/actions/webdriver-desktop.mjs",
     "webdriver-mobile": "node scripts/actions/webdriver-mobile.mjs"
   },

scripts/verify-mdx/cli.mjs

@@ -0,0 +1,120 @@
+#!/usr/bin/env node
+import colors from 'ansi-colors';
+import { Command } from 'commander';
+import cliProgress from 'cli-progress';
+import { lstatSync } from 'fs';
+import { globSync } from 'glob10';
+import { join } from 'path';
+
+import { ERROR_TYPES } from './error-types.mjs';
+import { verifyMDX } from './verify-mdx.mjs';
+
+const __dirname = import.meta.dirname;
+
+const progressBar = new cliProgress.SingleBar(
+  {
+    format:
+      // eslint-disable-next-line prefer-template
+      'MDX verification progress |' +
+      colors.cyan('{bar}') +
+      '| {percentage}% || {value} of {total} Files',
+    forceRedraw: true,
+  },
+  cliProgress.Presets.rect
+);
+
+const main = async (paths) => {
+  if (paths.length === 0) {
+    // if user did not supply paths, default to all
+    paths = globSync(
+      `${__dirname}/../../src{/content/**/*.mdx,/i18n/content/**/*.mdx}`
+    );
+  } else {
+    // if any of the paths are directories, grab all their MDX files
+    paths = paths.flatMap((path) =>
+      lstatSync(path).isDirectory() ? globSync(join(path, '**/*.mdx')) : path
+    );
+  }
+
+  console.log(
+    colors.greenBright(
+      '\n\n🔍Reading MDX files. This may take a few moments... \n'
+    )
+  );
+  progressBar.start(paths.length, 1);
+
+  const allResults = await Promise.all(
+    paths.map(async (path, i) => {
+      const result = verifyMDX(path);
+      await progressBar.update(i + 1);
+      return result;
+    })
+  );
+  await progressBar.stop();
+
+  const resultsWithErrors = allResults.filter(
+    (result) => result.errors.length > 0
+  );
+  report(resultsWithErrors);
+
+  if (resultsWithErrors.length > 0) {
+    process.exitCode = 1;
+  }
+};
+
+const program = new Command();
+program
+  .description('validate MDX content')
+  .argument(
+    '[paths...]',
+    'a list of MDX files or directories to validate. if a directory is passed, check all MDX files inside it.'
+  )
+  .action(main);
+program.parse();
+
+const report = (results) => {
+  console.log(
+    colors.magenta(`\n\nFailed MDX file count: `) + `${results.length}`
+  );
+
+  results.forEach((result) => {
+    result.errors.forEach((error) => {
+      if (error.type === ERROR_TYPES.FRONTMATTER_ERROR) {
+        console.log(
+          colors.magenta(` Frontmatter error: `) +
+            `${result.filePath} \n
+      ${colors.red(error.reason)}
+    ${error.mark.snippet}\n`
+        );
+      }
+
+      if (error.type === ERROR_TYPES.FRONTMATTER_FIELD_ERROR) {
+        console.log(
+          colors.magenta(` Frontmatter field error: `) +
+            `${result.filePath} \n
+      ${colors.red(error.reason)}\n`
+        );
+      }
+
+      if (error.type === ERROR_TYPES.MDX_ERROR) {
+        console.log(
+          colors.magenta(` MDX error: `) +
+            `${result.filePath} \n
+      ${colors.red(error.reason)}
+    line: ${error.line}
+    column: ${error.column}\n`
+        );
+      }
+
+      if (error.type === ERROR_TYPES.VALIDATION_ERROR) {
+        console.log(
+          colors.magenta(` MDX validation error: `) +
+            `${result.filePath} \n
+      ${colors.red(error.reason)}
+    line: ${error.line}
+    column: ${error.column}\n`
+        );
+      }
+    });
+  });
+};

scripts/verify-mdx/error-types.mjs

@@ -0,0 +1,6 @@
+export const ERROR_TYPES = {
+  MDX_ERROR: 'MDX_ERROR',
+  FRONTMATTER_ERROR: 'FRONTMATTER_ERROR',
+  FRONTMATTER_FIELD_ERROR: 'FRONTMATTER_FIELD_ERROR',
+  VALIDATION_ERROR: 'VALIDATION_ERROR',
+};