repos: 327087207
This data as json
| id | node_id | name | full_name | private | owner | html_url | description | fork | created_at | updated_at | pushed_at | homepage | size | stargazers_count | watchers_count | language | has_issues | has_projects | has_downloads | has_wiki | has_pages | forks_count | archived | disabled | open_issues_count | license | topics | forks | open_issues | watchers | default_branch | permissions | temp_clone_token | organization | network_count | subscribers_count | readme | readme_html | allow_forking | visibility | is_template | template_repository | web_commit_signoff_required | has_discussions |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 327087207 | MDEwOlJlcG9zaXRvcnkzMjcwODcyMDc= | datasette-css-properties | simonw/datasette-css-properties | 0 | 9599 | https://github.com/simonw/datasette-css-properties | Experimental Datasette output plugin using CSS properties | 0 | 2021-01-05T18:38:07Z | 2021-01-12T17:43:11Z | 2021-01-07T22:07:19Z | 10 | 12 | 12 | Python | 1 | 1 | 1 | 1 | 0 | 0 | 0 | 0 | 1 | ["datasette-plugin", "datasette-io"] | 0 | 1 | 12 | main | {"admin": false, "push": false, "pull": false} | 0 | 2 | # datasette-css-properties [](https://pypi.org/project/datasette-css-properties/) [](https://github.com/simonw/datasette-css-properties/releases) [](https://github.com/simonw/datasette-css-properties/actions?query=workflow%3ATest) [](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. More about this project: [APIs from CSS without JavaScript: the datasette-css-properties plugin](https://simonwillison.net/2021/Jan/7/css-apis-no-javascript/) ## 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](https://latest-with-plugins.datasette.io/github?sql=select%0D%0A++%27%23%27+||+substr(sha%2C+0%2C+6)+as+[custom-bg]%0D%0Afrom%0D%0A++commits%0D%0Aorder+by%0D%0A++author_date+desc%0D%0Alimit%0D%0A++1%3B): ```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](https://latest-with-plugins.datasette.io/github.css?sql=select%0D%0A++%27%23%27+||+substr(sha%2C+0%2C+6)+as+[custom-bg]%0D%0Afrom%0D%0A++commits%0D%0Aorder+by%0D%0A++author_date+desc%0D%0Alimit%0D%0A++1%3B) looks like this: ```css :root { --custom-bg: '#97fb1'; } ``` Adding `?_raw=custom-bg` to the URL produces [this instead](https://latest-with-plugins.datasette.io/github.css?sql=select%0D%0A++%27%23%27+||+substr(sha%2C+0%2C+6)+as+[custom-bg]%0D%0Afrom%0D%0A++commits%0D%0Aorder+by%0D%0A++author_date+desc%0D%0Alimit%0D%0A++1%3B&_raw=custom-bg): ```css :root { --custom-bg: #97fb1; } ``` 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 | <div id="readme" class="md" data-path="README.md"><article class="markdown-body entry-content container-lg" itemprop="text"><h1><a id="user-content-datasette-css-properties" class="anchor" aria-hidden="true" href="#user-content-datasette-css-properties"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>datasette-css-properties</h1> <p><a href="https://pypi.org/project/datasette-css-properties/" rel="nofollow"><img src="https://camo.githubusercontent.com/73ef89bdb78bfff22274d72faf1843c5862cc6072d2df7743d43361fb6f5cace/68747470733a2f2f696d672e736869656c64732e696f2f707970692f762f6461746173657474652d6373732d70726f706572746965732e737667" alt="PyPI" data-canonical-src="https://img.shields.io/pypi/v/datasette-css-properties.svg" style="max-width:100%;"></a> <a href="https://github.com/simonw/datasette-css-properties/releases"><img src="https://camo.githubusercontent.com/a67e245842d1c8a894df0cbab28ce5643293cfbe70b75afedcea53403d0750b2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f73696d6f6e772f6461746173657474652d6373732d70726f706572746965733f696e636c7564655f70726572656c6561736573266c6162656c3d6368616e67656c6f67" alt="Changelog" data-canonical-src="https://img.shields.io/github/v/release/simonw/datasette-css-properties?include_prereleases&label=changelog" style="max-width:100%;"></a> <a href="https://github.com/simonw/datasette-css-properties/actions?query=workflow%3ATest"><img src="https://github.com/simonw/datasette-css-properties/workflows/Test/badge.svg" alt="Tests" style="max-width:100%;"></a> <a href="https://github.com/simonw/datasette-css-properties/blob/main/LICENSE"><img src="https://camo.githubusercontent.com/1698104e976c681143eb0841f9675c6f802bb7aa832afc0c7a4e719b1f3cf955/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d417061636865253230322e302d626c75652e737667" alt="License" data-canonical-src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" style="max-width:100%;"></a></p> <p>Extremely experimental Datasette output plugin using CSS properties, inspired by <a href="https://css-tricks.com/custom-properties-as-state/" rel="nofollow">Custom Properties as State</a> by Chris Coyier.</p> <p>More about this project: <a href="https://simonwillison.net/2021/Jan/7/css-apis-no-javascript/" rel="nofollow">APIs from CSS without JavaScript: the datasette-css-properties plugin</a></p> <h2><a id="user-content-installation" class="anchor" aria-hidden="true" href="#user-content-installation"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Installation</h2> <p>Install this plugin in the same environment as Datasette.</p> <div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="$ datasette install datasette-css-properties "><pre><code>$ datasette install datasette-css-properties </code></pre></div> <h2><a id="user-content-usage" class="anchor" aria-hidden="true" href="#user-content-usage"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Usage</h2> <p>Once installed, this plugin adds a <code>.css</code> 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:</p> <p>Example: <a href="https://latest-with-plugins.datasette.io/fixtures/roadside_attractions.css" rel="nofollow">https://latest-with-plugins.datasette.io/fixtures/roadside_attractions.css</a> produces:</p> <div class="highlight highlight-source-css position-relative" data-snippet-clipboard-copy-content=":root { --pk: '1'; --name: 'The Mystery Spot'; --address: '465 Mystery Spot Road, Santa Cruz, CA 95065'; --latitude: '37.0167'; --longitude: '-122.0024'; } "><pre><span class="pl-kos">:</span><span class="pl-c1">root</span> { <span class="pl-c1">--pk</span><span class="pl-kos">:</span> <span class="pl-s">'1'</span>; <span class="pl-c1">--name</span><span class="pl-kos">:</span> <span class="pl-s">'The Mystery Spot'</span>; <span class="pl-c1">--address</span><span class="pl-kos">:</span> <span class="pl-s">'465 Mystery Spot Road, Santa Cruz, CA 95065'</span>; <span class="pl-c1">--latitude</span><span class="pl-kos">:</span> <span class="pl-s">'37.0167'</span>; <span class="pl-c1">--longitude</span><span class="pl-kos">:</span> <span class="pl-s">'-122.0024'</span>; }</pre></div> <p>If you link this stylesheet to your page you can then do things like this;</p> <div class="highlight highlight-text-html-basic position-relative" data-snippet-clipboard-copy-content="<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> "><pre><span class="pl-kos"><</span><span class="pl-ent">link</span> <span class="pl-c1">rel</span>="<span class="pl-s">stylesheet</span>" <span class="pl-c1">href</span>="<span class="pl-s">https://latest-with-plugins.datasette.io/fixtures/roadside_attractions.css</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">style</span><span class="pl-kos">></span> .<span class="pl-c1">attraction-name</span><span class="pl-kos">:</span><span class="pl-c1">after</span> { <span class="pl-c1">content</span><span class="pl-kos">:</span> <span class="pl-en">var</span>(<span class="pl-s1">--name</span>); } <span class="pl-kos"></</span><span class="pl-ent">style</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">p</span> <span class="pl-c1">class</span>="<span class="pl-s">attraction-name</span>"<span class="pl-kos">></span>Attraction name: <span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span></pre></div> <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 <code>?_raw=column-name</code> parameter. This can be passed multiple times.</p> <p>Consider <a href="https://latest-with-plugins.datasette.io/github?sql=select%0D%0A++%27%23%27+%7C%7C+substr(sha%2C+0%2C+6)+as+%5Bcustom-bg%5D%0D%0Afrom%0D%0A++commits%0D%0Aorder+by%0D%0A++author_date+desc%0D%0Alimit%0D%0A++1%3B" rel="nofollow">this example query</a>:</p> <div class="highlight highlight-source-sql position-relative" data-snippet-clipboard-copy-content="select '#' || substr(sha, 0, 6) as [custom-bg] from commits order by author_date desc limit 1; "><pre><span class="pl-k">select</span> <span class="pl-s"><span class="pl-pds">'</span>#<span class="pl-pds">'</span></span> <span class="pl-k">||</span> substr(sha, <span class="pl-c1">0</span>, <span class="pl-c1">6</span>) <span class="pl-k">as</span> [custom<span class="pl-k">-</span>bg] <span class="pl-k">from</span> commits <span class="pl-k">order by</span> author_date <span class="pl-k">desc</span> <span class="pl-k">limit</span> <span class="pl-c1">1</span>;</pre></div> <p>This returns the first 6 characters of the most recently authored commit with a <code>#</code> prefix. The <code>.css</code> <a href="https://latest-with-plugins.datasette.io/github.css?sql=select%0D%0A++%27%23%27+%7C%7C+substr(sha%2C+0%2C+6)+as+%5Bcustom-bg%5D%0D%0Afrom%0D%0A++commits%0D%0Aorder+by%0D%0A++author_date+desc%0D%0Alimit%0D%0A++1%3B" rel="nofollow">output rendered version</a> looks like this:</p> <div class="highlight highlight-source-css position-relative" data-snippet-clipboard-copy-content=":root { --custom-bg: '#97fb1'; } "><pre><span class="pl-kos">:</span><span class="pl-c1">root</span> { <span class="pl-c1">--custom-bg</span><span class="pl-kos">:</span> <span class="pl-s">'#97fb1'</span>; }</pre></div> <p>Adding <code>?_raw=custom-bg</code> to the URL produces <a href="https://latest-with-plugins.datasette.io/github.css?sql=select%0D%0A++%27%23%27+%7C%7C+substr(sha%2C+0%2C+6)+as+%5Bcustom-bg%5D%0D%0Afrom%0D%0A++commits%0D%0Aorder+by%0D%0A++author_date+desc%0D%0Alimit%0D%0A++1%3B&_raw=custom-bg" rel="nofollow">this instead</a>:</p> <div class="highlight highlight-source-css position-relative" data-snippet-clipboard-copy-content=":root { --custom-bg: #97fb1; } "><pre><span class="pl-kos">:</span><span class="pl-c1">root</span> { <span class="pl-c1">--custom-bg</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>97fb1</span>; }</pre></div> <p>This can then be used as a color value like so:</p> <div class="highlight highlight-source-css position-relative" data-snippet-clipboard-copy-content="h1 { background-color: var(--custom-bg); } "><pre><span class="pl-ent">h1</span> { <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-en">var</span>(<span class="pl-s1">--custom-bg</span>); }</pre></div> <h2><a id="user-content-development" class="anchor" aria-hidden="true" href="#user-content-development"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Development</h2> <p>To set up this plugin locally, first checkout the code. Then create a new virtual environment:</p> <div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="cd datasette-css-properties python3 -mvenv venv source venv/bin/activate "><pre><code>cd datasette-css-properties python3 -mvenv venv source venv/bin/activate </code></pre></div> <p>Or if you are using <code>pipenv</code>:</p> <div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="pipenv shell "><pre><code>pipenv shell </code></pre></div> <p>Now install the dependencies and tests:</p> <div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="pip install -e '.[test]' "><pre><code>pip install -e '.[test]' </code></pre></div> <p>To run the tests:</p> <div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="pytest "><pre><code>pytest </code></pre></div> </article></div> |
Links from other tables
- 3 rows from repo in releases