Create a more visual home page for demo gallery (#374)

demo/BUILD

@@ -7,8 +7,15 @@ package(
 py_library(
     name = "demo",
     srcs = glob(["*.py"]),
+    data = [":screenshots"],
     deps = [
         "//mesop",
         "//mesop/labs",
     ],
 )
+
+# Make source files available for distribution via pkg_npm
+filegroup(
+    name = "screenshots",
+    srcs = glob(["screenshots/*"]),
+)

demo/README.md

@@ -29,3 +29,16 @@ $ gcloud run deploy mesop --source .
 ```
 
 See our Mesop deployment [docs](https://google.github.io/mesop/guides/deployment/#deploy-to-google-cloud-run) for more background.
+
+## Generate screenshots
+
+If you add more demos and want to re-generate screenshots, do the following steps:
+
+1. in `demo/screenshot.ts` change `test.skip` to `test`
+1. Run: `yarn playwright test demo/screenshot.ts`
+1. Install cwebp using `brew install webp` or download from [here](https://developers.google.com/speed/webp/docs/precompiled).
+1. From the workspace root, run:
+
+```sh
+`for file in demo/screenshots/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
+```