chore(docs): improve migration docs and layouts

Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/site/eleventy.config.js

@@ -21,7 +21,12 @@ import { elementLoaderTransform } from './src/_11ty/transforms/element-loader.js
 import { anchorGeneratorTransform } from './src/_11ty/transforms/anchor-generator.js';
 import { htmlMinifyTransform } from './src/_11ty/transforms/html-minify.js';
 import { envReplaceTransform } from './src/_11ty/transforms/env-replace.js';
-import { installShortcode, doDontShortcode, splitShortcode } from './src/_11ty/shortcodes/index.js';
+import {
+  installShortcode,
+  doDontShortcode,
+  beforeAfterShortcode,
+  splitShortcode
+} from './src/_11ty/shortcodes/index.js';
 import { exampleShortcode, exampleTagsShortcode } from './src/_11ty/shortcodes/example.js';
 import { exampleDocShortcode } from './src/_11ty/shortcodes/example-doc.js';
 import { exampleGroupShortcode } from './src/_11ty/shortcodes/example-group.js';
@@ -198,6 +203,7 @@ export default function (eleventyConfig) {
   eleventyConfig.addShortcode('artifactory-usage', renderArtifactoryUsageShortcode);
   eleventyConfig.addPairedShortcode('dodont', doDontShortcode);
   eleventyConfig.addPairedShortcode('split', splitShortcode);
+  eleventyConfig.addPairedShortcode('before-after', beforeAfterShortcode);
 
   // Register custom transforms for content processing
   eleventyConfig.addTransform('env-replace', envReplaceTransform);

projects/site/src/_11ty/shortcodes/index.js

@@ -66,6 +66,30 @@ export async function doDontShortcode(content) {
 </div>`;
 }
 
+export async function beforeAfterShortcode(content) {
+  return /* html */ `
+<div nve-layout="column gap:sm">
+  <style scoped>
+    .content > div, {
+      justify-content: space-between;
+      height: 100%;
+    }
+    .content > pre {
+      width: 100%;
+      display: flex;
+      margin: 0;
+    }
+  </style>
+  <div nve-layout="grid gap:sm span-items:6">
+    <nve-badge status="danger" container="flat">Before</nve-badge>
+    <nve-badge status="success" container="flat">After</nve-badge>
+  </div>
+  <div class="content" nve-layout="grid gap:sm span-items:6 align:vertical-stretch">
+    ${content}
+  </div>
+</div>`;
+}
+
 export async function splitShortcode(content) {
   return /* html */ `
 <div class="split-shortcode" nve-layout="grid gap:lg span-items:12 &xl|span-items:6">