diff --git a/docs/changelog.rst b/docs/changelog.rst
index af3d2a0b..04ce9583 100644
--- a/docs/changelog.rst
+++ b/docs/changelog.rst
@@ -610,7 +610,7 @@ JavaScript modules
To use modules, JavaScript needs to be included in ``
+
+You can also specify a SRI (subresource integrity hash) for these assets:
+
+.. [[[cog
+ config_example(cog, """
+ extra_css_urls:
+ - url: https://simonwillison.net/static/css/all.bf8cd891642c.css
+ sri: sha384-9qIZekWUyjCyDIf2YK1FRoKiPJq4PHt6tp/ulnuuyRBvazd0hG7pWbE99zvwSznI
+ extra_js_urls:
+ - url: https://code.jquery.com/jquery-3.2.1.slim.min.js
+ sri: sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=
+ """)
+.. ]]]
+
+.. tab:: datasette.yaml
+
+ .. code-block:: yaml
+
+
+ extra_css_urls:
+ - url: https://simonwillison.net/static/css/all.bf8cd891642c.css
+ sri: sha384-9qIZekWUyjCyDIf2YK1FRoKiPJq4PHt6tp/ulnuuyRBvazd0hG7pWbE99zvwSznI
+ extra_js_urls:
+ - url: https://code.jquery.com/jquery-3.2.1.slim.min.js
+ sri: sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=
+
+
+.. tab:: datasette.json
+
+ .. code-block:: json
+
+ {
+ "extra_css_urls": [
+ {
+ "url": "https://simonwillison.net/static/css/all.bf8cd891642c.css",
+ "sri": "sha384-9qIZekWUyjCyDIf2YK1FRoKiPJq4PHt6tp/ulnuuyRBvazd0hG7pWbE99zvwSznI"
+ }
+ ],
+ "extra_js_urls": [
+ {
+ "url": "https://code.jquery.com/jquery-3.2.1.slim.min.js",
+ "sri": "sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
+ }
+ ]
+ }
+.. [[[end]]]
+
+This will produce:
+
+.. code-block:: html
+
+
+
+
+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 `_
+
+Items in ``"extra_js_urls"`` can specify ``"module": true`` if they reference JavaScript that uses `JavaScript modules `__. This configuration:
+
+.. [[[cog
+ config_example(cog, """
+ extra_js_urls:
+ - url: https://example.datasette.io/module.js
+ module: true
+ """)
+.. ]]]
+
+.. tab:: datasette.yaml
+
+ .. code-block:: yaml
+
+
+ extra_js_urls:
+ - url: https://example.datasette.io/module.js
+ module: true
+
+
+.. tab:: datasette.json
+
+ .. code-block:: json
+
+ {
+ "extra_js_urls": [
+ {
+ "url": "https://example.datasette.io/module.js",
+ "module": true
+ }
+ ]
+ }
+.. [[[end]]]
+
+Will produce this HTML:
+
+.. code-block:: html
+
+
+
+
+
diff --git a/docs/custom_templates.rst b/docs/custom_templates.rst
index d8e4ac96..534d8b33 100644
--- a/docs/custom_templates.rst
+++ b/docs/custom_templates.rst
@@ -5,159 +5,6 @@ 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
--------------------------
-
-When you launch Datasette, you can specify a custom configuration file like this::
-
- datasette mydb.db --config datasette.yaml
-
-Your ``datasette.yaml`` file can include links that look like this:
-
-.. [[[cog
- from metadata_doc import config_example
- config_example(cog, """
- 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
- """)
-.. ]]]
-
-.. tab:: datasette.yaml
-
- .. code-block:: yaml
-
-
- 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
-
-
-.. tab:: datasette.json
-
- .. code-block:: json
-
- {
- "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"
- ]
- }
-.. [[[end]]]
-
-The extra CSS and JavaScript files will be linked in the ```` of every page:
-
-.. code-block:: html
-
-
-
-
-You can also specify a SRI (subresource integrity hash) for these assets:
-
-.. [[[cog
- config_example(cog, """
- extra_css_urls:
- - url: https://simonwillison.net/static/css/all.bf8cd891642c.css
- sri: sha384-9qIZekWUyjCyDIf2YK1FRoKiPJq4PHt6tp/ulnuuyRBvazd0hG7pWbE99zvwSznI
- extra_js_urls:
- - url: https://code.jquery.com/jquery-3.2.1.slim.min.js
- sri: sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=
- """)
-.. ]]]
-
-.. tab:: datasette.yaml
-
- .. code-block:: yaml
-
-
- extra_css_urls:
- - url: https://simonwillison.net/static/css/all.bf8cd891642c.css
- sri: sha384-9qIZekWUyjCyDIf2YK1FRoKiPJq4PHt6tp/ulnuuyRBvazd0hG7pWbE99zvwSznI
- extra_js_urls:
- - url: https://code.jquery.com/jquery-3.2.1.slim.min.js
- sri: sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=
-
-
-.. tab:: datasette.json
-
- .. code-block:: json
-
- {
- "extra_css_urls": [
- {
- "url": "https://simonwillison.net/static/css/all.bf8cd891642c.css",
- "sri": "sha384-9qIZekWUyjCyDIf2YK1FRoKiPJq4PHt6tp/ulnuuyRBvazd0hG7pWbE99zvwSznI"
- }
- ],
- "extra_js_urls": [
- {
- "url": "https://code.jquery.com/jquery-3.2.1.slim.min.js",
- "sri": "sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
- }
- ]
- }
-.. [[[end]]]
-
-This will produce:
-
-.. code-block:: html
-
-
-
-
-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 `_
-
-Items in ``"extra_js_urls"`` can specify ``"module": true`` if they reference JavaScript that uses `JavaScript modules `__. This configuration:
-
-.. [[[cog
- config_example(cog, """
- extra_js_urls:
- - url: https://example.datasette.io/module.js
- module: true
- """)
-.. ]]]
-
-.. tab:: datasette.yaml
-
- .. code-block:: yaml
-
-
- extra_js_urls:
- - url: https://example.datasette.io/module.js
- module: true
-
-
-.. tab:: datasette.json
-
- .. code-block:: json
-
- {
- "extra_js_urls": [
- {
- "url": "https://example.datasette.io/module.js",
- "module": true
- }
- ]
- }
-.. [[[end]]]
-
-Will produce this HTML:
-
-.. code-block:: html
-
-
-
CSS classes on the
~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -258,9 +105,10 @@ The following URLs will now serve the content from those CSS and JS files::
http://localhost:8001/assets/styles.css
http://localhost:8001/assets/app.js
-You can reference those files from ``datasette.yaml`` like so:
+You can reference those files from ``datasette.yaml`` like this, see :ref:`custom CSS and JavaScript ` for more details:
.. [[[cog
+ from metadata_doc import config_example
config_example(cog, """
extra_css_urls:
- /assets/styles.css
diff --git a/docs/metadata_doc.py b/docs/metadata_doc.py
index a8f13414..ad85bf52 100644
--- a/docs/metadata_doc.py
+++ b/docs/metadata_doc.py
@@ -24,17 +24,19 @@ def metadata_example(cog, data=None, yaml=None):
cog.out("\n")
-def config_example(cog, input):
+def config_example(
+ cog, input, yaml_title="datasette.yaml", json_title="datasette.json"
+):
if type(input) is str:
data = YAML().load(input)
output_yaml = input
else:
data = input
output_yaml = safe_dump(input, sort_keys=False)
- cog.out("\n.. tab:: datasette.yaml\n\n")
+ cog.out("\n.. tab:: {}\n\n".format(yaml_title))
cog.out(" .. code-block:: yaml\n\n")
cog.out(textwrap.indent(output_yaml, " "))
- cog.out("\n\n.. tab:: datasette.json\n\n")
+ cog.out("\n\n.. tab:: {}\n\n".format(json_title))
cog.out(" .. code-block:: json\n\n")
cog.out(textwrap.indent(json.dumps(data, indent=2), " "))
cog.out("\n")
diff --git a/docs/plugin_hooks.rst b/docs/plugin_hooks.rst
index 1a88cd31..d9d135e5 100644
--- a/docs/plugin_hooks.rst
+++ b/docs/plugin_hooks.rst
@@ -270,7 +270,7 @@ you have one:
Note that ``your-plugin`` here should be the hyphenated plugin name - the name that is displayed in the list on the ``/-/plugins`` debug page.
-If your code uses `JavaScript modules `__ you should include the ``"module": True`` key. See :ref:`customization_css_and_javascript` for more details.
+If your code uses `JavaScript modules `__ you should include the ``"module": True`` key. See :ref:`configuration_reference_css_js` for more details.
.. code-block:: python
diff --git a/docs/plugins.rst b/docs/plugins.rst
index 1a72af95..03ddf8f0 100644
--- a/docs/plugins.rst
+++ b/docs/plugins.rst
@@ -328,7 +328,7 @@ To write that to a ``requirements.txt`` file, run this::
Plugin configuration
--------------------
-Plugins can have their own configuration, embedded in a :ref:`configuration` file. Configuration options for plugins live within a ``"plugins"`` key in that file, which can be included at the root, database or table level.
+Plugins can have their own configuration, embedded in a :ref:`configuration file `. Configuration options for plugins live within a ``"plugins"`` key in that file, which can be included at the root, database or table level.
Here is an example of some plugin configuration for a specific table: