| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>DocSite — Markdown Documentation</title> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| <script src="https://unpkg.com/heroicons@2.0.18/dist/outline.js"></script> |
| |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> |
| <style> |
| |
| .scrollbar-thin::-webkit-scrollbar { width: 6px; } |
| .scrollbar-thin::-webkit-scrollbar-thumb { background-color: rgba(100,100,100,0.4); border-radius: 3px; } |
| </style> |
| </head> |
| <body class="h-screen flex overflow-hidden font-sans"> |
| |
| <aside id="sidebar" class="w-64 bg-gray-800 text-gray-200 p-4 flex flex-col transition-transform duration-300"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-lg font-semibold">Pages</h2> |
| <button id="newPageBtn" class="p-1 hover:bg-gray-700 rounded"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 4v16m8-8H4"/></svg></button> |
| </div> |
| <ul id="fileTree" class="flex-1 overflow-auto scrollbar-thin space-y-1"></ul> |
| <button id="deletePageBtn" class="mt-4 px-3 py-2 bg-red-600 hover:bg-red-700 rounded-md">Delete Page</button> |
| </aside> |
|
|
| |
| <main class="flex-1 flex flex-col"> |
| |
| <div id="toolbar" class="flex items-center bg-gray-100 p-2 border-b transition-transform duration-300"> |
| <button id="toggleSidebarBtn" class="p-1 mr-2 hover:bg-gray-200 rounded"><svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button> |
| <button id="toggleEditorBtn" class="p-1 mr-2 hover:bg-gray-200 rounded"><svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M8 4h8v16H8z"/></svg></button> |
| <input id="pageTitle" class="flex-1 px-2 py-1 border rounded focus:outline-none mr-2" placeholder="Page Title..." /> |
| <button id="saveBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded">Save</button> |
| </div> |
|
|
| |
| <div class="flex flex-1 overflow-hidden"> |
| |
| <div id="editorPane" class="relative w-1/2 transition-all duration-300"> |
| <div id="editorToolbar" class="absolute top-2 left-2 flex space-x-1 z-10"> |
| <button data-action="bold" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">B</button> |
| <button data-action="italic" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">I</button> |
| <button data-action="h1" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">H1</button> |
| <button data-action="ul" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">• List</button> |
| </div> |
| <textarea id="editor" class="w-full h-full p-12 pt-10 text-sm font-mono outline-none border-r resize-none scrollbar-thin" placeholder="Write Markdown..."></textarea> |
| </div> |
|
|
| |
| <div id="previewPane" class="w-1/2 p-6 overflow-auto scrollbar-thin prose prose-indigo max-w-none transition-all duration-300"></div> |
| </div> |
| </main> |
|
|
| <script> |
| |
| let pages = JSON.parse(localStorage.getItem('docPages') || '{}'); |
| let currentId = null; |
| const AUTO_SAVE_INTERVAL = 5000; |
| |
| |
| const sidebar = document.getElementById('sidebar'); |
| const toolbarDiv = document.getElementById('toolbar'); |
| const fileTree = document.getElementById('fileTree'); |
| const newPageBtn = document.getElementById('newPageBtn'); |
| const deletePageBtn = document.getElementById('deletePageBtn'); |
| const saveBtn = document.getElementById('saveBtn'); |
| const pageTitleInput = document.getElementById('pageTitle'); |
| const editor = document.getElementById('editor'); |
| const previewPane = document.getElementById('previewPane'); |
| const toggleSidebarBtn = document.getElementById('toggleSidebarBtn'); |
| const toggleEditorBtn = document.getElementById('toggleEditorBtn'); |
| const editorToolbar = document.getElementById('editorToolbar'); |
| const editorPane = document.getElementById('editorPane'); |
| |
| |
| function renderTree() { |
| fileTree.innerHTML = ''; |
| for (let id of Object.keys(pages)) { |
| const li = document.createElement('li'); |
| li.textContent = pages[id].title; |
| li.className = 'px-2 py-1 hover:bg-gray-700 rounded cursor-pointer ' + (id === currentId ? 'bg-gray-700' : ''); |
| li.onclick = () => loadPage(id); |
| fileTree.append(li); |
| } |
| } |
| |
| |
| function loadPage(id) { |
| currentId = id; |
| const { title, content } = pages[id]; |
| pageTitleInput.value = title; |
| editor.value = content; |
| updatePreview(); |
| renderTree(); |
| } |
| |
| |
| function updatePreview() { |
| const html = marked.parse(editor.value || ''); |
| previewPane.innerHTML = html; |
| previewPane.querySelectorAll('pre code').forEach(block => hljs.highlightBlock(block)); |
| } |
| |
| |
| function savePage() { |
| if (!currentId) return; |
| pages[currentId] = { title: pageTitleInput.value || 'Untitled', content: editor.value }; |
| localStorage.setItem('docPages', JSON.stringify(pages)); |
| renderTree(); |
| } |
| |
| |
| newPageBtn.onclick = () => { |
| const id = Date.now().toString(); |
| pages[id] = { title: 'Untitled', content: '' }; |
| savePage(); loadPage(id); |
| }; |
| |
| |
| deletePageBtn.onclick = () => { |
| if (!currentId) return; |
| delete pages[currentId]; |
| localStorage.setItem('docPages', JSON.stringify(pages)); |
| const ids = Object.keys(pages); |
| if (ids.length) loadPage(ids[0]); |
| else { currentId = null; editor.value = ''; pageTitleInput.value = ''; previewPane.innerHTML = ''; renderTree(); } |
| }; |
| |
| saveBtn.onclick = () => { savePage(); alert('Saved!'); }; |
| |
| |
| setInterval(savePage, AUTO_SAVE_INTERVAL); |
| |
| |
| toggleSidebarBtn.onclick = () => { |
| sidebar.classList.toggle('-translate-x-full'); |
| toolbarDiv.classList.toggle('pl-0'); |
| }; |
| |
| |
| toggleEditorBtn.onclick = () => { |
| const hidden = editorPane.classList.toggle('hidden'); |
| if (hidden) previewPane.classList.replace('w-1/2', 'w-full'); |
| else previewPane.classList.replace('w-full', 'w-1/2'); |
| }; |
| |
| |
| editorToolbar.onclick = e => { |
| if (!e.target.dataset.action) return; |
| const action = e.target.dataset.action; |
| const start = editor.selectionStart; |
| const end = editor.selectionEnd; |
| let selected = editor.value.slice(start, end); |
| let insert = ''; |
| switch(action) { |
| case 'bold': insert = `**${selected || 'bold'}**`; break; |
| case 'italic': insert = `*${selected || 'italic'}*`; break; |
| case 'h1': insert = `# ${selected || 'Heading'}`; break; |
| case 'ul': insert = `- ${selected || 'List item'}`; break; |
| } |
| editor.setRangeText(insert, start, end, 'end'); |
| updatePreview(); |
| editor.focus(); |
| }; |
| |
| editor.addEventListener('input', updatePreview); |
| |
| |
| renderTree(); |
| if (!currentId && Object.keys(pages).length) loadPage(Object.keys(pages)[0]); |
| </script> |
| </body> |
| </html> |
