view COBRAxy/docs/index.html @ 542:fcdbc81feb45 draft

Uploaded
author francesco_lapi
date Sun, 26 Oct 2025 19:27:41 +0000
parents 4ed95023af20
children
line wrap: on
line source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>COBRAxy Documentation</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="COBRAxy - A Python toolkit for metabolic flux analysis and visualization">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/dark.css">
  <style>
    :root {
      --theme-color: #4CAF50;
      --text-color-base: #e1e4e8;
      --background-color: #0d1117;
      --sidebar-background: #161b22;
      --code-background: #21262d;
    }
    
    body {
      background-color: var(--background-color);
      color: var(--text-color-base);
    }
    
    .sidebar {
      background-color: var(--sidebar-background);
      border-right: 1px solid #30363d;
    }
    
    .sidebar-nav a {
      color: var(--text-color-base);
    }
    
    .sidebar-nav a:hover {
      color: var(--theme-color);
    }
    
    /* Main category styling - bold and larger */
    .sidebar-nav > ul > li > a,
    .sidebar-nav > ul > li > strong > a {
      font-weight: 700 !important;
      font-size: 1.1em !important;
      color: var(--theme-color) !important;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 1em;
      display: block;
    }
    
    /* Sub-items styling - normal weight and smaller */
    .sidebar-nav > ul > li > ul > li > a {
      font-weight: 400 !important;
      font-size: 0.95em !important;
      color: var(--text-color-base) !important;
      padding-left: 1.5em;
    }
    
    /* Collapsible arrows */
    .sidebar-nav > ul > li.folder > a::before {
      content: '▶';
      display: inline-block;
      margin-right: 0.5em;
      transition: transform 0.2s;
      font-size: 0.7em;
    }
    
    .sidebar-nav > ul > li.folder.open > a::before {
      transform: rotate(90deg);
    }
    
    /* Hide sub-items by default */
    .sidebar-nav > ul > li.folder > ul {
      display: none;
    }
    
    .sidebar-nav > ul > li.folder.open > ul {
      display: block;
    }
    
    .app-name-link {
      color: var(--theme-color) !important;
      font-weight: 600;
    }
    
    .app-name img {
      max-height: 50px;
      max-width: 250px;
      margin-right: 10px;
      vertical-align: middle;
    }
    
    .sidebar > h1 > img {
      max-height: 50px;
      width: auto;
    }
    
    .markdown-section {
      background-color: var(--background-color);
      color: var(--text-color-base);
    }
    
    .markdown-section code {
      background-color: var(--code-background);
      color: #f0f6fc;
      border-radius: 6px;
      padding: 0.2em 0.4em;
      border: 1px solid #30363d;
    }
    
    .markdown-section pre {
      background-color: var(--code-background);
      border: 1px solid #30363d;
    }
    
    .markdown-section pre > code {
      background-color: var(--code-background);
      color: #f0f6fc;
    }
    
    .markdown-section table {
      border-collapse: collapse;
      border: 1px solid #30363d;
    }
    
    .markdown-section th,
    .markdown-section td {
      border: 1px solid #30363d;
      background-color: var(--code-background);
    }
    
    .markdown-section th {
      background-color: #21262d;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: 'COBRAxy',
      logo: './_media/logo.png',
      loadSidebar: true,
      loadNavbar: false,
      subMaxLevel: 3,
      auto2top: true,
      
      // Sidebar configuration
      alias: {
        '/.*/_sidebar.md': '/_sidebar.md'
      },
      sidebarDisplayLevel: 1, // Expand sidebar to level 1 by default
      
      // Search plugin
      search: {
        maxAge: 86400000, // Expiration time, the default one day
        paths: 'auto',
        placeholder: 'Search documentation...',
        noData: 'No results found.',
        depth: 3
      },
      
      // Copy code plugin  
      copyCode: {
        buttonText: 'Copy',
        errorText: 'Error',
        successText: 'Copied'
      },
      
      // Zoom image plugin
      zoom: {
        selector: '.medium-zoom-image',
        delay: 1000,
        options: {
          bgColor: 'rgba(0,0,0,0.8)',
          zIndex: 99999
        }
      },
      
      // Tabs plugin
      tabs: {
        persist: true,
        sync: true,
        theme: 'classic',
        tabComments: true,
        tabHeadings: true
      }
    }
  </script>
  
  <!-- Core Docsify -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  
  <!-- Search plugin -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  
  <!-- Copy code plugin -->
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
  
  <!-- Zoom image plugin -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
  
  <!-- Tabs plugin -->
  <script src="//cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
  
  <!-- Code syntax highlighting -->
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-yaml.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-xml.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
  
  <!-- Sidebar collapse script -->
  <script>
    window.addEventListener('load', function() {
      // Wait for sidebar to be rendered
      setTimeout(function() {
        const sidebar = document.querySelector('.sidebar-nav');
        if (!sidebar) return;
        
        // Mark items with sub-lists as folders
        const items = sidebar.querySelectorAll('ul > li');
        items.forEach(item => {
          const hasSublist = item.querySelector('ul');
          if (hasSublist) {
            item.classList.add('folder');
            
            // Get the main link
            const mainLink = item.querySelector('a');
            if (mainLink) {
              // Create a toggle button for the arrow
              const arrow = mainLink.querySelector('::before') || mainLink;
              
              // Add click handler that allows navigation but also toggles on second click
              let clickCount = 0;
              let clickTimer = null;
              
              mainLink.addEventListener('click', function(e) {
                clickCount++;
                
                if (clickCount === 1) {
                  // First click: navigate to the page
                  clickTimer = setTimeout(function() {
                    clickCount = 0;
                  }, 300);
                  // Don't prevent default, allow navigation
                  item.classList.add('open');
                } else if (clickCount === 2) {
                  // Second click: toggle the folder
                  clearTimeout(clickTimer);
                  clickCount = 0;
                  e.preventDefault();
                  item.classList.toggle('open');
                }
              });
            }
          }
        });
        
        // Open the active section by default
        const activeLink = sidebar.querySelector('li.active');
        if (activeLink) {
          let parent = activeLink.parentElement;
          while (parent && parent.tagName === 'UL') {
            const parentLi = parent.parentElement;
            if (parentLi && parentLi.classList.contains('folder')) {
              parentLi.classList.add('open');
            }
            parent = parentLi ? parentLi.parentElement : null;
          }
        }
      }, 300);
    });
  </script>
</body>
</html>