Better documentation for --static, closes #641

https://datasette.readthedocs.io/en/stable/custom_templates.html#serving-static-files
This commit is contained in:
Simon Willison 2019-11-25 18:31:42 -08:00
commit df2879ee2a
9 changed files with 54 additions and 9 deletions

View file

@ -159,7 +159,7 @@ def plugins(all, plugins_dir):
@click.option( @click.option(
"--static", "--static",
type=StaticMount(), type=StaticMount(),
help="mountpoint:path-to-directory for serving static files", help="Serve static files from this directory at /MOUNT/...",
multiple=True, multiple=True,
) )
@click.option( @click.option(
@ -281,7 +281,7 @@ def package(
@click.option( @click.option(
"--static", "--static",
type=StaticMount(), type=StaticMount(),
help="mountpoint:path-to-directory for serving static files", help="Serve static files from this directory at /MOUNT/...",
multiple=True, multiple=True,
) )
@click.option("--memory", is_flag=True, help="Make :memory: database available") @click.option("--memory", is_flag=True, help="Make :memory: database available")

View file

@ -33,7 +33,7 @@ def add_common_publish_arguments_and_options(subcommand):
click.option( click.option(
"--static", "--static",
type=StaticMount(), type=StaticMount(),
help="mountpoint:path-to-directory for serving static files", help="Serve static files from this directory at /MOUNT/...",
multiple=True, multiple=True,
), ),
click.option( click.option(

View file

@ -730,7 +730,7 @@ def remove_infinites(row):
class StaticMount(click.ParamType): class StaticMount(click.ParamType):
name = "static mount" name = "mount:directory"
def convert(self, value, param, ctx): def convert(self, value, param, ctx):
if ":" not in value: if ":" not in value:

View file

@ -45,6 +45,9 @@ You can also specify a SRI (subresource integrity hash) for these assets::
Modern browsers will only execute the stylesheet or JavaScript if the SRI hash Modern browsers will only execute the stylesheet or JavaScript if the SRI hash
matches the content served. You can generate hashes using `www.srihash.org <https://www.srihash.org/>`_ matches the content served. You can generate hashes using `www.srihash.org <https://www.srihash.org/>`_
CSS classes on the <body>
~~~~~~~~~~~~~~~~~~~~~~~~~
Every default template includes CSS classes in the body designed to support Every default template includes CSS classes in the body designed to support
custom styling. custom styling.
@ -102,6 +105,48 @@ database column they are representing, for example::
</tbody> </tbody>
</table> </table>
Serving static files
~~~~~~~~~~~~~~~~~~~~
Datasette can serve static files for you, using the ``--static`` option.
Consider the following directory structure::
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 can reference those files from ``metadata.json`` like so::
{
"extra_css_urls": [
"/static/styles.css"
],
"extra_js_urls": [
"/static/app.js"
]
}
Publishing static assets
~~~~~~~~~~~~~~~~~~~~~~~~
The :ref:`cli_publish` command can be used to publish your static assets,
using the same syntax as above::
$ datasette publish cloudrun mydb.db --static static:static/
This will upload the contents of the ``static/`` directory as part of the
deployment, and configure Datasette to correctly serve the assets.
.. _customization_custom_templates: .. _customization_custom_templates:
Custom templates Custom templates

View file

@ -12,7 +12,7 @@ Options:
--branch TEXT Install datasette from a GitHub branch e.g. master --branch TEXT Install datasette from a GitHub branch e.g. master
--template-dir DIRECTORY Path to directory containing custom templates --template-dir DIRECTORY Path to directory containing custom templates
--plugins-dir DIRECTORY Path to directory containing custom plugins --plugins-dir DIRECTORY Path to directory containing custom plugins
--static STATIC MOUNT mountpoint:path-to-directory for serving static files --static MOUNT:DIRECTORY Serve static files from this directory at /MOUNT/...
--install TEXT Additional packages (e.g. plugins) to install --install TEXT Additional packages (e.g. plugins) to install
--spatialite Enable SpatialLite extension --spatialite Enable SpatialLite extension
--version-note TEXT Additional note to show on /-/versions --version-note TEXT Additional note to show on /-/versions

View file

@ -8,7 +8,7 @@ Options:
--branch TEXT Install datasette from a GitHub branch e.g. master --branch TEXT Install datasette from a GitHub branch e.g. master
--template-dir DIRECTORY Path to directory containing custom templates --template-dir DIRECTORY Path to directory containing custom templates
--plugins-dir DIRECTORY Path to directory containing custom plugins --plugins-dir DIRECTORY Path to directory containing custom plugins
--static STATIC MOUNT mountpoint:path-to-directory for serving static files --static MOUNT:DIRECTORY Serve static files from this directory at /MOUNT/...
--install TEXT Additional packages (e.g. plugins) to install --install TEXT Additional packages (e.g. plugins) to install
--plugin-secret <TEXT TEXT TEXT>... --plugin-secret <TEXT TEXT TEXT>...
Secrets to pass to plugins, e.g. --plugin-secret Secrets to pass to plugins, e.g. --plugin-secret

View file

@ -8,7 +8,7 @@ Options:
--branch TEXT Install datasette from a GitHub branch e.g. master --branch TEXT Install datasette from a GitHub branch e.g. master
--template-dir DIRECTORY Path to directory containing custom templates --template-dir DIRECTORY Path to directory containing custom templates
--plugins-dir DIRECTORY Path to directory containing custom plugins --plugins-dir DIRECTORY Path to directory containing custom plugins
--static STATIC MOUNT mountpoint:path-to-directory for serving static files --static MOUNT:DIRECTORY Serve static files from this directory at /MOUNT/...
--install TEXT Additional packages (e.g. plugins) to install --install TEXT Additional packages (e.g. plugins) to install
--plugin-secret <TEXT TEXT TEXT>... --plugin-secret <TEXT TEXT TEXT>...
Secrets to pass to plugins, e.g. --plugin-secret Secrets to pass to plugins, e.g. --plugin-secret

View file

@ -8,7 +8,7 @@ Options:
--branch TEXT Install datasette from a GitHub branch e.g. master --branch TEXT Install datasette from a GitHub branch e.g. master
--template-dir DIRECTORY Path to directory containing custom templates --template-dir DIRECTORY Path to directory containing custom templates
--plugins-dir DIRECTORY Path to directory containing custom plugins --plugins-dir DIRECTORY Path to directory containing custom plugins
--static STATIC MOUNT mountpoint:path-to-directory for serving static files --static MOUNT:DIRECTORY Serve static files from this directory at /MOUNT/...
--install TEXT Additional packages (e.g. plugins) to install --install TEXT Additional packages (e.g. plugins) to install
--plugin-secret <TEXT TEXT TEXT>... --plugin-secret <TEXT TEXT TEXT>...
Secrets to pass to plugins, e.g. --plugin-secret Secrets to pass to plugins, e.g. --plugin-secret

View file

@ -20,7 +20,7 @@ Options:
-m, --metadata FILENAME Path to JSON file containing license/source metadata -m, --metadata FILENAME Path to JSON file containing license/source metadata
--template-dir DIRECTORY Path to directory containing custom templates --template-dir DIRECTORY Path to directory containing custom templates
--plugins-dir DIRECTORY Path to directory containing custom plugins --plugins-dir DIRECTORY Path to directory containing custom plugins
--static STATIC MOUNT mountpoint:path-to-directory for serving static files --static MOUNT:DIRECTORY Serve static files from this directory at /MOUNT/...
--memory Make :memory: database available --memory Make :memory: database available
--config CONFIG Set config option using configname:value --config CONFIG Set config option using configname:value
datasette.readthedocs.io/en/latest/config.html datasette.readthedocs.io/en/latest/config.html