Yaml component: Slight refactor, added zoomPath

aws-samples · Jul 23, 2024 · 30a29e2 · 30a29e2
1 parent 3ba0cd7
commit 30a29e2
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 18 deletions.
diff --git a/website/src/components/YamlFile/index.tsx b/website/src/components/YamlFile/index.tsx
@@ -18,10 +18,18 @@ export function YamlAnnotation({ children, sequence }) {
   );
 }
 
-export default function YamlFile({ children, title }) {
+interface Props {
+  children: ReactNode;
+  title: string;
+  zoomed: string;
+}
+
+export default function YamlFile({ children, title, zoomed }: Props) {
+  const zoomedVal = zoomed === "true";
+  const realTitle = zoomedVal ? undefined : title;
   return (
     <div className={styles.yamlBlock}>
-      <CodeBlock language="yaml" title={title} showLineNumbers>
+      <CodeBlock language="yaml" title={realTitle} showLineNumbers={!zoomedVal}>
         {children}
       </CodeBlock>
     </div>

diff --git a/website/src/remark/include-yaml.js b/website/src/remark/include-yaml.js
@@ -28,12 +28,18 @@ const plugin = (options) => {
       const filePath = `${manifestsDir}/${attributes.file}`;
       const extension = path.extname(filePath).slice(1);
 
+      // TODO check extension is yaml
+
       var highlightPathsString = attributes.paths;
+      var zoomPathString = attributes.zoomPath;
+      var zoomPathBefore = parseInt(attributes.zoomBefore) || 0;
+      var zoomPathAfter = parseInt(attributes.zoomAfter) || 0;
 
       const p = fs.readFile(filePath, { encoding: "utf8" }).then((res) => {
-        let finalString = res.replace("$", "\\$");
+        let finalString = res.replaceAll("$", "\\$");
 
         let annotations = [];
+        let zoomed = false;
 
         if (highlightPathsString) {
           let highlightPaths = highlightPathsString.split(",");
@@ -57,24 +63,10 @@ const plugin = (options) => {
           for (let i = 0; i < highlightPaths.length; i++) {
             const lookup = highlightPaths[i];
 
-            const lineCounter = new YAML.LineCounter();
-            const parser = new YAML.Parser(lineCounter.addNewLine);
-            const tokens = parser.parse(finalString);
-
-            const docs = new YAML.Composer().compose(tokens);
-
-            const doc = Array.from(docs)[0];
-
-            const target = findByPath(
-              doc.contents,
-              lookup.split(".").map((e) => e.trim()),
-            );
+            const { startLine, endLine } = getLinesForPath(finalString, lookup);
 
             const lines = finalString.split(/\r\n|\r|\n/);
 
-            const startLine = lineCounter.linePos(target.start).line;
-            const endLine = lineCounter.linePos(target.end).line;
-
             const startSection = lines.slice(0, startLine - 1).join("\n");
             const middleSection = lines
               .slice(startLine - 1, endLine - 1)
@@ -93,6 +85,27 @@ const plugin = (options) => {
           }
         }
 
+        if (zoomPathString) {
+          zoomed = true;
+
+          const { startLine, endLine } = getLinesForPath(
+            finalString,
+            zoomPathString,
+          );
+
+          const lines = finalString.split(/\r\n|\r|\n/);
+
+          let targetEndLine = endLine - 1 + zoomPathAfter;
+
+          if (lines[targetEndLine].startsWith("#")) {
+            targetEndLine = targetEndLine + 2;
+          }
+
+          finalString = lines
+            .slice(startLine - 1 - zoomPathBefore, targetEndLine)
+            .join("\n");
+        }
+
         const jsxNode = {
           type: "mdxJsxFlowElement",
           name: "div",
@@ -107,6 +120,11 @@ const plugin = (options) => {
                   name: "title",
                   value: title,
                 },
+                {
+                  type: "mdxJsxAttribute",
+                  name: "zoomed",
+                  value: zoomed,
+                },
               ],
               children: [
                 {
@@ -167,6 +185,29 @@ const plugin = (options) => {
   return transformer;
 };
 
+function getLinesForPath(inputString, lookup) {
+  const lineCounter = new YAML.LineCounter();
+  const parser = new YAML.Parser(lineCounter.addNewLine);
+  const tokens = parser.parse(inputString);
+
+  const docs = new YAML.Composer().compose(tokens);
+
+  const doc = Array.from(docs)[0];
+
+  const target = findByPath(
+    doc.contents,
+    lookup.split(".").map((e) => e.trim()),
+  );
+
+  const startLine = lineCounter.linePos(target.start).line;
+  const endLine = lineCounter.linePos(target.end).line;
+
+  return {
+    startLine,
+    endLine,
+  };
+}
+
 function findByPath(pathNode, pathElements) {
   let key = pathElements.shift();