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 %} &middot;
        {% if args.sort != "downloads-this-week" %}<a href="?sort=downloads-this-week">downloads this week</a>{% else %}<strong>downloads this week</strong>{%  endif %} &middot;
        {% 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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% 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 %}