Skip to main content

Experimental Datasette output plugin using CSS properties

Project description

datasette-css-properties

PyPI Changelog Tests License

Extremely experimental Datasette output plugin using CSS properties, inspired by Custom Properties as State by Chris Coyier.

Installation

Install this plugin in the same environment as Datasette.

$ datasette install datasette-css-properties

Usage

Once installed, this plugin adds a .css output format to every query result. This will return the first row in the query as a valid CSS file, defining each column as a custom property:

Example: https://latest-with-plugins.datasette.io/fixtures/roadside_attractions.css produces:

:root {
  --pk: '1';
  --name: 'The Mystery Spot';
  --address: '465 Mystery Spot Road, Santa Cruz, CA 95065';
  --latitude: '37.0167';
  --longitude: '-122.0024';
}

If you link this stylesheet to your page you can then do things like this;

<link rel="stylesheet" href="https://latest-with-plugins.datasette.io/fixtures/roadside_attractions.css">
<style>
.attraction-name:after { content: var(--name); }
</style>
<p class="attraction-name">Attraction name: </p>

Values will be quoted as CSS strings by default. If you want to return a "raw" value without the quotes - for example to set a CSS property that is numeric or a color, you can specify that column name using the ?_raw=column-name parameter. This can be passed multiple times.

Consider this example query:

select
  '#' || substr(sha, 0, 6) as [custom-bg]
from
  commits
order by
  author_date desc
limit
  1;

This returns the first 6 characters of the most recently authored commit with a # prefix. The .css output rendered version looks like this:

:root {
  --custom-bg: '#e5930';
}

Adding ?_raw=custom-bg to the URL produces this instead:

:root {
  --custom-bg: #e5930;
}

This can then be used as a color value like so:

h1 {
    background-color: var(--custom-bg);
}

Development

To set up this plugin locally, first checkout the code. Then create a new virtual environment:

cd datasette-css-properties
python3 -mvenv venv
source venv/bin/activate

Or if you are using pipenv:

pipenv shell

Now install the dependencies and tests:

pip install -e '.[test]'

To run the tests:

pytest

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

datasette-css-properties-0.1.tar.gz (3.4 kB view hashes)

Uploaded source

Built Distribution

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page