Search: css

Got 70 results, sorted by relevance / newest / oldest

Docs: extra_css_urls(template, database, table, columns, view_name, request, datasette)

This takes the same arguments as extra_template_vars(...) Return a list of extra CSS URLs that should be included on the page. These can take advantage of the CSS class hooks described in Custom pages and templates . This can be a list of URLs: from datasette import hookimpl @hookimpl def extra_css_urls(): return [ "https://stackpath.bootstrapcdn.com/bootstrap...

Plugin: datasette-css-properties

...CSS properties datasette-css-properties Extremely experimental Datasette output plugin using CSS properties, inspired by Custom Properties as State by Chris Coyier. More about this project: APIs from CSS without JavaScript: the datasette-css-properties plugin Installation Install this plugin in the same environment as Datasette. $ datasette install datasette-css-properties Usage Once installe...

Created 2021-01-05T18:38:07Z

Datasette News: 2021-01-07

APIs from CSS without JavaScript: the datasette-css-properties plugin introduces datasette-css-properties, a highly experimental plugin that can output table rows and SQL query results as CSS stylesheets defining custom properties that can then be used to customize a static HTML page.

Docs: Custom CSS and JavaScript

...datasette mydb.db --metadata metadata.json Your metadata.json file can include links that look like this: { "extra_css_urls": [ "https://simonwillison.net/static/css/all.bf8cd891642c.css" ], "extra_js_urls": [ "https://code.jquery.com/jquery-3.2.1.slim.min.js" ] } The extra CSS and JavaScript files will be linked in the of every page:

Blog: datasette-css-properties

...css-properties My new Datasette plugin defines a ".css" output format which returns the data from the query as a valid CSS stylesheet defining custom properties for each returned column. This means you can build a page using just HTML and CSS that consumes API data from Datasette, no JavaScript required! Whether this is a good idea or not is left as an exercise for the reader. Via @...

Published 2021-01-07T19:42:37+00:00

Docs: Serving static files

...metadata.json static/styles.css static/app.js You can start Datasette using --static static:static/ to serve those files from the /static/ mount point: $ datasette -m metadata.json --static static:static/ --memory The following URLs will now serve the content from those CSS and JS files: http://localhost:8001/static/styles.css http://localhost:8001/static/app.js You...

Release: datasette-css-properties 0.2

...css pages now send the x-content-type-options: nosniff header, to protect against browsers incorrectly rendering the CSS as HTML which could be an XSS security hole. #1

Released 2021-01-07T20:28:40Z

Docs: 0.14 (2017-12-09)

...datasette serve mydb.db --static extra-css:/tmp/static/css Now if you visit this URL: http://localhost:8001/extra-css/blah.css The following file will be served: /tmp/static/css/blah.css Canned query support. Named canned queries can now be defined in metadata.json like this: { "databases": { "timezones": { "queries": { "timezone_for_point": "select tzid from timezones ..." } } } } These...

Docs: Upgrading CodeMirror

...npx uglify-js codemirror-5.57.0.js -o codemirror-5.57.0.min.js --comments '/LICENSE/' npx uglify-js codemirror-5.57.0-sql.js -o codemirror-5.57.0-sql.min.js --comments '/LICENSE/' Check that the LICENSE comment did indeed survive minification Minify the CSS file like this: npx clean-css-cli codemirror-5.57.0.css...

Release: datasette 0.14

...css:/tmp/static/css Now if you visit this URL: http://localhost:8001/extra-css/blah.css The following file will be served: /tmp/static/css/blah.css Canned query support. Named canned queries can now be defined in metadata.json like this: { "databases": { "timezones": { "queries": { "timezone_for_point": "select tzid from timezones ..." } ...

Released 2017-12-10T01:41:14Z

Plugin: datasette-leaflet

...css available as static files. It provides two custom template variables with the URLs of those two files. {{ datasette_leaflet_url }} is the URL to the JavaScript {{ datasette_leaflet_css_url }} is the URL to the CSS These URLs are also made available as global JavaScript constants: datasette.leaflet.JAVASCRIPT_URL datasette.leaflet.CSS_URL The JavaScript is packaed as a JavaScript module. Yo...

Created 2021-01-21T18:41:19Z

Docs: CSS classes on the <body>

Every default template includes CSS classes in the body designed to support custom styling. The index template (the top level page at / ) gets this: The database template ( /dbname ) gets this: The custom SQL template ( /dbname?sql=... ) gets this: A canned query template ( /dbname/queryname ) gets this:

Release: datasette-css-properties 0.1

Initial prototype.

Released 2021-01-05T18:39:44Z

Release: datasette-css-properties 0.1.1

Improved README

Released 2021-01-07T19:48:50Z

Blog: Datasette: Ability to customize presentation of specific columns in HTML view

...CSS and JavaScript resources (optionally with SRI hashes) which will be included on every page. Each template also now provides CSS classes on the body element derived from the current database and table names to provide hooks for custom styling. Next up: custom template support.

Published 2017-11-30T07:27:58+00:00

Release: datasette-leaflet-freedraw 0.1.2

...CSS as well

Released 2021-01-20T01:26:17Z

Release: datasette-leaflet-freedraw 0.2

...CSS. #3

Released 2021-01-25T19:05:34Z

Release: datasette-leaflet 0.2

...CSS_URL. #4

Released 2021-01-25T19:03:10Z

Blog: APIs from CSS without JavaScript: the datasette-css-properties plugin

...css-properties. It's very, very weird - it adds a .css output extension to Datasette which outputs the result of a SQL query using CSS custom property format. This means you can display the results of database queries using pure CSS and HTML, no JavaScript required! I was inspired by Custom Properties as State, published by by Chris Coyier earlier this week. Chris points out that since CSS custom ...

Published 2021-01-07T20:50:44+00:00

Release: datasette-vega 0.6

...CSS and JS, so new versions won't fail to load due to browser caching. #11

Released 2018-07-07T01:20:53Z

Docs: 0.20 (2018-04-20)

...extra_css_urls() and extra_js_urls(), #214 /-/static-plugins/PLUGIN_NAME/ now serves static/ from plugins now gets class="col-X" - plus added col-X documentation Use to_css_class for table cell column classes This ensures that columns with spaces in the name will still generate usable CSS class names. Refs #209 Add column name classes to...

Release: datasette-ripgrep 0.4

...CSS instead of JavaScript to highlight linked line. Thanks, Louis Lévêque. #14

Released 2020-11-28T18:07:08Z

Docs: 0.41 (2020-05-06)

...So instead of running the following: $ datasette one.db two.db \ --metadata=metadata.json \ --template-dir=templates/ \ --plugins-dir=plugins \ --static css:css You can instead arrange your files in a single directory called my-project and run this: $ datasette my-project/ Also in this release: New NOT LIKE table filter: ?colname__notlike=expression . ( #750 ) Datasette now has a pattern...

Release: datasette 0.20

...css_urls() and extra_js_urls(), #214 /-/static-plugins/PLUGIN_NAME/ now serves static/ from plugins <th> now gets class="col-X" - plus added col-X documentation Use to_css_class for table cell column classes This ensures that columns with spaces in the name will still generate usable CSS class names. Refs #209 - Add column name classes to <td>s, make PK bold [Russ Garrett] - Don't d...

Released 2018-04-20T14:41:14Z

Release: datasette-leaflet-geojson 0.8

...CSS. #17

Released 2021-01-26T02:41:07Z

Release: datasette-leaflet-geojson 0.6

...CSS if it finds any. Now depends on Datasette 0.48 or higher.

Released 2020-08-21T23:54:48Z

Docs: Configuration directory mode

...For a Datasette instance with custom templates, custom plugins, a static directory and several databases this can get quite verbose: $ datasette one.db two.db \ --metadata=metadata.json \ --template-dir=templates/ \ --plugins-dir=plugins \ --static css:css As an alternative to this, you can run Datasette in configuration directory mode. Create a directory with the following structure: # In a directory...

Release: datasette-cluster-map 0.11

...CSS selector to an element in which the map will be displayed - thanks, Emma Lewis! #6 New "tile_layer" and "tile_layer_options" plugin configuration settings for setting custom tile layers. #5

Released 2020-08-14T05:41:38Z

Datasette News: 2020-08-16

Datasette 0.48 - Documentation now lives at docs.datasette.io, improvements to the extra_template_vars, extra_css_urls, extra_js_urls and extra_body_script plugin hooks.

Docs: /-/plugins

Shows a list of currently installed plugins and their versions. Plugins example : [ { "name": "datasette_cluster_map", "static": true, "templates": false, "version": "0.10", "hooks": ["extra_css_urls", "extra_js_urls", "extra_body_script"] } ] Add ?all=1 to include details of the default plugins baked into Datasette.

Docs: extra_js_urls(template, database, table, columns, view_name, request, datasette)

This takes the same arguments as extra_template_vars(...) This works in the same way as extra_css_urls() but for JavaScript. You can return a list of URLs, a list of dictionaries or an awaitable function that returns those things: from datasette import hookimpl @hookimpl def extra_js_urls(): return [{ "url": "https://code.jquery.com/jquery-3.3.1...

Release: datasette 0.41

...css:css You can instead arrange your files in a single directory called my-project and run this: $ datasette my-project/ Also in this release: New NOT LIKE table filter: ?colname__notlike=expression. (#750) Datasette now has a pattern portfolio at /-/patterns - e.g. https://latest.datasette.io/-/patterns. This is a page that shows every Datasette user interface component in one place, to aid co...

Released 2020-05-06T18:30:03Z

Release: datasette-graphql 1.4

...CSS assets for GraphiQL, instead of loading them from a CDN. #73 Pin to graphene dependency < 3.0. #72

Released 2021-02-18T23:37:44Z

Blog: Weeknotes: datasette-export-notebook, PyInstaller packaged Datasette, CBSAs

...css-properties I wrote this up in detail a couple of days ago: datasette-css-properties is an amusingly weird output plugin that turns the results of a SQL query into CSS custom property definitions which can then be used to style or insert content into the current page. sqlite-utils 3.2 The big new feature in this release is cached table counts using triggers, which I described last week. Full re...

Published 2021-01-10T00:26:13+00:00

Blog: Datasette 0.14: customization edition

...CSS styling hooks, and the metadata format has been expanded to allow per-database and per-table source/license/description information. You can also now define named canned queries which will be packaged up with your data.

Published 2017-12-10T01:55:26+00:00

Docs: 0.48 (2020-08-16)

...The extra_template_vars , extra_css_urls , extra_js_urls and extra_body_script plugin hooks now all accept the same arguments. See extra_template_vars(template, database, table, columns, view_name, request, datasette) for details. ( #939 ) Those hooks now accept a new columns argument detailing the table columns that will be rendered on that page. ( #938 ) Fixed bug where...

Docs: JavaScript modules

...The extra_js_urls option described in Custom CSS and JavaScript can now be used with modules, and module support is also available for the extra_body_script() plugin hook. ( #1186 , #1187 ) datasette-leaflet-freedraw is the first example of a Datasette plugin that takes advantage of the new support for JavaScript modules. See Drawing shapes on a map to...

Docs: 0.40 (2020-04-21)

...are now shown in the ?_context=1 debugging mode (see template_debug ). ( #693 ) Fixed a bug where the "templates considered" HTML comment was no longer being displayed. ( #689 ) Fixed a datasette publish bug where --plugin-secret would over-ride plugin configuration in the provided metadata.json file. ( #724 ) Added a new CSS class for customizing the canned query page. ( #727 )

Docs: datasette.urls

...datasette.urls.static_plugins("datasette_cluster_map", "datasette-cluster-map.js") would return "/-/static-plugins/datasette_cluster_map/datasette-cluster-map.js" datasette.urls.static(path) Returns the URL of one of Datasette's default static assets, for example "/-/static/app.css" datasette.urls.database(database_name, format=None) Returns the URL to a database page, for example "/fixtures" datasette...

Release: datasette 0.48

...css_urls, extra_js_urls and extra_body_script plugin hooks now all accept the same arguments. See extra_template_vars(template, database, table, columns, view_name, request, datasette) for details. (#939) Those hooks now accept a new columns argument detailing the table columns that will be rendered on that page. (#938) Fixed bug where plugins calling db.execute_write_fn() could hang Datasette if ...

Released 2020-08-16T18:58:34Z

Release: datasette 0.40

...CSS class for customizing the canned query page. (#727)

Released 2020-04-22T04:06:51Z

Docs: Plugin hooks

...return "*" * int(value) List of plugin hooks prepare_connection(conn, database, datasette) prepare_jinja2_environment(env) extra_template_vars(template, database, table, columns, view_name, request, datasette) extra_css_urls(template, database, table, columns, view_name, request, datasette) extra_js_urls(template, database, table, columns, view_name, request, datasette) extra_body_script(template, database, table, columns, view_name, request, datasette...

Docs: Smaller changes

...Fixed broken CSS on nested 404 pages. ( #777 ) New request.url_vars property. ( #822 ) Fixed a bug with the python tests/fixtures.py command for outputting Datasette's testing fixtures database and plugins. ( #804 ) datasette publish heroku now deploys using Python 3.8.3. Added a warning that the register_facet_classes() hook is unstable and may change in the...

Blog: Building a sitemap.xml with a one-off Datasette plugin

...css:static/ \ -m metadata.json This serves the two SQLite database files, loads custom templatse from the templates/ directory, sets up www.niche-museums.com/css/museums.css to serve data from the static/ directory and loads metadata settings from metadata.json. All of these files are on GitHub. It also tells Datasette to look for any Python files in the plugins/ directory and load those up ...

Published 2020-01-06T23:02:48+00:00

Docs: 0.25 (2018-09-19)

...extra_css_urls and extra_js_urls hooks now take additional optional parameters, allowing them to be more selective about which pages they apply to. Documentation . You can now use the sortable_columns metadata setting to explicitly enable sort-by-column in the interface for database views, as well as for specific tables. The new fts_table and fts_pk...

Blog: datasette-ripgrep: deploy a regular expression search engine for your source code

...CSS :target selector instead, which is indeed MUCH simpler - I deleted the above JavaScript and replaced it with this CSS: :target { background-color: #FFFF99; } Next steps for this project I'm pleased to have got datasette-ripgrep to a workable state, and I'm looking forward to using it to answer questions about the growing Datasette ecosystem. I don't know how much more time I'll invest in t...

Published 2020-11-28T06:51:06+00:00

Docs: 0.21 (2018-05-05)

...True option for table metadata, closes #239 Hide idx_* tables if spatialite detected, closes #228 Added class=rows-and-columns to custom query results table Added CSS class rows-and-columns to main table label_column option in metadata.json - closes #234

Release: datasette 0.21

...CSS class rows-and-columns to main table label_column option in metadata.json - closes #234

Released 2018-05-05T23:21:33Z

Release: datasette 0.54

...CSS and JavaScript can now be used with modules, and module support is also available for the extra_body_script() plugin hook. (#1186, #1187) datasette-leaflet-freedraw is the first example of a Datasette plugin that takes advantage of the new support for JavaScript modules. See Drawing shapes on a map to query a SpatiaLite database for more on this plugin. Code formatting with Black and Prettier ...

Released 2021-01-25T17:36:30Z

Docs: Contents

...hash_urls template_debug base_url Configuring the secret Using secrets with datasette publish Introspection /-/metadata /-/versions /-/plugins /-/settings /-/databases /-/threads /-/actor /-/messages Custom pages and templates Custom CSS and JavaScript CSS classes on the Serving static files Publishing static assets Custom templates Custom pages Path parameters for pages Custom headers and status codes Returning 404s Custom redirects Custom...

Docs: Setting up a development environment

...Any changes you make in the datasette/templates or datasette/static folder will be picked up immediately (though you may need to do a force-refresh in your browser to see changes to CSS or JavaScript). If you want to change Datasette's Python code you can use the --reload option to cause Datasette to automatically reload any time the...

Docs: Custom templates

...mydatabase-mytable.html _table.html If a table name has spaces or other unexpected characters in it, the template filename will follow the same rules as our custom CSS classes - for example, a table called "Food Trucks" will attempt to load the following templates: table-mydatabase-Food-Trucks-399138.html table.html You can find out which templates were...

Blog: Weeknotes: Still pretty distracted

...CSS and JavaScript and extra_js_urls() in the documentation for details. Short version: add this to metadata.json: { "extra_js_urls": [ { "url": "https://example.datasette.io/module.js", "module": true } ] } To add the following line to every page of your Datasette instance: <script type="module" src="https://example.datasette.io/module.js"><...

Published 2021-01-17T05:00:26+00:00

Blog: Open source projects should run office hours

...CSS Wizardry's Harry Roberts both let you book paid sessions with them directly. I really like this as an opportunity for earning money against an open source project, and I think it could complement office hours nicely: 25 minutes on a Friday free on a first-come, first-served basis could then up-sell to a 1.5 hours paid consulting session, which could then lead to larger consulting contracts. Tr...

Published 2021-02-19T21:54:22+00:00

Blog: Datasette 0.54, the annotated release notes

...CSS and JavaScript can now be used with modules, and module support is also available for the extra_body_script() plugin hook. (#1186, #1187) This feature was inspired by discussion on this issue about a JavaScript plugin system for Datasette. I've been getting excited about JavaScript modules recently, partly thanks to Snowpack and Skypack. I enjoyed maintainer Fred K. Schott's GitHub OCTO speak...

Published 2021-01-25T17:31:04+00:00

Plugin: datasette-cluster-map

...CSS selector indicating an element that the map should be appended to instead. Custom tile layers You can customize the tile layer used by the maps using the tile_layer and tile_layer_options configuration settings. For example, to use the Stamen Watercolor tiles you can use these settings: { "plugins": { "datasette-cluster-map": { "tile_layer": "https://stamen-tiles-{s}.a...

Created 2018-04-19T15:31:55Z

Blog: Weeknotes: datasette-leaflet, datasette-plugin cookiecutter upgrades

...CSS in the plugin to be distributed via PyPI. I know this is hard because I frequently mess up the package_data= section of setup.py and have to ship another release to fix my mistake! I've upgraded the datasette-plugin cookiecutter template to help with this. The template now asks you if you want to create static/ or template/ directories as part of the interactive configuration - if you say yes ...

Published 2021-01-31T07:39:10+00:00

Blog: Datasette plugins, and building a clustered map visualization

...CSS and templates. The hooks are described in some detail in the Datasette Plugins documentation. datasette-cluster-map I also released my first plugin: datasette-cluster-map. Once installed, it looks out for database tables that have a latitude and longitude column. When it finds them, it draws all of the points on an interactive map using Leaflet and Leaflet.markercluster. Let’s try it out on so...

Published 2018-04-20T15:41:11+00:00

Plugin: datasette-auth-existing-cookies

...css"> .hd .logout { float: right; text-align: right; padding-left: 1em; } </style> {% endblock %} {% block nav %} {{ super() }} {% if auth and auth.username %} <p class="logout"> <strong>{{ auth.username }}</strong> &middot; <a href="https://www.example.com/logout">Log out</a> </p> {% endif %} {% ...

Created 2020-01-25T01:20:31Z

Blog: Weeknotes: Hacking on 23 different projects

...CSS customization hook for the canned query page.I built a HEIC to JPEG converting proxy as part of my ongoing mission to eventually liberate my photos from Apple Photos and make them available to Dogsheep. In doing so I contributed usage documentation to the pyheif Python library.

Published 2020-04-16T05:03:11+00:00

Blog: Video introduction to Datasette and sqlite-utils

...CSS. If you'd like to have a one-on-one conversation with me about Datasette you can sign up for Datasette office hours. I love talking to people about these projects!

Published 2021-02-07T21:00:46+00:00

Blog: Weeknotes: Datasette 0.41, photos breakthroughs

...CSS pattern portfolio! I've been meaning to ship one of these for over two years now - you can see it at latest.datasette.io/-/patterns - #151Various minor fixes and documentation improvementsPRAGMA function support - #761 A late addition to the release - thought of and implemented just this morning, as the result of this TIL, is the ability to use various SQLite PRAGMA functions. Datasette bloc...

Published 2020-05-07T05:02:51+00:00

Blog: sqlite-utils 2.0: real upserts

...CSS columns. This means I can add more than one photo to a museum! I've done this to a few now, including going back to the listing for the Ilfracombe Museum to add a whole bunch of extra photos. I added photos and press links to the Atom feed for the site. Since the Atom feed is defined using a custom SQL query and datasette-atom, achieving this involved building a truly diabolical SQL query (m...

Published 2019-12-30T06:48:40+00:00

Blog: Weeknotes: Dogsheep

...CSS served up by the plugin! To fix this, I shipped a new release of datasette-auth-github with a cacheable_prefixes setting, which defaults to /-/static/ and /-/static-plugins/ when run as a Datasette plugin. See issue 47 for details. Areas of research Connection pooling My most significant ongoing project for Datasette right now concerns database connection pooling. For Datasette Library I ...

Published 2019-10-07T19:33:14+00:00

Blog: Weeknotes: California Protected Areas in Datasette

...CSS shapefile-to-sqlite can now create spatial indexes and has a new -c option (inspired by csvs-to-sqlite) for extracting specified columns into separate lookup tables datasette-graphql 1.0 I'm trying to get better at releasing 1.0 versions of my software. For me, the most significant thing about a 1.0 is that it represents a promise to avoid making backwards incompatible releases until a 2....

Published 2020-08-28T02:00:02+00:00

Blog: Weeknotes: github-to-sqlite workflows, datasette-ripgrep enhancements, Datasette 0.52

...CSS fix to the cog menus contributed by Abdussamet Koçak. 0.52.3 fixed a fun bug with Datasette installed on Amazon Linux running on ARM where static assets would 404. I eventually tracked that down to an unexpected symlink in the site-packages directory. 0.52.4 now writes errors logged by Datasette to stderr, not stdout. It also fixes a startup error on Windows, another contribution from Abduss...

Published 2020-12-06T05:46:11+00:00

Blog: Weeknotes: Rocky Beaches, Datasette 0.48, a commit history of my database

...css_urls, extra_js_urls and extra_body_script plugin hooks now all accept the same arguments. See extra_template_vars(template, database, table, columns, view_name, request, datasette) for details. (#939) Those hooks now accept a new columns argument detailing the table columns that will be rendered on that page. (#938) I released a new version of datasette-cluster-map that takes advantage of the...

Published 2020-08-21T00:52:16+00:00

Blog: Datasette: instantly create and publish an API for your SQLite databases

I just shipped the first public version of datasette, a new tool for creating and publishing JSON APIs for SQLite databases. You can try out out right now at fivethirtyeight.datasettes.com, where you can explore SQLite databases I built from Creative Commons licensed CSV files published by FiveThirtyEight. Or you can check out parlgov.datasettes.com, derived from the parlgov.org database of world ...

Published 2017-11-13T23:49:28+00:00

Blog: Goodbye Zeit Now v1, hello datasette-publish-now - and talking to myself in GitHub issues

...CSS and plugins. Here's the tracking issue for porting it to Cloud Run. I ran into a few hurdles with DNS and TLS certificates, and I had to do some additional work to ensure niche-museums.com redirects to www.niche-musums.com, but it's now fully migrated. Hello, Zeit Now v2 In complaining about the lack of that essential sqlite3 module I figured it would be responsible to double-check and make...

Published 2020-04-08T03:32:24+00:00

Blog: Building a location to time zone API with SpatiaLite, OpenStreetMap and Datasette

...css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> <s...

Published 2017-12-12T15:52:20+00:00