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

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

assets/css/fonts.scss

@@ -0,0 +1,2 @@
+// Poppins (Google Fonts)
+@import url("https://fonts.googleapis.com/css?family=Poppins:500,700&display=swap");

assets/css/styles.scss

@@ -0,0 +1,221 @@
+:root {
+  --bg-color: #121212;
+  --fg-color: #FFF;
+  --ac-color: #51FF0D;
+  --err-color: #393939;
+}
+
+::selection {
+  background-color: var(--ac-color);
+  color: var(--bg-color);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #4a4a4a;
+}
+
+* {
+  box-sizing: border-box;
+  outline: 0;
+  border: 0;
+  font-family: 'Poppins', 'Roboto', 'Noto', sans-serif;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+a {
+  display: inline-flex;
+  color: inherit;
+  text-decoration: none;
+  font-weight: 700;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--fg-color);
+  font-weight: 500;
+  line-height: 1.5;
+  animation: fadein .2s;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+h1,
+h2,
+h3 {
+  margin: 0;
+  font-weight: 700;
+}
+
+header,
+footer {
+  display: flex;
+  padding: 16px;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+body.sticky-footer footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.logo {
+  color: var(--ac-color);
+}
+
+button {
+  margin: 4px;
+  padding: 8px 16px;
+  border-radius: 4px;
+  background-color: var(--ac-color);
+  color: var(--bg-color);
+  font-weight: 700;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+fieldset {
+  margin: 16px 0;
+  border: 2px solid var(--fg-color);
+  border-radius: 4px;
+}
+
+legend {
+  color: var(--fg-color);
+  font-weight: 700;
+  cursor: pointer;
+}
+
+fieldset textarea {
+  resize: vertical;
+}
+
+fieldset.request {
+  border-color: #57b5f9;
+}
+
+fieldset.request legend {
+  color: #57b5f9;
+}
+
+fieldset.history {
+  border-color: #9B9B9B;
+}
+
+fieldset.history legend {
+  color: #9B9B9B;
+}
+
+fieldset.authentication {
+  border-color: #B8E986;
+}
+
+fieldset.authentication legend {
+  color: #B8E986;
+}
+
+fieldset.parameters {
+  border-color: #50E3C2;
+}
+
+fieldset.parameters legend {
+  color: #50E3C2;
+}
+
+fieldset.reqbody {
+  border-color: #4A90E2;
+}
+
+fieldset.reqbody legend {
+  color: #4A90E2;
+}
+
+fieldset.response {
+  border-color: #C198FB;
+}
+
+fieldset.response legend {
+  color: #C198FB;
+}
+
+.hidden .collapsible {
+  display: none;
+}
+
+select,
+input,
+option,
+textarea {
+  margin: 4px;
+  padding: 8px 16px;
+  width: calc(100% - 8px);
+  border-radius: 4px;
+  background-color: #000;
+  color: var(--fg-color);
+  font-weight: 700;
+  font-size: 18px;
+  font-family: monospace;
+}
+
+.error {
+  background-color: var(--err-color);
+}
+
+.disabled {
+  background-color: var(--err-color);
+  color: #b2b2b2;
+}
+
+label {
+  padding: 4px;
+}
+
+ul,
+ol {
+  display: flex;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+ul li,
+ol li {
+  display: inline-flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+@media (max-width: 720px) {
+
+  ul,
+  ol {
+    flex-direction: column;
+  }
+
+  ul li,
+  ol li {
+    display: flex;
+  }
+}
+
+#installPWA {
+  display: none;
+}

assets/js/pwa.js

@@ -0,0 +1,54 @@
+export default () => {
+  //*** Determine whether or not the PWA has been installed. ***//
+
+  // Step 1: Check local storage
+  let pwaInstalled = localStorage.getItem('pwaInstalled') === 'yes';
+
+  // Step 2: Check if the display-mode is standalone. (Only permitted for PWAs.)
+  if (!pwaInstalled && window.matchMedia('(display-mode: standalone)').matches) {
+    localStorage.setItem('pwaInstalled', 'yes');
+    pwaInstalled = true;
+  }
+
+  // Step 3: Check if the navigator is in standalone mode. (Again, only permitted for PWAs.)
+  if (!pwaInstalled && window.navigator.standalone === true) {
+    localStorage.setItem('pwaInstalled', 'yes');
+    pwaInstalled = true;
+  }
+
+  //*** If the PWA has not been installed, show the install PWA prompt.. ***//
+  let deferredPrompt = null;
+  window.addEventListener('beforeinstallprompt', (event) => {
+    deferredPrompt = event;
+
+    // Show the install button if the prompt appeared.
+    if (!pwaInstalled) {
+      document.querySelector('#installPWA').style.display = 'block';
+    }
+  });
+
+  // When the app is installed, remove install prompts.
+  window.addEventListener('appinstalled', (event) => {
+    localStorage.setItem('pwaInstalled', 'yes');
+    pwaInstalled = true;
+    document.getElementById('installPWA').style.display = 'none';
+  });
+
+  // When the app is uninstalled, add the prompts back
+
+
+  return async () => {
+    if (deferredPrompt) {
+      deferredPrompt.prompt();
+      let outcome = await deferredPrompt.userChoice;
+
+      if (outcome === 'accepted') {
+        console.log('Postwoman was installed successfully.')
+      } else {
+        console.log('Postwoman could not be installed. (Installation rejected by user.)')
+      }
+      deferredPrompt = null;
+    }
+  };
+
+};