osvm 0.8.3 - Docs.rs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OSVM CLI Documentation</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="css/multipage.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <meta name="description" content="Documentation for OSVM CLI - A powerful command-line interface for managing Solana Virtual Machines">

    <!-- Marked.js for markdown parsing - try multiple CDNs for reliability -->
    <script src="https://unpkg.com/marked/marked.min.js"></script>
    <!-- Mermaid.js for diagram rendering -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
    <script>
        // Fallback if marked.js fails to load
        if (typeof marked === 'undefined') {
            // Simple markdown parser fallback
            window.marked = {
                parse: function(markdown) {
                    return markdown
                        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
                        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
                        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
                        .replace(/^#### (.*$)/gim, '<h4>$1</h4>')
                        .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
                        .replace(/\*(.*)\*/gim, '<em>$1</em>')
                        .replace(/\[(.*?)\]\((.*?)\)/gim, '<a href="$2">$1</a>')
                        .replace(/```([\s\S]*?)```/gim, '<pre><code>$1</code></pre>')
                        .replace(/`(.*?)`/gim, '<code>$1</code>')
                        .replace(/^\- (.*$)/gim, '<li>$1</li>')
                        .replace(/(<li>.*<\/li>)/gims, '<ul>$1</ul>')
                        .replace(/\n/gim, '<br>');
                },
                setOptions: function() { /* no-op */ }
            };
        }
    </script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
            line-height: 1.6;
            color: #e0e0e0;
            background: #1a1a1a;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            text-align: center;
            padding: 40px 0;
            color: #e0e0e0;
            border-bottom: 2px solid #808080;
        }
        
        .logo {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 0 0 10px #808080;
            font-family: monospace;
        }
        
        .tagline {
            font-size: 1.1rem;
            margin-bottom: 20px;
            opacity: 0.9;
            color: #c0c0c0;
        }

        .token-mint-section {
            margin: 20px 0;
            padding: 20px;
            background: #333333;
            border: 1px solid #555555;
            border-radius: 8px;
        }

        .token-mint-header {
            font-size: 1.2rem;
            color: #e0e0e0;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .token-mint-container {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .token-mint-input {
            flex: 1;
            min-width: 300px;
            padding: 12px;
            background: #1a1a1a;
            border: 1px solid #555555;
            color: #e0e0e0;
            font-family: monospace;
            font-size: 0.9rem;
            border-radius: 4px;
        }

        .copy-button {
            padding: 12px 16px;
            background: #808080;
            color: #1a1a1a;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-family: monospace;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .copy-button:hover {
            background: #999999;
            transform: translateY(-1px);
        }

        .copy-button:active {
            transform: translateY(0);
        }

        .copy-feedback {
            color: #90EE90;
            font-size: 0.9rem;
            margin-left: 10px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .copy-feedback.show {
            opacity: 1;
        }
        
        .nav-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .btn {
            display: inline-block;
            padding: 10px 20px;
            border: 2px solid #808080;
            background: transparent;
            color: #e0e0e0;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
            font-family: monospace;
            text-transform: uppercase;
        }
        
        .btn-primary {
            background: #808080;
            color: #1a1a1a;
        }
        
        .btn-primary:hover {
            background: transparent;
            color: #e0e0e0;
            box-shadow: 0 0 10px #808080;
        }
        
        .btn-secondary {
            background: transparent;
            color: #e0e0e0;
            border: 1px solid #555555;
        }
        
        .btn-secondary:hover {
            border-color: #808080;
            box-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
        }
        
        main {
            background: #2a2a2a;
            border: 2px solid #808080;
            margin: 20px auto;
            max-width: 1200px;
            min-height: calc(100vh - 200px);
        }
        
        .content {
            padding: 40px;
        }
        
        /* Markdown content styling */
        .markdown-content h1 {
            color: #e0e0e0;
            font-size: 2.5rem;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid #808080;
            font-family: monospace;
        }
        
        .markdown-content h2 {
            color: #e0e0e0;
            font-size: 2rem;
            margin: 30px 0 15px 0;
            padding-bottom: 8px;
            border-bottom: 2px solid #555555;
            font-family: monospace;
        }
        
        .markdown-content h3 {
            color: #d0d0d0;
            font-size: 1.5rem;
            margin: 25px 0 10px 0;
            font-family: monospace;
        }
        
        .markdown-content h4 {
            color: #d0d0d0;
            font-size: 1.2rem;
            margin: 20px 0 8px 0;
            font-family: monospace;
        }
        
        .markdown-content p {
            margin-bottom: 15px;
            line-height: 1.7;
            color: #c0c0c0;
        }
        
        .markdown-content ul, .markdown-content ol {
            margin: 15px 0;
            padding-left: 30px;
            color: #c0c0c0;
        }
        
        .markdown-content li {
            margin-bottom: 8px;
        }
        
        .markdown-content a {
            color: #e0e0e0;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .markdown-content a:hover {
            color: #f0f0f0;
            text-decoration: underline;
        }
        
        .markdown-content code {
            background: #333333;
            padding: 2px 6px;
            border: 1px solid #555555;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.9em;
            color: #00ff41;
        }
        
        .markdown-content pre {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 15px 0;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            line-height: 1.4;
        }
        
        .markdown-content pre code {
            background: none;
            padding: 0;
            color: inherit;
            font-size: 0.9rem;
        }
        
        .markdown-content blockquote {
            border-left: 4px solid #667eea;
            padding-left: 20px;
            margin: 20px 0;
            background: #f8f9fa;
            padding: 15px 20px;
            border-radius: 0 8px 8px 0;
        }
        
        .markdown-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .markdown-content th, .markdown-content td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }
        
        .markdown-content th {
            background: #667eea;
            color: white;
            font-weight: bold;
        }
        
        .markdown-content tr:hover {
            background: #f8f9fa;
        }
        
        .loading {
            text-align: center;
            padding: 60px 0;
            color: #666;
            font-size: 1.1rem;
        }
        
        .error {
            text-align: center;
            padding: 60px 0;
            color: #e53e3e;
            font-size: 1.1rem;
        }
        
        /* Mermaid diagram styling */
        .mermaid {
            text-align: center;
            margin: 20px 0;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .breadcrumb {
            background: #f8f9fa;
            padding: 15px 40px;
            border-bottom: 1px solid #e9ecef;
            font-size: 0.9rem;
        }
        
        .breadcrumb a {
            color: #667eea;
            text-decoration: none;
        }
        
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        
        footer {
            background: #2d3748;
            color: white;
            text-align: center;
            padding: 30px 0;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        
        .footer-links a {
            color: #cbd5e0;
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }
        
        .footer-links a:hover {
            color: white;
        }
        
        @media (max-width: 768px) {
            .logo {
                font-size: 2rem;
            }
            
            .tagline {
                font-size: 1rem;
            }
            
            .nav-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .content {
                padding: 20px;
            }
            
            .breadcrumb {
                padding: 15px 20px;
            }
            
            .markdown-content h1 {
                font-size: 2rem;
            }
            
            .markdown-content h2 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- Terminal Window Frame -->
    <div class="terminal-window">
        <!-- Terminal Header with Navigation -->
        <div class="terminal-header">
            <div class="terminal-buttons">
                <span class="btn-close"></span>
                <span class="btn-minimize"></span>
                <span class="btn-maximize"></span>
            </div>
            <div class="terminal-title">osvm-cli@docs:~$</div>
            <div class="terminal-nav">
                <button class="search-trigger" onclick="toggleSearch()" title="Search (Ctrl+K)">
                    <span class="search-icon">🔍</span>
                    <span class="search-label">Search</span>
                    <span class="search-kbd">⌘K</span>
                </button>
            </div>
        </div>

        <!-- Main Navigation Bar -->
        <nav class="main-navigation">
            <div class="nav-container">
                <div class="nav-brand">
                    <span class="nav-logo">⚡</span>
                    <span class="nav-title">OSVM CLI</span>
                </div>

                <ul class="nav-menu">
                    <li><a href="index.html" class="nav-link">Home</a></li>
                    <li><a href="#" data-page="installation" class="nav-link">Install</a></li>
                    <li><a href="#" data-page="plugins" class="nav-link">Plugins</a></li>
                    <li><a href="#" data-page="themes" class="nav-link">Themes</a></li>
                    <li><a href="#" data-page="ai-integration" class="nav-link">AI</a></li>
                    <li><a href="#" data-page="mcp-servers" class="nav-link">MCP</a></li>
                    <li><a href="#" data-page="node-deployment" class="nav-link">Deploy</a></li>
                    <li><a href="#" data-page="api-reference" class="nav-link active">API</a></li>
                </ul>

                <div class="nav-actions">
                    <button class="search-btn" onclick="toggleSearch()">
                        <span>Search</span>
                        <kbd>Ctrl+K</kbd>
                    </button>
                </div>
            </div>
        </nav>

        <!-- Breadcrumb Navigation -->
        <div class="breadcrumb-container">
            <nav class="breadcrumb" id="breadcrumb">
                <span class="breadcrumb-item">
                    <span class="prompt">~/</span>
                    <span id="current-page-breadcrumb">documentation</span>
                </span>
            </nav>
        </div>

        <!-- Token Mint Section -->
        <div class="token-mint-section">
            <div class="token-mint-header">🪙 OSVM Token Mint Address</div>
            <div class="token-mint-container">
                <input type="text" id="tokenMint" class="token-mint-input" value="pvv4fu1RvQBkKXozyH5A843sp1mt6gTy9rPoZrBBAGS" readonly>
                <button class="copy-button" onclick="copyTokenMint()">📋 Copy</button>
                <span id="copyFeedback" class="copy-feedback">Copied!</span>
            </div>
        </div>

        <!-- Main Content Container -->
        <main class="page-content" id="main-content">
            <div id="markdown-content" class="markdown-content">
                <div class="loading-container">
                    <div class="loading-spinner">⠋</div>
                    <p>Loading documentation...</p>
                </div>
            </div>
        </main>

        <!-- Footer -->
        <footer class="terminal-footer">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>RESOURCES</h4>
                    <ul>
                        <li><a href="https://github.com/opensvm/osvm-cli">GitHub</a></li>
                        <li><a href="https://github.com/opensvm/osvm-cli/releases">Releases</a></li>
                        <li><a href="https://github.com/opensvm/osvm-cli/issues">Issues</a></li>
                        <li><a href="https://discord.gg/opensvm">Discord</a></li>
                    </ul>
                </div>

                <div class="footer-section">
                    <h4>DOCUMENTATION</h4>
                    <ul>
                        <li><a href="docs.html?doc=README">Documentation Index</a></li>
                        <li><a href="#" data-page="plugins">Plugin Development</a></li>
                        <li><a href="#" data-page="api-reference">API Reference</a></li>
                        <li><a href="#" data-page="node-deployment">Deployment Guide</a></li>
                    </ul>
                </div>

                <div class="footer-section">
                    <h4>COMMUNITY</h4>
                    <ul>
                        <li><a href="https://twitter.com/opensvm">Twitter</a></li>
                        <li><a href="https://t.me/opensvm">Telegram</a></li>
                        <li><a href="mailto:hello@opensvm.org">Contact</a></li>
                        <li><a href="https://blog.opensvm.org">Blog</a></li>
                    </ul>
                </div>

                <div class="footer-section">
                    <h4>SHORTCUTS</h4>
                    <ul>
                        <li><kbd>Ctrl+K</kbd> Search</li>
                        <li><kbd>Alt+1-8</kbd> Navigate pages</li>
                        <li><kbd>Esc</kbd> Close modals</li>
                        <li><kbd>Tab</kbd> Focus navigation</li>
                    </ul>
                </div>
            </div>

            <div class="copyright">
                <div class="command-line">
                    <span class="prompt">osvm@docs:~$</span>
                    <span class="command">echo "MIT License © 2024 OpenSVM"</span>
                </div>
            </div>
        </footer>
    </div>

    <!-- Loading Scripts -->
    <script src="script.js"></script>
    <script src="js/navigation.js"></script>
    <script src="js/search.js"></script>
    <script src="js/animations.js"></script>

    <script>
        // Get the document to load from URL parameter
        function getDocumentName() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('doc') || 'README';
        }

        // Update page title and breadcrumb
        function updatePageInfo(docName) {
            const breadcrumbElement = document.getElementById('current-page-breadcrumb');

            // Convert filename to readable title
            const title = docName
                .replace(/-/g, ' ')
                .replace(/\b\w/g, l => l.toUpperCase());

            if (breadcrumbElement) {
                breadcrumbElement.textContent = `documentation/${title}`;
            }
            document.title = `${title} - OSVM CLI Documentation`;
        }
        
        // Process mermaid diagrams in the loaded content
        function processMermaidDiagrams() {
            // Find all code blocks that contain mermaid
            const codeBlocks = document.querySelectorAll('pre code');
            
            codeBlocks.forEach((codeBlock, index) => {
                let text = codeBlock.textContent.trim();
                const parentPre = codeBlock.parentElement;
                
                // Check if this is a mermaid diagram - look for mermaid language or text starting with flowchart/graph/sequenceDiagram etc.
                const isMermaidLang = codeBlock.className.includes('language-mermaid') || 
                                     parentPre.querySelector('code[class*="language-mermaid"]');
                const isMermaidContent = text.startsWith('flowchart') || 
                                        text.startsWith('graph') || 
                                        text.startsWith('sequenceDiagram') || 
                                        text.startsWith('classDiagram') || 
                                        text.startsWith('stateDiagram') ||
                                        text.startsWith('pie') ||
                                        text.startsWith('gantt') ||
                                        text.startsWith('journey') ||
                                        text.startsWith('gitgraph') ||
                                        text.includes('subgraph');
                
                if (isMermaidLang || isMermaidContent) {
                    // Clean up the text - remove "mermaid" prefix if it exists
                    if (text.startsWith('mermaid\n') || text.startsWith('mermaid\r\n')) {
                        text = text.substring(text.indexOf('\n') + 1).trim();
                    } else if (text.startsWith('mermaidflowchart')) {
                        text = text.substring(7); // Remove "mermaid" prefix
                    }
                    
                    // Create a new div for the mermaid diagram
                    const mermaidDiv = document.createElement('div');
                    mermaidDiv.className = 'mermaid';
                    mermaidDiv.setAttribute('id', `mermaid-${index}`);
                    // Preserve line breaks and whitespace properly
                    mermaidDiv.style.whiteSpace = 'pre';
                    mermaidDiv.textContent = text;
                    
                    // Replace the code block with the mermaid div
                    parentPre.parentElement.replaceChild(mermaidDiv, parentPre);
                }
            });
            
            // Initialize mermaid if diagrams were found and library is available
            const mermaidDivs = document.querySelectorAll('.mermaid');
            if (mermaidDivs.length > 0) {
                // Initialize mermaid when library is available
                const initMermaid = () => {
                    if (typeof mermaid !== 'undefined') {
                        try {
                            // Configure mermaid
                            mermaid.initialize({
                                startOnLoad: true,
                                theme: 'default',
                                securityLevel: 'loose'
                            });
                        } catch (error) {
                            console.error('Error initializing mermaid:', error);
                        }
                    } else {
                        console.warn('Mermaid library not available');
                        // Show fallback content
                        mermaidDivs.forEach(div => {
                            div.innerHTML = '<p><em>Mermaid diagram (requires mermaid.js)</em></p><pre style="background:#f4f4f4;padding:10px;border-radius:4px;"><code>' + div.textContent + '</code></pre>';
                        });
                    }
                };
                
                // Try to initialize after a delay to ensure library is loaded
                setTimeout(initMermaid, 500);
            }
        }
        
        // Load and render markdown content
        async function loadDocument(docName) {
            const contentElement = document.getElementById('markdown-content');
            
            try {
                updatePageInfo(docName);
                
                const response = await fetch(`docs/${docName}.md`);
                if (!response.ok) {
                    throw new Error(`Failed to load document: ${response.status}`);
                }
                
                const markdown = await response.text();
                
                // Configure marked options
                marked.setOptions({
                    breaks: true,
                    gfm: true,
                    headerIds: true,
                    mangle: false
                });
                
                // Render markdown to HTML
                const html = marked.parse(markdown);
                
                // Process links to use the documentation system
                const processedHtml = html.replace(
                    /href="([^"]+\.md)"/g,
                    (match, url) => {
                        // Convert relative markdown links to use docs.html
                        const docName = url.replace('.md', '').replace('docs/', '');
                        return `href="docs.html?doc=${docName}"`;
                    }
                );
                
                contentElement.innerHTML = processedHtml;
                
                // Process mermaid diagrams
                processMermaidDiagrams();
                
                // Scroll to top
                window.scrollTo(0, 0);
                
            } catch (error) {
                console.error('Error loading document:', error);
                contentElement.innerHTML = `
                    <div class="error">
                        <h2>Document Not Found</h2>
                        <p>Sorry, we couldn't load the requested documentation.</p>
                        <p><a href="docs.html?doc=README">Return to Documentation Index</a></p>
                    </div>
                `;
            }
        }
        
        // Initialize the application with enhanced features
        document.addEventListener('DOMContentLoaded', () => {
            console.log('🚀 OSVM CLI Documentation Loading...');

            // Initialize all systems
            if (typeof initNavigation === 'function') {
                initNavigation();
            }
            if (typeof initAnimations === 'function') {
                initAnimations();
            }

            // Load the requested document
            const docName = getDocumentName();
            loadDocument(docName);

            // Add initialization complete message
            setTimeout(() => {
                console.log('✅ Documentation system ready');
            }, 1000);
        });

        // Handle browser navigation
        window.addEventListener('popstate', () => {
            const docName = getDocumentName();
            loadDocument(docName);
        });

        // Copy token mint function with enhanced feedback
        function copyTokenMint() {
            const tokenInput = document.getElementById('tokenMint');
            const feedback = document.getElementById('copyFeedback');

            // Select and copy the text
            tokenInput.select();
            tokenInput.setSelectionRange(0, 99999); // For mobile devices

            try {
                // Try modern clipboard API first
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(tokenInput.value).then(() => {
                        showCopyFeedback(feedback);
                    }).catch(() => {
                        // Fallback to execCommand
                        fallbackCopy(tokenInput, feedback);
                    });
                } else {
                    fallbackCopy(tokenInput, feedback);
                }
            } catch (err) {
                console.error('Failed to copy token mint address');
            }

            // Deselect the input
            tokenInput.blur();
        }

        function fallbackCopy(tokenInput, feedback) {
            try {
                document.execCommand('copy');
                showCopyFeedback(feedback);
            } catch (err) {
                console.error('Fallback copy failed');
            }
        }

        function showCopyFeedback(feedback) {
            feedback.classList.add('show');
            setTimeout(() => {
                feedback.classList.remove('show');
            }, 2000);
        }

        // Enhanced command copying functionality
        function copyCommand(command) {
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(command).then(() => {
                    showNotification(`Copied: ${command}`, 'success');
                });
            } else {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = command;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                showNotification(`Copied: ${command}`, 'success');
            }
        }

        // Show notification (if notification system exists)
        function showNotification(message, type = 'info') {
            console.log(`[${type.toUpperCase()}] ${message}`);

            // If notification system is available, use it
            if (typeof createNotification === 'function') {
                createNotification(message, type);
            }
        }

        // Make functions globally available
        window.copyCommand = copyCommand;
        window.copyTokenMint = copyTokenMint;
    </script>
</body>
</html>