mirror of
https://github.com/litruv/Docs-Viewer.git
synced 2026-07-24 02:36:07 +10:00
180 lines
8.2 KiB
HTML
180 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title></title>
|
|
|
|
<!--ogmetadata-->
|
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- Add skip to content link -->
|
|
<a href="#document-content" class="skip-to-content">Skip to content</a>
|
|
|
|
<div class="container">
|
|
<div class="title-bar" role="banner">
|
|
<button class="menu-button" aria-label="Toggle Menu" aria-expanded="false" aria-controls="left-sidebar">
|
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
</button>
|
|
<div class="title-text">
|
|
<img src="./img/logo.png" alt="Logo" class="brand-logo">
|
|
<span class="divider" aria-hidden="true">/</span>
|
|
<span class="page-title">Documentation</span>
|
|
</div>
|
|
<span style="width: 24px;"></span>
|
|
</div>
|
|
<div class="content-container">
|
|
<nav class="sidebar left-sidebar" id="left-sidebar" role="navigation" aria-label="Main Navigation">
|
|
<div class="search-container">
|
|
<div class="search-box" role="search">
|
|
<i class="fas fa-search" aria-hidden="true"></i>
|
|
<input type="text" id="search-input" placeholder="Search docs..." aria-label="Search documentation" role="searchbox">
|
|
<div class="keyboard-shortcut keyboard-shortcut-alt" aria-hidden="true">Alt+S</div>
|
|
<i class="fas fa-times" id="clear-search" aria-label="Clear search" role="button" tabindex="0"></i>
|
|
</div>
|
|
<div id="search-results" role="region" aria-label="Search results" aria-live="polite"></div>
|
|
</div>
|
|
<div id="file-index" role="tree" aria-label="Documentation files"></div>
|
|
<div class="subtitle" aria-label="Author information">
|
|
<span class="name"></span>
|
|
<span class="role"></span>
|
|
</div>
|
|
<div class="social-links" aria-label="Social media links"></div>
|
|
<div class="github-link">
|
|
<a href="https://github.com/litruv/docs" target="_blank" title="Docs Viewer GitHub" aria-label="GitHub repository for Docs Viewer">
|
|
<i class="fab fa-github" aria-hidden="true"></i> Docs Viewer
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<main class="content" role="main" aria-label="Document Content">
|
|
<div id="document-content" tabindex="-1"></div>
|
|
</main>
|
|
<nav class="sidebar right-sidebar" role="navigation" aria-label="Table of Contents">
|
|
<div id="document-outline" role="tree" aria-label="Document outline"></div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
|
<script>
|
|
hljs.highlightAll();
|
|
</script>
|
|
<script type="module" src="js/Documentation.js"></script>
|
|
|
|
<!-- Print title capture script -->
|
|
<script>
|
|
// Capture page title for printing
|
|
window.addEventListener('beforeprint', function() {
|
|
// Get the current page title
|
|
const pageTitle = document.querySelector('.title-text .page-title').textContent;
|
|
const brandLogo = document.querySelector('.brand-logo').cloneNode(true);
|
|
|
|
// Create print header with logo
|
|
const printHeader = document.createElement('div');
|
|
printHeader.className = 'print-header';
|
|
|
|
// Add the logo image
|
|
printHeader.appendChild(brandLogo);
|
|
|
|
// Add the divider and page title
|
|
const titleText = document.createElement('div');
|
|
titleText.className = 'print-title-text';
|
|
titleText.innerHTML = `<span class="divider">/</span> <span class="page-title">${pageTitle}</span>`;
|
|
printHeader.appendChild(titleText);
|
|
|
|
// Insert at the beginning of content
|
|
const content = document.getElementById('document-content');
|
|
if (content.firstChild) {
|
|
content.insertBefore(printHeader, content.firstChild);
|
|
} else {
|
|
content.appendChild(printHeader);
|
|
}
|
|
|
|
// Remove any existing print elements to avoid duplication
|
|
const existingTitle = document.querySelector('.print-title');
|
|
if (existingTitle) existingTitle.remove();
|
|
|
|
// Make sure the print header is accessible
|
|
brandLogo.setAttribute('alt', 'Logo');
|
|
printHeader.setAttribute('aria-hidden', 'true'); // Hide from screen readers when printing
|
|
});
|
|
|
|
// Clean up after printing
|
|
window.addEventListener('afterprint', function() {
|
|
const printHeader = document.querySelector('.print-header');
|
|
if (printHeader) {
|
|
printHeader.remove();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- Add accessibility enhancements script -->
|
|
<script>
|
|
// Enhance keyboard navigation
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Make folders and navigation keyboard accessible
|
|
function enhanceTreeKeyboardNavigation() {
|
|
const folders = document.querySelectorAll('.folder-header');
|
|
const links = document.querySelectorAll('#file-index a, #document-outline a');
|
|
|
|
folders.forEach(folder => {
|
|
// Add ARIA attributes
|
|
const folderDiv = folder.closest('.folder');
|
|
const isOpen = folderDiv.classList.contains('open');
|
|
folder.setAttribute('role', 'treeitem');
|
|
folder.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
|
|
|
// Handle keyboard events
|
|
folder.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
folder.click();
|
|
folder.setAttribute('aria-expanded',
|
|
folderDiv.classList.contains('open') ? 'true' : 'false');
|
|
}
|
|
});
|
|
|
|
folder.setAttribute('tabindex', '0');
|
|
});
|
|
|
|
links.forEach(link => {
|
|
link.setAttribute('role', 'treeitem');
|
|
});
|
|
}
|
|
|
|
// Handle menu button accessibility
|
|
const menuButton = document.querySelector('.menu-button');
|
|
if (menuButton) {
|
|
menuButton.addEventListener('click', function() {
|
|
const expanded = document.querySelector('.left-sidebar').classList.contains('show');
|
|
menuButton.setAttribute('aria-expanded', expanded ? 'true' : 'false');
|
|
});
|
|
}
|
|
|
|
// If using a MutationObserver to watch for DOM changes, call enhanceTreeKeyboardNavigation
|
|
// after the navigation tree is populated
|
|
const observer = new MutationObserver(function(mutations) {
|
|
mutations.forEach(function(mutation) {
|
|
if (mutation.addedNodes.length) {
|
|
enhanceTreeKeyboardNavigation();
|
|
}
|
|
});
|
|
});
|
|
|
|
observer.observe(document.getElementById('file-index'), {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
|
|
// Initially enhance any existing navigation
|
|
enhanceTreeKeyboardNavigation();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|