2023-05-23 15:58:33 +03:00
<!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" >
2023-05-24 12:40:22 +03:00
< nav class = "mode" >
< a href = "/" class = "selected" > Development build< / a >
< a href = "/preview.html" > Production build< / a >
< / nav >
2023-05-23 15:58:33 +03:00
< h1 > Full signup form< / h1 >
< p >
2023-05-24 12:40:22 +03:00
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).
2023-05-23 15:58:33 +03:00
< / p >
<!-- Because we need to use ESM modules during develoment, the src should be different to force reexecution of each script -->
2023-06-01 12:56:08 +03:00
< div style = "height: 60vh; min-height: 400px;" >
< script
type="module"
src="/src/index.tsx"
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-background-color="#eeeeee"
data-button-color="#4664dd"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="With logo"
>< / script >
< / div >
2023-05-23 15:58:33 +03:00
< hr >
< h1 > Without logo< / h1 >
2023-06-01 12:56:08 +03:00
< div style = "height: 60vh; min-height: 400px;" >
< script
type="module"
src="/src/index.tsx?withoutlogo"
data-title="Site without logo"
data-description="An independent publication about embeddable signup forms."
data-background-color="#eeeeee"
data-button-color="#4664dd"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Without logo"
>< / script >
< / div >
2023-05-23 15:58:33 +03:00
< hr >
< h1 > Minimal< / h1 >
2023-06-01 15:34:29 +03:00
< div style = "min-height: 58px" >
2023-06-01 12:56:08 +03:00
< script
type="module"
src="/src/index.tsx?other"
data-button-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Minimal"
>< / script >
< / div >
2023-05-23 15:58:33 +03:00
< hr >
< h1 > With invalid configuration< / h1 >
< p > When you submit this one, it will throw an error.< / p >
2023-06-01 15:34:29 +03:00
< div style = "min-height: 58px" >
2023-06-01 12:56:08 +03:00
< script
type="module"
src="/src/index.tsx?other2"
data-button-color="#ff0095"
data-site="https://invalid/"
>< / script >
< / div >
2023-05-23 15:58:33 +03:00
< / div >
< / body >
< / html >
