Spaces:

ArunKr
/

docs

Running

App Files Files Community

ArunKr commited on Jul 14, 2025

Commit

03479c0

verified ·

1 Parent(s): 3f3daa2

Update index.html

Browse files

Files changed (1) hide show

index.html +92 -74

index.html CHANGED Viewed

@@ -1,99 +1,117 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>Markdown Editor & Publisher</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!-- Simple styling -->
   <style>
-    body { margin: 0; font-family: sans-serif; display: flex; flex-direction: column; height: 100vh; }
-    header { background: #333; color: #fff; padding: 0.5em 1em; display: flex; align-items: center; }
-    header h1 { margin: 0; font-size: 1.2em; flex: 1; }
-    header button { padding: 0.5em 1em; font-size: 1em; cursor: pointer; }
-    main { flex: 1; display: flex; overflow: hidden; }
-    textarea { width: 50%; border: none; padding: 1em; font-family: monospace; font-size: 1em; resize: none; outline: none; }
-    #preview { width: 50%; padding: 1em; overflow-y: auto; border-left: 1px solid #ccc; }
-    /* Basic Markdown styling */
-    #preview h1 { border-bottom: 2px solid #eee; padding-bottom: 0.3em; }
-    #preview pre { background: #f4f4f4; padding: 1em; overflow-x: auto; }
-    #preview code { background: #f4f4f4; padding: 0.2em 0.4em; }
-    #preview blockquote { border-left: 4px solid #ccc; padding-left: 1em; color: #666; }
   </style>
 </head>
-<body>
-  <header>
-    <h1>Markdown Editor & Publisher</h1>
-    <button id="publishBtn">Publish → Download HTML</button>
-  </header>
-  <main>
-    <textarea id="editor" placeholder="Type your Markdown here..."></textarea>
-    <div id="preview"></div>
   </main>
-  <!-- Marked.js from CDN for Markdown parsing -->
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script>
     const editor = document.getElementById('editor');
     const preview = document.getElementById('preview');
-    const publishBtn = document.getElementById('publishBtn');
-    // Render Markdown to HTML
-    function updatePreview() {
-      const md = editor.value;
-      preview.innerHTML = marked.parse(md, { breaks: true });
     }
-    // Download rendered content as standalone HTML
-    function publish() {
-      const content = preview.innerHTML;
-      const fullHtml = `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Published Document</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <style>
-    body { font-family: sans-serif; padding: 2em; max-width: 800px; margin: auto; line-height: 1.6; }
-    h1, h2, h3, h4 { margin-top: 1.4em; }
-    pre { background: #f4f4f4; padding: 1em; overflow-x: auto; }
-    code { background: #f4f4f4; padding: 0.2em 0.4em; }
-    blockquote { border-left: 4px solid #ccc; padding-left: 1em; color: #666; margin: 1em 0; }
-  </style>
-</head>
-<body>
-${content}
-</body>
-</html>`;
-      const blob = new Blob([fullHtml], { type: 'text/html' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'document.html';
-      a.click();
-      URL.revokeObjectURL(url);
     }
-    // Event listeners
-    editor.addEventListener('input', updatePreview);
-    publishBtn.addEventListener('click', publish);
-    // Initialize with a sample
-    editor.value = `# Welcome
-Type *Markdown* on the left and see **HTML** on the right.
-- Live preview
-- Download as HTML
-\`\`\`js
-console.log('Hello, world!');
-\`\`\`
-`;
-    updatePreview();
   </script>
 </body>
-</html>

 <!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>
+  <!-- Tailwind via CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Icon library -->
+  <script src="https://unpkg.com/heroicons@2.0.18/dist/outline.js"></script>
+  <!-- Marked.js -->
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <style>
+    /* custom scrollbar */
+    .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">
+  <!-- Sidebar: File Tree -->
+  <aside class="w-64 bg-gray-800 text-gray-200 p-4 flex flex-col">
+    <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 Content: Editor & Preview -->
+  <main class="flex-1 flex flex-col">
+    <!-- Toolbar -->
+    <div class="flex items-center bg-gray-100 p-2 border-b">
+      <input id="pageTitle" class="flex-1 px-2 py-1 border rounded focus:outline-none" placeholder="Page Title..." />
+      <button id="saveBtn" class="ml-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded">Save</button>
+    </div>
+    <!-- Editor & Preview Panes -->
+    <div class="flex flex-1 overflow-hidden">
+      <textarea id="editor" class="w-1/2 p-4 text-sm font-mono outline-none border-r resize-none scrollbar-thin" placeholder="Write Markdown..."></textarea>
+      <div id="preview" class="w-1/2 p-4 overflow-auto scrollbar-thin prose max-w-none"></div>
+    </div>
   </main>
   <script>
+    // In-memory pages store using localStorage
+    let pages = JSON.parse(localStorage.getItem('docPages') || '{}');
+    let currentId = null;
+    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 preview = document.getElementById('preview');
+    function renderTree() {
+      fileTree.innerHTML = '';
+      Object.keys(pages).forEach(id => {
+        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() {
+      preview.innerHTML = marked.parse(editor.value || '');
     }
+    newPageBtn.onclick = () => {
+      const id = Date.now().toString();
+      pages[id] = { title: 'Untitled', content: '' };
+      saveStore();
+      loadPage(id);
+    };
+    deletePageBtn.onclick = () => {
+      if (!currentId) return;
+      delete pages[currentId];
+      currentId = Object.keys(pages)[0] || null;
+      saveStore();
+      if (currentId) loadPage(currentId);
+      else { editor.value = ''; pageTitleInput.value = ''; preview.innerHTML = ''; renderTree(); }
+    };
+    saveBtn.onclick = () => {
+      if (!currentId) return alert('No page selected');
+      pages[currentId] = { title: pageTitleInput.value || 'Untitled', content: editor.value };
+      saveStore();
+      renderTree();
+      alert('Page saved!');
+    };
+    function saveStore() {
+      localStorage.setItem('docPages', JSON.stringify(pages));
+    }
+    editor.addEventListener('input', updatePreview);
+    // Initialize
+    renderTree();
+    if (!currentId && Object.keys(pages).length) loadPage(Object.keys(pages)[0]);
   </script>
 </body>
+</html>