Merge pull request #14 from hydrosquall/cameron.yick/add-sponsor-logo…

…-to-footer

feat: add demo site landing page, with sponsor logo in footer

Makefile

@@ -1,20 +1,30 @@
 
 .PHONY: publish-vercel, install
 
-# None of this is needed since publish is happening
-# in the CI environment using the statics from PyPI, not from a local build
-# Need to re-evaluate how to use locally created plugins/statics for this in a future iteration. For now, just use published assets for simplicity.
+# Flags used during local dev and in the published demo.
+DATASETTE_DEMO_FLAGS := \
+    --plugins-dir=demo/demo-plugins \
+		--metadata=demo/demo-metadata.yml
+
+# We didn't need to install yarn, npm packages etc
+# in the CI environment using the statics from PyPI, not from contents of the local repo.
+# We need to re-evaluate how to use locally created plugins/statics for this someday. For now, just use published assets on PyPI for simplicity.
 
 install:
 	pip install -r demo/requirements.txt
-# 	# pip install -e .
 
 # https://github.com/simonw/datasette-publish-vercel#other-options
 publish-vercel: install
-
 	 datasette publish vercel demo/happy_planet_index.db \
   			--project=datasette-nteract-data-explorer \
 				--scope=datasette-visualization-plugin-demos \
 				--token=${VERCEL_TOKEN} \
 				--install datasette-nteract-data-explorer \
-				--public
+				--public \
+				${DATASETTE_DEMO_FLAGS}
+
+
+run-demo:
+	datasette -i demo/happy_planet_index.db \
+		${DATASETTE_DEMO_FLAGS}
+# --template-dir=demo/demo-templates

README.md

@@ -31,12 +31,19 @@ datasette install datasette-nteract-data-explorer
 - Use "advanced settings" mode to override the inferred column types. For example, you may want to treat a number as a "string" to be able to use it as a category.
 - See a [live demo](https://data-explorer.nteract.io/) of the original Nteract data-explorer component used in isolation.
 
-You can run the demo locally:
+You can run a minimal demo after the installation step
 
 ```bash
 datasette -i demo/happy_planet_index.db
 ```
 
+If you're interested in improving the demo site, you can run a copy of the site the extra metadata/plugins used in the [published demo](https://datasette-nteract-data-explorer.vercel.app).
+
+```bash
+make run-demo
+```
+
+Thank you for reading this far! If you use the Data Explorer in your own site and would like others to find it, you can [mention it here](https://github.com/hydrosquall/datasette-nteract-data-explorer/discussions/10).
 
 ## Development
 
@@ -48,4 +55,6 @@ See [contributing docs](./docs/CONTRIBUTING.md).
 - The data model is based on the [Frictionless Data Spec](https://specs.frictionlessdata.io/).
 - This plugin was bootstrapped by Simon Willison's [Datasette plugin template](https://simonwillison.net/2020/Jun/20/cookiecutter-plugins/)
 - Demo dataset from the [Happy Planet Index](https://happyplanetindex.org/) was cleaned by Doris Lee. This dataset was chosen because of its global appeal, modest size, and variety in column datatypes (numbers, low cardinality and high cardinality strings, booleans).
-- Thank you for reading this far! If you use the Data Explorer in your own website and would like to share, you can [mention it here](https://github.com/hydrosquall/datasette-nteract-data-explorer/discussions/10).
+- Hosting for the demo site is provided by Vercel.
+
+[![site hosted by vercel](https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg)](https://vercel.com/?utm_source=datasette-visualization-plugin-demos&utm_campaign=oss)

demo/demo-metadata.yml

@@ -0,0 +1,15 @@
+title:
+  Datasette Nteract Data Explorer Demo
+
+description_html:
+  <iframe src="https://a.cl.ly/yAuK9LRE?embed=true" width="780" height="520" style="border:none" frameborder="0" allowtransparency="true" allowfullscreen="true"></iframe>
+
+
+  <p>This is a demo site for the <a href="https://github.com/hydrosquall/datasette-nteract-data-explorer"> Data Explorer</a> plugin for Datasette, a free tool for publishing and exploring open datasets. We are using the <a href="https://happyplanetindex.org/" target="_blank">Happy Planet Index</a> dataset to show how this tool can help you explore your data. </p>
+
+  <p> For more information, please refer to the project <a href="https://github.com/hydrosquall/datasette-nteract-data-explorer">documentation</a>. </p>
+
+license: "Apache License"
+license_url: "https://www.apache.org/licenses/LICENSE-2.0"
+source: Happy Planet Index
+source_url: "https://raw.githubusercontent.com/lux-org/lux-datasets/master/data/hpi_cleaned.csv"

demo/demo-plugins/footer.js

@@ -0,0 +1,28 @@
+//  Append footer with the Vercel logo to every page.
+// TODO: Check if there a way to server-side render this someday?
+
+// Link + picture
+const imageElement = document.createElement("img");
+imageElement.src =
+  "https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg";
+const linkElement = document.createElement('a');
+linkElement.href =
+  "https://vercel.com/?utm_source=datasette-visualization-plugin-demos&utm_campaign=oss";
+linkElement.target = "_blank";
+linkElement.rel = 'noopener noreferrer';
+linkElement.ariaLabel = 'Site hosted by Vercel';
+
+// A block element so we can limit the size of the logo
+const buttonElement = document.createElement('div');
+buttonElement.style = "width: 212px; padding-left: 1rem";
+linkElement.appendChild(imageElement);
+buttonElement.appendChild(linkElement);
+
+// Final insertion + add to page.
+// A wrapper element to hold everything and supply some background coloring
+const sponsorContainer = document.createElement('div');
+sponsorContainer.style = 'background-color: rgb(31,41,55); padding-top: 1rem; padding-bottom: 1rem;';
+sponsorContainer.appendChild(buttonElement);
+// Attach as sibling of the official footer
+const footerElement = document.querySelector('footer');
+footerElement.insertAdjacentHTML("afterend", sponsorContainer.outerHTML);

demo/demo-plugins/footer.py

@@ -0,0 +1,11 @@
+from datasette import hookimpl
+from os import path
+
+# Store JS in separate file to enable basic IDE hinting support
+script_name = path.join(path.dirname(__file__), "footer.js")
+SCRIPT = open(script_name).read()
+
+
+@hookimpl
+def extra_body_script():
+    return SCRIPT

demo/demo-templates/base.html

@@ -0,0 +1,9 @@
+{% extends "default:base.html" %}
+
+{% block content %}
+{{ super() }}
+<footer>
+  <h1>Unused: theoretically this could be a custom footer</h1>
+</footer>
+
+{% endblock %}

demo/demo-templates/index.html

@@ -0,0 +1 @@
+<h1>hello world - a custom template</h1>