Revert "Revert "Migrate Postwoman to Nuxt.js (full Vue and SCSS support)""

layouts/README.md

@@ -0,0 +1,7 @@
+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

layouts/default.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <header>
+      <div class="slide-in">
+        <nuxt-link to="/">
+          <h1 class="logo"><img src="~static/icons/logo.svg" alt="" style="height: 24px; margin-right: 16px">Postwoman</h1>
+        </nuxt-link>
+        <h3>Lightweight API request builder</h3>
+      </div>
+    </header>
+
+    <nuxt id="main" />
+
+    <footer>
+      <a href="https://github.com/liyasthomas/postwoman" target="_blank"><img src="~static/icons/github.svg" alt="" style="margin-right: 16px">GitHub</a>
+      <button id="installPWA" @click.prevent="showInstallPrompt()">
+        Install PWA
+      </button>
+    </footer>
+  </div>
+</template>
+
+<style lang="scss">
+  .slide-in {
+    position: relative;
+    animation: slideIn 0.4s forwards ease-in-out;
+  }
+
+  @keyframes slideIn {
+    0% {
+      opacity: 0;
+      left: -30px;
+    }
+    100% {
+      opacity: 1;
+      left: 0px;
+    }
+  }
+
+  header, #main, footer {
+    margin: 0 auto;
+    max-width: 1200px;
+  }
+</style>
+
+<script>
+  import intializePwa from '../assets/js/pwa';
+
+  export default {
+    data () {
+      return {
+        showInstallPrompt: null
+      }
+    },
+
+    mounted () {
+      (async () => {
+        this.showInstallPrompt = await intializePwa();
+      })();
+    }
+  }
+</script>

layouts/error.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="page page-error">
+    <h1>{{ error.statusCode }}</h1>
+    <h2>{{ error.message }}</h2>
+    <br>
+    <p><nuxt-link to="/"><button>Go Home</button></nuxt-link></p>
+    <p><a href="/">Reload</a></p>
+  </div>
+</template>
+
+<style lang="scss">
+  // Center the error page in the viewport.
+  .page-error {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+
+    text-align: center;
+  }
+</style>
+
+<script>
+  export default {
+      props: ['error'],
+      head () {
+          return {
+              bodyAttrs: {
+                  class: 'sticky-footer'
+              }
+          }
+      }
+  }
+</script>