Metadata-Version: 2.1
Name: datasette-css-properties
Version: 0.1
Summary: Experimental Datasette output plugin using CSS properties
Home-page: https://github.com/simonw/datasette-css-properties
Author: Simon Willison
License: Apache License, Version 2.0
Project-URL: Issues, https://github.com/simonw/datasette-css-properties/issues
Project-URL: CI, https://github.com/simonw/datasette-css-properties/actions
Project-URL: Changelog, https://github.com/simonw/datasette-css-properties/releases
Description: # datasette-css-properties
        
        [![PyPI](https://img.shields.io/pypi/v/datasette-css-properties.svg)](https://pypi.org/project/datasette-css-properties/)
        [![Changelog](https://img.shields.io/github/v/release/simonw/datasette-css-properties?include_prereleases&label=changelog)](https://github.com/simonw/datasette-css-properties/releases)
        [![Tests](https://github.com/simonw/datasette-css-properties/workflows/Test/badge.svg)](https://github.com/simonw/datasette-css-properties/actions?query=workflow%3ATest)
        [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/simonw/datasette-css-properties/blob/main/LICENSE)
        
        Extremely experimental Datasette output plugin using CSS properties, inspired by [Custom Properties as State](https://css-tricks.com/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:
        
        ```css
        :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;
        
        ```html
        <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:
        
        ```sql
        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:
        
        ```css
        :root {
          --custom-bg: '#e5930';
        }
        ```
        
        Adding `?_raw=custom-bg` to the URL produces this instead:
        
        ```css
        :root {
          --custom-bg: #e5930;
        }
        ```
        
        This can then be used as a color value like so:
        
        ```css
        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
        
Platform: UNKNOWN
Requires-Python: >=3.6
Description-Content-Type: text/markdown
Provides-Extra: test
