scraps 5.1.0

Scraps is a portable CLI knowledge hub for managing interconnected Markdown documentation with Wiki-link notation.
{% component scrap_rows(scraps, groups, base_url, timezone) %}
    <ul class="scrap-rows">
        {% for scrap in scraps %}
            <li class="item"{% if scrap.scrap_type %} data-type="{{ scrap.scrap_type }}"{% endif %} data-rank-updated="{{ scrap.updated_rank }}" data-rank-backlinks="{{ scrap.backlinks_rank }}" data-rank-title="{{ scrap.title_rank }}" data-group="{{ scrap.group }}">
                <a class="row" href="{{ base_url }}{{ scrap.url_path }}">
                    {% if scrap.thumbnail %}
                        <img class="thumbnail" alt="" src="{{ scrap.thumbnail }}" loading="lazy" />
                    {% endif %}
                    <span class="body">
                        <span class="head">
                            <span class="title">{{ scrap.title }}</span>
                            {% if scrap.ctx %}<span class="ctx">{{ scrap.ctx }}</span>{% endif %}
                            {% if scrap.scrap_type %}<span class="type">{{ scrap.scrap_type }}</span>{% endif %}
                        </span>
                        {% if scrap.summary %}<span class="summary">{{ scrap.summary }}</span>{% endif %}
                    </span>
                    <span class="graph">
                        {% if scrap.commited_ts %}<span class="metric date">{{ scrap.commited_ts | date(format="%Y-%m-%d", timezone=timezone) }}</span>{% endif %}
                        <span class="metric">{{ scrap.links_count }} ref{% if scrap.links_count != 1 %}s{% endif %} &#183; {{ scrap.backlinks_count }} backlink{% if scrap.backlinks_count != 1 %}s{% endif %}</span>
                    </span>
                </a>
            </li>
        {% endfor %}
        {% for group in groups %}
            <li class="group-head" id="title-group-{{ group.number }}" data-rank-title="{{ group.title_rank }}" data-group="{{ group.number }}">{{ group.label }}</li>
        {% endfor %}
    </ul>
{% endcomponent scrap_rows %}

{% component scrap_links(scraps, base_url) %}
    <ul class="scrap-links">
        {% for scrap in scraps %}
            <li class="item">
                <a class="link" href="{{ base_url }}{{ scrap.url_path }}">
                    <span class="title">{{ scrap.title }}</span>
                    {% if scrap.ctx %}<span class="ctx">{{ scrap.ctx }}</span>{% endif %}
                </a>
            </li>
        {% endfor %}
    </ul>
{% endcomponent scrap_links %}

{% component scrap_graph(graph, base_url, center_title) %}
    <svg class="scrap-graph" viewBox="0 0 {{ graph.width }} {{ graph.height }}" role="img" aria-label="{{ center_title }} and its neighbours">
        <defs>
            <marker id="scrap-graph-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                <path class="head" d="M0 0 L8 4 L0 8 z" />
            </marker>
        </defs>
        {% for node in graph.nodes %}
            <line class="edge {{ node.dir }}" x1="{{ node.x1 }}" y1="{{ node.y1 }}" x2="{{ node.x2 }}" y2="{{ node.y2 }}"{% if node.arrow_start %} marker-start="url(#scrap-graph-arrow)"{% endif %}{% if node.arrow_end %} marker-end="url(#scrap-graph-arrow)"{% endif %} />
        {% endfor %}
        {% for node in graph.nodes %}
            <a class="scrap {{ node.dir }}" href="{{ base_url }}{{ node.url_path }}">
                <title>{% if node.ctx %}{{ node.ctx }}&#47;{% endif %}{{ node.title }}</title>
                <circle class="dot" cx="{{ node.x }}" cy="{{ node.y }}" r="{{ node.r }}" />
                <text class="label" x="{{ node.label_x }}" y="{{ node.label_y }}" text-anchor="{{ node.anchor }}">{{ node.label }}</text>
            </a>
        {% endfor %}
        <circle class="dot center" cx="{{ graph.center_x }}" cy="{{ graph.center_y }}" r="{{ graph.center_r }}" />
        <text class="label center" x="{{ graph.center_x }}" y="{{ graph.center_label_y }}" text-anchor="middle">{{ graph.center_label }}</text>
        {% if graph.dropped > 0 %}
            <text class="more" x="{{ graph.more_x }}" y="{{ graph.more_y }}" text-anchor="end">+{{ graph.dropped }} more</text>
        {% endif %}
    </svg>
{% endcomponent scrap_graph %}

{% component tag_links(tags, base_url, slice_size=100) %}
    <ul class="tag-links">
        {% for tag in tags | slice(end=slice_size) %}
            <li class="item">
                <a class="link" href="{{ base_url }}{{ tag.url_path }}">
                    <span class="title">#{{ tag.title }}</span><span class="count">{{ tag.backlinks_count }}</span>
                </a>
            </li>
        {% endfor %}
        {% if tags | length > slice_size %}
            <li class="item">
                <a class="link more" href="{{ base_url }}all-tags/">More&#8230;</a>
            </li>
        {% endif %}
    </ul>
{% endcomponent tag_links %}

{% component facet_bar(types) %}
    <div class="facets">
        <p class="facet facet-sort">
            <span class="label">sort</span>
            <a class="option" href="./" data-sort="updated" aria-current="true">updated</a>
            <a class="option" href="?sort=backlinks" data-sort="backlinks">backlinks</a>
            <a class="option" href="?sort=title" data-sort="title">title</a>
        </p>
        {% if types | length > 0 %}
            <p class="facet facet-type">
                <span class="label">type</span>
                <a class="option" href="./" data-type="" aria-current="true">all</a>
                {% for scrap_type in types %}
                    {% if scrap_type.scraps_count > 0 %}<a class="option" href="?{{ scrap_type.query }}" data-type="{{ scrap_type.name }}">{{ scrap_type.name }}<span class="count">{{ scrap_type.scraps_count }}</span></a>{% else %}<span class="option zero" data-type="{{ scrap_type.name }}">{{ scrap_type.name }}<span class="count">0</span></span>{% endif %}
                {% endfor %}
            </p>
        {% endif %}
    </div>
{% endcomponent facet_bar %}

{% component link_card(autolink) %}
<a class="link-card" href="{{ autolink.url }}" target="_blank" rel="noopener noreferrer">
    <svg class="icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6.5 9.5 L9.5 6.5"></path><path d="M7.5 4.5 L9 3 A2.1 2.1 0 0 1 12 6 L10.5 7.5"></path><path d="M8.5 11.5 L7 13 A2.1 2.1 0 0 1 4 10 L5.5 8.5"></path></svg>
    <span class="body">
        <span class="host">{{ autolink.host }}</span>
        <span class="url">{{ autolink.url }}</span>
    </span>
</a>
{% endcomponent link_card %}