klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 21:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style each result based on its content type in same view on Khoj web

Browse Source 
- So when searching across content types (with content-type = "all")
  org-mode results get rendered differently than markdown, PDF etc. results

- Set div class for each result separately instead of a single uber div
  for styling. This allows styling div of each result based on the
  content-type of that result

- No need to create placeholder "all" content type on web interface as
  server is passing an all content type by itself
This commit is contained in:
Debanjum Singh Solanky
2023-06-28 12:12:38 -07:00
parent 1773a78339
commit 630bf995f1
1 changed files with 51 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/khoj/interface/web/index.html
View File

@@ -14,11 +14,13 @@
<script>
function render_image(item) {
return `
<div class="results-image">
<a href="${item.entry}" class="image-link">
<img id=${item.score} src="${item.entry}?${Math.random()}"
title="Effective Score: ${item.score}, Meta: ${item.additional.metadata_score}, Image: ${item.additional.image_score}"
class="image">
</a>`
</a>
</div>`;
}
function render_org(query, data, classPrefix="") {
@@ -28,76 +30,69 @@
var orgParser = new Org.Parser();
var orgDocument = orgParser.parse(orgCode);
var orgHTMLDocument = orgDocument.convert(Org.ConverterHTML, { htmlClassPrefix: classPrefix });
return orgHTMLDocument.toString();
return `<div class="results-org">` + orgHTMLDocument.toString() + `</div>`;
}
function render_markdown(query, data) {
var md = window.markdownit();
return md.render(data.map(function (item) {
return data.map(function (item) {
if (item.additional.file.startsWith("http")) {
lines = item.entry.split("\n");
return `${lines[0]}\t[*](${item.additional.file})\n${lines.slice(1).join("\n")}`;
return md.render(`${lines[0]}\t[*](${item.additional.file})\n${lines.slice(1).join("\n")}`);
}
return `${item.entry}`;
}).join("\n"));
return `<div class="results-markdown">` + md.render(`${item.entry}`) + `</div>`;
}).join("\n");
}
function render_ledger(query, data) {
return `<div id="results-ledger">` + data.map(function (item) {
return `<p>${item.entry}</p>`
}).join("\n") + `</div>`;
return data.map(function (item) {
return `<div class="results-ledger">` + `<p>${item.entry}</p>` + `</div>`;
}).join("\n");
}
function render_pdf(query, data) {
return `<div id="results-pdf">` + data.map(function (item) {
return data.map(function (item) {
let compiled_lines = item.additional.compiled.split("\n");
let filename = compiled_lines.shift();
let text_match = compiled_lines.join("\n")
return `<h2>${filename}</h2>\n<p>${text_match}</p>`
}).join("\n") + `</div>`;
return `<div class="results-pdf">` + `<h2>${filename}</h2>\n<p>${text_match}</p>` + `</div>`;
}).join("\n");
}
function render_mutliple(query, data, type) {
let org_files = data.filter((item) => item.additional.file.endsWith(".org"));
let md_files = data.filter((item) => item.additional.file.endsWith(".md"));
let pdf_files = data.filter((item) => item.additional.file.endsWith(".pdf"));
let html = "";
if (org_files.length > 0) {
html += render_org(query, org_files, type);
}
if (md_files.length > 0) {
html += render_markdown(query, md_files);
}
if (pdf_files.length > 0) {
html += render_pdf(query, pdf_files);
}
data.forEach(item => {
if (item.additional.file.endsWith(".org")) {
html += render_org(query, [item], "org-");
} else if (item.additional.file.endsWith(".md")) {
html += render_markdown(query, [item]);
} else if (item.additional.file.endsWith(".pdf")) {
html += render_pdf(query, [item]);
}
});
return html;
}
function render_json(data, query, type) {
function render_results(data, query, type) {
let results = "";
if (type === "markdown") {
return render_markdown(query, data);
results = render_markdown(query, data);
} else if (type === "org") {
return render_org(query, data);
results = render_org(query, data, "org-");
} else if (type === "music") {
return render_org(query, data, "music-");
results = render_org(query, data, "music-");
} else if (type === "image") {
return data.map(render_image).join('');
results = data.map(render_image).join('');
} else if (type === "ledger") {
return render_ledger(query, data);
results = render_ledger(query, data);
} else if (type === "pdf") {
return render_pdf(query, data);
} else if (type == "github") {
return render_mutliple(query, data, type);
results = render_pdf(query, data);
} else if (type === "github" || type === "all") {
results = render_mutliple(query, data, type);
} else {
return `<div id="results-plugin">`
+ data.map((item) => `<p>${item.entry}</p>`).join("\n")
+ `</div>`;
results = data.map((item) => `<div class="results-plugin">` + `<p>${item.entry}</p>` + `</div>`).join("\n")
}
return `<div id="results-${type}">${results}</div>`;
}
function search(rerank=false) {
@@ -121,10 +116,7 @@
.then(response => response.json())
.then(data => {
console.log(data);
document.getElementById("results").innerHTML =
`<div id=results-${type}>`
+ render_json(data, query, type)
+ `</div>`;
document.getElementById("results").innerHTML = render_results(data, query, type);
});
}
@@ -135,7 +127,7 @@
.then(data => {
console.log(data);
document.getElementById("results").innerHTML =
render_json(data);
render_results(data);
});
}
@@ -156,7 +148,6 @@
fetch("/api/config/types")
.then(response => response.json())
.then(enabled_types => {
enabled_types.push("all");
document.getElementById("type").innerHTML =
enabled_types
.map(type => `<option value="${type}">${type.slice(0,1).toUpperCase() + type.slice(1)}</option>`)
@@ -313,7 +304,7 @@
margin: 0px;
line-height: 20px;
}
#results-image {
.results-image {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@@ -328,27 +319,28 @@
#json {
white-space: pre-wrap;
}
#results-pdf,
#results-plugin,
#results-ledger {
.results-pdf,
.results-plugin,
.results-ledger {
text-align: left;
white-space: pre-line;
}
#results-markdown, #results-github {
.results-markdown,
.results-github {
text-align: left;
}
#results-music,
#results-org {
.results-music,
.results-org {
text-align: left;
white-space: pre-line;
}
#results-music h3,
#results-org h3 {
.results-music h3,
.results-org h3 {
margin: 20px 0 0 0;
font-size: larger;
}
span.music-task-status,
span.task-status {
span.org-task-status {
color: white;
padding: 3.5px 3.5px 0;
margin-right: 5px;
@@ -357,15 +349,15 @@
font-size: medium;
}
span.music-task-status.todo,
span.task-status.todo {
span.org-task-status.todo {
background-color: #3b82f6
}
span.music-task-status.done,
span.task-status.done {
span.org-task-status.done {
background-color: #22c55e;
}
span.music-task-tag,
span.task-tag {
span.org-task-tag {
color: white;
padding: 3.5px 3.5px 0;
margin-right: 5px;