-
-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6e0f981
commit 1090ef0
Showing
5 changed files
with
278 additions
and
248 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
.docs-grid { | ||
display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | ||
gap: 2rem; | ||
margin: 2rem 0; | ||
} | ||
|
||
.doc-section { | ||
background: #f5f5f5; | ||
padding: 1.5rem; | ||
border-radius: 8px; | ||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
} | ||
|
||
.doc-section h2 { | ||
margin-top: 0; | ||
color: #333; | ||
font-size: 1.5rem; | ||
margin-bottom: 1rem; | ||
} | ||
|
||
.doc-section ul { | ||
list-style: none; | ||
padding: 0; | ||
margin: 0; | ||
} | ||
|
||
.doc-section li { | ||
margin: 0.5rem 0; | ||
} | ||
|
||
.doc-section a { | ||
color: #007bff; | ||
text-decoration: none; | ||
display: block; | ||
padding: 0.5rem; | ||
border-radius: 4px; | ||
transition: background-color 0.2s; | ||
} | ||
|
||
.doc-section a:hover { | ||
background-color: #e9ecef; | ||
} | ||
|
||
.doc-content { | ||
margin: 2rem 0; | ||
padding: 2rem; | ||
background: white; | ||
border-radius: 8px; | ||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
} | ||
|
||
.doc-content h1 { | ||
margin-top: 0; | ||
color: #333; | ||
} | ||
|
||
.doc-content h2 { | ||
margin-top: 2rem; | ||
color: #444; | ||
} | ||
|
||
.doc-content p { | ||
line-height: 1.6; | ||
color: #666; | ||
} | ||
|
||
.doc-content code { | ||
background: #f8f9fa; | ||
padding: 0.2rem 0.4rem; | ||
border-radius: 4px; | ||
font-family: 'IBM Plex Mono', monospace; | ||
} | ||
|
||
.doc-content pre { | ||
background: #f8f9fa; | ||
padding: 1rem; | ||
border-radius: 4px; | ||
overflow-x: auto; | ||
} | ||
|
||
#documentation { | ||
max-width: 1200px; | ||
margin: 0 auto; | ||
padding: 2rem; | ||
} | ||
|
||
@media (max-width: 768px) { | ||
.docs-grid { | ||
grid-template-columns: 1fr; | ||
} | ||
|
||
#documentation { | ||
padding: 1rem; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>DNAnalyzer Documentation</title> | ||
<link rel="stylesheet" href="../style.css"> | ||
<link rel="stylesheet" href="docs.css"> | ||
</head> | ||
<body> | ||
<nav> | ||
<a href="../index.html">Home</a> | ||
<a href="../about/about.html">About</a> | ||
<a href="../index.html#features">Features</a> | ||
<a href="#" class="active">Docs</a> | ||
<div class="right-links"> | ||
<a href="https://github.com/yourusername/DNAnalyzer" target="_blank" class="button">GitHub Repository</a> | ||
<a href="https://discord.gg/yourdiscord" target="_blank" class="button">Discord Server</a> | ||
</div> | ||
</nav> | ||
|
||
<main> | ||
<section id="documentation"> | ||
<h1>Documentation</h1> | ||
<div class="docs-grid"> | ||
<div class="doc-section"> | ||
<h2>Getting Started</h2> | ||
<ul> | ||
<li><a href="#getting-started">Quick Start Guide</a></li> | ||
<li><a href="#local-setup">Local Analyzer Setup</a></li> | ||
</ul> | ||
</div> | ||
<div class="doc-section"> | ||
<h2>Usage Guides</h2> | ||
<ul> | ||
<li><a href="#cli">Command Line Interface</a></li> | ||
<li><a href="#samples">Sample Usage</a></li> | ||
</ul> | ||
</div> | ||
<div class="doc-section"> | ||
<h2>Research & Analysis</h2> | ||
<ul> | ||
<li><a href="#parameters">Analysis Parameters</a></li> | ||
<li><a href="#genes">Gene Analysis</a></li> | ||
</ul> | ||
</div> | ||
</div> | ||
|
||
<div class="doc-content"> | ||
<!-- Content will be loaded dynamically via JavaScript --> | ||
</div> | ||
</section> | ||
</main> | ||
|
||
<script src="docs.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
document.addEventListener('DOMContentLoaded', () => { | ||
// Map of documentation sections to their markdown file paths | ||
const docPaths = { | ||
'getting-started': '../docs/getting-started.md', | ||
'local-setup': '../docs/Local_Analyzer_Setup.md', | ||
'cli': '../docs/usage/MetCLI.md', | ||
'samples': '../docs/samples/cli-arguments-examples.md', | ||
'parameters': '../docs/research/analysis-parameters.md', | ||
'genes': '../docs/research/genes.md' | ||
}; | ||
|
||
// Function to fetch and render markdown content | ||
async function loadDocContent(docId) { | ||
const docContent = document.querySelector('.doc-content'); | ||
if (!docContent) { | ||
console.error('Documentation content container not found'); | ||
return; | ||
} | ||
|
||
try { | ||
const response = await fetch(docPaths[docId]); | ||
if (!response.ok) { | ||
throw new Error(`Failed to load documentation: ${response.statusText}`); | ||
} | ||
|
||
const markdown = await response.text(); | ||
|
||
// Basic markdown to HTML conversion | ||
const html = markdown | ||
.replace(/^# (.*$)/gm, '<h1>$1</h1>') | ||
.replace(/^## (.*$)/gm, '<h2>$1</h2>') | ||
.replace(/^### (.*$)/gm, '<h3>$1</h3>') | ||
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') | ||
.replace(/\*(.*?)\*/g, '<em>$1</em>') | ||
.replace(/`(.*?)`/g, '<code>$1</code>') | ||
.replace(/```([^`]+)```/g, '<pre><code>$1</code></pre>') | ||
.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>') | ||
.replace(/^- (.*$)/gm, '<li>$1</li>') | ||
.split('\n\n') | ||
.map(block => { | ||
if (block.startsWith('<li>')) { | ||
return `<ul>${block}</ul>`; | ||
} | ||
if (!block.startsWith('<')) { | ||
return `<p>${block}</p>`; | ||
} | ||
return block; | ||
}) | ||
.join('\n'); | ||
|
||
docContent.innerHTML = html; | ||
|
||
// Update URL hash without scrolling | ||
const currentURL = new URL(window.location); | ||
currentURL.hash = docId; | ||
window.history.pushState({}, '', currentURL); | ||
|
||
} catch (error) { | ||
console.error('Error loading documentation:', error); | ||
docContent.innerHTML = ` | ||
<div class="error"> | ||
<h2>Error Loading Documentation</h2> | ||
<p>Sorry, we couldn't load the requested documentation. Please try again later.</p> | ||
<p class="error-details">${error.message}</p> | ||
</div> | ||
`; | ||
} | ||
} | ||
|
||
// Add click handlers to documentation links | ||
const links = document.querySelectorAll('.doc-section a'); | ||
if (links.length > 0) { | ||
links.forEach(link => { | ||
link.addEventListener('click', (e) => { | ||
e.preventDefault(); | ||
const docId = link.getAttribute('href').substring(1); | ||
|
||
// Update active state | ||
links.forEach(l => l.classList.remove('active')); | ||
link.classList.add('active'); | ||
|
||
loadDocContent(docId); | ||
|
||
// Smooth scroll to content on mobile | ||
if (window.innerWidth < 768) { | ||
document.querySelector('.doc-content')?.scrollIntoView({ behavior: 'smooth' }); | ||
} | ||
}); | ||
}); | ||
|
||
// Load initial documentation based on URL hash or default to getting-started | ||
const initialDoc = window.location.hash.substring(1) || 'getting-started'; | ||
loadDocContent(initialDoc); | ||
|
||
// Highlight the active link | ||
const activeLink = document.querySelector(`.doc-section a[href="#${initialDoc}"]`); | ||
if (activeLink) { | ||
activeLink.classList.add('active'); | ||
} | ||
} else { | ||
console.error('No documentation links found'); | ||
document.querySelector('.doc-content').innerHTML = ` | ||
<div class="error"> | ||
<h2>Documentation Navigation Error</h2> | ||
<p>The documentation navigation links could not be found. Please try refreshing the page.</p> | ||
</div> | ||
`; | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.