|
492
|
1 <!DOCTYPE html>
|
|
|
2 <html lang="en">
|
|
|
3 <head>
|
|
|
4 <meta charset="UTF-8">
|
|
|
5 <title>COBRAxy Documentation</title>
|
|
|
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
7 <meta name="description" content="COBRAxy - A Python toolkit for metabolic flux analysis and visualization">
|
|
|
8 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
|
9 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/dark.css">
|
|
|
10 <style>
|
|
|
11 :root {
|
|
|
12 --theme-color: #4CAF50;
|
|
|
13 --text-color-base: #e1e4e8;
|
|
|
14 --background-color: #0d1117;
|
|
549
|
15 --sidebar-background: #0d1117;
|
|
492
|
16 --code-background: #21262d;
|
|
|
17 }
|
|
|
18
|
|
|
19 body {
|
|
|
20 background-color: var(--background-color);
|
|
|
21 color: var(--text-color-base);
|
|
|
22 }
|
|
|
23
|
|
|
24 .sidebar {
|
|
|
25 background-color: var(--sidebar-background);
|
|
|
26 border-right: 1px solid #30363d;
|
|
|
27 }
|
|
|
28
|
|
|
29 .sidebar-nav a {
|
|
|
30 color: var(--text-color-base);
|
|
|
31 }
|
|
|
32
|
|
|
33 .sidebar-nav a:hover {
|
|
|
34 color: var(--theme-color);
|
|
|
35 }
|
|
|
36
|
|
542
|
37 /* Main category styling - bold and larger */
|
|
|
38 .sidebar-nav > ul > li > a,
|
|
|
39 .sidebar-nav > ul > li > strong > a {
|
|
|
40 font-weight: 700 !important;
|
|
|
41 font-size: 1.1em !important;
|
|
|
42 color: var(--theme-color) !important;
|
|
|
43 text-transform: uppercase;
|
|
|
44 letter-spacing: 0.5px;
|
|
|
45 margin-top: 1em;
|
|
|
46 display: block;
|
|
|
47 }
|
|
|
48
|
|
|
49 /* Sub-items styling - normal weight and smaller */
|
|
|
50 .sidebar-nav > ul > li > ul > li > a {
|
|
|
51 font-weight: 400 !important;
|
|
|
52 font-size: 0.95em !important;
|
|
|
53 color: var(--text-color-base) !important;
|
|
|
54 padding-left: 1.5em;
|
|
|
55 }
|
|
|
56
|
|
|
57 /* Collapsible arrows */
|
|
|
58 .sidebar-nav > ul > li.folder > a::before {
|
|
|
59 content: '▶';
|
|
|
60 display: inline-block;
|
|
|
61 margin-right: 0.5em;
|
|
|
62 transition: transform 0.2s;
|
|
|
63 font-size: 0.7em;
|
|
|
64 }
|
|
|
65
|
|
|
66 .sidebar-nav > ul > li.folder.open > a::before {
|
|
|
67 transform: rotate(90deg);
|
|
|
68 }
|
|
|
69
|
|
|
70 /* Hide sub-items by default */
|
|
|
71 .sidebar-nav > ul > li.folder > ul {
|
|
|
72 display: none;
|
|
|
73 }
|
|
|
74
|
|
|
75 .sidebar-nav > ul > li.folder.open > ul {
|
|
|
76 display: block;
|
|
|
77 }
|
|
|
78
|
|
492
|
79 .app-name-link {
|
|
|
80 color: var(--theme-color) !important;
|
|
|
81 font-weight: 600;
|
|
|
82 }
|
|
|
83
|
|
|
84 .app-name img {
|
|
|
85 max-height: 50px;
|
|
|
86 max-width: 250px;
|
|
|
87 margin-right: 10px;
|
|
|
88 vertical-align: middle;
|
|
|
89 }
|
|
|
90
|
|
|
91 .sidebar > h1 > img {
|
|
|
92 max-height: 50px;
|
|
|
93 width: auto;
|
|
|
94 }
|
|
|
95
|
|
|
96 .markdown-section {
|
|
|
97 background-color: var(--background-color);
|
|
|
98 color: var(--text-color-base);
|
|
|
99 }
|
|
|
100
|
|
|
101 .markdown-section code {
|
|
|
102 background-color: var(--code-background);
|
|
|
103 color: #f0f6fc;
|
|
|
104 border-radius: 6px;
|
|
|
105 padding: 0.2em 0.4em;
|
|
|
106 border: 1px solid #30363d;
|
|
|
107 }
|
|
|
108
|
|
|
109 .markdown-section pre {
|
|
|
110 background-color: var(--code-background);
|
|
|
111 border: 1px solid #30363d;
|
|
|
112 }
|
|
|
113
|
|
|
114 .markdown-section pre > code {
|
|
|
115 background-color: var(--code-background);
|
|
|
116 color: #f0f6fc;
|
|
|
117 }
|
|
|
118
|
|
|
119 .markdown-section table {
|
|
|
120 border-collapse: collapse;
|
|
|
121 border: 1px solid #30363d;
|
|
|
122 }
|
|
|
123
|
|
|
124 .markdown-section th,
|
|
|
125 .markdown-section td {
|
|
|
126 border: 1px solid #30363d;
|
|
|
127 background-color: var(--code-background);
|
|
|
128 }
|
|
|
129
|
|
|
130 .markdown-section th {
|
|
|
131 background-color: #21262d;
|
|
|
132 font-weight: 600;
|
|
|
133 }
|
|
|
134 </style>
|
|
|
135 </head>
|
|
|
136 <body>
|
|
|
137 <div id="app"></div>
|
|
|
138 <script>
|
|
|
139 window.$docsify = {
|
|
|
140 name: 'COBRAxy',
|
|
|
141 logo: './_media/logo.png',
|
|
|
142 loadSidebar: true,
|
|
|
143 loadNavbar: false,
|
|
|
144 subMaxLevel: 3,
|
|
|
145 auto2top: true,
|
|
|
146
|
|
542
|
147 // Sidebar configuration
|
|
|
148 alias: {
|
|
|
149 '/.*/_sidebar.md': '/_sidebar.md'
|
|
|
150 },
|
|
|
151 sidebarDisplayLevel: 1, // Expand sidebar to level 1 by default
|
|
|
152
|
|
492
|
153 // Search plugin
|
|
|
154 search: {
|
|
|
155 maxAge: 86400000, // Expiration time, the default one day
|
|
|
156 paths: 'auto',
|
|
|
157 placeholder: 'Search documentation...',
|
|
|
158 noData: 'No results found.',
|
|
|
159 depth: 3
|
|
|
160 },
|
|
|
161
|
|
|
162 // Copy code plugin
|
|
|
163 copyCode: {
|
|
|
164 buttonText: 'Copy',
|
|
|
165 errorText: 'Error',
|
|
|
166 successText: 'Copied'
|
|
|
167 },
|
|
|
168
|
|
|
169 // Zoom image plugin
|
|
|
170 zoom: {
|
|
|
171 selector: '.medium-zoom-image',
|
|
|
172 delay: 1000,
|
|
|
173 options: {
|
|
|
174 bgColor: 'rgba(0,0,0,0.8)',
|
|
|
175 zIndex: 99999
|
|
|
176 }
|
|
|
177 },
|
|
|
178
|
|
|
179 // Tabs plugin
|
|
|
180 tabs: {
|
|
|
181 persist: true,
|
|
|
182 sync: true,
|
|
|
183 theme: 'classic',
|
|
|
184 tabComments: true,
|
|
|
185 tabHeadings: true
|
|
|
186 }
|
|
|
187 }
|
|
|
188 </script>
|
|
|
189
|
|
|
190 <!-- Core Docsify -->
|
|
|
191 <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
|
|
|
192
|
|
|
193 <!-- Search plugin -->
|
|
|
194 <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
|
|
|
195
|
|
|
196 <!-- Copy code plugin -->
|
|
|
197 <script src="//cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
|
|
|
198
|
|
|
199 <!-- Zoom image plugin -->
|
|
|
200 <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
|
|
|
201
|
|
|
202 <!-- Tabs plugin -->
|
|
|
203 <script src="//cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
|
|
|
204
|
|
|
205 <!-- Code syntax highlighting -->
|
|
|
206 <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
|
|
|
207 <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
|
|
|
208 <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-yaml.min.js"></script>
|
|
|
209 <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-xml.min.js"></script>
|
|
|
210 <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
|
|
542
|
211
|
|
|
212 <!-- Sidebar collapse script -->
|
|
|
213 <script>
|
|
|
214 window.addEventListener('load', function() {
|
|
|
215 // Wait for sidebar to be rendered
|
|
|
216 setTimeout(function() {
|
|
|
217 const sidebar = document.querySelector('.sidebar-nav');
|
|
|
218 if (!sidebar) return;
|
|
|
219
|
|
|
220 // Mark items with sub-lists as folders
|
|
|
221 const items = sidebar.querySelectorAll('ul > li');
|
|
|
222 items.forEach(item => {
|
|
|
223 const hasSublist = item.querySelector('ul');
|
|
|
224 if (hasSublist) {
|
|
|
225 item.classList.add('folder');
|
|
|
226
|
|
|
227 // Get the main link
|
|
|
228 const mainLink = item.querySelector('a');
|
|
|
229 if (mainLink) {
|
|
|
230 // Create a toggle button for the arrow
|
|
|
231 const arrow = mainLink.querySelector('::before') || mainLink;
|
|
|
232
|
|
|
233 // Add click handler that allows navigation but also toggles on second click
|
|
|
234 let clickCount = 0;
|
|
|
235 let clickTimer = null;
|
|
|
236
|
|
|
237 mainLink.addEventListener('click', function(e) {
|
|
|
238 clickCount++;
|
|
|
239
|
|
|
240 if (clickCount === 1) {
|
|
|
241 // First click: navigate to the page
|
|
|
242 clickTimer = setTimeout(function() {
|
|
|
243 clickCount = 0;
|
|
|
244 }, 300);
|
|
|
245 // Don't prevent default, allow navigation
|
|
|
246 item.classList.add('open');
|
|
|
247 } else if (clickCount === 2) {
|
|
|
248 // Second click: toggle the folder
|
|
|
249 clearTimeout(clickTimer);
|
|
|
250 clickCount = 0;
|
|
|
251 e.preventDefault();
|
|
|
252 item.classList.toggle('open');
|
|
|
253 }
|
|
|
254 });
|
|
|
255 }
|
|
|
256 }
|
|
|
257 });
|
|
|
258
|
|
|
259 // Open the active section by default
|
|
|
260 const activeLink = sidebar.querySelector('li.active');
|
|
|
261 if (activeLink) {
|
|
|
262 let parent = activeLink.parentElement;
|
|
|
263 while (parent && parent.tagName === 'UL') {
|
|
|
264 const parentLi = parent.parentElement;
|
|
|
265 if (parentLi && parentLi.classList.contains('folder')) {
|
|
|
266 parentLi.classList.add('open');
|
|
|
267 }
|
|
|
268 parent = parentLi ? parentLi.parentElement : null;
|
|
|
269 }
|
|
|
270 }
|
|
|
271 }, 300);
|
|
|
272 });
|
|
|
273 </script>
|
|
492
|
274 </body>
|
|
549
|
275 </html>
|
