first commit
This commit is contained in:
Isuru Bimsara
@@ -0,0 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Markdown Documentation</title>
|
||||
|
||||
<!-- Markdown parser -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
|
||||
<!-- GitHub style -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css/github-markdown-dark.min.css">
|
||||
|
||||
<!-- Highlight.js -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js/styles/github-dark.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/common.min.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
background: #0d1117;
|
||||
color: #c9d1d9;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background: #161b22;
|
||||
border-right: 1px solid #30363d;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.viewer-wrapper {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
background: #0d1117;
|
||||
border: 1px solid #30363d;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background: #21262d;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: yellow;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.search-controls {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
background: #21262d;
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="sidebar">
|
||||
<h3>Docs</h3>
|
||||
|
||||
<!-- File search -->
|
||||
<input type="text" id="fileSearch" placeholder="Search files..." onkeyup="filterFiles()" />
|
||||
|
||||
<!-- Content search -->
|
||||
<input type="text" id="contentSearch" placeholder="Search in document..." onkeyup="searchInContent()" />
|
||||
|
||||
<div class="search-controls">
|
||||
<button onclick="prevMatch()">⬆</button>
|
||||
<button onclick="nextMatch()">⬇</button>
|
||||
</div>
|
||||
|
||||
<ul id="fileList"></ul>
|
||||
</div>
|
||||
|
||||
<div class="viewer-wrapper">
|
||||
<div id="viewer" class="markdown-body">
|
||||
<h2>Select a file</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let allFiles = [];
|
||||
let matches = [];
|
||||
let currentMatchIndex = 0;
|
||||
|
||||
async function loadFiles() {
|
||||
const res = await fetch('/api/docs/markdown-files', {
|
||||
credentials: "include"
|
||||
});
|
||||
const result = await res.json();
|
||||
allFiles = result.data;
|
||||
renderList(allFiles);
|
||||
}
|
||||
|
||||
function renderList(files) {
|
||||
const list = document.getElementById('fileList');
|
||||
list.innerHTML = "";
|
||||
|
||||
files.forEach(file => {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = file;
|
||||
li.onclick = () => loadMarkdown(file);
|
||||
list.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function filterFiles() {
|
||||
const q = document.getElementById('fileSearch').value.toLowerCase();
|
||||
renderList(allFiles.filter(f => f.toLowerCase().includes(q)));
|
||||
}
|
||||
|
||||
async function loadMarkdown(file) {
|
||||
const res = await fetch(`/api/docs/view/${file}`, {
|
||||
credentials: "include"
|
||||
});
|
||||
const text = await res.text();
|
||||
|
||||
const html = marked.parse(text);
|
||||
const viewer = document.getElementById('viewer');
|
||||
viewer.innerHTML = html;
|
||||
|
||||
document.querySelectorAll('pre code').forEach(block => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
|
||||
matches = [];
|
||||
currentMatchIndex = 0;
|
||||
}
|
||||
|
||||
function searchInContent() {
|
||||
const query = document.getElementById('contentSearch').value;
|
||||
const viewer = document.getElementById('viewer');
|
||||
|
||||
if (!query) {
|
||||
// reset
|
||||
viewer.innerHTML = viewer.textContent;
|
||||
return;
|
||||
}
|
||||
|
||||
const regex = new RegExp(`(${query})`, 'gi');
|
||||
|
||||
viewer.innerHTML = viewer.innerHTML.replace(/<mark class="highlight">(.*?)<\/mark>/g, '$1');
|
||||
|
||||
viewer.innerHTML = viewer.innerHTML.replace(regex, '<mark class="highlight">$1</mark>');
|
||||
|
||||
matches = Array.from(document.querySelectorAll('.highlight'));
|
||||
currentMatchIndex = 0;
|
||||
|
||||
if (matches.length) scrollToMatch(0);
|
||||
}
|
||||
|
||||
function scrollToMatch(index) {
|
||||
matches[index].scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center"
|
||||
});
|
||||
}
|
||||
|
||||
function nextMatch() {
|
||||
if (!matches.length) return;
|
||||
currentMatchIndex = (currentMatchIndex + 1) % matches.length;
|
||||
scrollToMatch(currentMatchIndex);
|
||||
}
|
||||
|
||||
function prevMatch() {
|
||||
if (!matches.length) return;
|
||||
currentMatchIndex = (currentMatchIndex - 1 + matches.length) % matches.length;
|
||||
scrollToMatch(currentMatchIndex);
|
||||
}
|
||||
|
||||
loadFiles();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user