{% 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 %} · {{ 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 }}/{% 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…</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 %}