Hugging Face's logo

Spaces:
ArunKr
/
docs
Running

App Files Community
ArunKr commited on
Commit
8dd3dd4
·
verified ·
1 Parent(s): 03479c0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +81 -28
index.html CHANGED
@@ -6,10 +6,13 @@
6
  <title>DocSite — Markdown Documentation</title>
7
  <!-- Tailwind via CDN -->
8
  <script src="https://cdn.tailwindcss.com"></script>
9
- <!-- Icon library -->
10
  <script src="https://unpkg.com/heroicons@2.0.18/dist/outline.js"></script>
11
  <!-- Marked.js -->
12
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 
 
 
13
  <style>
14
  /* custom scrollbar */
15
  .scrollbar-thin::-webkit-scrollbar { width: 6px; }
@@ -18,7 +21,7 @@
18
  </head>
19
  <body class="h-screen flex overflow-hidden font-sans">
20
  <!-- Sidebar: File Tree -->
21
- <aside class="w-64 bg-gray-800 text-gray-200 p-4 flex flex-col">
22
  <div class="flex items-center justify-between mb-4">
23
  <h2 class="text-lg font-semibold">Pages</h2>
24
  <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>
@@ -29,24 +32,40 @@
29
 
30
  <!-- Main Content: Editor & Preview -->
31
  <main class="flex-1 flex flex-col">
32
- <!-- Toolbar -->
33
- <div class="flex items-center bg-gray-100 p-2 border-b">
34
- <input id="pageTitle" class="flex-1 px-2 py-1 border rounded focus:outline-none" placeholder="Page Title..." />
35
- <button id="saveBtn" class="ml-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded">Save</button>
 
36
  </div>
37
 
38
  <!-- Editor & Preview Panes -->
39
  <div class="flex flex-1 overflow-hidden">
40
- <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>
41
- <div id="preview" class="w-1/2 p-4 overflow-auto scrollbar-thin prose max-w-none"></div>
 
 
 
 
 
 
 
 
 
 
 
42
  </div>
43
  </main>
44
 
45
  <script>
46
- // In-memory pages store using localStorage
47
  let pages = JSON.parse(localStorage.getItem('docPages') || '{}');
48
  let currentId = null;
 
49
 
 
 
 
50
  const fileTree = document.getElementById('fileTree');
51
  const newPageBtn = document.getElementById('newPageBtn');
52
  const deletePageBtn = document.getElementById('deletePageBtn');
@@ -54,18 +73,22 @@
54
  const pageTitleInput = document.getElementById('pageTitle');
55
  const editor = document.getElementById('editor');
56
  const preview = document.getElementById('preview');
 
 
57
 
 
58
  function renderTree() {
59
  fileTree.innerHTML = '';
60
- Object.keys(pages).forEach(id => {
61
  const li = document.createElement('li');
62
  li.textContent = pages[id].title;
63
  li.className = 'px-2 py-1 hover:bg-gray-700 rounded cursor-pointer ' + (id === currentId ? 'bg-gray-700' : '');
64
  li.onclick = () => loadPage(id);
65
  fileTree.append(li);
66
- });
67
  }
68
 
 
69
  function loadPage(id) {
70
  currentId = id;
71
  const { title, content } = pages[id];
@@ -75,37 +98,67 @@
75
  renderTree();
76
  }
77
 
 
78
  function updatePreview() {
79
- preview.innerHTML = marked.parse(editor.value || '');
 
 
 
 
 
 
 
 
 
 
80
  }
81
 
 
82
  newPageBtn.onclick = () => {
83
  const id = Date.now().toString();
84
  pages[id] = { title: 'Untitled', content: '' };
85
- saveStore();
86
- loadPage(id);
87
  };
88
 
 
89
  deletePageBtn.onclick = () => {
90
  if (!currentId) return;
91
  delete pages[currentId];
92
- currentId = Object.keys(pages)[0] || null;
93
- saveStore();
94
- if (currentId) loadPage(currentId);
95
- else { editor.value = ''; pageTitleInput.value = ''; preview.innerHTML = ''; renderTree(); }
96
  };
97
 
98
- saveBtn.onclick = () => {
99
- if (!currentId) return alert('No page selected');
100
- pages[currentId] = { title: pageTitleInput.value || 'Untitled', content: editor.value };
101
- saveStore();
102
- renderTree();
103
- alert('Page saved!');
 
 
 
104
  };
105
 
106
- function saveStore() {
107
- localStorage.setItem('docPages', JSON.stringify(pages));
108
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
 
110
  editor.addEventListener('input', updatePreview);
111
 
@@ -114,4 +167,4 @@
114
  if (!currentId && Object.keys(pages).length) loadPage(Object.keys(pages)[0]);
115
  </script>
116
  </body>
117
- </html>
 
6
  <title>DocSite — Markdown Documentation</title>
7
  <!-- Tailwind via CDN -->
8
  <script src="https://cdn.tailwindcss.com"></script>
9
+ <!-- Heroicons -->
10
  <script src="https://unpkg.com/heroicons@2.0.18/dist/outline.js"></script>
11
  <!-- Marked.js -->
12
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
13
+ <!-- Highlight.js -->
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
15
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
16
  <style>
17
  /* custom scrollbar */
18
  .scrollbar-thin::-webkit-scrollbar { width: 6px; }
 
21
  </head>
22
  <body class="h-screen flex overflow-hidden font-sans">
23
  <!-- Sidebar: File Tree -->
24
+ <aside id="sidebar" class="w-64 bg-gray-800 text-gray-200 p-4 flex flex-col transition-transform duration-300">
25
  <div class="flex items-center justify-between mb-4">
26
  <h2 class="text-lg font-semibold">Pages</h2>
27
  <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>
 
32
 
33
  <!-- Main Content: Editor & Preview -->
34
  <main class="flex-1 flex flex-col">
35
+ <!-- Top Controls -->
36
+ <div id="toolbar" class="flex items-center bg-gray-100 p-2 border-b transition-transform duration-300">
37
+ <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>
38
+ <input id="pageTitle" class="flex-1 px-2 py-1 border rounded focus:outline-none mr-2" placeholder="Page Title..." />
39
+ <button id="saveBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded">Save</button>
40
  </div>
41
 
42
  <!-- Editor & Preview Panes -->
43
  <div class="flex flex-1 overflow-hidden">
44
+ <!-- Editor Pane -->
45
+ <div class="relative w-1/2">
46
+ <div id="editorToolbar" class="absolute top-2 left-2 flex space-x-1 z-10">
47
+ <button data-action="bold" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">B</button>
48
+ <button data-action="italic" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">I</button>
49
+ <button data-action="h1" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">H1</button>
50
+ <button data-action="ul" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">• List</button>
51
+ </div>
52
+ <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>
53
+ </div>
54
+
55
+ <!-- Preview Pane -->
56
+ <div id="preview" class="w-1/2 p-6 overflow-auto scrollbar-thin prose prose-indigo max-w-none"></div>
57
  </div>
58
  </main>
59
 
60
  <script>
61
+ // Persistence
62
  let pages = JSON.parse(localStorage.getItem('docPages') || '{}');
63
  let currentId = null;
64
+ const AUTO_SAVE_INTERVAL = 5000;
65
 
66
+ // Elements
67
+ const sidebar = document.getElementById('sidebar');
68
+ const toolbarDiv = document.getElementById('toolbar');
69
  const fileTree = document.getElementById('fileTree');
70
  const newPageBtn = document.getElementById('newPageBtn');
71
  const deletePageBtn = document.getElementById('deletePageBtn');
 
73
  const pageTitleInput = document.getElementById('pageTitle');
74
  const editor = document.getElementById('editor');
75
  const preview = document.getElementById('preview');
76
+ const toggleSidebarBtn = document.getElementById('toggleSidebarBtn');
77
+ const editorToolbar = document.getElementById('editorToolbar');
78
 
79
+ // Render file tree
80
  function renderTree() {
81
  fileTree.innerHTML = '';
82
+ for (let id of Object.keys(pages)) {
83
  const li = document.createElement('li');
84
  li.textContent = pages[id].title;
85
  li.className = 'px-2 py-1 hover:bg-gray-700 rounded cursor-pointer ' + (id === currentId ? 'bg-gray-700' : '');
86
  li.onclick = () => loadPage(id);
87
  fileTree.append(li);
88
+ }
89
  }
90
 
91
+ // Load a page
92
  function loadPage(id) {
93
  currentId = id;
94
  const { title, content } = pages[id];
 
98
  renderTree();
99
  }
100
 
101
+ // Update preview with syntax highlighting
102
  function updatePreview() {
103
+ const html = marked.parse(editor.value || '');
104
+ preview.innerHTML = html;
105
+ preview.querySelectorAll('pre code').forEach(block => hljs.highlightBlock(block));
106
+ }
107
+
108
+ // Save current page
109
+ function savePage() {
110
+ if (!currentId) return;
111
+ pages[currentId] = { title: pageTitleInput.value || 'Untitled', content: editor.value };
112
+ localStorage.setItem('docPages', JSON.stringify(pages));
113
+ renderTree();
114
  }
115
 
116
+ // Create new page
117
  newPageBtn.onclick = () => {
118
  const id = Date.now().toString();
119
  pages[id] = { title: 'Untitled', content: '' };
120
+ savePage(); loadPage(id);
 
121
  };
122
 
123
+ // Delete page
124
  deletePageBtn.onclick = () => {
125
  if (!currentId) return;
126
  delete pages[currentId];
127
+ localStorage.setItem('docPages', JSON.stringify(pages));
128
+ const ids = Object.keys(pages);
129
+ if (ids.length) loadPage(ids[0]);
130
+ else { currentId = null; editor.value = ''; pageTitleInput.value = ''; preview.innerHTML = ''; renderTree(); }
131
  };
132
 
133
+ saveBtn.onclick = () => { savePage(); alert('Saved!'); };
134
+
135
+ // Auto-save every interval
136
+ setInterval(savePage, AUTO_SAVE_INTERVAL);
137
+
138
+ // Toggle sidebar visibility
139
+ toggleSidebarBtn.onclick = () => {
140
+ sidebar.classList.toggle('-translate-x-full');
141
+ toolbarDiv.classList.toggle('pl-0');
142
  };
143
 
144
+ // Editor formatting toolbar
145
+ editorToolbar.onclick = e => {
146
+ if (!e.target.dataset.action) return;
147
+ const action = e.target.dataset.action;
148
+ const start = editor.selectionStart;
149
+ const end = editor.selectionEnd;
150
+ let selected = editor.value.slice(start, end);
151
+ let insert = '';
152
+ switch(action) {
153
+ case 'bold': insert = `**${selected || 'bold'}**`; break;
154
+ case 'italic': insert = `*${selected || 'italic'}*`; break;
155
+ case 'h1': insert = `# ${selected || 'Heading'}`; break;
156
+ case 'ul': insert = `- ${selected || 'List item'}`; break;
157
+ }
158
+ editor.setRangeText(insert, start, end, 'end');
159
+ updatePreview();
160
+ editor.focus();
161
+ };
162
 
163
  editor.addEventListener('input', updatePreview);
164
 
 
167
  if (!currentId && Object.keys(pages).length) loadPage(Object.keys(pages)[0]);
168
  </script>
169
  </body>
170
+ </html>