Package: datasette-json-html
datasette-json-htmlDatasette plugin for rendering HTML based on JSON values, using therender_cell plugin hook.This plugin looks for cell values that match a very specific JSON format and converts them into HTML when they are rendered by the Datasette interface.Links{
    "href": "https://simonwillison.net/",
    "label": "Simon Willison"
}Will be rendered as an<a href="">link:<a href="https://simonwillison.net/">Simon Willison</a>You can set a tooltip on the link using a"title"key:{
    "href": "https://simonwillison.net/",
    "label": "Simon Willison",
    "title": "My blog"
}Produces:<a href="https://simonwillison.net/" title="My blog">Simon Willison</a>You can also include a description, which will be displayed below the link. If descriptions include newlines they will be converted to<br>elements:select json_object(
    "href", "https://simonwillison.net/",
    "label", "Simon Willison",
    "description", "This can contain" || x'0a' || "newlines"
)Produces:<strong><a href="https://simonwillison.net/">Simon Willison</a></strong><br>This can contain<br>newlinesLiteral JSON link demoList of links[
    {
        "href": "https://simonwillison.net/",
        "label": "Simon Willison"
    },
    {
        "href": "https://github.com/simonw/datasette",
        "label": "Datasette"
    }
]Will be rendered as a comma-separated list of<a href="">links:<a href="https://simonwillison.net/">Simon Willison</a>,
<a href="https://github.com/simonw/datasette">Datasette</a>Thehrefproperty must begin withhttps://orhttp://or/, to avoid potential XSS injection attacks (for example URLs that begin withjavascript:).Lists of links cannot include"description"keys.Literal list of links demoImagesThe image tag is more complex. The most basic version looks like this:{
    "img_src": "https://placekitten.com/200/300"
}This will render as:<img src="https://placekitten.com/200/300">But you can also include one or more ofalt,caption,widthandhref.If you include width or alt, they will be added as attributes:{
    "img_src": "https://placekitten.com/200/300",
    "alt": "Kitten",
    "width": 200
}Produces:<img src="https://placekitten.com/200/300"
    alt="Kitten" width="200">Literal image demoThehrefkey will cause the image to be wrapped in a link:{
    "img_src": "https://placekitten.com/200/300",
    "href": "http://www.example.com"
}Produces:<a href="http://www.example.com">
    <img src="https://placekitten.com/200/300">
</a>Thecaptionkey wraps everything in a fancy figure/figcaption block:{
    "img_src": "https://placekitten.com/200/300",
    "caption": "Kitten caption"
}Produces:<figure>
    <img src="https://placekitten.com/200/300"></a>
    <figcaption>Kitten caption</figcaption>
</figure>Preformatted textYou can use{"pre": "text"}to render text in a<pre>HTML tag:{
    "pre": "This\nhas\nnewlines"
}Produces:<pre>This
has
newlines</pre>If the value attached to the"pre"key is itself a JSON object, that JSON will be pretty-printed:{
    "pre": {
        "this": {
            "object": ["is", "nested"]
        }
    }
}Produces:<pre>{
  &#34;this&#34;: {
    &#34;object&#34;: [
      &#34;is&#34;,
      &#34;nested&#34;
    ]
  }
}</pre>Preformatted text with JSON demoPreformatted text demo showing the Mandelbrot Setusingthis examplefrom the SQLite documentationUsing these with SQLite JSON functionsThe most powerful way to make use of this plugin is in conjunction with SQLite'sJSON functions. For example:select json_object(
    "href", "https://simonwillison.net/",
    "label", "Simon Willison"
);json_object() link demoYou can use these functions to construct JSON objects that work with the plugin from data in a table:select id, json_object(
    "href", url, "label", text
) from mytable;Demo that builds links against a tableThejson_group_array()function is an aggregate function similar togroup_concat()- it allows you to construct lists of JSON objects in conjunction with aGROUP BYclause.This means you can use it to construct dynamic lists of links, for example:select
    substr(package, 0, 12) as prefix,
    json_group_array(
        json_object(
            "href", url,
            "label", package
        )
    ) as package_links
from packages
group by prefixDemo of json_group_array()Theurllib_quote_plus()SQL functionSince this plugin is designed to be used with SQL that constructs the underlying JSON structure, it is likely you will need to construct dynamic URLs from results returned by a SQL query.This plugin registers a custom SQLite function calledurllib_quote_plus()to help you do that. It lets you use Python'surllib.parse.quote_plus() functionfrom within a SQL query.Here's an example of how you might use it:select id, json_object(
    "href",
    "/mydatabase/other_table?_search=" || urllib_quote_plus(text),
    "label", text
) from mytable;