<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
<link rel="stylesheet" href="{{ base_path | safe }}css/style.css">
</head>
<body>
<div class="page-wrapper">
{# Revert to simple include - context should be inherited #}
{% include "_sidebar.html" %}
<main class="main-content">
{# Add Hamburger Button (visible on mobile) #}
<button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle sidebar">
<span></span>
<span></span>
<span></span>
</button>
<div class="container">
<button class="theme-toggle" aria-label="Toggle theme" title="Toggle theme">
<svg class="dark-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/>
</svg>
<svg class="light-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
</svg>
</button>
{% if has_readme %}
<div class="readme-content">
{{ readme_html | safe }}
</div>
{% else %}
<h1 class="title">{{ title }}</h1>
{% if description %}
<p class="description">{{ description }}</p>
{% endif %}
{% endif %}
</div>
</main>
</div>
<script type="text/javascript">
// Theme handling
const root = document.documentElement;
const themeToggle = document.querySelector('.theme-toggle');
const darkIcon = document.querySelector('.dark-icon');
const lightIcon = document.querySelector('.light-icon');
function setTheme(theme) {
root.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
// Update icons
if (theme === 'dark') {
darkIcon.style.display = 'block';
lightIcon.style.display = 'none';
} else {
darkIcon.style.display = 'none';
lightIcon.style.display = 'block';
}
}
// Initialize theme from localStorage or system preference
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
setTheme(initialTheme);
// Theme toggle handler
themeToggle.addEventListener('click', () => {
const currentTheme = root.getAttribute('data-theme');
setTheme(currentTheme === 'dark' ? 'light' : 'dark');
});
</script>
{# Add JavaScript for sidebar toggle #}
<script type="text/javascript">
const sidebar = document.getElementById('sidebar');
const toggleButton = document.getElementById('sidebar-toggle');
if (toggleButton && sidebar) {
toggleButton.addEventListener('click', () => {
sidebar.classList.toggle('sidebar-open');
});
}
</script>
<!-- Set navigation globals for JS -->
<script>
window.basePath = "{{ base_path | safe }}";
window.linkSuffix = "{{ link_suffix }}";
</script>
<!-- Load consolidated JavaScript library (contains all JS functionality) -->
<script src="{{ base_path | safe }}js/lib.js"></script>
</body>
</html>