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