Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepWiki - DevinAI Clone</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .code-font { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .wiki-article pre { | |
| background: #1a202c; | |
| color: #e2e8f0; | |
| padding: 1.5rem; | |
| border-radius: 0.5rem; | |
| overflow-x: auto; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.875rem; | |
| line-height: 1.5; | |
| border-left: 4px solid #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <custom-sidebar></custom-sidebar> | |
| <main class="ml-0 md:ml-64 pt-16 px-4 md:px-8 pb-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <!-- Header Section --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 mt-6"> | |
| <div> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-900">DeepWiki</h1> | |
| <p class="text-gray-600 mt-2">AI-powered knowledge base for developers</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold flex items-center shadow-lg hover:shadow-xl transition-all duration-300" id="ask-devin-wiki-btn"> | |
| <i data-feather="message-square" class="w-5 h-5 mr-2"></i> | |
| Ask Devin | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 mb-8"> | |
| <div class="flex items-center"> | |
| <i data-feather="search" class="w-5 h-5 text-gray-400 ml-3"></i> | |
| <input type="text" placeholder="Search DeepWiki for concepts, frameworks, APIs, or best practices..." | |
| class="flex-1 ml-4 px-4 py-3 border-0 focus:outline-none focus:ring-0 text-gray-700" id="wiki-search"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center ml-4"> | |
| <i data-feather="search" class="w-5 h-5 mr-2"></i> | |
| Search | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column - Categories --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-xl font-bold text-gray-900 flex items-center"> | |
| <i data-feather="folder" class="w-5 h-5 mr-2 text-blue-600"></i> | |
| Categories | |
| </h2> | |
| </div> | |
| <div class="p-4"> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="code" class="w-4 h-4 mr-3"></i> Programming Languages</a></li> | |
| <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="layers" class="w-4 h-4 mr-3"></i> Frameworks & Libraries</a></li> | |
| <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="database" class="w-4 h-4 mr-3"></i> Databases</a></li> | |
| <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="cloud" class="w-4 h-4 mr-3"></i> DevOps & Cloud</a></li> | |
| <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="shield" class="w-4 h-4 mr-3"></i> Security</a></li> | |
| <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="cpu" class="w-4 h-4 mr-3"></i> AI & Machine Learning</a></li> | |
| <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="smartphone" class="w-4 h-4 mr-3"></i> Mobile Development</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Recent Articles --> | |
| <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden mt-8"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-xl font-bold text-gray-900 flex items-center"> | |
| <i data-feather="clock" class="w-5 h-5 mr-2 text-green-600"></i> | |
| Recent Articles | |
| </h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="space-y-4"> | |
| <div class="border-l-4 border-blue-500 pl-4 py-2"> | |
| <h4 class="font-semibold text-gray-900">React Hooks Best Practices</h4> | |
| <p class="text-sm text-gray-500">Updated 2 days ago</p> | |
| </div> | |
| <div class="border-l-4 border-green-500 pl-4 py-2"> | |
| <h4 class="font-semibold text-gray-900">REST vs GraphQL APIs</h4> | |
| <p class="text-sm text-gray-500">Updated 1 week ago</p> | |
| </div> | |
| <div class="border-l-4 border-purple-500 pl-4 py-2"> | |
| <h4 class="font-semibold text-gray-900">Docker Containerization Guide</h4> | |
| <p class="text-sm text-gray-500">Updated 3 weeks ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Wiki Article --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-xl font-bold text-gray-900 flex items-center"> | |
| <i data-feather="book" class="w-5 h-5 mr-2 text-purple-600"></i> | |
| React Hooks Deep Dive | |
| </h2> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">AI Verified</span> | |
| </div> | |
| <div class="p-6 wiki-article"> | |
| <div class="prose max-w-none"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Introduction to React Hooks</h3> | |
| <p class="text-gray-700 mb-4">React Hooks are functions that let you use state and other React features without writing a class. They were introduced in React 16.8 and have become the standard way to write React components.</p> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 my-6"> | |
| <div class="flex"> | |
| <i data-feather="info" class="w-5 h-5 text-blue-500 mr-3"></i> | |
| <div> | |
| <p class="font-semibold text-blue-800">AI Insight</p> | |
| <p class="text-blue-700">Hooks solve problems of wrapper hell, complex lifecycle methods, and confusing class components.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mt-6 mb-3">Basic Hooks</h4> | |
| <ul class="list-disc pl-5 text-gray-700 mb-6"> | |
| <li><strong>useState</strong> - Adds state to functional components</li> | |
| <li><strong>useEffect</strong> - Performs side effects in functional components</li> | |
| <li><strong>useContext</strong> - Accesses React context without nesting</li> | |
| </ul> | |
| <h4 class="text-xl font-bold text-gray-900 mt-6 mb-3">Code Example</h4> | |
| <pre>import React, { useState, useEffect } from 'react'; | |
| function Counter() { | |
| const [count, setCount] = useState(0); | |
| useEffect(() => { | |
| // Update document title with count | |
| document.title = `You clicked ${count} times`; | |
| // Cleanup function | |
| return () => { | |
| document.title = 'React App'; | |
| }; | |
| }, [count]); // Only re-run if count changes | |
| return ( | |
| <div> | |
| <p>You clicked {count} times</p> | |
| <button onClick={() => setCount(count + 1)}> | |
| Click me | |
| </button> | |
| </div> | |
| ); | |
| } | |
| export default Counter;</pre> | |
| <div class="mt-8 p-4 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center"> | |
| <i data-feather="cpu" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="font-semibold text-gray-900">DevinAI Note</p> | |
| <p class="text-gray-600">This article was AI-generated and verified for accuracy. Use the "Ask Devin" button for specific questions.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Related Articles --> | |
| <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden mt-8"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-xl font-bold text-gray-900 flex items-center"> | |
| <i data-feather="link" class="w-5 h-5 mr-2 text-orange-600"></i> | |
| Related Articles | |
| </h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50"> | |
| <h4 class="font-semibold text-gray-900">React Context API</h4> | |
| <p class="text-sm text-gray-500 mt-1">State management without prop drilling</p> | |
| <a href="#" class="text-blue-600 text-sm mt-2 inline-block">Read →</a> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50"> | |
| <h4 class="font-semibold text-gray-900">Custom Hooks</h4> | |
| <p class="text-sm text-gray-500 mt-1">Building reusable hook logic</p> | |
| <a href="#" class="text-blue-600 text-sm mt-2 inline-block">Read →</a> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50"> | |
| <h4 class="font-semibold text-gray-900">Performance Optimization</h4> | |
| <p class="text-sm text-gray-500 mt-1">useMemo, useCallback, and React.memo</p> | |
| <a href="#" class="text-blue-600 text-sm mt-2 inline-block">Read →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Ask Devin Modal --> | |
| <div id="ask-devin-modal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"></div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-4"> | |
| <h3 class="text-lg font-bold text-white">Ask Devin AI Assistant</h3> | |
| </div> | |
| <div class="bg-white px-6 py-4"> | |
| <div class="mb-4"> | |
| <p class="text-gray-600 mb-4">Ask any coding question, and Devin will provide detailed explanations with code examples.</p> | |
| <textarea id="ask-devin-question" rows="4" class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="E.g., How do I implement authentication in React with JWT?"></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="close-modal" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button> | |
| <button id="submit-question" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Ask Devin</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Update active state in sidebar | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const sidebarLinks = document.querySelector('custom-sidebar').shadowRoot.querySelectorAll('.menu-item'); | |
| sidebarLinks.forEach(link => { | |
| link.classList.remove('active'); | |
| if (link.href && link.href.includes('deepwiki.html')) { | |
| link.classList.add('active'); | |
| } | |
| }); | |
| // Add DeepWiki to sidebar | |
| const sidebar = document.querySelector('custom-sidebar'); | |
| if (sidebar) { | |
| const sidebarContent = sidebar.shadowRoot.querySelector('.sidebar .menu-items:last-child'); | |
| if (sidebarContent) { | |
| const wikiLink = document.createElement('a'); | |
| wikiLink.className = 'menu-item'; | |
| wikiLink.href = 'deepwiki.html'; | |
| wikiLink.innerHTML = '<i data-feather="book"></i> DeepWiki'; | |
| sidebarContent.parentNode.insertBefore(wikiLink, sidebarContent); | |
| } | |
| } | |
| // Ask Devin Modal | |
| const modal = document.getElementById('ask-devin-modal'); | |
| const openBtn = document.getElementById('ask-devin-wiki-btn'); | |
| const closeBtn = document.getElementById('close-modal'); | |
| const submitBtn = document.getElementById('submit-question'); | |
| if (openBtn) { | |
| openBtn.addEventListener('click', () => { | |
| modal.classList.remove('hidden'); | |
| modal.classList.add('block'); | |
| }); | |
| } | |
| if (closeBtn) { | |
| closeBtn.addEventListener('click', () => { | |
| modal.classList.remove('block'); | |
| modal.classList.add('hidden'); | |
| }); | |
| } | |
| if (submitBtn) { | |
| submitBtn.addEventListener('click', () => { | |
| const question = document.getElementById('ask-devin-question').value.trim(); | |
| if (question) { | |
| // In a real app, this would call an API | |
| alert(`DevinAI received your question: "${question}"\n\nAnswer would appear here in a real implementation.`); | |
| modal.classList.remove('block'); | |
| modal.classList.add('hidden'); | |
| document.getElementById('ask-devin-question').value = ''; | |
| } | |
| }); | |
| } | |
| // Close modal on background click | |
| modal.addEventListener('click', (e) => { | |
| if (e.target === modal) { | |
| modal.classList.remove('block'); | |
| modal.classList.add('hidden'); | |
| } | |
| }); | |
| // Search functionality | |
| const searchInput = document.getElementById('wiki-search'); | |
| if (searchInput) { | |
| searchInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| const query = searchInput.value.trim(); | |
| if (query) { | |
| alert(`Searching DeepWiki for: "${query}"\n\nResults would appear here in a real implementation.`); | |
| } | |
| } | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |