219 lines
5.1 KiB
Svelte
219 lines
5.1 KiB
Svelte
<script lang="ts">
|
|
import * as EmailValidator from 'email-validator'
|
|
import saveAs from 'file-saver'
|
|
import Slug from 'slug'
|
|
|
|
// Meta tags
|
|
import { MetaTags } from 'svelte-meta-tags'
|
|
|
|
// icons
|
|
import Icon from 'fa-svelte'
|
|
import { faCode } from '@fortawesome/free-solid-svg-icons/faCode'
|
|
import { faPaw } from '@fortawesome/free-solid-svg-icons/faPaw'
|
|
import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight'
|
|
|
|
export let name: string;
|
|
export let email: string;
|
|
export let slug: string;
|
|
export let bio: string;
|
|
|
|
let slugIsAuto = true;
|
|
let errors = [];
|
|
|
|
let file: file;
|
|
|
|
function generateAuthor() {
|
|
/*
|
|
Generates the author JSON. Note that this
|
|
function is very naïve and doesn't perform
|
|
any background checks! Please make sure
|
|
those have been performed already.
|
|
*/
|
|
|
|
let data = {
|
|
data: {
|
|
users: [
|
|
{
|
|
id: 1,
|
|
slug: slug,
|
|
bio: bio,
|
|
email: email,
|
|
name: name,
|
|
profile_image: ""
|
|
},
|
|
],
|
|
},
|
|
meta: {
|
|
exported_on: new Date(), // That's today!
|
|
version: '2.14.0',
|
|
}
|
|
}
|
|
|
|
return JSON.stringify(data)
|
|
}
|
|
|
|
function processForm(e) {
|
|
e.preventDefault()
|
|
|
|
// Check the formatting
|
|
errors = []
|
|
|
|
// First, make sure the required fields are filled
|
|
for (let [k,v] of [
|
|
['name', name],
|
|
['email', email],
|
|
['slug', slug]])
|
|
{
|
|
if (!v) {
|
|
errors.push(`${k} cannot be left blank`)
|
|
}
|
|
}
|
|
|
|
// Validate email formatting
|
|
if (email && !EmailValidator.validate(email)) {
|
|
errors.push(`"${email}" is not a valid email address`)
|
|
}
|
|
|
|
// Validate slug formatting
|
|
|
|
if (!errors.length) {
|
|
// Generate the file!
|
|
file = new File([
|
|
generateAuthor()
|
|
],
|
|
`user-${slug}.json`,
|
|
{
|
|
type: 'application/json',
|
|
})
|
|
|
|
// Use FileSaver.js magic to save it
|
|
saveAs(file, `user-${slug}.json`)
|
|
|
|
console.log(`Name: ${name} email, ${email} has slug ${slug} and bio ${bio}`)
|
|
}
|
|
}
|
|
|
|
function computeSlug() {
|
|
/*
|
|
Compute the slug from email or name, if it
|
|
isn't already computed.
|
|
*/
|
|
if (!slug || slugIsAuto) {
|
|
if (email) {
|
|
slug = Slug(email.split('@')[0])
|
|
} else if (name) {
|
|
slug = Slug(name)
|
|
}
|
|
}
|
|
|
|
/*
|
|
Of course, if neither email nor name is
|
|
set, then we can't do anything about it
|
|
*/
|
|
}
|
|
|
|
function updateSlug() {
|
|
/*
|
|
Marks the slug as manually set (which means
|
|
we should stop doing our automatic stuff)
|
|
*/
|
|
|
|
if (slug) {
|
|
slugIsAuto = false
|
|
|
|
// slugify it, just in case
|
|
slug = Slug(slug)
|
|
} else {
|
|
slugIsAuto = true
|
|
computeSlug()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Ghost User Maker</title>
|
|
<MetaTags title="Ghost User Maker" description="A simple tool to generate user JSON files that can be 'imported' to your Ghost website."/>
|
|
</svelte:head>
|
|
|
|
<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 your <a href="https://ghost.org" target="_blank">Ghost</a> blog. To do that, go to <i>Settings <span class="icon"><Icon class="icon" icon={faArrowRight}/></span> Labs <span class="icon"><Icon icon={faArrowRight}/></span> Import</i> in your Ghost dashboard, and import the JSON file you downloaded from here. The details will be added to "staff" and you can select them as the author when publishing a post!</p>
|
|
|
|
<form>
|
|
{#if errors.length}
|
|
<fieldset class="errors">
|
|
<legend>Errors</legend>
|
|
|
|
<ul>
|
|
{#each errors as error}
|
|
<li>{error}</li>
|
|
{/each}
|
|
</ul>
|
|
</fieldset>
|
|
{/if}
|
|
<fieldset>
|
|
|
|
<legend>{name || 'Author'}</legend>
|
|
|
|
<div>
|
|
<label for="input-name">Name</label>
|
|
<input id="input-name" name="name" bind:value={name} on:change={computeSlug}/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="input-email">Email</label>
|
|
<input id="input-email" name="email" type="email" bind:value={email} on:change={computeSlug}/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="input-slug">Slug</label>
|
|
<input id="input-slug" name="slug" bind:value={slug} on:change={updateSlug}/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="input-bio">Bio</label>
|
|
<input id="input-bio" name="bio" bind:value={bio}/>
|
|
</div>
|
|
|
|
<button on:click={processForm}>Generate</button>
|
|
|
|
</fieldset>
|
|
</form>
|
|
|
|
<footer>
|
|
<p><a href="https://code.snipettemag.com/snipette/ghost-user-maker" target="_blank"><span class="icon"><Icon icon={faCode} alt="Built"/></span> with <span class="icon"><Icon icon={faPaw} alt="pawmarks"/></span> by puppies just like you.</a></p>
|
|
</footer>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
text-align: center;
|
|
padding: 1em;
|
|
max-width: none;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
fieldset label {
|
|
display: inline-block;
|
|
}
|
|
|
|
.errors {
|
|
color: red;
|
|
border-color: red;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
fieldset.errors ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
main {
|
|
max-width: 480px;
|
|
}
|
|
}
|
|
</style>
|