Documentation framework

bboonstra · Oct 20, 2024 · fc3fb47 · fc3fb47
1 parent bef5712
commit fc3fb47
Show file tree

Hide file tree

Showing 6 changed files with 280 additions and 11 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
     "python.testing.unittestEnabled": true,
     "python.testing.unittestArgs": ["-v", "-s", "./tests", "-p", "test_*.py"],
-    "python.testing.autoTestDiscoverOnSaveEnabled": true
+    "python.testing.autoTestDiscoverOnSaveEnabled": true,
+    "liveServer.settings.root": "/docs"
 }
diff --git a/docs/docs/configuration.html b/docs/docs/configuration.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Effortless - Configuration</title>
+        <link rel="stylesheet" href="../styles.css">
+        <script src="../templating.js"></script>
+    </head>
+    <body>
+        <main>
+            <h1>Configuring Effortless</h1>
+            <p>This page explains how to configure Effortless for your specific needs.</p>
+            <!-- Add your configuration documentation here -->
+        </main>
+    </body>
+</html>
diff --git a/docs/docs/index.html b/docs/docs/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Effortless - Documentation</title>
+        <link rel="stylesheet" href="../styles.css">
+        <script src="../templating.js"></script>
+    </head>
+    <body>
+        <main>
+            <h1>Effortless Documentation</h1>
+            <p>Welcome to the Effortless documentation. Here you'll find everything you need to know about using Effortless.</p>
+            <h2>Contents</h2>
+            <ul>
+                <li><a href="setup.html">Setup</a></li>
+                <li><a href="effortless-usage.html">Effortless Usage</a></li>
+                <li><a href="basic-usage.html">Basic Usage</a></li>
+                <li><a href="advanced-usage.html">Advanced Usage</a></li>
+            </ul>
+        </main>
+    </body>
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <title></title>
-        <meta name="description" content="" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="" />
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Effortless - Home</title>
+        <link rel="stylesheet" href="styles.css">
+        <script src="templating.js"></script>
     </head>
     <body>
-        <h1 class="effortless">
-            Databases should be <i>Effortless</i>.
-        </h1>
+        <main>
+            <h1 class="effortless">Databases should be <i>Effortless</i>.</h1>
+            <!-- Rest of your content -->
+        </main>
     </body>
 </html>
diff --git a/docs/styles.css b/docs/styles.css
@@ -0,0 +1,161 @@
+:root {
+    --primary-color: #3498db;
+    --secondary-color: #2c3e50;
+    --text-color: #333;
+    --background-color: #f4f4f4;
+    --sidebar-width: 20%;
+    --sidebar-collapsed-width: 0px;
+}
+
+body {
+    font-family: "Arial", sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+    background-color: var(--background-color);
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+nav {
+    background-color: var(--secondary-color);
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+nav ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
+}
+
+nav ul li {
+    margin: 0 1rem;
+}
+
+nav ul li a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s ease;
+}
+
+nav ul li a:hover {
+    color: var(--primary-color);
+}
+
+main {
+    max-width: 800px;
+    margin: 5rem auto 2rem;
+    padding: 0 1rem;
+}
+
+h1,
+h2,
+h3 {
+    color: var(--secondary-color);
+    text-align: center;
+}
+
+.effortless {
+    font-size: 2.5rem;
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.effortless i {
+    color: var(--primary-color);
+}
+
+a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+#sidebarToggle {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+    z-index: 1001;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+}
+
+#sidebarToggle.open {
+    transform: rotate(90deg);
+}
+
+#sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--sidebar-width);
+    background-color: var(--secondary-color);
+    color: white;
+    padding: 1rem;
+    padding-top: 5rem;
+    overflow-y: auto;
+    transition: all 0.3s ease;
+    z-index: 999;
+}
+
+#sidebar.collapsed {
+    width: var(--sidebar-collapsed-width);
+    padding: 0;
+}
+
+#sidebar.collapsed h3,
+#sidebar.collapsed ul {
+    display: none;
+}
+
+main {
+    padding: 1rem;
+}
+
+@media (max-width: 768px) {
+    .mobile-only {
+        display: block !important;
+    }
+
+    #sidebar {
+        transform: translateX(-100%);
+        width: 100%;
+        padding-top: 5rem;
+    }
+
+    #sidebar.active {
+        transform: translateX(0);
+    }
+
+    main {
+        margin-left: 0;
+    }
+
+    body.sidebar-active main {
+        pointer-events: none;
+    }
+}
diff --git a/docs/templating.js b/docs/templating.js
@@ -0,0 +1,67 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const navbar = `
+        <nav>
+            <button id="sidebarToggle">☰</button>
+            <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="/docs/">Documentation</a></li>
+                <li><a href="https://pypi.org/project/Effortless/">PyPI</a></li>
+                <li><a href="https://github.com/bboonstra/Effortless">GitHub</a></li>
+            </ul>
+        </nav>
+    `;
+
+    const sidebar = `
+        <div id="sidebar">
+            <h3>Documentation</h3>
+            <ul>
+                <li><a href="/Effortless/docs/setup.html">Setup</a></li>
+                <li><a href="/Effortless/docs/effortless-usage.html">Effortless Usage</a></li>
+                <li><a href="/Effortless/docs/basic-usage.html" target="_blank">Basic Usage</a></li>
+                <li><a href="/Effortless/docs/advanced-usage.html" target="_blank">Advanced Usage</a></li>
+            </ul>
+        </div>
+    `;
+
+    document.body.insertAdjacentHTML("afterbegin", navbar);
+    document.body.insertAdjacentHTML("afterbegin", sidebar);
+
+    const sidebarToggle = document.getElementById("sidebarToggle");
+    const sidebarElement = document.getElementById("sidebar");
+    const body = document.body;
+
+    function updateToggleButton() {
+        if (window.innerWidth <= 768) {
+            sidebarToggle.textContent = sidebarElement.classList.contains("active") ? "×" : "☰";
+        } else {
+            sidebarToggle.textContent = sidebarElement.classList.contains("collapsed") ? "☰" : "▼";
+        }
+        sidebarToggle.classList.toggle("open", sidebarElement.classList.contains("active") || !sidebarElement.classList.contains("collapsed"));
+    }
+
+    sidebarToggle.addEventListener("click", function () {
+        if (window.innerWidth <= 768) {
+            sidebarElement.classList.toggle("active");
+            body.classList.toggle("sidebar-active");
+        } else {
+            sidebarElement.classList.toggle("collapsed");
+            body.classList.toggle("sidebar-collapsed");
+        }
+        updateToggleButton();
+    });
+
+    // Handle window resize
+    window.addEventListener("resize", function() {
+        if (window.innerWidth > 768) {
+            sidebarElement.classList.remove("active");
+            body.classList.remove("sidebar-active");
+        } else {
+            sidebarElement.classList.remove("collapsed");
+            body.classList.remove("sidebar-collapsed");
+        }
+        updateToggleButton();
+    });
+
+    // Initial button state
+    updateToggleButton();
+});