(#440) Dynamic code block functionality

This allows for the dynamic code block component in choco-astro to listen for values entered into input for code block components and replace custom variables placed in the code block on a page.

Author: alexaveldanez

js/docs.js

@@ -13,3 +13,4 @@ import './src/scrollspy.js';
 import './src/ts/tab-multiples.ts';
 import './src/ts/tables.ts';
 import './src/theme-toggle.js';
+import './src/code-block.js';

js/src/code-block.js

@@ -0,0 +1,36 @@
+import { copyCodeBlocks } from './util/functions';
+
+document.addEventListener('DOMContentLoaded', () => {
+    const containsCodeBlockReplace = document.querySelectorAll('.contains-code-block-replace');
+    const codeBlockValueInputs = document.querySelectorAll('.code-block-value-input');
+
+    codeBlockValueInputs.forEach(el => {
+
+        const inputVariable = el.name;
+        const defaultValue = el.getAttribute('data-default-value');
+        for (const codeBlock of containsCodeBlockReplace) {
+            codeBlock.innerHTML = codeBlock.innerHTML.replaceAll(inputVariable, `<span class="${inputVariable}">${defaultValue}</span>`);
+        }
+
+        const replaceCodeVariableInCodeBlock = () => {
+            const codeReplaceVariables = document.querySelectorAll(`.${inputVariable}`);
+
+            if (el.value) {
+                for (const variable of codeReplaceVariables ) {
+                    variable.innerHTML = el.value;
+                }
+            } else {
+                for (const variable of codeReplaceVariables ) {
+                    variable.innerHTML = defaultValue;
+                }
+            }
+        };
+
+        replaceCodeVariableInCodeBlock();
+
+        el.addEventListener('keyup', () => {
+            replaceCodeVariableInCodeBlock();
+        });
+    });
+    copyCodeBlocks();
+});