thePR0M3TH3AN/Archivox
1
0
Fork 0
mirror of https://github.com/PR0M3TH3AN/Archivox.git synced 2025-09-08 06:58:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add base templates, theme, and dark mode

Browse Source
This commit is contained in:
thePR0M3TH3AN
2025-07-10 10:29:33 -04:00
parent b8e65e22dd
commit 7760eeefcc
8 changed files with 130 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -219,7 +219,7 @@ To make DocForge truly user-friendly, include these instructions in the starter
## Extensibility Roadmap ## Extensibility Roadmap
- **Plugins**: JS files in `plugins/` with hooks (e.g., add shortcodes, post-build tasks). - **Plugins**: JS files in `plugins/` with hooks (e.g., add shortcodes, post-build tasks).
- **Themes**: Override CSS in `assets/custom.css`. - **Themes**: Customize variables in `assets/theme.css` or override styles in `assets/custom.css`. A built-in dark-mode toggle stores preference in local storage.
- **Future**: PDF export plugin, AI-assisted search suggestions. - **Future**: PDF export plugin, AI-assisted search suggestions.
- **Community**: MIT license; GitHub for issues. - **Community**: MIT license; GitHub for issues.

51
assets/theme.css Normal file
View File

@@ -0,0 +1,51 @@
:root {
--bg-color: #ffffff;
--text-color: #333333;
--sidebar-bg: #f3f3f3;
--sidebar-width: 240px;
}
[data-theme="dark"] {
--bg-color: #222222;
--text-color: #eeeeee;
--sidebar-bg: #333333;
}
body {
margin: 0;
background: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
}
.header {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
background: var(--sidebar-bg);
}
.logo { text-decoration: none; color: var(--text-color); font-weight: bold; }
.sidebar-toggle,
.theme-toggle { background: none; border: none; font-size: 1.2rem; margin-right: 1rem; cursor: pointer; }
.container { display: flex; }
.sidebar {
width: var(--sidebar-width);
background: var(--sidebar-bg);
padding: 1rem;
}
.sidebar ul { list-style: none; padding: 0; }
.sidebar a { text-decoration: none; color: var(--text-color); }
main {
flex: 1;
padding: 1rem;
}
.breadcrumbs a { color: var(--text-color); text-decoration: none; }
@media (max-width: 768px) {
.sidebar {
position: fixed;
left: -100%;
top: 0;
height: 100%;
overflow-y: auto;
transition: left 0.3s ease;
z-index: 1000;
}
body.sidebar-open .sidebar { left: 0; }
}

33
assets/theme.js Normal file
View File

@@ -0,0 +1,33 @@
document.addEventListener('DOMContentLoaded', () => {
const sidebarToggle = document.getElementById('sidebar-toggle');
const themeToggle = document.getElementById('theme-toggle');
const root = document.documentElement;
function setTheme(theme) {
root.dataset.theme = theme;
localStorage.setItem('theme', theme);
}
const stored = localStorage.getItem('theme');
if (stored) setTheme(stored);
sidebarToggle?.addEventListener('click', () => {
document.body.classList.toggle('sidebar-open');
});
themeToggle?.addEventListener('click', () => {
const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
setTheme(next);
});
// breadcrumbs
const bc = document.getElementById('breadcrumbs');
if (bc) {
const parts = location.pathname.split('/').filter(Boolean);
let path = '';
bc.innerHTML = '<a href="/">Home</a>';
parts.forEach((p) => {
path += '/' + p;
bc.innerHTML += ' / <a href="' + path + '">' + p.replace(/-/g, ' ') + '</a>';
});
}
});

8
src/generator/index.js
View File

@@ -88,7 +88,11 @@ async function generate({ contentDir = 'content', outputDir = '_site', configPat
const elev = new Eleventy(contentDir, outputDir); const elev = new Eleventy(contentDir, outputDir);
elev.setConfig({ elev.setConfig({
dir: { input: contentDir, output: outputDir }, dir: {
input: contentDir,
output: outputDir,
includes: path.relative(contentDir, 'templates')
},
templateFormats: ['md', 'njk'], templateFormats: ['md', 'njk'],
markdownTemplateEngine: 'njk', markdownTemplateEngine: 'njk',
htmlTemplateEngine: 'njk', htmlTemplateEngine: 'njk',
@@ -97,6 +101,8 @@ async function generate({ contentDir = 'content', outputDir = '_site', configPat
elev.configFunction = function(eleventyConfig) { elev.configFunction = function(eleventyConfig) {
eleventyConfig.addGlobalData('navigation', nav); eleventyConfig.addGlobalData('navigation', nav);
eleventyConfig.addGlobalData('config', config); eleventyConfig.addGlobalData('config', config);
eleventyConfig.addGlobalData('layout', 'layout.njk');
eleventyConfig.addPassthroughCopy({ 'assets': 'assets' });
}; };
await elev.write(); await elev.write();

21
templates/layout.njk Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en" data-theme="{{ config.theme.darkMode ? 'dark' : 'light' }}">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{ title or config.site.title }}</title>
<link rel="stylesheet" href="/assets/theme.css" />
</head>
<body>
{% include "partials/header.njk" %}
<div class="container">
{% include "partials/sidebar.njk" %}
<main id="content">
<nav id="breadcrumbs" class="breadcrumbs"></nav>
{{ content | safe }}
</main>
</div>
{% include "partials/footer.njk" %}
<script src="/assets/theme.js"></script>
</body>
</html>

3
templates/partials/footer.njk Normal file
View File

@@ -0,0 +1,3 @@
<footer class="footer">
<p>&copy; {{ config.site.title }} {{ new Date().getFullYear() }}</p>
</footer>

5
templates/partials/header.njk Normal file
View File

@@ -0,0 +1,5 @@
<header class="header">
<button id="sidebar-toggle" class="sidebar-toggle" aria-label="Toggle navigation">☰</button>
<a href="/" class="logo">{{ config.site.title }}</a>
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">🌓</button>
</header>

9
templates/partials/sidebar.njk Normal file
View File

@@ -0,0 +1,9 @@
<aside class="sidebar" id="sidebar">
<nav>
<ul>
{% for item in navigation %}
<li><a href="{{ item.path }}">{{ item.page.title }}</a></li>
{% endfor %}
</ul>
</nav>
</aside>