website/templates/docs.html

69 lines
3.1 KiB
HTML

{% extends "base.html" %}
{% block title %}{{ page_title }} — echoIRCd Docs{% endblock %}
{% block head %}
<link rel="stylesheet" href="/static/docs.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css">
{% endblock %}
{% block content %}
<div class="docs-shell">
<nav class="docs-side" aria-label="documentation navigation">
<div class="docs-search">
<input type="search" id="q" placeholder="Search the docs…" autocomplete="off" spellcheck="false">
<div id="results" class="results" hidden></div>
</div>
{% for s in sections %}
<div class="side-sec">
<div class="side-h">{{ s.title }}</div>
{% for pg in s.pages %}
<a href="/docs/{{ pg.slug }}" class="side-link{% if pg.active %} active{% endif %}">{{ pg.title }}</a>
{% endfor %}
</div>
{% endfor %}
</nav>
<article class="docs-body">
{{ body|safe }}
<nav class="pager">
{% if let Some((slug, title)) = prev %}<a class="pager-prev" href="/docs/{{ slug }}"><span>&#8592; Previous</span><b>{{ title }}</b></a>{% else %}<span></span>{% endif %}
{% if let Some((slug, title)) = next %}<a class="pager-next" href="/docs/{{ slug }}"><span>Next &#8594;</span><b>{{ title }}</b></a>{% endif %}
</nav>
</article>
<aside class="docs-toc">
{% if !toc.is_empty() %}
<div class="toc-h">On this page</div>
<nav>
{% for h in toc %}<a href="#{{ h.id }}" class="toc-l{{ h.level }}">{{ h.text }}</a>{% endfor %}
</nav>
{% endif %}
</aside>
</div>
{% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
<script>
if (window.hljs) hljs.highlightAll();
(function () {
var q = document.getElementById('q'), box = document.getElementById('results'), idx = null;
function esc(s){ return s.replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])); }
async function load(){ if(idx) return idx; try{ idx = await (await fetch('/docs/search.json')).json(); }catch(e){ idx=[]; } return idx; }
q.addEventListener('input', async function () {
var term = q.value.trim().toLowerCase();
if (term.length < 2) { box.hidden = true; box.innerHTML=''; return; }
var data = await load();
var hits = data.map(function (p) {
var t = p.title.toLowerCase().indexOf(term), b = p.text.toLowerCase().indexOf(term);
if (t < 0 && b < 0) return null;
var pos = b < 0 ? 0 : Math.max(0, b - 30);
var snip = b < 0 ? '' : '…' + p.text.substr(pos, 90) + '…';
return { slug: p.slug, title: p.title, snip: snip, score: (t >= 0 ? 0 : 1) };
}).filter(Boolean).sort(function(a,b){return a.score-b.score;}).slice(0, 8);
box.innerHTML = hits.length
? hits.map(function (h) { return '<a href="/docs/' + h.slug + '"><b>' + esc(h.title) + '</b><span>' + esc(h.snip) + '</span></a>'; }).join('')
: '<div class="no-res">No matches.</div>';
box.hidden = false;
});
document.addEventListener('click', function (e) { if (!e.target.closest('.docs-search')) box.hidden = true; });
})();
</script>
{% endblock %}