Screenshots for reusable modal dialogs docs, plus just shots (#2958)

docs/shots.yml defines documentation screenshots for shot-scraper

"Just shots" runs them.

docs/shots/modal-example.js

@@ -0,0 +1,38 @@
+document.addEventListener("datasette_init", () => {
+    const openButton = document.createElement("button");
+    openButton.type = "button";
+    openButton.textContent = "Open example dialog";
+    // Indicate that this button opens a dialog:
+    openButton.setAttribute("aria-haspopup", "dialog");
+    // Identify which dialog it controls:
+    openButton.setAttribute("aria-controls", "my-plugin-dialog");
+
+    const modal = DatasetteModal.create();
+    const dialog = modal.dialog;
+    dialog.id = "my-plugin-dialog";
+    // Tell screenreaders the dialog is labelled by #my-plugin-dialog-title
+    dialog.setAttribute("aria-labelledby", "my-plugin-dialog-title");
+    dialog.innerHTML = `
+      <div class="modal-header">
+        <h2 class="modal-title" id="my-plugin-dialog-title">
+          Example dialog
+        </h2>
+      </div>
+      <div class="modal-body">
+        This dialog uses Datasette's shared styles and keyboard behavior.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="modal-btn modal-btn-ghost">Close</button>
+      </div>`;
+
+    const closeButton = dialog.querySelector("button");
+    closeButton.addEventListener("click", () => {
+        modal.requestClose("cancel");
+    });
+    openButton.addEventListener("click", () => {
+        modal.show({ returnFocusTo: openButton, initialFocus: closeButton });
+    });
+
+    document.body.append(modal);
+    document.querySelector("section.content").append(openButton);
+});