seance/views/fetch-medium.vue

<template>
  <div id="app">
    <nav class="navbar has-background-light" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item is-size-5" :href="seanceUrl + '/'">Seance</a>

        <a role="button" class="navbar navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMain">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="navbarMain" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item">Home</a>
        </div>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="button is-primary" v-if="user">{{ user.name }}</div>
          <div class="button is-primary" v-else>Sign in</div>
        </div>
      </div>
    </nav>

    <div class="column is-half is-offset-one-quarter has-text-centered">
      <div class="card has-text-left">
        <header class="card-header">
          <p class="card-header-title">Fetch from Medium</p>
        </header>
        <div class="card-image" v-if="post.featuredImage">
          <figure class="image is-4by3">
            <img :src="post.featuredImage" :alt="post.title" />
          </figure>
        </div>
        <div class="card-content">
          <p class="title is-4">{{ post.title }}</p>
          <p v-if="post.subtitle" class="subtitle is-6">{{ post.subtitle }}</p>
          <p>by {{ post.author }}</p>
          <div class="notifications" id="notifications"></div>
          <input type="password" name="password" placeholder="password" class="input is-primary is-small"/>
        </div>
        <footer class="card-footer" id="statusbar">
          <a :href="post.mediumUrl" v-if="post.mediumUrl" class="card-footer-item">View on Medium</a>
          <a href="#" class="card-footer-item" onclick="mediumFetch(event)" :data-post-slug="post.slug" :data-post-mediumurl="post.mediumUrl" :data-seance-url="seanceUrl">Fetch</a>
          <a href="#" class="card-footer-item" onclick="ghostPush(event)">Push to Ghost</a>
        </footer>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: 'Seance',
    data () {
      return {
        title: 'Seance',
        user: null,
        host: 'http://localhost:4000',
        seanceUrl: 'http://localhost:4000',
        post: {
          title: '(untitled)',
          subtitle: '',
          featuredImage: 'https://via.placeholder.com/400x300/?text=No+preview',
          author: 'Unknown Author',
        }
      }
    }
  }
</script>

<style lang="scss">
  @import "../node_modules/bulma/bulma.sass"
</style>