ghost-user-maker/src/App.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>