{% extends "__builtins/base.html" %}
{% import "__builtins/macros.html" as macros %}
{% block main %}
<div class="index">
{% if readme_content %}
<div class="readme-block">
{% for element in readme_content.elements %}{% if element.raw %}{{ element.raw | safe }}{% elif element.autolink %}<a href="{{ element.autolink.url }}">{{ element.autolink.url }}</a>{% endif %}{% endfor %}
<hr>
</div>
{% endif %}
{% if build_search_index == true %}
<div class="search-block">
<span class="icon" />
<input
type="text"
id="search-input"
onkeyup="doSearch()"
placeholder="Search by title..."
/>
<ul id="search-results"></ul>
</div>
{% endif %}
<div class="tags-block">
{{ macros::tag_links(tags = tags, slice_size = 15) }}
</div>
<div class="links-block">
<p class="sort-key">Sort by - {{ sort_key }}</p>
{{ macros::scrap_links(scraps = scraps) }}
</div>
<div class="paging-arrows">
{% if prev %}
<a class="prev" href="{{ prev }}">prev</a>
{% endif %}
{% if next %}
<a class="next" href="{{ next }}">next</a>
{% endif %}
</div>
</div>
{% endblock %}
{% block script %}
{% if build_search_index == true %}
<script type="module">
import Fuse from "https://cdn.jsdelivr.net/npm/fuse.js@{{ cdn.fusejs }}";
window.Fuse = Fuse;
fetch('./search_index.json')
.then(response => response.json())
.then(data => {
const fuseOptions = {
minMatchCharLength: 3,
keys: ["title"]
};
const fuse = new Fuse(data, fuseOptions);
window.search = function (query, numResults) {
return fuse.search(query).slice(0, numResults).map(result => [result.item.title, result.item.url]);
};
})
</script>
<script>
function doSearch() {
let value = document.getElementById("search-input").value;
console.log(`Search query: ${value}`);
const results = search(value, 5);
console.log(`Results: ${results}`);
let ul = document.getElementById("search-results");
ul.innerHTML = "";
results.forEach((result, index) => {
var li = document.createElement("li");
let [title, url] = result;
console.log(`Title: ${title}, URL: ${url}`);
let elemlink = document.createElement('a');
elemlink.innerHTML = title;
elemlink.setAttribute('href', url);
li.appendChild(elemlink);
li.style.top = `${(index * 30) - 16}px`;
ul.appendChild(li);
})
}
</script>
{% endif %}
{% endblock %}