66 lines
1.5 KiB
Svelte
66 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
export let name: string;
|
|
export let email: string;
|
|
export let slug: string;
|
|
export let bio: string;
|
|
|
|
function generateAuthor(e) {
|
|
e.preventDefault()
|
|
alert(`Name: ${name} email, ${email} has slug ${slug} and bio ${bio}`)
|
|
}
|
|
</script>
|
|
|
|
<main>
|
|
<h1>Ghost User Maker</h1>
|
|
<p>Enter your new author details below. Once done, click on the "Generate" button to receive a special file that you can import to Ghost to add the author details to the "staff". This will let you select them as the author when publishing a post.</p>
|
|
|
|
<form>
|
|
<fieldset>
|
|
|
|
<legend>{name || 'Author'}</legend>
|
|
|
|
<div>
|
|
<label for="input-name">Name</label>
|
|
<input id="input-name" name="name" bind:value={name}/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="input-email">Email</label>
|
|
<input id="input-email" name="email" type="email" bind:value={email}/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="input-slug">Slug</label>
|
|
<input id="input-slug" name="slug" bind:value={slug}/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="input-bio">Bio</label>
|
|
<input id="input-bio" name="bio" bind:value={bio}/>
|
|
</div>
|
|
|
|
<button on:click={generateAuthor}>Generate</button>
|
|
|
|
</fieldset>
|
|
</form>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
text-align: center;
|
|
padding: 1em;
|
|
max-width: none;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
fieldset label {
|
|
display: inline-block;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
main {
|
|
max-width: 480px;
|
|
}
|
|
}
|
|
</style>
|