Spaces:
Running
Running
This is a crucial correction. You want the **Nextra Documentation Layout** (the structure) combined with the **Tactical Ops Color Palette & Font** (the skin), but **without** the "roleplay" elements (no "SYSTEM ONLINE" widgets, no dense data grids, no radar charts, no forced uppercase).
2d1d74f verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Syncopated Notes - Documentation</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <!-- Tailwind Config --> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['"JetBrains Mono"', 'monospace'], | |
| mono: ['"JetBrains Mono"', 'monospace'], | |
| }, | |
| colors: { | |
| bg: '#0a0a0a', | |
| surface: '#111111', | |
| border: '#333333', | |
| primary: '#e5e5e5', | |
| muted: '#888888', | |
| accent: '#ff6600', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-bg text-primary font-sans antialiased h-screen flex flex-col overflow-hidden selection:bg-accent selection:text-white"> | |
| <!-- Header Component --> | |
| <custom-header class="flex-none"></custom-header> | |
| <!-- Main Layout --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar Component (Left) --> | |
| <custom-sidebar class="w-64 flex-none hidden md:block border-r border-border overflow-y-auto bg-bg"></custom-sidebar> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto relative scroll-smooth" id="main-content"> | |
| <div class="max-w-4xl mx-auto px-8 py-12 lg:px-16"> | |
| <!-- Hero Section --> | |
| <header class="mb-12"> | |
| <h1 class="text-3xl font-bold tracking-tight mb-4 text-primary">Welcome to Syncopated Notes</h1> | |
| <p class="text-lg text-muted leading-relaxed max-w-2xl"> | |
| A minimalist, high-performance documentation layout designed for clarity. | |
| Explore the core concepts, architecture, and troubleshooting guides below. | |
| </p> | |
| </header> | |
| <!-- Content Section --> | |
| <section id="intro" class="mb-16 scroll-mt-20"> | |
| <h2 class="text-xl font-semibold text-primary mb-6 flex items-center"> | |
| <span class="w-1 h-6 bg-accent mr-3 rounded-sm"></span> | |
| Introduction | |
| </h2> | |
| <p class="text-muted mb-4 leading-7"> | |
| This layout prioritizes content density without overwhelming the user. It uses the <strong>"Tactical Ops"</strong> color palette to reduce eye strain during long coding sessions. | |
| </p> | |
| <div class="my-6 p-4 border border-border bg-surface rounded-sm"> | |
| <code class="text-accent text-sm">npm install @syncopated/core</code> | |
| </div> | |
| <p class="text-muted leading-7"> | |
| The structure is based on the "Holy Grail" pattern, ensuring that navigation is always accessible while keeping the reading experience central. | |
| </p> | |
| </section> | |
| <section id="architecture" class="mb-16 scroll-mt-20"> | |
| <h2 class="text-xl font-semibold text-primary mb-6 flex items-center"> | |
| <span class="w-1 h-6 bg-accent mr-3 rounded-sm"></span> | |
| Architecture | |
| </h2> | |
| <p class="text-muted mb-4 leading-7"> | |
| The system is built using native Web Components to ensure modularity. The layout relies on Flexbox for responsiveness, collapsing sidebars gracefully on smaller viewports. | |
| </p> | |
| <ul class="list-disc list-outside ml-4 space-y-2 text-muted"> | |
| <li class="pl-2">Component-based structure</li> | |
| <li class="pl-2">Reactive data binding</li> | |
| <li class="pl-2">Optimized for static generation</li> | |
| </ul> | |
| </section> | |
| <section id="troubleshooting" class="mb-16 scroll-mt-20"> | |
| <h2 class="text-xl font-semibold text-primary mb-6 flex items-center"> | |
| <span class="w-1 h-6 bg-accent mr-3 rounded-sm"></span> | |
| Rocky Linux 9 Troubleshooting | |
| </h2> | |
| <p class="text-muted mb-4 leading-7"> | |
| Common issues encountered when deploying on Rocky Linux 9 environments usually stem from SELinux policies or firewall configurations. | |
| </p> | |
| <h3 class="text-lg font-medium text-primary mt-8 mb-4">Service failing to start</h3> | |
| <p class="text-muted mb-4 leading-7"> | |
| Check the logs using journalctl. If permissions are denied, verify the context of your files. | |
| </p> | |
| <pre class="bg-surface border border-border p-4 overflow-x-auto rounded-sm text-sm text-primary mb-6"><code>$ sudo journalctl -xe -u syncopated.service | |
| $ ls -Z /var/lib/syncopated</code></pre> | |
| <h3 class="text-lg font-medium text-primary mt-8 mb-4">Network connectivity</h3> | |
| <p class="text-muted leading-7"> | |
| Ensure port 8080 is open in firewalld. | |
| </p> | |
| <pre class="bg-surface border border-border p-4 overflow-x-auto rounded-sm text-sm text-primary"><code>$ sudo firewall-cmd --add-port=8080/tcp --permanent | |
| $ sudo firewall-cmd --reload</code></pre> | |
| </section> | |
| <!-- Digital Garden: Recently Updated --> | |
| <section class="border-t border-border pt-12 mt-12"> | |
| <h3 class="text-sm uppercase tracking-wider text-muted font-semibold mb-6">Recently Updated</h3> | |
| <div class="space-y-4"> | |
| <a href="#" class="block group"> | |
| <div class="flex items-start justify-between"> | |
| <span class="text-primary group-hover:text-accent transition-colors duration-200">API Rate Limiting v2</span> | |
| <span class="text-xs text-muted font-mono whitespace-nowrap ml-4">2h ago</span> | |
| </div> | |
| </a> | |
| <a href="#" class="block group"> | |
| <div class="flex items-start justify-between"> | |
| <span class="text-primary group-hover:text-accent transition-colors duration-200">Deployment Checklist</span> | |
| <span class="text-xs text-muted font-mono whitespace-nowrap ml-4">1d ago</span> | |
| </div> | |
| </a> | |
| <a href="#" class="block group"> | |
| <div class="flex items-start justify-between"> | |
| <span class="text-primary group-hover:text-accent transition-colors duration-200">Environment Variables</span> | |
| <span class="text-xs text-muted font-mono whitespace-nowrap ml-4">3d ago</span> | |
| </div> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="mt-24 border-t border-border pt-8 pb-12 text-center md:text-left"> | |
| <p class="text-muted text-sm"> | |
| © 2023 Syncopated Notes. Built with pure HTML/CSS/JS. | |
| </p> | |
| </footer> | |
| </div> | |
| </main> | |
| <!-- TOC Component (Right) --> | |
| <custom-toc class="w-48 flex-none hidden lg:block border-l border-border bg-bg overflow-y-auto p-6 sticky top-16 h-[calc(100vh-4rem)]"></custom-toc> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="components/header.js"></script> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/toc.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |