datasette.io/templates/_directory.html
{% extends "page_base.html" %}
{% block extra_head %}
<style>
.directory-search input {
border: 1px solid #ccc;
border-radius: 3px;
padding: 9px 4px;
margin-right: 1em;
}
.directory-search input[type="submit"] {
color: #fff;
background-color: #8484f4;
border-color: #0e0c82;
-webkit-appearance: button;
font-weight: 400;
cursor: pointer;
text-align: center;
vertical-align: middle;
border-width: 1px;
border-style: solid;
padding: .4em 0.8em;
font-size: 0.9rem;
line-height: 1;
border-radius: .25rem;
}
.directory {
border: 1px solid #ccc;
margin-bottom: 1em;
border-radius: 10px;
background-color: white;
padding: 1em;
}
.directory h3 {
margin-top: 0;
}
</style>
{% endblock %}
{% block content %}
{% block top_matter %}{% endblock %}
<form action="{{ path }}" class="directory-search">
<p><input type="search" name="q" value="{{ args.q }}" placeholder="Search {{ sql("select count(*) from " + table, database="content")[0][0] }} {{ table }}, e.g. yaml" style="min-width: 50%"><input type="submit" value="Search"></p>
</form>
{% if args.q %}
{% set query = build_directory_sql(args.q, table) %}
{% set other_query_count = sql(build_directory_sql_count(args.q, other_table), database="content")[0][0] %}
{% else %}
<p>Sort by
{% if args.sort %}<a href="{{ path }}">most recent release</a>{% else %}<strong>most recent release</strong>{% endif %} ·
{% if args.sort != "downloads-this-week" %}<a href="?sort=downloads-this-week">downloads this week</a>{% else %}<strong>downloads this week</strong>{% endif %} ·
{% if args.sort != "stars" %}<a href="?sort=stars">stars</a>{% else %}<strong>stars</strong>{% endif %}
</p>
{% set query = "select * from " + table + " order by {} desc".format({"downloads-this-week": "downloads_this_week", "stars": "stargazers_count"}.get(args.sort, "latest_release_at")) %}
{% endif %}
{% if other_query_count %}<p style="font-size: 0.8em">See also <a href="/{{ other_table }}?q={{ args.q|urlencode }}">{{ other_query_count }} result{% if other_query_count != 1 %}s{% endif %}</a> in {{ other_table }}</p>{% endif %}
{% for row in sql(query, {"q": args["q"] or ""}, database="content") %}
<div class="directory">
<h3><a href="/{% if row["is_plugin"] %}plugins{% else %}tools{% endif %}/{{ row["name"] }}">{{ row["name"] }}</a> <span class="by"> by {{ row.owner }}</span></h3>
<p>{{ row["description"] or "" }}</p>
<p>{% if row.downloads_this_week %}{{ "{:,}".format(row.downloads_this_week) }} downloads this week {% endif %}⭐ {{ row.stargazers_count }}</p>
{% if row["usesCustomOpenGraphImage"] %}
<img style="max-width: 100%" src="{{ row["openGraphImageUrl"] }}" alt="Screenshot of {{ row["full_name"] }}">
{% endif %}
{% if row["latest_release_at"] %}
<p>Latest: <a href="https://github.com/{{ row["full_name"] }}/releases/tag/{{ row["tag_name"] }}">{{ row["tag_name"] }}</a> on {{ prettydate(row["latest_release_at"]) }}</p>
{% endif %}
</div>
{% else %}
<p>No matches found</p>
{% endfor %}
{% endblock %}