osvm 0.4.4 - 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>
    <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: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            text-align: center;
            padding: 40px 0;
            color: white;
        }
        
        .logo {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .tagline {
            font-size: 1.1rem;
            margin-bottom: 20px;
            opacity: 0.95;
        }
        
        .nav-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .btn {
            display: inline-block;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        .btn-primary {
            background: #fff;
            color: #667eea;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }
        
        .btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
        
        .btn-secondary:hover {
            background: white;
            color: #667eea;
        }
        
        main {
            background: white;
            margin-top: -30px;
            border-radius: 20px 20px 0 0;
            box-shadow: 0 -5px 30px rgba(0,0,0,0.1);
            position: relative;
            z-index: 1;
            min-height: calc(100vh - 200px);
        }
        
        .content {
            padding: 40px;
        }
        
        /* Markdown content styling */
        .markdown-content h1 {
            color: #667eea;
            font-size: 2.5rem;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid #667eea;
        }
        
        .markdown-content h2 {
            color: #333;
            font-size: 2rem;
            margin: 30px 0 15px 0;
            padding-bottom: 8px;
            border-bottom: 2px solid #e9ecef;
        }
        
        .markdown-content h3 {
            color: #333;
            font-size: 1.5rem;
            margin: 25px 0 10px 0;
        }
        
        .markdown-content h4 {
            color: #555;
            font-size: 1.2rem;
            margin: 20px 0 8px 0;
        }
        
        .markdown-content p {
            margin-bottom: 15px;
            line-height: 1.7;
        }
        
        .markdown-content ul, .markdown-content ol {
            margin: 15px 0;
            padding-left: 30px;
        }
        
        .markdown-content li {
            margin-bottom: 8px;
        }
        
        .markdown-content a {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .markdown-content a:hover {
            color: #5a67d8;
            text-decoration: underline;
        }
        
        .markdown-content code {
            background: #f8f9fa;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.9em;
            color: #e53e3e;
        }
        
        .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>
    <header>
        <div class="container">
            <div class="logo">OSVM CLI 📚</div>
            <div class="tagline" id="page-title">Documentation</div>
            <div class="nav-buttons">
                <a href="index.html" class="btn btn-primary">🏠 Home</a>
                <a href="docs.html?doc=README" class="btn btn-secondary">📖 Docs Index</a>
                <a href="https://github.com/openSVM/osvm-cli" class="btn btn-secondary" target="_blank">GitHub</a>
            </div>
        </div>
    </header>

    <main>
        <div class="breadcrumb">
            <a href="index.html">Home</a> > <span id="breadcrumb-path">Documentation</span>
        </div>
        
        <div class="content">
            <div id="markdown-content" class="markdown-content">
                <div class="loading">Loading documentation...</div>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <div class="footer-links">
                <a href="https://github.com/openSVM/osvm-cli">GitHub Repository</a>
                <a href="docs.html?doc=README">Documentation</a>
                <a href="https://github.com/openSVM/osvm-cli/issues">Report Issues</a>
                <a href="https://github.com/openSVM/osvm-cli/blob/main/LICENSE">License</a>
            </div>
            <p>&copy; 2024 OSVM CLI. Licensed under the MIT License.</p>
        </div>
    </footer>

    <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 titleElement = document.getElementById('page-title');
            const breadcrumbElement = document.getElementById('breadcrumb-path');
            
            // Convert filename to readable title
            const title = docName
                .replace(/-/g, ' ')
                .replace(/\b\w/g, l => l.toUpperCase());
            
            titleElement.textContent = title;
            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 page
        document.addEventListener('DOMContentLoaded', () => {
            const docName = getDocumentName();
            loadDocument(docName);
        });
        
        // Handle browser navigation
        window.addEventListener('popstate', () => {
            const docName = getDocumentName();
            loadDocument(docName);
        });
    </script>
</body>
</html>