olmko/devdocs-hub-knowledge-base-for-developers
0
1<!DOCTYPE html>2<html lang="en" class="undefined">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>DevDocs Hub | Developer Knowledge Base</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>10 <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-undefined.css" rel="stylesheet">11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 undefined: {17 100: '#e0f2fe',18 500: '#3b82f6',19 700: '#1d4ed8',20 },21 secondary: {22 100: '#f0fdf4',23 500: '#10b981',24 700: '#047857',25 }26 }27 }28 }29 }30 </script>31 <style>32 .prose pre {33 background-color: #1e293b;34 border-radius: 0.5rem;35 padding: 1rem;36 margin: 1rem 0;37 }38 .prose code {39 color: #f8fafc;40 }41 .dark .prose pre {42 background-color: #0f172a;43 }44 .dark .prose code {45 color: #e2e8f0;46 }47 </style>48</head>49<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">50 <!-- Navigation -->51 <nav class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50">52 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">53 <div class="flex justify-between h-16">54 <div class="flex items-center">55 <a href="#" class="flex items-center space-x-2">56 <i data-feather="code" class="text-undefined-500"></i>57 <span class="text-xl font-bold">DevDocs Hub</span>58 </a>59 </div>60 <div class="flex items-center space-x-4">61 <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">62 <i data-feather="moon" class="hidden dark:block"></i>63 <i data-feather="sun" class="dark:hidden"></i>64 </button>65 <div class="relative">66 <input type="text" placeholder="Search docs..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-undefined-500">67 <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>68 </div>69 </div>70 </div>71 </div>72 </nav>73 74 <!-- Main Content -->75 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">76 <div class="flex flex-col lg:flex-row gap-8">77 <!-- Sidebar -->78 <aside class="lg:w-64 flex-shrink-0">79 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 sticky top-24">80 <div class="mb-6">81 <h2 class="text-lg font-semibold mb-2">Documentation</h2>82 <ul class="space-y-1">83 <li>84 <a href="#" class="flex items-center px-3 py-2 rounded-md bg-undefined-100 dark:bg-gray-700 text-undefined-700 dark:text-undefined-300 font-medium">85 <i data-feather="home" class="w-4 h-4 mr-2"></i>86 Getting Started87 </a>88 </li>89 <li>90 <a href="#" class="flex items-center px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">91 <i data-feather="code" class="w-4 h-4 mr-2"></i>92 API Reference93 </a>94 </li>95 <li>96 <a href="#" class="flex items-center px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">97 <i data-feather="alert-triangle" class="w-4 h-4 mr-2"></i>98 Troubleshooting99 </a>100 </li>101 <li>102 <a href="#" class="flex items-center px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">103 <i data-feather="bookmark" class="w-4 h-4 mr-2"></i>104 Best Practices105 </a>106 </li>107 </ul>108 </div>109 110 <div>111 <h2 class="text-lg font-semibold mb-2">Categories</h2>112 <div class="space-y-2">113 <details class="group" open>114 <summary class="flex items-center justify-between px-3 py-2 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">115 <span class="font-medium">Frontend</span>116 <i data-feather="chevron-down" class="w-4 h-4 group-open:rotate-180 transform transition-transform"></i>117 </summary>118 <ul class="ml-4 mt-1 space-y-1">119 <li><a href="#" class="block px-3 py-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">React</a></li>120 <li><a href="#" class="block px-3 py-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">Vue</a></li>121 <li><a href="#" class="block px-3 py-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">Angular</a></li>122 </ul>123 </details>124 <details class="group">125 <summary class="flex items-center justify-between px-3 py-2 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">126 <span class="font-medium">Backend</span>127 <i data-feather="chevron-down" class="w-4 h-4 group-open:rotate-180 transform transition-transform"></i>128 </summary>129 <ul class="ml-4 mt-1 space-y-1 hidden group-open:block">130 <li><a href="#" class="block px-3 py-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">Node.js</a></li>131 <li><a href="#" class="block px-3 py-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">Django</a></li>132 <li><a href="#" class="block px-3 py-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">Laravel</a></li>133 </ul>134 </details>135 <details class="group">136 <summary class="flex items-center justify-between px-3 py-2 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">137 <span class="font-medium">DevOps</span>138 <i data-feather="chevron-down" class="w-4 h-4 group-open:rotate-180 transform transition-transform"></i>139 </summary>140 <ul class="ml-4 mt-1 space-y-1 hidden group-open:block">141 <li><a href="#" class="block px-3 py-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">Docker</a></li>142 <li><a href="#" class="block px-3 py-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">Kubernetes</a></li>143 <li><a href="#" class="block px-3 py-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">CI/CD</a></li>144 </ul>145 </details>146 </div>147 </div>148 </div>149 </aside>150 151 <!-- Main Content Area -->152 <main class="flex-1">153 <div class="prose dark:prose-invert max-w-none">154 <h1 class="text-3xl font-bold mb-6">Getting Started</h1>155 156 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8">157 <h2 class="text-2xl font-semibold mb-4">Installation</h2>158 <p class="mb-4">To get started with our framework, install it via npm:</p>159 160 <pre><code class="language-bash">npm install @devdocs/core</code></pre>161 162 <p class="mt-4">Or using yarn:</p>163 <pre><code class="language-bash">yarn add @devdocs/core</code></pre>164 </div>165 166 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8">167 <h2 class="text-2xl font-semibold mb-4">Quick Start</h2>168 <p class="mb-4">Here's a simple example to get you started:</p>169 170 <pre><code class="language-javascript">import { DevDocs } from '@devdocs/core';171 172const config = {173 apiKey: 'your-api-key',174 environment: 'production'175};176 177const docs = new DevDocs(config);178 179docs.init().then(() => {180 console.log('DevDocs initialized successfully!');181});</code></pre>182 183 <div class="mt-6 p-4 bg-secondary-100 dark:bg-gray-700 rounded-md border-l-4 border-secondary-500">184 <div class="flex">185 <i data-feather="alert-circle" class="text-secondary-500 mr-2"></i>186 <div>187 <h3 class="font-medium">Note</h3>188 <p class="text-sm">Make sure to replace 'your-api-key' with your actual API key from the dashboard.</p>189 </div>190 </div>191 </div>192 </div>193 194 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">195 <h2 class="text-2xl font-semibold mb-4">Configuration Options</h2>196 <p class="mb-4">The following configuration options are available:</p>197 198 <div class="overflow-x-auto">199 <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">200 <thead class="bg-gray-50 dark:bg-gray-700">201 <tr>202 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Option</th>203 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Type</th>204 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Default</th>205 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>206 </tr>207 </thead>208 <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">209 <tr>210 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">apiKey</td>211 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">String</td>212 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-</td>213 <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-300">Your unique API key</td>214 </tr>215 <tr>216 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">environment</td>217 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">String</td>218 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">'development'</td>219 <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-300">Environment to run in</td>220 </tr>221 <tr>222 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">debug</td>223 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Boolean</td>224 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">false</td>225 <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-300">Enable debug mode</td>226 </tr>227 </tbody>228 </table>229 </div>230 </div>231 </div>232 </main>233 </div>234 </div>235 236 <!-- Footer -->237 <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-12">238 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">239 <div class="md:flex md:items-center md:justify-between">240 <div class="flex justify-center md:order-2 space-x-6">241 <a href="#" class="text-gray-400 hover:text-gray-500">242 <i data-feather="github"></i>243 </a>244 <a href="#" class="text-gray-400 hover:text-gray-500">245 <i data-feather="twitter"></i>246 </a>247 <a href="#" class="text-gray-400 hover:text-gray-500">248 <i data-feather="slack"></i>249 </a>250 </div>251 <div class="mt-8 md:mt-0 md:order-1">252 <p class="text-center text-base text-gray-400">253 © 2023 DevDocs Hub. All rights reserved.254 </p>255 </div>256 </div>257 </div>258 </footer>259 260 <script>261 // Initialize feather icons262 feather.replace();263 264 // Theme toggle265 const themeToggle = document.getElementById('theme-toggle');266 const html = document.documentElement;267 268 // Check for saved theme preference or use system preference269 const savedTheme = localStorage.getItem('theme') || 270 (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');271 html.classList.add(savedTheme);272 273 themeToggle.addEventListener('click', () => {274 html.classList.toggle('dark');275 const theme = html.classList.contains('dark') ? 'dark' : 'light';276 localStorage.setItem('theme', theme);277 });278 279 // Initialize Prism for syntax highlighting280 document.addEventListener('DOMContentLoaded', () => {281 Prism.highlightAll();282 });283 </script>284</body>285</html>286