tracer-cloud--opensre/docs/toc-actions.js

// Add custom actions to "On this page" table of contents
(function () {
    // Convert HTML to Markdown
    function htmlToMarkdown(element) {
        let markdown = "";

        // Get page title
        const title =
            document.querySelector("h1")?.textContent || document.title;
        markdown += `# ${title}\n\n`;

        // Process all child nodes
        function processNode(node) {
            if (node.nodeType === Node.TEXT_NODE) {
                const text = node.textContent.trim();
                if (text) return text;
                return "";
            }

            if (node.nodeType !== Node.ELEMENT_NODE) return "";

            const tag = node.tagName.toLowerCase();
            let result = "";

            // Headings
            if (tag.match(/^h[2-6]$/)) {
                const level = parseInt(tag[1]);
                const text = node.textContent.trim();
                result = "\n" + "#".repeat(level) + " " + text + "\n\n";
            }
            // Paragraphs
            else if (tag === "p") {
                result = processChildren(node) + "\n\n";
            }
            // Links
            else if (tag === "a") {
                const href = node.getAttribute("href") || "";
                const text = node.textContent.trim();
                result = `[${text}](${href})`;
            }
            // Strong/Bold
            else if (tag === "strong" || tag === "b") {
                result = `**${processChildren(node)}**`;
            }
            // Emphasis/Italic
            else if (tag === "em" || tag === "i") {
                result = `*${processChildren(node)}*`;
            }
            // Code inline
            else if (tag === "code" && node.parentElement.tagName !== "PRE") {
                result = `\`${node.textContent}\``;
            }
            // Code blocks
            else if (tag === "pre") {
                const code = node.querySelector("code");
                const language =
                    code?.className.match(/language-(\w+)/)?.[1] || "";
                const codeText = code?.textContent || node.textContent;
                result =
                    "\n```" + language + "\n" + codeText.trim() + "\n```\n\n";
            }
            // Lists
            else if (tag === "ul") {
                result = "\n" + processListItems(node, false) + "\n";
            } else if (tag === "ol") {
                result = "\n" + processListItems(node, true) + "\n";
            } else if (tag === "li") {
                // Handled by processListItems
                result = processChildren(node);
            }
            // Blockquotes
            else if (tag === "blockquote") {
                const lines = processChildren(node).split("\n");
                result =
                    lines.map((line) => (line ? "> " + line : ">")).join("\n") +
                    "\n\n";
            }
            // Images
            else if (tag === "img") {
                const src = node.getAttribute("src") || "";
                const alt = node.getAttribute("alt") || "";
                result = `![${alt}](${src})`;
            }
            // Horizontal rule
            else if (tag === "hr") {
                result = "\n---\n\n";
            }
            // Tables
            else if (tag === "table") {
                result = processTable(node);
            }
            // Line breaks
            else if (tag === "br") {
                result = "\n";
            }
            // Default: process children
            else {
                result = processChildren(node);
            }

            return result;
        }

        function processChildren(node) {
            let result = "";
            for (const child of node.childNodes) {
                result += processNode(child);
            }
            return result;
        }

        function processListItems(listNode, ordered) {
            let result = "";
            let index = 1;
            for (const li of listNode.children) {
                if (li.tagName === "LI") {
                    const prefix = ordered ? `${index}. ` : "- ";
                    const content = processChildren(li).trim();
                    result += prefix + content + "\n";
                    index++;
                }
            }
            return result;
        }

        function processTable(tableNode) {
            let result = "\n";
            const rows = tableNode.querySelectorAll("tr");

            rows.forEach((row, rowIndex) => {
                const cells = row.querySelectorAll("th, td");
                const cellContents = Array.from(cells).map((cell) =>
                    cell.textContent.trim(),
                );
                result += "| " + cellContents.join(" | ") + " |\n";

                // Add separator after header row
                if (rowIndex === 0 && row.querySelector("th")) {
                    result +=
                        "| " +
                        cellContents.map(() => "---").join(" | ") +
                        " |\n";
                }
            });

            return result + "\n";
        }

        // Process the content
        markdown += processChildren(element);

        // Clean up extra newlines
        markdown = markdown.replace(/\n{3,}/g, "\n\n").trim();

        return markdown;
    }

    function addTocActions() {
        // Find the table of contents container
        const tocSelectors = [
            "#table-of-contents-content",
            '[class*="table-of-contents"]',
            'nav[aria-label*="Table of contents"]',
            '[data-testid="table-of-contents"]',
        ];

        let tocContainer = null;
        for (const selector of tocSelectors) {
            tocContainer = document.querySelector(selector);
            if (tocContainer) break;
        }

        if (!tocContainer) return;

        // Check if we already added the actions
        if (tocContainer.querySelector(".toc-custom-actions")) return;

        // Create the actions container
        const actionsDiv = document.createElement("div");
        actionsDiv.className = "toc-custom-actions";

        // Create "Copy page as markdown" action
        const copyAction = document.createElement("div");
        copyAction.className = "toc-custom-action";
        copyAction.style.display = "flex";
        copyAction.style.alignItems = "center";
        copyAction.style.gap = "0.5rem";

        // Add markdown icon (SVG)
        const markdownIcon = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "svg",
        );
        markdownIcon.setAttribute("width", "16");
        markdownIcon.setAttribute("height", "16");
        markdownIcon.setAttribute("viewBox", "0 0 32 32");
        markdownIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
        markdownIcon.className = "toc-action-icon markdown-icon";
        markdownIcon.style.flexShrink = "0";

        const markdownPath = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path",
        );
        markdownPath.setAttribute("fill", "#444444");
        markdownPath.setAttribute(
            "d",
            "M25.674 9.221h-19.348c-0.899 0-1.63 0.731-1.63 1.63v10.869c0 0.899 0.731 1.63 1.63 1.63h19.348c0.899 0 1.63-0.731 1.63-1.63v-10.869c0-0.899-0.731-1.63-1.63-1.63zM17.413 20.522l-2.826 0.003v-4.239l-2.12 2.717-2.12-2.717v4.239h-2.826v-8.478h2.826l2.12 2.826 2.12-2.826 2.826-0.003v8.478zM21.632 21.229l-3.512-4.943h2.119v-4.239h2.826v4.239h2.119l-3.553 4.943z",
        );

        markdownIcon.appendChild(markdownPath);

        const copyText = document.createElement("span");
        copyText.textContent = "Copy page as markdown";

        copyAction.appendChild(markdownIcon);
        copyAction.appendChild(copyText);

        copyAction.onclick = async function () {
            try {
                // Get the main content container
                const contentSelectors = [
                    "#content",
                    ".mdx-content",
                    "article",
                    "main",
                    '[role="main"]',
                ];

                let contentElement = null;
                for (const selector of contentSelectors) {
                    contentElement = document.querySelector(selector);
                    if (contentElement) break;
                }

                if (!contentElement) {
                    alert("Could not find page content to copy");
                    return;
                }

                // Convert HTML to markdown
                let markdown = htmlToMarkdown(contentElement);

                // Copy to clipboard
                await navigator.clipboard.writeText(markdown);

                // Show feedback
                const originalText = copyText.textContent;
                copyText.textContent = "✓ Copied!";
                setTimeout(() => {
                    copyText.textContent = originalText;
                }, 2000);
            } catch (error) {
                console.error("Failed to copy:", error);
                alert("Failed to copy page content");
            }
        };

        // Create "Open in ChatGPT" action
        const chatgptAction = document.createElement("a");
        chatgptAction.className = "toc-custom-action";
        chatgptAction.style.textDecoration = "none";
        chatgptAction.style.display = "flex";
        chatgptAction.style.alignItems = "center";
        chatgptAction.style.gap = "0.5rem";

        // Add ChatGPT icon (SVG)
        const chatgptIcon = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "svg",
        );
        chatgptIcon.setAttribute("width", "16");
        chatgptIcon.setAttribute("height", "16");
        chatgptIcon.setAttribute("viewBox", "0 0 320 320");
        chatgptIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
        chatgptIcon.className = "toc-action-icon chatgpt-icon";
        chatgptIcon.style.flexShrink = "0";

        const chatgptPath = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path",
        );
        chatgptPath.setAttribute("fill", "#444444");
        chatgptPath.setAttribute(
            "d",
            "m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z",
        );

        chatgptIcon.appendChild(chatgptPath);

        const chatgptText = document.createElement("span");
        chatgptText.textContent = "Open in ChatGPT";

        chatgptAction.appendChild(chatgptIcon);
        chatgptAction.appendChild(chatgptText);

        // Set target and rel attributes
        chatgptAction.target = "_blank";
        chatgptAction.rel = "noopener noreferrer";

        // Update the href dynamically on click to get the current page URL
        chatgptAction.onclick = function (e) {
            // Get the current page URL - replace localhost with production URL
            let currentPageUrl = window.location.href;
            if (currentPageUrl.includes("localhost:3000")) {
                currentPageUrl = currentPageUrl.replace(
                    "http://localhost:3000",
                    "https://opensre.com/docs",
                );
            }

            // Create the prompt with the page URL
            const prompt = `Read ${currentPageUrl}`;

            // Encode the prompt for URL
            const encodedPrompt = encodeURIComponent(prompt);

            // Update the href with the current page URL
            chatgptAction.href = `https://chat.openai.com/?q=${encodedPrompt}`;
        };

        // Append actions to container
        actionsDiv.appendChild(copyAction);
        actionsDiv.appendChild(chatgptAction);

        // Append to TOC
        tocContainer.appendChild(actionsDiv);
    }

    // Run when DOM is ready
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", addTocActions);
    } else {
        addTocActions();
    }

    // Also run after a short delay to catch dynamically loaded content
    setTimeout(addTocActions, 500);
    setTimeout(addTocActions, 1000);
    setTimeout(addTocActions, 2000);

    // Use MutationObserver to watch for TOC being added to the DOM
    const observer = new MutationObserver(function (_mutations) {
        addTocActions();
    });

    // Start observing the document body for changes
    observer.observe(document.body, {
        childList: true,
        subtree: true,
    });

    // Also listen for route changes (for single-page apps)
    window.addEventListener("popstate", function () {
        setTimeout(addTocActions, 100);
        setTimeout(addTocActions, 500);
    });
})();