<template>
  <div>
    <header>
      <div class="container">
        <div class="row">
          <div class="col-sm-6 header-text">
            <img src="/static/logo_light.png" class="main-logo"> 
            <h3>Easily backup and manage your dotfiles across devices</h3>
            <p>Use Dotty to securely store your configuration files and easily keep them in-sync across your machines.</p>

            <h4 style="margin-top:30px;"><strong>Dotty is free</strong>. <span style="text-decoration:underline;cursor:pointer;" v-on:click="whyFree">Find out why</span>.</h4>
            <router-link :to="{name: 'DocumentationQuickStart'}" class="btn btn-white"><i class="fa fa-rocket"></i> Join Dotty</router-link>
            <router-link :to="{name: 'Documentation'}" class="btn btn-info">Documentation</router-link>
          </div>
          <div class="col-sm-6 header-clouds">
            <img src="/static/files.png" class="files-image">
            <img src="/static/cloud.png" class="cloud cloud-1">
            <img src="/static/cloud.png" class="cloud cloud-2">
            <img src="/static/cloud.png" class="cloud cloud-3">
          </div>
        </div>
      </div>
      <h2 class="text-center">Using the <router-link :to="{name: 'DocumentationClient'}">CLI client</router-link> is super easy</h2>
      <p class="text-center">(but you can always hack using the <router-link :to="{name: 'DocumentationRest'}">RESTful web API</router-link> instead)</p>
      <div class="macs hidden-xs">
        <div class="mac mac1"><p>$ </p></div>
        <div class="mac mac2"><p>$ </p></div>
      </div>
    </header>

    <div class="margin-section text-center">
      <h3>Got the perfect <span class="code">{{currentFile1}}</span>, or spent ages setting up your <span class="code">{{currentFile2}}</span>?</h3>
      <p>Let Dotty take care of backing them up and reflecting them across your other computers.</p>
      <p>Use our easy tool or open APIs to build your own automations and workflows.</p>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-md-4 col-md-offset-2">
          <h3>Why use Dotty?</h3>
          <p>Dotty aims to reduce the time and effort involved in managing configuration files without more complicated setups or proxying through version control providers.</p>
          <p>The focus is on simplicity: Push and pull your files using simple and familiar commands.</p>
        </div>
        <div class="col-sm-6 col-md-4">
          <ul class="benefits custom-list">
            <li>Use Dotty to robustly backup your configuration files</li>
            <li>Authenticate as many machines as you need</li>
            <li>Supports different paths for the same files across machines</li>
            <li>Hydrate new machines or fresh installs with setup scripts and your familiar configurations</li>
            <li>Open and intuitive RESTful API for building into your own workflows</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="beam text-center">
      <h2>Get started!</h2>
      <p>Join us today by downloading the client (or by using our HTTP API) to create a free account.</p>
      <p class="soft"><i class="fa fa-rocket"></i> We're still in beta but we'd love to get your feedback.</p>
      <router-link :to="{name: 'DocumentationQuickStart'}" class="btn btn-white"><i class="fa fa-arrow-right"></i> Quickstart guide</router-link>
      <router-link :to="{name: 'Documentation'}" class="btn btn-info"><i class="fa fa-book"></i> Documentation</router-link>
    </div>

    <div class="container">

      <div class="row">
        <div class="col-sm-8 col-sm-offset-2 col-md-6 col-mf-offset-3">
          <h2><i class="fa fa-sign"></i> On the roadmap...</h2>
          <ul class="list custom-list">
            <li>Choice between using email login verification or password-based auth (currently we only support password auth)</li>
            <li>End-to-end encryption between your devices (however, we already use TLS/SSL in transit and encryption at rest)</li>
            <li>File tagging for batch commands (e.g. <span class="code">dtt pull -t work-dotfiles</span>)</li>
            <li>File versioning</li>
            <li>Publishing and sharing your favourite dotfiles (e.g. <span class="code">dtt publish -k vimrc -p my-namespace/vimrc</span>)</li>
            <li>Open-sourcing the Dotty client to encourage contribution</li>
            <li>... And lots more</li>
          </ul>
        </div>
      </div>

      <div class="row margin-section">
        <div class="col-sm-6 col-md-4 col-md-offset-2">
          <h3>Alternatives &amp; resources</h3>
          <p>If you'd rather use a self-managed solution for managing your dotfiles, then several open-source alternatives exist that allow you to accomplish this using your own servers or a centralised version control repository, such as on GitHub.</p>
          <p>Dotty exists to minimise your own setup cost, time, and effort, but we acknowledge that this approach isn't for everyone. As such, we have listed a few alternatives that may be of interest.</p>
        </div>
        <div class="col-sm-6 col-md-4">
          <ul class="list custom-list">
            <li><a href="https://github.com/dotphiles/dotsync" target="_blank">Dotsync</a> - Sync dotfiles between multiple machines from a git repo or push using rsync</li>
            <li><a href="https://github.com/lra/mackup" target="_blank">Mackup</a> - Use a cloud service (e.g. Google Drive or Dropbox) to keep dotfiles in sync</li>
            <li><a href="https://github.com/technicalpickles/homesick" target="_blank">Homesick</a> - Manage dotfiles in your home directory using a git repository</li>
            <li><a href="https://github.com/andsens/homeshick" target="_blank">Homeshick</a> - Like Homesick, but written in bash</li>
            <li><a href="https://github.com/anishathalye/dotbot" target="_blank">Dotbot</a> - A minimalist dotfiles manager using git</li>
            <li><a href="https://dotfiles.github.io" target="_blank">GitHub does dotfiles</a> - A collection of guides to using dotfiles on GitHub</li>
            <li><a href="https://wiki.archlinux.org/index.php/Dotfiles#Other_tools" target="_blank">Dotfiles on the Arch Wiki</a> - A collection of tools and guides about dotfiles</li>
          </ul>
        </div>
      </div>

      <div class="row margin-section">
        <div class="col-sm-8 col-sm-offset-2 col-md-6 col-mf-offset-3">
          <h2>👋 Hey!</h2>
          <p>Dotty is built and maintined by me - Will. You can get in touch with me through <a href="https://twitter.com/willwebberley" target="_blank"><i class="fa fa-twitter"></i> Twitter</a> if you have any questions, problems, feedback, or if you want to help out!</p>

          <h3 id="why-free" style="margin-top:30px;">Why is Dotty free?</h3>
          <p>Dotty runs on a low-cost technology stack, which I use anyway to backup and store my own dotfiles. If expense begin to increase additional paid-for features will be introduced to help cover costs, but existing features will remain free. Get in touch if you'd like to help support Dotty!</p>
        </div>
      </div>

    </div>

    <footer>
      <img src="/static/logo_light.png"> 
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <p><small>&copy; {{thisYear}} Seastorm Limited</small></p>
          </div>
          <div class="col-sm-6" style="text-align:right;">
            <p><a href="/privacy" target="_blank">Privacy Policy <i class="fa fa-file-o"></i></a></p>
            <p><a href="/terms" target="_blank">Terms of Use <i class="fa fa-file-o"></i></a></p>
          </div>
        </div>
      </div>
    </footer>

  </div>
</template>

<script>
import $ from 'jquery';

export default {
  name: 'home',
  data() {
    return {
      thisYear: new Date().getFullYear(),
      files: ['.vimrc', 'tmux.conf', 'nginx.conf', '.zshrc', 'bashrc', 'hyperterm.js', '.gitignore', '.i3status' ],
      currentFileIndex1: 0,
      currentFileIndex2: 6,
    };
  },
  computed: {
    currentFile1: function () {
      return this.files[this.currentFileIndex1];
    },
    currentFile2: function () {
      return this.files[this.currentFileIndex2];
    },
  },
  methods: {
    whyFree: function (event) {
      document.getElementById('why-free').scrollIntoView();
    },
  },
  mounted() {
    resizeMac();
    $(window).resize(resizeMac);
    startText(0)
    const interval = 6000;

    setInterval(() => {
      let index = this.currentFileIndex1;
      if (index >= this.files.length - 1) index = -1;
      this.currentFileIndex1 = index + 1;
    }, interval);
    setTimeout(() => {
      setInterval(() => {
          let index = this.currentFileIndex2;
        if (index >= this.files.length - 1) index = -1;
        this.currentFileIndex2 = index + 1;
      }, interval);
    }, interval / 2);
  }
};

function resizeMac(){
  const div = $('.mac');
  const width = div.width();
  div.css('height', width);
}

function typeLine(index, string, elem, callback){
  if (string[index] === '?') {
    elem.innerHTML += '<br>$ ';
  }
  else {
    if (index === 0 && string[index] === '>') {
      let newString = string.replace(/^>/, '').replace(/\?$/, '');
      if (newString[0] === '#') {
        newString = `<span style="padding:10px 0px 10px 10px;color:rgb(200,200,200);font-style:italic;">${newString}</span>`;
      }
      if (newString[0] === '-') {
        newString = `<span style="padding:10px 0px 10px 5px;color:rgb(114, 191, 160);">${newString}</span>`;
      }
      elem.innerHTML += `<br>${newString}<br>${string[string.length - 1] === '?' ? '$ ' : ''}`;
      return setTimeout(callback, 1500); 
    }
    if (index >= string.length) {
      return callback();
    }
    elem.innerHTML += string[index];
  }
  var rand = Math.floor(Math.random() * (60)) + 70;
  index++;
  setTimeout(() => typeLine(index, string, elem, callback), rand);
  elem.scrollTop = elem.scrollHeight;
}

const lines = [
  {mac: 'mac1', line: 'dtt push -k vimrc'},
  {mac: 'mac1', line: '>-> Pushed vimrc from /Users/jane/.vimrc?'},
  {mac: 'mac2', line: 'dtt pull -k vimrc'},
  {mac: 'mac2', line: '>-> Pulled vimrc to /home/jane/.vimrc?'},
  {mac: 'mac2', line: 'vi ~/.tmux.conf'},
  {mac: 'mac2', line: '># ... edit ~/.tmux.conf?'},
  {mac: 'mac2', line: 'dtt add -k tmux -f ~/.tmux.conf'},
  {mac: 'mac2', line: '>-> Added & pushed tmux (/home/jane/.tmux.conf)?'},
  {mac: 'mac1', line: 'dtt pull -k tmux'},
  {mac: 'mac1', line: '>-> tmux is new. Choose local path:'},
  {mac: 'mac1', line: '~/.tmux.conf'},
  {mac: 'mac1', line: '>-> Added tmux to /Users/jane/.tmux.conf?'},
];

function startText(lineIndex){
  if (lineIndex >= lines.length) {
    return setTimeout(() => {
      $('.mac p').html('$ ');
      startText(0);
    }, 8000);
  }
  const line = lines[lineIndex];
  typeLine(0, line.line, $('.' + line.mac + ' p')[0], () => {
    setTimeout(() => startText(lineIndex + 1), 1000);
  });
}

</script>

<style scoped lang="scss">
@import "src/devices.scss";

  footer{
    min-height:50px;
    background: linear-gradient(to right, rgb(114, 190, 191), rgb(114, 191, 160));
    padding:10px;
    color:white;
    img{
      display:block;
      margin:20px auto;
      height:30px;
    }
    a{
      color:white;
    }
  }

  header{
    min-height:500px;
    background: linear-gradient(to bottom right, rgb(114, 190, 191), rgb(114, 191, 160));
    color:white;
    position:relative;
    margin-bottom:100px;
    padding-top:20px;
    @include phone{
      padding-bottom:40px;
    }
    .main-logo{
      width:200px;
    }
    
    h4{
      small{
        color:white;
      }
    }
    .header-text{
      margin-bottom:60px;
    }
    .header-clouds{
      position:relative;
      @include phone{
        overflow:hidden;
      }
      .files-image{
        max-width:100%;
        display:block;
        margin:0px auto;
      }
      .cloud{
        opacity:0.5;
        position:absolute;
        &.cloud-1{
          top:30px;
          right:0px;
          width:150px;
        }
        &.cloud-2{
          top:280px;
          right:70px;
          width:70px;
        }
        &.cloud-3{
          top:100px;
          right:230px;
          width:100px;
        }
      }
    }
    .macs{
      margin-top:40px;
      text-align:center;
      .mac{
        position:relative;
        text-align:left;
        width:30%;
        min-width:350px;
        max-width:500px;
        margin:0px 5px;
        height:0.7vw;
        background-image:url('/static/mac.png');
        background-size: 100%;
        display:inline-block;
        background-repeat:no-repeat;
        padding:30px 50px 40px 50px;
        p{
          color:white;
          font-family: 'Courier', 'Monospace';
          display:block;
          position:absolute;
          top:4%px;left:10%;
          height:90%;width:80%;
          font-size:13px;
          @include tablet{
            font-size:13px;
          }
          .commented{
            font-style:italic;
            color:rgb(200,200,200);
            padding-left:15px !important;
          }
        }
      }
    }
  }
  ul.custom-list{
    list-style:none;
    li{
      display:block;
      margin:5px 0px;
      position:relative;
      &:before{
        font-family: FontAwesome;
        content: '\f192';
        color:rgb(114, 191, 160);
        position:absolute;
        top:0px;
        left:-25px;
        font-size: 20px;
        line-height:20px;
      }
    }
    &.benefits{
      li:before{
        content: '\f05d';
      }
    }
  }

  .beam{
    background: linear-gradient(to bottom right, rgb(114, 190, 191), rgb(114, 191, 160));
    color:white;
    margin:50px 0px;
    padding-top:20px;
    padding-bottom:40px;
  }

  .btn-white{
    background:white;
    color:rgb(114, 191, 160);
    &:hover{
      background:darken(white, 5%);
    }
  }
  
  p{
    &.soft{
      opacity:0.8;
    }
  }
  .margin-section{
    margin:100px 0px;
  }
  .code{
    padding:3px;
    border-radius:2px;
    background:rgb(240,240,240);
    font-family: 'Courier', 'Monospace';
  }
</style>
