Spaces:
Running
Running
File size: 8,900 Bytes
2d1d74f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | <!DOCTYPE html>
<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> |