c0ckp1t 1.0.0

package/components/Markdown.mjs

@@ -0,0 +1,274 @@
+// ________________________________________________________________________________
+// IMPORT
+// ________________________________________________________________________________
+import {getLogger} from "Logging";
+import {slugify} from "./MarkdownUtils.mjs";
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'Markdown.mjs'
+const logger = getLogger(LOG_HEADER)
+logger.debug("init")
+
+if (window.MathJax) {
+    logger.debug(`Using MathJAX`)
+} else  if (window.katex) {
+    logger.debug(`Using Katex`)
+} else {
+    logger.warn(`No Math rendering library found!`)
+}
+
+const md = window.markdownit()
+    .use(math_plugin)
+
+// Add anchor plugin if loaded successfully
+if (window.markdownItAnchor) {  
+    md.use(window.markdownItAnchor, {
+        slugify: slugify  // Use custom slugify to normalize special characters
+    })
+    logger.debug("markdown-it-anchor plugin enabled with custom slugify")
+} else {
+    logger.warn("markdown-it-anchor not available - headers won't have IDs")
+}
+
+// ______________________________________________________________________________________
+// Markdown Configuration
+// https://github.com/markdown-it/markdown-it/issues/960
+// https://spec.commonmark.org/dingus/?text=%60%60%60ruby%20code%20%60%60%60
+// ______________________________________________________________________________________
+md.options.html = true   // Enable HTML tags in source
+md.options.breaks = false       // Convert '\n' in paragraphs into <br>
+md.options.langPrefix = 'language-' // CSS language prefix for fenced blocks.
+md.options.linkify = true // Autoconvert URL-like text to links
+md.options.breaks = false       // Convert '\n' in paragraphs into <br>
+// // Highlighter function. Should return escaped HTML
+md.options.highlight = (str, lang) => {
+    logger.debug(`highlight call lang=${lang}`)
+    logger.debug(str)
+    if (lang && hljs.getLanguage(lang)) {
+        try {
+            return '<pre class="hljs"><code>' +
+                hljs.highlight(str, {language: lang, ignoreIllegals: true}).value +
+                '</code></pre>';
+        } catch (__) {
+        }
+    }
+
+    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
+}
+
+
+// ______________________________________________________________________________________
+// Markdown It - Katex Plugin
+// ______________________________________________________________________________________
+function isValidDelim(state, pos) {
+    var prevChar, nextChar,
+        max = state.posMax,
+        can_open = true,
+        can_close = true;
+
+    prevChar = pos > 0 ? state.src.charCodeAt(pos - 1) : -1;
+    nextChar = pos + 1 <= max ? state.src.charCodeAt(pos + 1) : -1;
+
+    // Check non-whitespace conditions for opening and closing, and
+    // check that closing delimeter isn't followed by a number
+    if (prevChar === 0x20/* " " */ || prevChar === 0x09/* \t */ ||
+        (nextChar >= 0x30/* "0" */ && nextChar <= 0x39/* "9" */)) {
+        can_close = false;
+    }
+    if (nextChar === 0x20/* " " */ || nextChar === 0x09/* \t */) {
+        can_open = false;
+    }
+
+    return {
+        can_open: can_open,
+        can_close: can_close
+    };
+}
+
+function math_inline(state, silent) {
+    var start, match, token, res, pos, esc_count;
+
+    if (state.src[state.pos] !== "$") {
+        return false;
+    }
+
+    res = isValidDelim(state, state.pos);
+    if (!res.can_open) {
+        if (!silent) {
+            state.pending += "$";
+        }
+        state.pos += 1;
+        return true;
+    }
+
+    // First check for and bypass all properly escaped delimieters
+    // This loop will assume that the first leading backtick can not
+    // be the first character in state.src, which is known since
+    // we have found an opening delimieter already.
+    start = state.pos + 1;
+    match = start;
+    while ((match = state.src.indexOf("$", match)) !== -1) {
+        // Found potential $, look for escapes, pos will point to
+        // first non escape when complete
+        pos = match - 1;
+        while (state.src[pos] === "\\") {
+            pos -= 1;
+        }
+
+        // Even number of escapes, potential closing delimiter found
+        if (((match - pos) % 2) == 1) {
+            break;
+        }
+        match += 1;
+    }
+
+    // No closing delimter found.  Consume $ and continue.
+    if (match === -1) {
+        if (!silent) {
+            state.pending += "$";
+        }
+        state.pos = start;
+        return true;
+    }
+
+    // Check if we have empty content, ie: $$.  Do not parse.
+    if (match - start === 0) {
+        if (!silent) {
+            state.pending += "$$";
+        }
+        state.pos = start + 1;
+        return true;
+    }
+
+    // Check for valid closing delimiter
+    res = isValidDelim(state, match);
+    if (!res.can_close) {
+        if (!silent) {
+            state.pending += "$";
+        }
+        state.pos = start;
+        return true;
+    }
+
+    if (!silent) {
+        token = state.push('math_inline', 'math', 0);
+        token.markup = "$";
+        token.content = state.src.slice(start, match);
+    }
+
+    state.pos = match + 1;
+    return true;
+}
+
+function math_block(state, start, end, silent) {
+    var firstLine, lastLine, next, lastPos, found = false, token,
+        pos = state.bMarks[start] + state.tShift[start],
+        max = state.eMarks[start]
+
+    if (pos + 2 > max) {
+        return false;
+    }
+    if (state.src.slice(pos, pos + 2) !== '$$') {
+        return false;
+    }
+
+    pos += 2;
+    firstLine = state.src.slice(pos, max);
+
+    if (silent) {
+        return true;
+    }
+    if (firstLine.trim().slice(-2) === '$$') {
+        // Single line expression
+        firstLine = firstLine.trim().slice(0, -2);
+        found = true;
+    }
+
+    for (next = start; !found;) {
+
+        next++;
+
+        if (next >= end) {
+            break;
+        }
+
+        pos = state.bMarks[next] + state.tShift[next];
+        max = state.eMarks[next];
+
+        if (pos < max && state.tShift[next] < state.blkIndent) {
+            // non-empty line with negative indent should stop the list:
+            break;
+        }
+
+        if (state.src.slice(pos, max).trim().slice(-2) === '$$') {
+            lastPos = state.src.slice(0, max).lastIndexOf('$$');
+            lastLine = state.src.slice(pos, lastPos);
+            found = true;
+        }
+
+    }
+
+    state.line = next + 1;
+
+    token = state.push('math_block', 'math', 0);
+    token.block = true;
+    token.content = (firstLine && firstLine.trim() ? firstLine + '\n' : '')
+        + state.getLines(start + 1, next, state.tShift[start], true)
+        + (lastLine && lastLine.trim() ? lastLine : '');
+    token.map = [start, state.line];
+    token.markup = '$$';
+    return true;
+}
+
+function math_plugin(md, options) {
+    // Default options
+
+    options = options || {};
+
+    // set KaTeX as the renderer for markdown-it-simplemath
+    var katexInline = function (latex) {
+        options.displayMode = false;
+        try {
+            return katex.renderToString(latex, options);
+        } catch (error) {
+            if (options.throwOnError) {
+                console.log(error);
+            }
+            return latex;
+        }
+    };
+
+    var inlineRenderer = function (tokens, idx) {
+        return katexInline(tokens[idx].content);
+    };
+
+    var katexBlock = function (latex) {
+        options.displayMode = true;
+        try {
+            return "<p>" + katex.renderToString(latex, options) + "</p>";
+        } catch (error) {
+            if (options.throwOnError) {
+                console.log(error);
+            }
+            return latex;
+        }
+    }
+
+    var blockRenderer = function (tokens, idx) {
+        return katexBlock(tokens[idx].content) + '\n';
+    }
+
+    md.inline.ruler.after('escape', 'math_inline', math_inline);
+    md.block.ruler.after('blockquote', 'math_block', math_block, {
+        alt: ['paragraph', 'reference', 'blockquote', 'list']
+    });
+    md.renderer.rules.math_inline = inlineRenderer;
+    md.renderer.rules.math_block = blockRenderer;
+}
+
+
+export {
+    md
+}

package/components/MarkdownUtils.mjs

@@ -0,0 +1,180 @@
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {getLogger} from "Logging"
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'MarkdownUtils.mjs'
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+const remotePathPrefix = '/docs/';
+
+// ________________________________________________________________________________
+// EXPORTED UTILITY FUNCTIONS
+// ________________________________________________________________________________
+/**
+ * Replace table HTML to add Bootstrap classes
+ *  <table class="table table-success table-striped">
+ *   https://getbootstrap.com/docs/5.3/content/tables/
+ * @param {string} inputString - HTML string with table tags
+ * @returns {string} Modified HTML string
+ */
+export function decorateTableHTML(inputString) {
+    return inputString.replace(
+        /<table([^>]*)>/gi,
+        (match, existingAttributes) => {
+            // Check if table already has a class attribute
+            if (existingAttributes.includes('class=')) {
+                // Append Bootstrap classes to existing class attribute
+                return match.replace(
+                    /class="([^"]*)"/,
+                    'class="$1 table table-dark table-striped"'
+                );
+            }
+            // Add Bootstrap classes to tables without existing class
+            return `<table${existingAttributes} class="table table-sm table-dark table-striped-columns">`;
+        }
+    );
+}
+
+/**
+ * Replace href attributes in anchor tags based on link type
+ * - Anchor links (#section): Keep href, add scroll handler
+ * - HTTP/HTTPS links: Keep href, add styling
+ * - Relative/absolute document links: Convert to Vue click handler
+ *
+ * @param {string} inputString - HTML string with anchor tags
+ * @param adjustHrefPath  Function To modify href paths if needed
+ * @returns {string} Modified HTML string
+ *
+ */
+export function replaceHrefLinks(inputString, adjustHrefPath = (path) => path) {
+  return inputString.replace(
+    /a href="([^"]*)"/g,
+    (match, param) => {
+      logger.debug(`[REGEX_HREF] match=${match} param=${param}`)
+      // Check if it's an anchor link (starts with #)
+      if (param.startsWith('#')) {
+        // Keep href for anchor links - this is the FIX for the bug!
+        // Before: would convert to @click handler, losing anchor functionality
+        // After: preserves href so browser can scroll to target
+        return `a href="${param}" @click.prevent="scrollToAnchor('${param}')"`
+      }
+
+      // Check for HTTP/HTTPS links or already has class
+      if (match.toLowerCase().includes("http") || match.toLowerCase().includes("class")) {
+        return `${match} class="link-primary" target="_blank"`
+      }
+      
+      // Relative/absolute document links - use Vue handler
+      return `a  href="${param}" @click.prevent="href('${param}')"`
+
+    }
+  );
+}
+
+/**
+ * Extract size dimensions from alt text
+ * Matches format: =100x200 at the end of alt text
+ * 
+ * @param {string} alt - Alt text that may contain size
+ * @returns {Object|null} {width, height} or null if no size found
+ */
+export function extractSizeFromAlt(alt) {
+  const match = alt.match(/=(\d+)x(\d+)$/);
+  if (match) {
+    return { width: match[1], height: match[2] };
+  }
+  return null;
+}
+
+/**
+ * Replace img src attributes and handle size extraction from alt text
+ * Converts relative paths to absolute paths for documentation
+ * 
+ * @param {string} inputString - HTML string with img tags
+ * @returns {string} Modified HTML string
+ */
+export function replaceImgLinks(inputString) {
+  return inputString.replace(
+    /img src="([^"]*)" alt="([^"]*)"/g,
+    (match, src, alt) => {
+      logger.debug(`[REGEX_IMG] match=${match} src=${src} alt=${alt}`)
+      const size = extractSizeFromAlt(alt);
+      let sizeAttrs = '';
+      if (size) {
+        sizeAttrs = `width="${size.width}" `;
+        alt = alt.replace(/=(\d+)x(\d+)$/, ''); // Remove size from alt
+      }
+      const adjustedSrc = "" + src.replace(/^\.\//, remotePathPrefix);
+      logger.debug(`[IMG] - ${src} -> ${adjustedSrc}`)
+      return `img src="${adjustedSrc}" class="mk-img" ${sizeAttrs} alt="${alt.trim()}"`
+    }
+  );
+}
+
+/**
+ * Replace Vue template syntax to prevent interpretation
+ * Escapes {{ }} so they display literally in markdown
+ * 
+ * @param {string} text - HTML/text with potential Vue syntax
+ * @returns {string} Text with escaped Vue syntax
+ */
+export function replaceVueSpecial(text) {
+  const regex = /\{\{\s*(.+?)\s*\}\}/g;
+  const after = text.replace(regex, '&lbrace;&lbrace;$1&rbrace;&rbrace;');
+  return after
+}
+
+/**
+ * Remove YAML front matter from markdown text
+ * Front matter is enclosed in --- delimiters
+ * 
+ * @param {string} markdownText - Markdown text that may have front matter
+ * @returns {string} Markdown text without front matter
+ */
+export function removeMarkdownHeader(markdownText) {
+  let text = markdownText
+  if(text.startsWith("---")) {
+    const lines = text.split('\n');
+    for (let i = 1; i < lines.length; i++) {
+      const line = lines[i]
+      if(line.includes("---")) {
+        logger.debug(`${i} lines of header`)
+        return lines.slice(i+1).join("\n")
+      }
+      if(line.includes("#")) {
+        return text
+      }
+    }
+  }
+  return text
+}
+
+
+// ________________________________________________________________________________
+// EXPORTED UTILITY FUNCTIONS
+// ________________________________________________________________________________
+/**
+ * Slugify a string for use as an anchor ID
+ * Matches markdown-it-anchor behavior with custom normalization
+ *
+ * Converts: "Common Example / Skeleton" -> "common-example-skeleton"
+ * Converts: "Test & Validation" -> "test-validation"
+ * Converts: "100% Coverage" -> "100-coverage"
+ *
+ * @param {string} str - String to slugify
+ * @returns {string} Slugified string
+ */
+export function slugify(str) {
+    return str.toLowerCase()
+        .trim()
+        .replace(/\s+/g, '-')           // spaces → hyphens
+        .replace(/[^\w\-]+/g, '-')      // special chars → hyphens
+        .replace(/\-\-+/g, '-')         // multiple hyphens → single hyphen
+        .replace(/^-+/, '')             // trim leading hyphens
+        .replace(/-+$/, '')             // trim trailing hyphens
+}

package/components/Tree.mjs

@@ -0,0 +1,175 @@
+
+
+export function buildNode(key, label, path = null, metadata = null, isDir = true, expanded = false) {
+    return {
+        key: key,
+        path: path,
+        label: label,
+        children: [],
+        expanded: expanded,
+        isDirectory: isDir,
+        metadata: metadata,
+        parent: null
+    }
+}
+
+/*
+  Given output of linux file command will return the symbolic link it points to.
+  input:
+    /opt/c0ckp1t/projects/terraform/sorsha-public-0: symbolic link to /home/ellis/github/c0ckp1t-content-private/wf-sorsha-deploy/data/terraform/sorsha-public-0
+  output:
+    /home/ellis/github/c0ckp1t-content-private/wf-sorsha-deploy/data/terraform/sorsha-public-0
+ */
+export function extractSymbolicLinkTarget(inputString) {
+  const linkIndicator = "symbolic link to ";
+  const startIndex = inputString.indexOf(linkIndicator);
+  if (startIndex === -1) {
+    throw "[extractSymbolicLinkTarget] - link indicator not found"
+  }
+  return inputString.substring(startIndex + linkIndicator.length).trim();
+}
+
+export function pathToKeyArr(path) {
+    if(path === "" || path === null) return [""]
+    if(path === "/") return [""]
+    if(path.trim().endsWith('/')) throw Error("Path must not have a trailing slash ")
+    const dirs = path.split("/")
+    return dirs
+}
+
+export function lastKey(path) {
+    const arr = pathToKeyArr(path)
+    if(arr.length === 0) return ""
+    return arr.pop()
+}
+
+export function cleanAbsPath(absPath) {
+    if (absPath === '/') return '/'
+    if (absPath === null) throw Error("absPath cannot be null")
+    let absPathCleaned = absPath.trim()
+    if (absPathCleaned.at(-1) === '/') return absPathCleaned.slice(0, absPathCleaned.length - 1)
+    return absPathCleaned
+}
+
+
+export function Tree(rootKey, rootPath, rootLabel) {
+    this.root = [{
+        key: rootKey,
+        label: rootLabel,
+        path: rootPath,
+        parent: null,
+        metadata: null,
+        children: [],
+        expanded: true,
+        isDirectory: true
+    }]
+
+
+
+    this.insertByParent = function (parentNode, insertNode) {
+        if(!parentNode.hasOwnProperty('children')) throw Error("parentNode doesn't have children property")
+        if(!Array.isArray(parentNode.children)) throw Error("children property is not an array")
+        const index = parentNode.children.findIndex(node => node.key === insertNode.key)
+        if(index === -1) {
+            // not found so insert into back of array then sort
+            parentNode.children.push(insertNode)
+            parentNode.children = parentNode.children.slice().sort((a, b) => a.key.localeCompare(b.key))
+        } else {
+            // overwrite
+            parentNode.children[index] = insertNode
+        }
+
+        if(parentNode.path === '/') {
+            insertNode.path = `/${insertNode.key}`
+        } else {
+            insertNode.path = `${parentNode.path}/${insertNode.key}`
+        }
+        insertNode.parent = parentNode
+        return insertNode
+    }
+
+
+
+
+
+    this.findOrCreateParent = function(keyArr) {
+        if(!Array.isArray(keyArr))  throw Error("findOrCreateParent - keyArr parameter is not an array")
+        if(keyArr.length === 0) return this.root[0]
+        let currentNode = this.root[0]
+        if(currentNode.key !== keyArr[0])  throw Error(`findOrCreateParent - keyArr is not valid ${keyArr[0]}!=${currentNode.key}`)
+        // we expect the keyArr[0] to be the key of the root[0]
+        keyArr.shift()
+        for (let key of keyArr) {
+            const index = currentNode.children.findIndex(node => node.key === key)
+            if(index === -1) {
+                const newNode = buildNode(key, `${currentNode.path}/${key}`, key)
+                this.insertByParent(currentNode, newNode)
+                currentNode = newNode
+            } else {
+                currentNode = currentNode.children[index]
+            }
+        }
+        return currentNode
+    }
+
+    this.insertByKeyArr = function (insertArr, insertNode) {
+        if(!Array.isArray(insertArr))  throw Error("insertArr parameter is not an array")
+        const parent = this.findOrCreateParent(insertArr)
+        return this.insertByParent(parent, insertNode)
+    }
+
+    this.findNode = function(keyArr) {
+        let currentNode = this.root[0]
+        if(currentNode.key !== keyArr[0])  throw Error(`keyArr is not valid ${keyArr[0]}!=${currentNode.key}`)
+        // we expect the keyArr[0] to be the key of the root[0]
+        keyArr.shift()
+        for (let key of keyArr) {
+            const index = currentNode.children.findIndex(node => node.key === key)
+            if(index !== -1) {
+                currentNode = currentNode.children[index]
+            } else {
+                throw Error(`Parent not found using keyArr=${keyArr}`)
+            }
+        }
+        return currentNode
+    }
+
+    this.deleteByKeyArr = function (deleteArr) {
+        if(!Array.isArray(deleteArr))  throw Error("deleteArr parameter is not an array")
+        const parent = this.findNode(deleteArr).parent
+        const key = deleteArr[deleteArr.length - 1]
+        const index = parent.children.findIndex(node => node.key === key)
+        // console.log(`[deleteArr] - index=${index} - parent=${parent.label}`)
+        // returns the deleted item
+        return parent.children.splice(index, 1)[0]
+    }
+
+    this.deleteNode = function (node) {
+        if(node == this.root[0])  throw Error("cannot delete root")
+        const parent = node.parent
+        const index = parent.children.findIndex(child => child.key === node.key)
+        // console.log(`[deleteArr] - index=${index} - parent=${parent.label}`)
+        // returns the deleted item
+        return parent.children.splice(index, 1)[0]
+    }
+
+    this.nodeToString = function(node, indent = 0) {
+        let output = ' '.repeat(indent) + `${node.key} - ${node.path}\n`
+        return output + this.childrenToString(node.children, indent + 1)
+    }
+
+    this.childrenToString = function(children, indent = 0) {
+        // console.log(children)
+        if(!Array.isArray(children)) throw Error("children property is not an array")
+        let output = ""
+        for (let node of children) {
+            output += this.nodeToString(node, indent)
+        }
+        return output
+    }
+
+    this.toString = function() {
+        return this.childrenToString(this.root)
+    }
+}
+