scraps 3.5.0

Scraps is a portable CLI knowledge hub for managing interconnected Markdown documentation with Wiki-link notation.
{% component scrap_rows(scraps, base_url, timezone) %}
    <ul class="scrap-rows">
        {% for scrap in scraps %}
            <li class="item">
                <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 %}
                        </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 %}
    </ul>
{% endcomponent scrap_rows %}

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

{% 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 type_filter(types, base_url, view_path, active_name="") %}
    <p class="type-filter">
        <span class="label">type</span>
        {% if active_name %}<a class="option" href="{{ base_url }}{{ view_path }}">all</a>{% else %}<span class="option active">all</span>{% endif %}
        {% for scrap_type in types %}
            {% if scrap_type.name == active_name %}<span class="option active">{{ scrap_type.name }}<span class="count">{{ scrap_type.scraps_count }}</span></span>{% else %}<a class="option" href="{{ base_url }}{{ scrap_type.url_path }}{{ view_path }}">{{ scrap_type.name }}<span class="count">{{ scrap_type.scraps_count }}</span></a>{% endif %}
        {% endfor %}
    </p>
{% endcomponent type_filter %}

{% 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 %}