Skip to content

Commit 61626cd

Browse files
srimon12srimon12
committed
feat: polish documentation layout and add styles for improved UI
1 parent f2dda99 commit 61626cd

12 files changed

Lines changed: 532 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: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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+
navigator.clipboard.writeText(text).then(() => {
65+
btn.textContent = 'Copied!';
66+
btn.classList.add('copied');
67+
setTimeout(() => {
68+
btn.textContent = 'Copy';
69+
btn.classList.remove('copied');
70+
}, 2000);
71+
});
72+
});
73+
74+
wrapper.appendChild(btn);
75+
});
76+
});
77+
</script>
78+
</body>
79+
</html>

‎docs/assets/css/style.css‎

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
/* style.css */
2+
*, *::before, *::after { box-sizing: border-box; }
3+
4+
body {
5+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
6+
margin: 0; padding: 0;
7+
background: #0d1117; color: #e6edf3;
8+
line-height: 1.6;
9+
}
10+
11+
.app-container {
12+
display: flex;
13+
min-height: 100vh;
14+
}
15+
16+
/* Sidebar */
17+
.sidebar {
18+
width: 260px;
19+
background: #161b22;
20+
border-right: 1px solid #30363d;
21+
display: flex;
22+
flex-direction: column;
23+
position: fixed;
24+
top: 0;
25+
bottom: 0;
26+
left: 0;
27+
overflow-y: auto;
28+
}
29+
30+
.sidebar-header {
31+
padding: 24px;
32+
border-bottom: 1px solid #30363d;
33+
}
34+
35+
.brand {
36+
font-size: 1.8rem;
37+
font-weight: 700;
38+
color: #f0f6fc;
39+
text-decoration: none;
40+
display: block;
41+
margin-bottom: 4px;
42+
}
43+
44+
.version {
45+
font-size: 0.85rem;
46+
color: #8b949e;
47+
margin: 0;
48+
}
49+
50+
.sidebar-nav {
51+
padding: 20px 0;
52+
flex: 1;
53+
}
54+
55+
.sidebar-nav ul {
56+
list-style: none;
57+
padding: 0;
58+
margin: 0;
59+
}
60+
61+
.sidebar-nav .nav-heading {
62+
font-size: 0.75rem;
63+
text-transform: uppercase;
64+
letter-spacing: 0.05em;
65+
color: #8b949e;
66+
padding: 0 24px;
67+
margin-bottom: 8px;
68+
font-weight: 600;
69+
}
70+
71+
.sidebar-nav a {
72+
display: block;
73+
padding: 8px 24px;
74+
color: #c9d1d9;
75+
text-decoration: none;
76+
font-size: 0.95rem;
77+
transition: background 0.15s, color 0.15s;
78+
}
79+
80+
.sidebar-nav a:hover {
81+
background: #21262d;
82+
color: #58a6ff;
83+
}
84+
85+
.sidebar-nav a.active {
86+
background: #23863622;
87+
color: #3fb950;
88+
border-left: 3px solid #3fb950;
89+
padding-left: 21px;
90+
}
91+
92+
.sidebar-footer {
93+
padding: 20px 24px;
94+
border-top: 1px solid #30363d;
95+
display: flex;
96+
gap: 16px;
97+
}
98+
99+
.sidebar-footer a {
100+
color: #8b949e;
101+
text-decoration: none;
102+
font-size: 0.85rem;
103+
}
104+
105+
.sidebar-footer a:hover {
106+
color: #58a6ff;
107+
}
108+
109+
/* Main Content */
110+
.main-content {
111+
flex: 1;
112+
margin-left: 260px;
113+
padding: 40px 48px;
114+
max-width: 1000px;
115+
}
116+
117+
.content-wrapper {
118+
max-width: 800px;
119+
}
120+
121+
.content-wrapper h1 {
122+
font-size: 2.5rem;
123+
color: #f0f6fc;
124+
margin-top: 0;
125+
margin-bottom: 24px;
126+
border-bottom: 1px solid #21262d;
127+
padding-bottom: 12px;
128+
}
129+
130+
.content-wrapper h2 {
131+
font-size: 1.8rem;
132+
color: #f0f6fc;
133+
margin-top: 40px;
134+
margin-bottom: 16px;
135+
border-bottom: 1px solid #21262d;
136+
padding-bottom: 8px;
137+
}
138+
139+
.content-wrapper h3 {
140+
font-size: 1.4rem;
141+
color: #f0f6fc;
142+
margin-top: 32px;
143+
margin-bottom: 16px;
144+
}
145+
146+
.content-wrapper p, .content-wrapper li {
147+
font-size: 1rem;
148+
color: #c9d1d9;
149+
}
150+
151+
.content-wrapper a {
152+
color: #58a6ff;
153+
text-decoration: none;
154+
}
155+
156+
.content-wrapper a:hover {
157+
text-decoration: underline;
158+
}
159+
160+
/* Code blocks */
161+
.code-wrapper {
162+
position: relative;
163+
margin: 16px 0;
164+
}
165+
166+
.content-wrapper pre {
167+
background: #010409;
168+
border: 1px solid #30363d;
169+
border-radius: 8px;
170+
padding: 16px;
171+
overflow-x: auto;
172+
font-size: 0.9rem;
173+
line-height: 1.5;
174+
margin: 0;
175+
}
176+
177+
/* Copy button */
178+
.copy-btn {
179+
position: absolute;
180+
top: 8px;
181+
right: 8px;
182+
background: #21262d;
183+
color: #8b949e;
184+
border: 1px solid #30363d;
185+
border-radius: 6px;
186+
padding: 5px 10px;
187+
font-size: 0.75rem;
188+
font-weight: 600;
189+
cursor: pointer;
190+
opacity: 0;
191+
transition: opacity 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
192+
}
193+
194+
.code-wrapper:hover .copy-btn {
195+
opacity: 1;
196+
}
197+
198+
.copy-btn:hover {
199+
background: #30363d;
200+
color: #c9d1d9;
201+
}
202+
203+
.copy-btn.copied {
204+
background: #238636;
205+
color: #fff;
206+
border-color: #2ea043;
207+
opacity: 1;
208+
}
209+
210+
.content-wrapper code {
211+
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
212+
background: #161b22;
213+
padding: 0.2em 0.4em;
214+
border-radius: 6px;
215+
font-size: 0.9em;
216+
}
217+
218+
.content-wrapper pre code {
219+
background: transparent;
220+
padding: 0;
221+
border-radius: 0;
222+
color: #e6edf3;
223+
}
224+
225+
/* Syntax highlighting */
226+
.highlight .c, .highlight .c1, .highlight .cm { color: #8b949e; font-style: italic; }
227+
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv { color: #ff7b72; }
228+
.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss { color: #a5d6ff; }
229+
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo { color: #79c0ff; }
230+
.highlight .nx, .highlight .nb, .highlight .bp, .highlight .nc { color: #d2a8ff; }
231+
232+
/* Tables */
233+
.content-wrapper table {
234+
width: 100%;
235+
border-collapse: collapse;
236+
margin: 24px 0;
237+
}
238+
239+
.content-wrapper th, .content-wrapper td {
240+
border: 1px solid #30363d;
241+
padding: 10px 16px;
242+
text-align: left;
243+
}
244+
245+
.content-wrapper th {
246+
background: #161b22;
247+
font-weight: 600;
248+
color: #f0f6fc;
249+
}
250+
251+
.content-wrapper tr:nth-child(even) {
252+
background: #0d1117;
253+
}
254+
255+
/* Blockquotes */
256+
.content-wrapper blockquote {
257+
border-left: 4px solid #30363d;
258+
margin: 0;
259+
padding: 0 16px;
260+
color: #8b949e;
261+
}
262+
263+
/* Images */
264+
.content-wrapper img {
265+
max-width: 100%;
266+
border-radius: 6px;
267+
}
268+
269+
/* Responsive */
270+
@media (max-width: 768px) {
271+
.app-container {
272+
flex-direction: column;
273+
}
274+
.sidebar {
275+
width: 100%;
276+
position: static;
277+
border-right: none;
278+
border-bottom: 1px solid #30363d;
279+
height: auto;
280+
overflow-y: visible;
281+
}
282+
.main-content {
283+
margin-left: 0;
284+
padding: 24px;
285+
}
286+
}

‎docs/collections.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
---
2+
layout: default
3+
title: "Collections & Quantization"
4+
---
5+
16
# Managing Collections
27

38
---

‎docs/filters.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
---
2+
layout: default
3+
title: "WHERE Filters"
4+
---
5+
16
# WHERE Clause Filters
27

38
The `WHERE` clause lets you filter on any payload field using SQL-style predicates. All standard comparison, range, membership, null-check, and full-text operators are supported.

‎docs/getting-started.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
---
2+
layout: default
3+
title: "Getting Started"
4+
---
5+
16
# Getting Started with QQL
27

38
QQL is a SQL-like query language and CLI for [Qdrant](https://qdrant.tech). Instead of writing Python SDK calls you write natural query statements to insert, search, manage, and delete vector data.

0 commit comments

Comments
 (0)