datasette.io/templates/pages/plugins/{name}.html

{% extends "page_base.html" %}
 
{% set plugins = sql("""
select
    plugins.*,
    repos.readme_html as readme_html
from
    repos
join
    plugins on repos.full_name = plugins.full_name
where
    repos.name = :name
""", {"name": name}, database="content") %}
{% if not plugins %}
    {{ raise_404("Plugin not found") }}
{% endif %}
{% set plugin = plugins[0] %}
 
{% block title %}{{ name }} - a plugin for Datasette{% endblock %}
 
{% block extra_head %}
{% if plugin.usesCustomOpenGraphImage %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@datasetteproj">
<meta name="twitter:title" content="{{ plugin.name }} - a plugin for Datasette">
<meta name="twitter:description" content="{{ plugin.description }}">
<meta name="twitter:image" content="{{ plugin.openGraphImageUrl }}">
<meta name="twitter:image:alt" content="Screenshot of {{ plugin.name }}">
<meta property="og:type" content="article">
<meta property="og:title" content="{{ plugin.name }} - a plugin for Datasette">
<meta property="og:description" content="{{ plugin.description }}">
<meta property="og:image" content="{{ plugin.openGraphImageUrl }}">
<meta property="og:image:alt" content="Screenshot of {{ plugin.name }}">
{% endif %}
<style>
pre {
    white-space: pre-wrap;
}
.plugin {
    border: 1px solid #ccc;
    margin-bottom: 1em;
    border-radius: 10px;
    background-color: white;
    padding: 1em;
}
.plugin article h1:first-child {
    margin-top: 0;
}
.plugin-downloads-and-stars span {
    position: relative;
    top: 0.2em;
}
svg.octicon-link {
    margin-right: 0.3em;
    opacity: 0.8;
    height: 15px;
    width: 15px;
}
</style>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<link rel="stylesheet" type="text/css" href="/static/github-light.css">
{% endblock %}
 
{% block content %}
 
<p class="breadcrumbs"><a href="/plugins">Plugins</a> &gt; {{ name }}</p> 
 
<h1>{{ plugin["name"] }} <span class="by"> by {{ plugin.owner }}</span>
    <a href="https://github.com/{{ plugin["full_name"] }}">
        <svg xmlns="http://www.w3.org/2000/svg"
            aria-label="GitHub" role="img"
            style="width: 0.8em; margin-left: 0.5em;"
            viewBox="0 0 512 512"><rect
            width="512" height="512"
            rx="15%"
            fill="#1B1817"/>
        <path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/>
        </svg>
    </a>
</h1>
 
<p class="plugin-downloads-and-stars">
    {% if plugin.downloads_this_week %}{{ "{:,}".format(plugin.downloads_this_week) }} downloads this week &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %}
    <a class="github-button" href="https://github.com/{{ plugin["full_name"] }}" data-icon="octicon-star" data-show-count="true" aria-label="Star {{ plugin["full_name"] }} on GitHub">Star</a>
</p>
 
{% if plugin["usesCustomOpenGraphImage"] %}
    <img style="max-width: 100%" src="{{ plugin["openGraphImageUrl"] }}" alt="Screenshot of {{ plugin["full_name"] }}">
{% endif %}
 
{% if plugin.readme_html %}
    <h2>README <a href="https://github.com/{{ plugin["full_name"] }}" style="font-size: 0.7em;vertical-align: middle;padding-left: 1em;">source code</a></h2>
    <div class="plugin">
    {{ plugin.readme_html|safe }}
    </div>
{% endif %}
 
{% endblock %}