TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-24 19:33:02 +03:00
Code Issues Projects Releases Wiki Activity

Added testable production build for signup-form

Browse Source 
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.
This commit is contained in:
Simon Backx 2023-05-24 11:40:22 +02:00
parent 92e7c069f3
commit 8fd2468995
5 changed files with 92 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ghost/signup-form/README.md
View File

@ -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 (`<script type="module" src="...">`), you don't have access to `document.currentScript` inside the script, which is required to determine the location to inject the iframe. In development mode we use a workaround for this to make the ESM HMR work. But this workaroudn is not suitable for production.
To test the real production behaviour without this hack, you can use http://localhost:6173/preview.html. This HTML page will use `http://localhost:6174/signup-form.min.js` directly.
## Develop

7
ghost/signup-form/index.html
View File

@ -8,10 +8,13 @@
</head>
<body>
<div id="demo-container">
<nav class="mode">
<a href="/" class="selected">Development build</a>
<a href="/preview.html">Production build</a>
</nav>
<h1>Full signup form</h1>
<p>
This is a live preview of the embeddable signup form<br>
It is currently connected to Ghost running at <code>%VITE_SITE_URL%</code>. Please duplicate <code>.env.development</code> as <code>.env.development.local</code> and modify it to change the site url locally (when you get an error when submitting the forms).
Currently connected to Ghost running at <code>%VITE_SITE_URL%</code>. Please duplicate <code>.env.development</code> as <code>.env.development.local</code> and modify it to change the site url locally (when you get an error when submitting the forms).
</p>
<!-- Because we need to use ESM modules during develoment, the src should be different to force reexecution of each script -->

3
ghost/signup-form/package.json
View File

@ -17,8 +17,7 @@
"registry": "https://registry.npmjs.org/"
},
"scripts": {
"dev": "vite",
"dev:preview": "concurrently \"vite preview\" \"vite build --watch\"",
"dev": "concurrently \"vite --port 6173\" \"vite preview -l silent\" \"vite build --watch\"",
"build": "tsc && vite build",
"lint": "yarn run lint:js",
"lint:js": "eslint --ext .js,.ts,.cjs,.tsx --cache src test",

63
ghost/signup-form/preview.html Normal file
View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Signup Form</title>
<link rel="stylesheet" href="/src/styles/demo.css" />
</head>
<body>
<div id="demo-container">
<nav class="mode">
<a href="/">Development build</a>
<a href="/preview.html" class="selected">Production build</a>
</nav>
<h1>Full signup form</h1>
<p>
Currently connected to Ghost running at <code>%VITE_SITE_URL%</code>. Please duplicate <code>.env.development</code> as <code>.env.development.local</code> and modify it to change the site url locally (when you get an error when submitting the forms).
</p>
<!-- Because we need to use ESM modules during develoment, the src should be different to force reexecution of each script -->
<script
src="http://localhost:6174/signup-form.min.js"
data-title="My site name"
data-description="An independent publication about embeddable signup forms."
data-logo="https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png"
data-color="#4664dd"
data-site="%VITE_SITE_URL%"
data-labels="signup-form,with-logo"
></script>
<hr>
<h1>Without logo</h1>
<script
src="http://localhost:6174/signup-form.min.js"
data-title="Site without logo"
data-description="An independent publication about embeddable signup forms."
data-color="#4664dd"
data-site="%VITE_SITE_URL%"
data-labels="signup-form,without-logo"
></script>
<hr>
<h1>Minimal</h1>
<script
src="http://localhost:6174/signup-form.min.js"
data-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-labels="signup-form,minimal"
></script>
<hr>
<h1>With invalid configuration</h1>
<p>When you submit this one, it will throw an error.</p>
<script
src="http://localhost:6174/signup-form.min.js"
data-color="#ff0095"
data-site="https://invalid/"
></script>
</div>
</body>
</html>

14
ghost/signup-form/src/styles/demo.css
View File

@ -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;
}