{% extends "base.html" %} {% block title %}{{ page.title }}
โ {{ site.title }}{% endblock %} {% block description %}{{
description }}{% endblock %} {% block og_title %}{{
page.title }} โ {{ site.title }}{% endblock %} {% block
og_type %}article{% endblock %} {% block twitter_title %}{{
page.title }} โ {{ site.title }}{% endblock %} {% block
content %}
<article class="page">
{% set has_folder = page.children %}
{% set has_synonyms = dimensional_peers %}
{% set has_neighbours = graph.show_minimap %}
{% set has_mentions = backlinks %}
<div class="page-title-bar">
<h1>
{% if page.icon %}<span class="page-icon"
>{{ page.icon }}</span
>{% endif %}{% if page.namespace %}{% for part
in page.namespace_parts %}<a
href="{{ part.url }}"
class="ns-path"
>{{ part.name }}</a
><span class="ns-sep">/</span>{% endfor %}{%
endif %}{{ page.display_name }}
</h1>
</div>
<header class="page-header">
{% if page.aliases %}
<div class="page-aliases">
{% for alias in page.aliases %}<span
class="page-alias"
>{{ alias }}</span
>{% endfor %}
</div>
{% endif %} {% if page.tags or page.meta['crystal-type'] or page.meta['crystal-domain'] %}
<div class="page-tags">
{% for tag in page.tags %}
<a href="/{{ tag | slugify }}" class="tag"
>{{ tag }}</a
>
{% endfor %}
{% if page.meta['crystal-type'] %}
<span class="crystal crystal-type"
>{{ page.meta['crystal-type'] }}</span
>
{% endif %}
{% if page.meta['crystal-domain'] %}
<span class="crystal crystal-domain"
>{{ page.meta['crystal-domain'] }}</span
>
{% endif %}
</div>
{% endif %}
<div class="page-meta-row">
{% if page.is_private %}<span class="page-visibility is-private"
>private</span
>{% endif %}
{% if page.focus and page.focus > 0 %}<span class="page-focus"
>ฯ {{ (page.focus * 100) | round(2) }}%</span
>{% endif %}
<span class="reading-time"
>{{ page.word_count }} words ยท {{ page.reading_time_minutes }} min</span
>
{% if page.date %}<time class="page-date" datetime="{{ page.date }}"
>{{ page.date }}</time
>{% endif %}
</div>
</header>
{% if page.toc %} {{ page.toc|safe }} {% endif %}
<div class="page-content">
{{ page.html_content|safe }}
</div>
{% if has_folder or has_synonyms or has_neighbours or has_mentions %}
<nav class="page-tabs" aria-label="Page sections">
{% if has_folder %}<a class="page-tab" data-target="folder" href="#folder">Folder</a>{% endif %}
{% if has_synonyms %}<a class="page-tab" data-target="synonyms" href="#synonyms">Synonyms</a>{% endif %}
{% if has_neighbours %}<a class="page-tab" data-target="neighbours" href="#neighbours">Neighbours</a>{% endif %}
{% if has_mentions %}<a class="page-tab" data-target="mentions" href="#mentions">Mentions</a>{% endif %}
</nav>
{% endif %}
{% if page.children %}
<section id="folder" class="namespace-children">
<h2>Folder</h2>
<ul>
{% for child in page.children %}
<li>
<a href="{{ child.url }}"
>{{ child.title }}</a
>
</li>
{% endfor %}
</ul>
</section>
{% endif %}
{% if dimensional_peers %}
<section id="synonyms" class="dimensional-peers">
<h2>Synonyms</h2>
{% for peer in dimensional_peers %}
<details class="dimension">
<summary class="dimension-path">
<a href="{{ peer.path }}">{{ peer.title }}</a>
</summary>
<div class="dimension-content page-content">
{{ peer.html_content|safe }}
</div>
</details>
{% endfor %}
</section>
{% endif %}
{% if graph.show_minimap %}
<section id="neighbours" class="page-minimap">
<h2>Neighbours</h2>
<div
id="minimap-container"
data-page-id="{{ page.id }}"
data-depth="{{ graph.minimap_depth }}"
data-max-nodes="{{ graph.minimap_max_nodes }}"
></div>
</section>
<script src="/static/graph.js"></script>
{% endif %}
{% include "partials/backlinks.html" %}
<script>
(function () {
var tabs = Array.prototype.slice.call(document.querySelectorAll('.page-tab'));
var siteHeader = document.querySelector('.site-header');
var titleBar = document.querySelector('.page-title-bar');
var tabsBar = document.querySelector('.page-tabs');
function siteHeaderHeight() { return siteHeader ? siteHeader.offsetHeight : 0; }
function titleBarHeight() { return titleBar ? titleBar.offsetHeight : 0; }
function tabsBarHeight() { return tabsBar ? tabsBar.offsetHeight : 0; }
function syncOffsets() {
var sh = siteHeaderHeight();
var th = titleBarHeight();
var bh = tabsBarHeight();
document.documentElement.style.setProperty('--site-header-h', sh + 'px');
document.documentElement.style.setProperty('--title-bar-h', th + 'px');
document.documentElement.style.setProperty('--sticky-h', (sh + th) + 'px');
document.documentElement.style.setProperty('--sticky-h-full', (sh + th + bh) + 'px');
}
syncOffsets();
window.addEventListener('resize', syncOffsets, { passive: true });
if (!tabs.length) return;
var sections = tabs
.map(function (t) { return document.getElementById(t.dataset.target); })
.filter(Boolean);
if (!sections.length) return;
tabs.forEach(function (t) {
t.addEventListener('click', function (e) {
var el = document.getElementById(t.dataset.target);
if (!el) return;
e.preventDefault();
var offset = siteHeaderHeight() + titleBarHeight() + tabsBarHeight() + 12;
var top = el.getBoundingClientRect().top + window.scrollY - offset;
window.scrollTo({ top: top, behavior: 'smooth' });
history.replaceState(null, '', '#' + t.dataset.target);
});
});
function update() {
var threshold = siteHeaderHeight() + titleBarHeight() + tabsBarHeight() + 24;
var active = -1;
sections.forEach(function (s, i) {
if (s.getBoundingClientRect().top - threshold <= 0) active = i;
});
tabs.forEach(function (t, i) {
t.classList.toggle('is-active', i === active);
});
}
window.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update, { passive: true });
update();
})();
</script>
</article>
{% endblock %}