Experimental Datasette output plugin using CSS properties
Project description
datasette-css-properties
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: '#97fb1';
}
Adding ?_raw=custom-bg
to the URL produces this instead:
:root {
--custom-bg: #97fb1;
}
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
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for datasette-css-properties-0.2.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | d40593f149f6b5d0cbde5a159a9393e6ffd22a7fb04464f88f26df92dcea86ec |
|
MD5 | 5c993102beff767b599e2f856a1bb7b5 |
|
BLAKE2b-256 | 4cab0132b715bf3660def1b256804313595e63c3e6030f4d300ae44aa2f7f2d4 |
Hashes for datasette_css_properties-0.2-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | b8da3521221ced08394607099dc709052c42b96b70f19457b7d87c406d1bc27c |
|
MD5 | 9b0368eccdc166021affbb069edbe063 |
|
BLAKE2b-256 | 5fa48a710e32c0e6bb3002cb0c00b672af73885a3b2a50b45713e6320f66eefb |