github/datasette
1
0
Fork 0
mirror of https://github.com/simonw/datasette.git synced 2025-12-10 16:51:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

script type=module support, closes #1186

Browse source
This commit is contained in:
Simon Willison 2021-01-13 17:50:52 -08:00
commit fa0c3777b8
6 changed files with 74 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

39
docs/custom_templates.rst
View file

@ -5,6 +5,8 @@ Custom pages and templates
Datasette provides a number of ways of customizing the way data is displayed.
.. _customization_css_and_javascript:
Custom CSS and JavaScript
-------------------------
@ -25,7 +27,12 @@ Your ``metadata.json`` file can include links that look like this:
]
}
The extra CSS and JavaScript files will be linked in the ``<head>`` of every page.
The extra CSS and JavaScript files will be linked in the ``<head>`` of every page:
.. code-block:: html
<link rel="stylesheet" href="https://simonwillison.net/static/css/all.bf8cd891642c.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
You can also specify a SRI (subresource integrity hash) for these assets:
@ -46,9 +53,39 @@ You can also specify a SRI (subresource integrity hash) for these assets:
]
}
This will produce:
.. code-block:: html
<link rel="stylesheet" href="https://simonwillison.net/static/css/all.bf8cd891642c.css"
integrity="sha384-9qIZekWUyjCyDIf2YK1FRoKiPJq4PHt6tp/ulnuuyRBvazd0hG7pWbE99zvwSznI"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
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/>`_
Items in ``"extra_js_urls"`` can specify ``"module": true`` if they reference JavaScript that uses `JavaScript modules <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules>`__. This configuration:
.. code-block:: json
{
"extra_js_urls": [
{
"url": "https://example.datasette.io/module.js",
"module": true
}
]
}
Will produce this HTML:
.. code-block:: html
<script type="module" src="https://example.datasette.io/module.js"></script>
CSS classes on the <body>
~~~~~~~~~~~~~~~~~~~~~~~~~

29
docs/plugin_hooks.rst
View file

@ -182,7 +182,7 @@ This can be a list of URLs:
@hookimpl
def extra_css_urls():
return [
'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css'
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
]
Or a list of dictionaries defining both a URL and an
@ -190,21 +190,17 @@ Or a list of dictionaries defining both a URL and an
.. code-block:: python
from datasette import hookimpl
@hookimpl
def extra_css_urls():
return [{
'url': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css',
'sri': 'sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4',
"url": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css",
"sri": "sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4",
}]
This function can also return an awaitable function, useful if it needs to run any async code:
.. code-block:: python
from datasette import hookimpl
@hookimpl
def extra_css_urls(datasette):
async def inner():
@ -233,8 +229,8 @@ return a list of URLs, a list of dictionaries or an awaitable function that retu
@hookimpl
def extra_js_urls():
return [{
'url': 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
'sri': 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo',
"url": "https://code.jquery.com/jquery-3.3.1.slim.min.js",
"sri": "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo",
}]
You can also return URLs to files from your plugin's ``static/`` directory, if
@ -242,12 +238,21 @@ you have one:
.. code-block:: python
from datasette import hookimpl
@hookimpl
def extra_js_urls():
return [
'/-/static-plugins/your-plugin/app.js'
"/-/static-plugins/your-plugin/app.js"
]
If your code uses `JavaScript modules <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules>`__ you should include the ``"module": True`` key. See :ref:`customization_css_and_javascript` for more details.
.. code-block:: python
@hookimpl
def extra_js_urls():
return [{
"url": "/-/static-plugins/your-plugin/app.js",
"module": True
]
Examples: `datasette-cluster-map <https://github.com/simonw/datasette-cluster-map>`_, `datasette-vega <https://github.com/simonw/datasette-vega>`_