Fix multiple code samples per page

needle-tools · Jun 19, 2023 · f490bf0 · f490bf0
1 parent e2424f6
commit f490bf0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 32 deletions.
diff --git a/documentation/.vuepress/plugins/include-samples-code/index.js b/documentation/.vuepress/plugins/include-samples-code/index.js
@@ -175,41 +175,47 @@ function parseCode(branchName, codeFiles, samples) {
 const injectCodeSamples = async (md, options) => {
     console.log("BEGIN INJECT CODE SAMPLES");
 
-    const sampleMarkerRegex = new RegExp(/\<\!--\s*\[SAMPLE_CODE\s+(?<id>.+)\].*--\>/, "g");
+    const sampleMarkerRegex = /\<\!--\s*SAMPLE_CODE\s+(?<id>.+)\s*--\>/g;
 
     const originalRender = md.render;
     md.render = async (...args) => {
-        const code = args[0];
-        const match = sampleMarkerRegex.exec(code);
-        if (match && parsedCode) {
-            const id = match.groups.id;
-            if (parsedCode.has(id)) {
-                console.log("FOUND SAMPLE CODE", id)
-                const startIndex = match.index;
-                const endIndex = match.index + match[0].length;
-                const before = code.substring(0, startIndex);
-                const after = code.substring(endIndex);
-                let insert = "";
-                const samples = parsedCode.get(id);
-                for (const sample of samples) {
-                    insert += `<div>`;
-                    insert += `<a href="${sample.githubUrl}" target="_blank">`;
-                    insert += `<img src="https://img.shields.io/badge/View%20on-GitHub-blue?style=flat-square" alt="View on GitHub" />`;
-                    insert += `</a>`;
-                    insert += "</div>\n\n";
-
-                    let codeSample = "```ts\n";
-                    codeSample += sample.code;
-                    codeSample += "\n```";
-                    insert += codeSample;
-                }
+        let code = args[0];
+        sampleMarkerRegex.lastIndex = 0;
+        let match;
+        while (match = sampleMarkerRegex.exec(code)) {
+            if (match && parsedCode) {
+                const id = match.groups.id?.trim();
+                if (parsedCode.has(id)) {
+                    console.log("FOUND SAMPLE CODE", id)
+                    const startIndex = match.index;
+                    const endIndex = match.index + match[0].length;
+                    const before = code.substring(0, startIndex);
+                    const after = code.substring(endIndex);
+                    let insert = "";
+                    const samples = parsedCode.get(id);
+                    for (const sample of samples) {
+
+                        let codeSample = "```ts\n";
+                        codeSample += sample.code;
+                        codeSample += "\n```";
+                        insert += codeSample;
+                        insert += `\n<div>`;
+                        insert += `<a href="${sample.githubUrl}" target="_blank">`;
+                        insert += `<img src="https://img.shields.io/badge/View%20on-GitHub-green?style=flat-square" alt="View on GitHub" />`;
+                        insert += `</a>`;
+                        insert += "</div>\n\n";
+                    }
 
-                args[0] = before + insert + after;
-            }
-            else {
-                console.log(">>> SAMPLE CODE NOT FOUND", id, parsedCode)
+                    code = before + insert + after;
+                    // offset the index by the amount we inserted
+                    sampleMarkerRegex.lastIndex += insert.length;
+                }
+                else {
+                    console.log("??? SAMPLE CODE NOT FOUND", id)
+                }
             }
         }
+        args[0] = code;
         const result = originalRender.apply(md, args);
         return result;
     };

diff --git a/documentation/internal/code-marker-test.md b/documentation/internal/code-marker-test.md
@@ -3,17 +3,19 @@
 
 test 123
 
-#Sub
+# Test
 
-<!-- [SAMPLE_CODE subscribe_to_events] --> 
+
+<!-- SAMPLE_CODE subscribe_to_events -->
 
 
 world
 
 and then there's also this example
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramble
 
-<!-- [SAMPLE_CODE emit_particles_on_click]-->
+
+<!-- SAMPLE_CODE emit_particles_on_click -->
 
 
 e a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently