Skip to content

Commit bc1fe22

Browse files
srimon12srimon12
authored
feat: polish documentation layout and add styles for improved UI (#40)
* feat: polish documentation layout and add styles for improved UI * feat: enhance documentation and UI with improved copy functionality and styling adjustments * feat: enhance copy button functionality with improved feedback and fallback mechanism
1 parent f2dda99 commit bc1fe22

12 files changed

Lines changed: 589 additions & 1 deletion

File tree

‎docs/_config.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
theme: minima
21
title: "QQL — Qdrant Query Language"
32
description: "SQL-like query language and CLI for Qdrant vector database — INSERT, SEARCH, hybrid search, reranking, quantization, and more."
43
url: "https://pavanjava.github.io/qql"

‎docs/_layouts/default.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>{{ page.title }} | QQL Documentation</title>
7+
<meta name="description" content="{{ site.description }}">
8+
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
10+
</head>
11+
<body>
12+
<div class="app-container">
13+
<aside class="sidebar">
14+
<div class="sidebar-header">
15+
<a href="{{ '/' | relative_url }}" class="brand">QQL</a>
16+
<p class="version">CLI & Language</p>
17+
</div>
18+
<nav class="sidebar-nav">
19+
<ul>
20+
<li class="nav-heading">Documentation</li>
21+
<li><a href="{{ '/getting-started.html' | relative_url }}" class="{% if page.url contains 'getting-started' %}active{% endif %}">Getting Started</a></li>
22+
<li><a href="{{ '/insert.html' | relative_url }}" class="{% if page.url contains 'insert' %}active{% endif %}">INSERT / BULK</a></li>
23+
<li><a href="{{ '/search.html' | relative_url }}" class="{% if page.url contains 'search' %}active{% endif %}">SEARCH / Hybrid</a></li>
24+
<li><a href="{{ '/filters.html' | relative_url }}" class="{% if page.url contains 'filters' %}active{% endif %}">WHERE Filters</a></li>
25+
<li><a href="{{ '/collections.html' | relative_url }}" class="{% if page.url contains 'collections' %}active{% endif %}">Collections</a></li>
26+
<li><a href="{{ '/scripts.html' | relative_url }}" class="{% if page.url contains 'scripts' %}active{% endif %}">Scripts & Dump</a></li>
27+
<li><a href="{{ '/programmatic.html' | relative_url }}" class="{% if page.url contains 'programmatic' %}active{% endif %}">Programmatic API</a></li>
28+
<li><a href="{{ '/reference.html' | relative_url }}" class="{% if page.url contains 'reference' %}active{% endif %}">Reference</a></li>
29+
</ul>
30+
</nav>
31+
<div class="sidebar-footer">
32+
<a href="https://github.com/pavanjava/qql" target="_blank" rel="noopener">GitHub</a>
33+
<a href="https://pypi.org/project/qql-cli/" target="_blank" rel="noopener">PyPI</a>
34+
</div>
35+
</aside>
36+
<main class="main-content">
37+
<div class="content-wrapper">
38+
{{ content }}
39+
</div>
40+
</main>
41+
</div>
42+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
43+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/sql.min.js"></script>
44+
<script>
45+
document.addEventListener('DOMContentLoaded', () => {
46+
// Apply true syntax highlighting
47+
hljs.highlightAll();
48+
49+
document.querySelectorAll('.content-wrapper pre').forEach(pre => {
50+
// Create wrapper
51+
const wrapper = document.createElement('div');
52+
wrapper.className = 'code-wrapper';
53+
pre.parentNode.insertBefore(wrapper, pre);
54+
wrapper.appendChild(pre);
55+
56+
// Create copy button
57+
const btn = document.createElement('button');
58+
btn.className = 'copy-btn';
59+
btn.textContent = 'Copy';
60+
61+
btn.addEventListener('click', () => {
62+
const code = pre.querySelector('code');
63+
const text = code ? code.innerText : pre.innerText;
64+
65+
const markCopied = () => {
66+
btn.textContent = 'Copied!';
67+
btn.classList.add('copied');
68+
setTimeout(() => {
69+
btn.textContent = 'Copy';
70+
btn.classList.remove('copied');
71+
}, 2000);
72+
};
73+
74+
const markFailed = () => {
75+
btn.textContent = 'Copy failed';
76+
btn.classList.add('copy-error');
77+
setTimeout(() => {
78+
btn.textContent = 'Copy';
79+
btn.classList.remove('copy-error');
80+
}, 2000);
81+
};
82+
83+
const fallbackCopy = () => {
84+
const ta = document.createElement('textarea');
85+
ta.value = text;
86+
ta.style.position = 'fixed';
87+
ta.style.opacity = '0';
88+
document.body.appendChild(ta);
89+
ta.select();
90+
try {
91+
const copied = document.execCommand('copy');
92+
if (copied) markCopied();
93+
else markFailed();
94+
} catch (e) {
95+
markFailed();
96+
} finally {
97+
document.body.removeChild(ta);
98+
}
99+
};
100+
101+
if (navigator.clipboard?.writeText) {
102+
navigator.clipboard.writeText(text).then(markCopied).catch(fallbackCopy);
103+
} else {
104+
fallbackCopy();
105+
}
106+
});
107+
108+
wrapper.appendChild(btn);
109+
});
110+
});
111+
</script>
112+
</body>
113+
</html>

0 commit comments

Comments
 (0)