seance/views/index.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" style="margin-top: 10%;">
      <h1 class="title">{{ title }}</h1>
      <form :action="'/' + seanceUrl + '/fetch/medium/'" method="post">
        <input type="search" class="input is-medium is-rounded is-focused" placeholder="Enter a Medium link..."/>
        <p>or, use the bookmarklet <a class="button is-primary is-small" :href="bookmarklet">Add to Seance</a></p>
      </form>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'Seance',
    data () {
      return {
        title: 'Seance',
        user: null,
        seanceUrl: 'localhost:4000',
        protocol: '//',
      }
    },
    computed: {
      bookmarklet () {
        return `javascript:(()=>{document.title='[Loading...] '+document.title;s=document.createElement('script');s.src='${this.protocol}${this.seanceUrl}/bookmarklet.js';s.dataset.seanceUrl='${this.protocol}${this.seanceUrl}';document.body.appendChild(s)})()`
      }
    }
  }
</script>

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