btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Merge pull request #51 from liyasthomas/migrate-nuxt

Browse Source 
Migrate nuxt
This commit is contained in:
Liyas Thomas
2019-08-24 23:30:53 +05:30
committed by GitHub
parent 45bf7a234f c11d56279f
commit 3d9b3099f2
7 changed files with 356 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
.travis.yml
View File

@@ -1,34 +1,44 @@
# == INSTRUCTIONS FOR SETTING UP TRAVIS (and GitHub Pages) ==
#
# 1. Find this repository in your Travis-CI dashboard.
# open settings and add an environment variable called
# GITHUB_ACCESS_TOKEN and set it to your personal access token.addons:
# See: https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line
#
# **DO NOT TURN ON 'Display value in build log'!!!!**
#
# 2. Push the code to the repository.
# 3. Set the GitHub Pages source in the GitHub repository settings to the
# gh-pages branch.
language: node_js
node_js:
- "8"
- "12"
env:
- DEPLOY_ENV=GH_PAGES
cache:
directories:
- "node_modules"
directories:
- "node_modules"
branches:
only:
- master
only:
- "master"
install:
- npm install
- npm run generate
- "npm install"
- "npm run generate"
script:
- echo "Skipping tests"
notifications:
webhooks: https://www.travisbuddy.com
deploy:
provider: pages
skip-cleanup: true
github-token: $GITHUB_ACCESS_TOKEN # Set in travis-ci.org dashboard, marked secure https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token
target-branch: gh-pages
local-dir: dist
on:
branch: master
provider: pages
skip_cleanup: true
# Refer to: https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token
github_token: $GITHUB_ACCESS_TOKEN
target-branch: gh-pages
local_dir: dist
on:
branch: master

11
assets/css/styles.scss
View File

@@ -70,6 +70,12 @@ footer {
justify-content: space-between;
}
nav {
a:not(:last-of-type) {
margin-right: 15px;
}
}
body.sticky-footer footer {
position: fixed;
bottom: 0;
@@ -104,7 +110,7 @@ legend {
cursor: pointer;
}
fieldset textarea {
fieldset textarea, fieldset pre {
resize: vertical;
}
@@ -163,7 +169,8 @@ fieldset.response legend {
select,
input,
option,
textarea {
textarea,
pre {
margin: 4px;
padding: 8px 16px;
width: calc(100% - 8px);

47
layouts/default.vue
View File

@@ -7,6 +7,11 @@
</nuxt-link>
<h3>Lightweight API request builder</h3>
</div>
<nav>
<nuxt-link to="/">HTTP</nuxt-link>
<nuxt-link to="/websocket">WebSocket</nuxt-link>
</nav>
</header>
<nuxt id="main" />
@@ -41,6 +46,43 @@
margin: 0 auto;
max-width: 1200px;
}
header { padding-right: 0; }
nav {
a {
display: inline-block;
position: relative;
padding: 8px 16px;
&.nuxt-link-exact-active {
color: black;
&:before { width: 100%; height: 100% }
}
&:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background-color: var(--ac-color);
border-radius: 4px;
margin: auto;
}
&:not(.nuxt-link-exact-active):hover:before {
animation: linkHover 0.3s forwards ease-in-out;
}
@keyframes linkHover {
0% { width: 0; height: 2px; }
100% { width: 100%; height: 2px; }
}
}
}
</style>
<script>
@@ -49,11 +91,16 @@
export default {
data () {
return {
// Once the PWA code is initialized, this holds a method
// that can be called to show the user the installation
// prompt.
showInstallPrompt: null
}
},
mounted () {
// Initializes the PWA code - checks if the app is installed,
// etc.
(async () => {
this.showInstallPrompt = await intializePwa();
})();

9
layouts/error.vue
View File

@@ -4,7 +4,7 @@
<h2>{{ error.message }}</h2>
<br>
<p><nuxt-link to="/"><button>Go Home</button></nuxt-link></p>
<p><a href="/">Reload</a></p>
<p><a href="" @click.prevent="reloadApplication">Reload</a></p>
</div>
</template>
@@ -24,6 +24,13 @@
<script>
export default {
props: ['error'],
methods: {
reloadApplication () {
this.$router.push('/', () => window.location.reload());
}
},
head () {
return {
bodyAttrs: {

46
nuxt.config.js
View File

@@ -1,11 +1,28 @@
// Some helpful application constants.
// TODO: Use these when rendering the pages (rather than just for head/meta tags...)
const meta = {
export const meta = {
name: "Postwoman",
shortDescription: "Lightweight API request builder",
description: "The Postwoman API request builder helps you create your requests faster, saving you precious time on your development."
};
// Sets the base path for the router.
// Important for deploying to GitHub pages.
// -- Travis includes the author in the repo slug,
// so if there's a /, we need to get everything after it.
let repoName = (process.env.TRAVIS_REPO_SLUG || '').split('/').pop();
export const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
router: {
base: `/${repoName}/`
}
} : {
router: {
base: '/'
}
};
export default {
mode: 'spa',
/*
@@ -21,7 +38,7 @@ export default {
{ name: 'X-UA-Compatible', content: "IE=edge, chrome=1" },
{ itemprop: "name", content: `${meta.name} \u2022 ${meta.shortDescription}` },
{ itemprop: "description", content: meta.description },
{ itemprop: "image", content: "/icons/icon-192x192.png" },
{ itemprop: "image", content: `${routerBase.router.base}icons/icon-192x192.png` },
// Add to homescreen for Chrome on Android. Fallback for PWA (handled by nuxt)
{ name: 'application-name', content: meta.name },
@@ -32,7 +49,7 @@ export default {
{ name: 'apple-mobile-web-app-title', content: meta.name },
// Windows phone tile icon
{ name: 'msapplication-TileImage', content: 'icons/icon-144x144.png' },
{ name: 'msapplication-TileImage', content: `${routerBase.router.base}icons/icon-144x144.png` },
{ name: 'msapplication-TileColor', content: '#121212' },
{ name: 'msapplication-tap-highlight', content: 'no' },
@@ -42,7 +59,7 @@ export default {
{ property: 'og:type', content: 'website' },
{ property: 'og:title', content: `${meta.name} \u2022 ${meta.shortDescription}` },
{ property: 'og:description', content: meta.description },
{ property: 'og:image', content: '/icons/icon-144x144.png' },
{ property: 'og:image', content: `${routerBase.router.base}icons/icon-144x144.png` },
// Twitter
{ name: 'twitter:card', content: "summary" },
@@ -51,18 +68,18 @@ export default {
{ name: 'twitter:url', content: "https://liyasthomas.github.io/postwoman" },
{ name: 'twitter:title', content: meta.name },
{ name: 'twitter:description', content: meta.shortDescription },
{ name: 'twitter:image', content: '/icons/icon-144x144.png' },
{ name: 'twitter:image', content: `${routerBase.router.base}icons/icon-144x144.png` },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
// Home-screen icons (iOS)
{ rel: 'apple-touch-icon', href: '/icons/icon-48x48.png' },
{ rel: 'apple-touch-icon', sizes: '72x72', href: '/icons/icon-72x72.png' },
{ rel: 'apple-touch-icon', sizes: '96x96', href: '/icons/icon-96x96.png' },
{ rel: 'apple-touch-icon', sizes: '144x144', href: '/icons/icon-144x144.png' },
{ rel: 'apple-touch-icon', sizes: '192x192', href: '/icons/icon-192x192.png' },
{ rel: 'apple-touch-icon', href: `${routerBase.router.base}icons/icon-48x48.png` },
{ rel: 'apple-touch-icon', sizes: '72x72', href: `${routerBase.router.base}icons/icon-72x72.png` },
{ rel: 'apple-touch-icon', sizes: '96x96', href: `${routerBase.router.base}icons/icon-96x96.png` },
{ rel: 'apple-touch-icon', sizes: '144x144', href: `${routerBase.router.base}icons/icon-144x144.png` },
{ rel: 'apple-touch-icon', sizes: '192x192', href: `${routerBase.router.base}icons/icon-192x192.png` },
]
},
/*
@@ -106,7 +123,7 @@ export default {
for(let size of sizes){
icons.push({
"src": `/icons/icon-${size}x${size}.png`,
"src": `${routerBase.router.base}icons/icon-${size}x${size}.png`,
"type": "image/png",
"sizes": `${size}x${size}`
});
@@ -134,5 +151,10 @@ export default {
*/
generate: {
fallback: true
}
},
/*
** Router configuration
*/
...routerBase
}

2
pages/index.vue
View File

@@ -239,7 +239,7 @@
'((\\d{1,3}\\.){3}\\d{1,3}))' +
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
'(\\?[;&a-z\\d%_.~+=-]*)?' +
'(\\#[-a-z\\d_]*)?$', 'i')
'(\\#[-a-z\\d_]*)?$', 'i');
return !pattern.test(this.url)
},
rawRequestBody() {

225
pages/websocket.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<div class="page">
<fieldset class="request" ref="request">
<legend v-on:click="collapse">Request ↕</legend>
<div class="collapsible">
<ul>
<li>
<label for="url">URL</label>
<input type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
</li>
<li class="no-grow">
<label for="action">&nbsp;</label>
<button class="action" :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
</li>
</ul>
</div>
</fieldset>
<fieldset class="response" id="response" ref="response">
<legend v-on:click="collapse">Communication ↕</legend>
<div class="collapsible">
<ul>
<li>
<label for="body">Log</label>
<div name="body" class="body" readonly>
<span v-if="communication.log">
<span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
</span>
<span v-else>(Waiting for connection...)</span>
</div>
</li>
</ul>
<ul>
<li>
<label for="status">Message</label>
<input name="status" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
</li>
<li class="no-grow">
<label for="send">&nbsp;</label>
<button class="action" name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
</li>
</ul>
</div>
</fieldset>
</div>
</template>
<style lang="scss">
.no-grow { flex-grow: 0; }
.action {
padding-left: 30px;
padding-right: 30px;
width: 150px;
}
div.body {
margin: 4px;
padding: 8px 16px;
width: calc(100% - 8px);
border-radius: 4px;
background-color: #000;
color: var(--fg-color);
height: 300px;
overflow: auto;
&, span {
font-weight: 700;
font-size: 18px;
font-family: monospace;
}
span {
display: block;
white-space: pre-wrap;
}
}
</style>
<script>
export default {
data () {
return {
connectionState: false,
url: "wss://echo.websocket.org",
socket: null,
communication: {
log: null,
input: ""
}
}
},
computed: {
toggleConnectionVerb () {
return !this.connectionState ? "Connect" : "Disconnect";
},
urlValid () {
const pattern = new RegExp('^(wss?:\\/\\/)?' +
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
'((\\d{1,3}\\.){3}\\d{1,3}))' +
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
'(\\?[;&a-z\\d%_.~+=-]*)?' +
'(\\#[-a-z\\d_]*)?$', 'i');
return pattern.test(this.url);
}
},
methods: {
toggleConnection () {
// If it is connecting:
if(!this.connectionState) return this.connect();
// Otherwise, it's disconnecting.
else return this.disconnect();
},
connect () {
this.communication.log = [
{
payload: `Connecting to ${this.url}...`,
source: 'info',
color: 'lime'
}
];
try {
this.socket = new WebSocket(this.url);
this.socket.onopen = (event) => {
this.connectionState = true;
this.communication.log = [
{
payload: `Connected to ${this.url}.`,
source: 'info',
color: 'lime'
}
];
};
this.socket.onerror = (event) => {
this.handleError();
};
this.socket.onclose = (event) => {
this.connectionState = false;
this.communication.log.push({
payload: `Disconnected from ${this.url}.`,
source: 'info',
color: 'red'
});
};
this.socket.onmessage = (event) => {
this.communication.log.push({
payload: event.data,
source: 'server'
});
}
}catch(ex){
this.handleError(ex);
}
},
disconnect () {
if(this.socket != null) this.socket.close();
},
handleError (error) {
this.disconnect();
this.connectionState = false;
this.communication.log.push({
payload: `An error has occurred.`,
source: 'info',
color: 'red'
});
if(error != null) this.communication.log.push({
payload: error,
source: 'info',
color: 'red'
});
},
sendMessage () {
const message = this.communication.input;
this.socket.send(message);
this.communication.log.push({
payload: message,
source: 'client'
});
this.communication.input = "";
},
collapse({target}) {
const el = target.parentNode.className;
document.getElementsByClassName(el)[0].classList.toggle('hidden');
},
getSourcePrefix(source){
const sourceEmojis = {
// Source used for info messages.
'info': 'ℹ️ [INFO]:\t',
// Source used for client to server messages.
'client': '👽 [SENT]:\t',
// Source used for server to client messages.
'server': '📥 [RECEIVED]:\t'
};
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
return '';
}
}
}
</script>