diff --git a/.dockerignore b/.dockerignore index 701236960..939397dd2 100644 --- a/.dockerignore +++ b/.dockerignore @@ -3,6 +3,10 @@ Dockerfile .github # Created by .ignore support plugin (hsz.mobi) + +# Firebase +.firebase + ### Node template # Logs logs @@ -97,4 +101,4 @@ sw.* .postwoman # File explorer -.directory \ No newline at end of file +.directory diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 000000000..55849bd02 --- /dev/null +++ b/.firebaserc @@ -0,0 +1,14 @@ +{ + "projects": { + "default": "postwoman-api" + }, + "targets": { + "postwoman-api": { + "hosting": { + "postwoman": [ + "postwoman" + ] + } + } + } +} diff --git a/.gitignore b/.gitignore index f541e327a..cc00b1dee 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,8 @@ # Created by .ignore support plugin (hsz.mobi) + +# Firebase +.firebase + ### Node template # Logs logs @@ -93,4 +97,4 @@ sw.* .postwoman # File explorer -.directory \ No newline at end of file +.directory diff --git a/.travis.yml b/.travis.yml index 8a7d2ff69..0223e03ab 100644 --- a/.travis.yml +++ b/.travis.yml @@ -15,30 +15,39 @@ language: node_js node_js: - "12" +addons: + apt: + packages: + - libgconf-2-4 # cypress binary dependency + env: - DEPLOY_ENV=POSTWOMAN_IO cache: + npm: true directories: - "node_modules" + - ~/.cache branches: only: - "master" install: + - "npm install firebase-tools" - "npm install" + +before_script: + - "npm run test" + +script: + - "cd functions" + - "npm install" + - "cd .." - "npm run generate" notifications: webhooks: https://www.travisbuddy.com -deploy: - 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 +after_success: + - firebase deploy --token $FIREBASE_TOKEN diff --git a/README.md b/README.md index bce352be5..b679ab4c6 100644 --- a/README.md +++ b/README.md @@ -5,13 +5,13 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno
Liyas Thomas
-

Postwoman

+

Postwoman.io

- API request builder - Helps you create your requests faster, saving you precious time on your development. Subscribe for updates + API request builder - Helps you create your requests faster, saving you precious time on your development - Subscribe for updates

-[![Financial Contributors on Open Collective](https://opencollective.com/postwoman/all/badge.svg?label=financial+contributors)](https://opencollective.com/postwoman) [![Build Status](https://travis-ci.com/liyasthomas/postwoman.svg?branch=master)](https://travis-ci.com/liyasthomas/postwoman) [![GitHub release](https://img.shields.io/github/release/liyasthomas/postwoman/all.svg)](https://github.com/liyasthomas/postwoman/releases/latest) [![repo size](https://img.shields.io/github/repo-size/liyasthomas/postwoman.svg)](https://github.com/liyasthomas/postwoman/archive/master.zip) [![license](https://img.shields.io/github/license/liyasthomas/postwoman.svg)](https://github.com/liyasthomas/postwoman/blob/master/LICENSE) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/liyasthomas/postwoman/issues) [![Website](https://img.shields.io/website-up-down-green-red/https/shields.io.svg?label=website)](https://postwoman.io) [![Donate](https://img.shields.io/badge/$-donate-blue.svg)](https://www.paypal.me/liyascthomas) [![Buy me a coffee](https://img.shields.io/badge/$-BuyMeACoffee-orange.svg)](https://www.buymeacoffee.com/liyasthomas) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-blueviolet)](https://t.me/postwoman_app) [![Chat on Discord](https://img.shields.io/badge/chat-Discord-violet?logo=discord)](https://discord.gg/GAMWxmR) +[![Build Status](https://travis-ci.com/liyasthomas/postwoman.svg?branch=master)](https://travis-ci.com/liyasthomas/postwoman) [![GitHub release](https://img.shields.io/github/release/liyasthomas/postwoman/all.svg)](https://github.com/liyasthomas/postwoman/releases/latest) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/liyasthomas/postwoman/issues) [![Website](https://img.shields.io/website-up-down-green-red/https/shields.io.svg?label=website)](https://postwoman.io) [![Financial Contributors on Open Collective](https://opencollective.com/postwoman/all/badge.svg?label=financial+contributors)](https://opencollective.com/postwoman) [![Donate](https://img.shields.io/badge/$-donate-blue.svg)](https://www.paypal.me/liyascthomas) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-blueviolet)](https://t.me/postwoman_app) [![Chat on Discord](https://img.shields.io/badge/chat-Discord-violet?logo=discord)](https://discord.gg/GAMWxmR)

Built with ❤︎ by @@ -26,7 +26,7 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno **Chat here: _[Telegram](https://t.me/postwoman_app), [Discord](https://discord.gg/GAMWxmR)_** -**Donate here: _[PayPal](https://www.paypal.me/liyascthomas), [Buy me a coffee](https://www.buymeacoffee.com/liyasthomas)_** +**Donate here: _[PayPal](https://www.paypal.me/liyascthomas), [Open Collective](https://opencollective.com/postwoman), [Patreon](https://www.patreon.com/liyasthomas)_**

@@ -34,13 +34,13 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno
-### Features :sparkles: +### Features ✨ -:heart: **Lightweight**: Crafted with minimalistic UI design +❤️ **Lightweight**: Crafted with minimalistic UI design. Simple design is the best design. - Faster, lighter, cleaner, minimal & responsive -:zap: **Real-time**: Send requests and get/copy responses right away! +⚡️ **Fast**: Send requests and get/copy responses in real-time! Fast software is the best software. **Methods:** - `GET` - Retrieve information about the REST API resource @@ -53,70 +53,82 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno _History entries are synced with local session storage_ -:rainbow: **VIBGYOR**: Neon combination background, foreground & accent colors - because customization === freedom :sparkles: +🌈 **Make it yours**: Customizable combinations for background, foreground and accent colors: because customization === freedom. [Customize now ✨](https://postwoman.io/settings). **Customizations:** - - Dark and Light background themes - - Choose accent color + - Choose theme: Kinda Dark (default), Clearly White, Just Black and System theme + - Choose accent color: Green (default), Yellow, Pink, Red, Purple, Orange, Cyan and Blue - Toggle multi-colored frames _Customized themes are also synced with local session storage_ -:fire: **PWA**: Install as a **[PWA](https://developers.google.com/web/progressive-web-apps)** on your device +🔥 **PWA**: Install as a **[PWA](https://developers.google.com/web/progressive-web-apps)** on your device. **Features:** - - Instant loading with Service Workers + - Instant loading with [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers) - Offline support - Low RAM/memory and CPU usage + - [Add to Home Screen](https://developers.google.com/web/fundamentals/app-install-banners) (button in footer) + - [Desktop PWA](https://developers.google.com/web/progressive-web-apps/desktop) support (button in footer) + - [Full features](https://developers.google.com/web/progressive-web-apps) -:rocket: **Request**: Retrieve data from a URL without having to do a full page refresh +🚀 **Request**: Retrieve data from a URL without having to do a full page refresh. - Choose `method` - Enter `URL` - Enter `Path` - - Copy public "Share URL" - - Generate request code for JavaScript XHR, Fetch, cURL + +**Features:** + - Copy/share public "Share URL" + - Generate request code for JavaScript XHR, Fetch and cURL - Copy generated request code to clipboard - Import cURL + - Label requests -:electric_plug: **Web Socket**: Establish full-duplex communication channels over a single TCP connection +🔌 **Web Socket**: Establish full-duplex communication channels over a single TCP connection. - Send and receive data -:closed_lock_with_key: **Authentication**: Allows to identity the end user +🔐 **Authentication**: Allows to identity the end user. **Types:** - None - Basic authentication using username and password - Token based authentication -:loudspeaker: **Headers**: Describes the format the body of your request is being sent as +📢 **Headers**: Describes the format the body of your request is being sent as. -:mailbox: **Parameters**: Use request parameters to set varying parts in simulated requests + - Add or remove Header list -:page_with_curl: **Request Body**: Used to send and receive data via the REST API +📫 **Parameters**: Use request parameters to set varying parts in simulated requests. + +📃 **Request Body**: Used to send and receive data via the REST API. **Options:** - Set Content Type - - Toggle between RAW input and parameter list + - Add or remove Parameter list + - Toggle between key-value and RAW input Parameter list -:wave: **Responses**: Contains the status line, headers and the message/response body +👋 **Responses**: Contains the status line, headers and the message/response body. - Copy response to clipboard - View preview for HTML responses _HTML responses have "Preview HTML" feature_ -:alarm_clock: **History**: Request entries are synced with local session storage to reuse with a single click +⏰ **History**: Request entries are synced with local session storage to reuse with a single click. **Fields** + - Label - Timestamp - Method - Status code - URL - Path -_History entries can be deleted one-by-one or all together_ +_History entries can be sorted by any fields_ + +_Histories can deleted one-by-one or all together_ ## Demo 🚀 @@ -167,7 +179,7 @@ docker run -p 3000:3000 liyasthomas/postwoman:latest docker build -t postwoman:latest ``` -## Releasing 🔖 +## Releasing 🏷️ 1. [Clone this repo](https://help.github.com/en/articles/cloning-a-repository) with git. 1. Install dependencies by running `npm install` within the directory that you cloned (probably `postwoman`). @@ -229,6 +241,7 @@ See the list of [contributors](https://github.com/liyasthomas/postwoman/graphs/c ### Code Contributors This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. + ### Financial Contributors @@ -237,7 +250,7 @@ Become a financial contributor and help us sustain our community. [[Contribute]( #### Individuals - + #### Organizations diff --git a/assets/css/fonts.scss b/assets/css/fonts.scss index 82b09e3e3..3a04e5fcf 100644 --- a/assets/css/fonts.scss +++ b/assets/css/fonts.scss @@ -1,2 +1,2 @@ // Poppins (Google Fonts) -@import url("https://fonts.googleapis.com/css?family=Material+Icons|Poppins:400,600&display=swap"); +@import url('https://fonts.googleapis.com/css?family=Material+Icons|Poppins:500,700|Roboto+Mono:400&display=swap'); diff --git a/assets/css/styles.scss b/assets/css/styles.scss index 07a748c3d..c3f12d3b8 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -34,13 +34,13 @@ a { display: inline-flex; color: inherit; text-decoration: none; - font-weight: 600; + font-weight: 700; } body { background-color: var(--bg-color); color: var(--fg-color); - font-weight: 400; + font-weight: 500; font-size: 16px; font-family: "Poppins", "Roboto", "Noto", sans-serif; line-height: 1.5; @@ -53,7 +53,7 @@ h1, h2, h3 { margin: 0; - font-weight: 600; + font-weight: 700; } h3.title { @@ -78,10 +78,7 @@ nav { } body.sticky-footer footer { - position: fixed; - right: 0; - bottom: 0; - left: 0; + opacity: .25; } .logo { @@ -97,7 +94,7 @@ button { border-radius: 20px; background-color: var(--ac-color); color: var(--act-color); - font-weight: 600; + font-weight: 700; font-size: 16px; font-family: "Poppins", "Roboto", "Noto", sans-serif; transition: all 0.2s ease-in-out; @@ -140,7 +137,7 @@ legend { align-items: center; justify-content: center; color: var(--fg-color); - font-weight: 600; + font-weight: 700; cursor: pointer; i { @@ -148,11 +145,6 @@ legend { } } -fieldset textarea, -fieldset pre code { - resize: vertical; -} - fieldset.blue legend { color: #57b5f9; } @@ -204,11 +196,13 @@ pre { background-color: var(--bg-dark-color); color: var(--fg-color); font-size: 16px; - font-family: monospace; + font-family: 'Roboto Mono', monospace; transition: all 0.2s ease-in-out; user-select: text; width: calc(100% - 8px); min-height: 40px; + resize: vertical; + text-overflow: ellipsis; &:not([readonly]):hover { background-color: var(--bg-dark-color); @@ -228,6 +222,7 @@ code { .hljs-subst { background-color: var(--bg-dark-color) !important; color: var(--fg-color) !important; + font-family: 'Roboto Mono', monospace; } select, @@ -306,6 +301,10 @@ ol li { justify-content: space-between; } +.show-on-small-screen { + display: flex; +} + @media (max-width: $responsiveWidth) { header div { display: flex; @@ -331,6 +330,10 @@ ol li { .hide-on-small-screen { display: none; } + + .show-on-small-screen { + display: inline-flex; + } } #installPWA { @@ -373,7 +376,7 @@ fieldset#history { position: absolute; top: 12px; right: 12px; - font-family: monospace, monospace; + font-family: 'Roboto Mono', monospace; } } } diff --git a/assets/css/themes.scss b/assets/css/themes.scss index f6410a162..912dcb563 100644 --- a/assets/css/themes.scss +++ b/assets/css/themes.scss @@ -3,6 +3,8 @@ - dark (default) - light + - black + - auto */ // Dark is the default theme variant. @@ -29,9 +31,9 @@ :root.light { // Dark Background color - --bg-dark-color: #e8f0fe; + --bg-dark-color: #f6f6f6; // Background color - --bg-color: #fff; + --bg-color: #ffffff; // Auto-complete color --atc-color: #ebebeb; // Text color @@ -39,11 +41,78 @@ // Light Text color --fg-light-color: rgb(150, 155, 160); // Border color - --brd-color: #f2f2f2; + --brd-color: #eeeeed; // Error color - --err-color: invert(#303341, 1); + --err-color: #f6f6f6; // Acent color --ac-color: #57b5f9; // Active text color - --act-color: #fff; + --act-color: #ffffff; +} + +:root.black { + // Dark Background color + --bg-dark-color: rgb(8, 8, 8); + // Background color + --bg-color: #000000; + // Auto-complete color + --atc-color: rgb(18, 18, 18); + // Text color + --fg-color: rgb(250, 250, 250); + // Light Text color + --fg-light-color: rgb(100, 100, 100); + // Border color + --brd-color: rgb(16, 16, 16); + // Error color + --err-color: rgb(8, 8, 8); + // Acent color + --ac-color: #50fa7b; + // Active text color + --act-color: #000000; +} + +@media(prefers-color-scheme: light) { + :root.auto { + // Dark Background color + --bg-dark-color: #f6f6f6; + // Background color + --bg-color: #ffffff; + // Auto-complete color + --atc-color: #ebebeb; + // Text color + --fg-color: #525252; + // Light Text color + --fg-light-color: rgb(150, 155, 160); + // Border color + --brd-color: #eeeeed; + // Error color + --err-color: #f6f6f6; + // Acent color + --ac-color: #57b5f9; + // Active text color + --act-color: #ffffff; + } +} + +@media(prefers-color-scheme: dark) { + :root.auto { + // Dark Background color + --bg-dark-color: rgb(41, 42, 45); + // Background color + --bg-color: rgb(37, 38, 40); + // Auto-complete color + --atc-color: rgb(49, 49, 55); + // Text color + --fg-color: rgb(247, 248, 248); + // Light Text color + --fg-light-color: rgb(150, 155, 160); + // Border color + --brd-color: rgb(48, 47, 55); + // Error color + --err-color: rgb(41, 42, 45); + // Acent color + --ac-color: #50fa7b; + // Active text color + --act-color: rgb(37, 38, 40); + } } diff --git a/components/autocomplete.vue b/components/autocomplete.vue index b469f5aca..26359b574 100644 --- a/components/autocomplete.vue +++ b/components/autocomplete.vue @@ -1,181 +1,204 @@ diff --git a/components/history.vue b/components/history.vue index 88ebf3bb3..18e0f592c 100644 --- a/components/history.vue +++ b/components/history.vue @@ -6,11 +6,14 @@
    +
  • + +
    • @@ -32,7 +38,7 @@
  • - +
  • @@ -101,6 +107,7 @@ filterText: '', showFilter: false, isClearingHistory: false, + reverse_sort_label: false, reverse_sort_time: false, reverse_sort_status_code: false, reverse_sort_url: false, @@ -198,6 +205,17 @@ this.history = byUrl; this.reverse_sort_url = !this.reverse_sort_url; }, + sort_by_label() { + let byLabel = this.history.slice(0); + byLabel.sort((a, b)=>{ + if(this.reverse_sort_label) + return a.label == b.label ? 0 : +(a.label < b.label) || -1; + else + return a.label == b.label ? 0 : +(a.label > b.label) || -1; + }); + this.history = byLabel; + this.reverse_sort_label = !this.reverse_sort_label; + }, sort_by_path() { let byPath = this.history.slice(0); byPath.sort((a, b)=>{ diff --git a/components/settings/swatch.vue b/components/settings/swatch.vue index aa1c40ad2..143f37d4e 100644 --- a/components/settings/swatch.vue +++ b/components/settings/swatch.vue @@ -37,7 +37,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - color: #fff; + color: #ffffff; } } } diff --git a/components/toggle.vue b/components/toggle.vue index 8f31478b8..a964a10ee 100644 --- a/components/toggle.vue +++ b/components/toggle.vue @@ -4,21 +4,22 @@ + +