From 8fd24689954881756eebbe7f8285a592bedc0c64 Mon Sep 17 00:00:00 2001 From: Simon Backx Date: Wed, 24 May 2023 11:40:22 +0200 Subject: [PATCH] Added testable production build for signup-form fixes https://github.com/TryGhost/Team/issues/3297 This adds a new preview page to test the signup-form script as a production build, instead of using ESM. --- ghost/signup-form/README.md | 10 ++++- ghost/signup-form/index.html | 7 ++- ghost/signup-form/package.json | 3 +- ghost/signup-form/preview.html | 63 +++++++++++++++++++++++++++ ghost/signup-form/src/styles/demo.css | 14 ++++++ 5 files changed, 92 insertions(+), 5 deletions(-) create mode 100644 ghost/signup-form/preview.html diff --git a/ghost/signup-form/README.md b/ghost/signup-form/README.md index 3accb04260..93a8c8a244 100644 --- a/ghost/signup-form/README.md +++ b/ghost/signup-form/README.md @@ -11,7 +11,15 @@ Embed a Ghost signup form on any site. ### Running the development version -Run `yarn dev` to start the development server to test/develop the form standalone. This will generate a demo site from the `index.html` file which renders the app and makes it available on http://localhost:5137 +Run `yarn dev` to start the development server to test/develop the form standalone. +- This will generate a demo site on http://localhost:6173 +- This will build and watch the production build and host it on http://localhost:6174/signup-form.min.js (different port!) + +### Using the UMD build during development + +Vite by default only supports HRM with an ESM output. But when loading a script on a site as a ESM module (` + +
+

Without logo

+ + +
+

Minimal

+ + + +
+

With invalid configuration

+

When you submit this one, it will throw an error.

+ + + + + diff --git a/ghost/signup-form/src/styles/demo.css b/ghost/signup-form/src/styles/demo.css index 8eb6c8a52f..ad6d69d8f5 100644 --- a/ghost/signup-form/src/styles/demo.css +++ b/ghost/signup-form/src/styles/demo.css @@ -30,3 +30,17 @@ code { background: #eee; padding: 2px 4px; } + +nav.mode > a { + text-decoration: none; + color: black; + background: #eee; + padding: 5px 12px; + display: inline-block; + border-radius: 3px; +} +nav.mode > a.selected { + background: #ff0095; + color: white; + font-weight: bold; +}