From f0868f383ba6ebf7ef1ebd5b444b4804b47df8f5 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 20 Dec 2019 14:40:16 +0530
Subject: [PATCH 1/7] :tada: API documentation page

---
 layouts/default.vue |   3 ++
 pages/doc.vue       | 106 ++++++++++++++++++++++++++++++++++++++++++++
 pages/index.vue     |  33 --------------
 3 files changed, 109 insertions(+), 33 deletions(-)
 create mode 100644 pages/doc.vue

diff --git a/layouts/default.vue b/layouts/default.vue
index add992d05..56c24d1b5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -582,6 +582,9 @@ export default {
         }
       });
     });
+
+    console.log("%cWe ❤︎ open source!", "background-color:white;padding:8px 16px;border-radius:8px;font-size:32px;color:red;")
+    console.log("%cContribute: https://github.com/liyasthomas/postwoman", "background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;text-decoration:none;")
   },
 
   watch: {
diff --git a/pages/doc.vue b/pages/doc.vue
new file mode 100644
index 000000000..a9fd0ab1e
--- /dev/null
+++ b/pages/doc.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="page">
+    <pw-section class="blue" label="Collection" ref="collection">
+      <ul>
+        <li>
+          <label for="collectionUpload">
+            <button
+              class="icon"
+              @click="$refs.collectionUpload.click()"
+              v-tooltip="'JSON'"
+            >
+              <i class="material-icons">folder</i>
+              <span>Import Collection</span>
+            </button>
+          </label>
+          <input
+            ref="collectionUpload"
+            name="collectionUpload"
+            type="file"
+            @change="uploadCollection"
+          />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <label for="rawBody">{{ $t("raw_request_body") }}</label>
+          <Editor
+            v-model="collectionJSON"
+            :lang="'json'"
+            :options="{
+              maxLines: '16',
+              minLines: '8',
+              fontSize: '16px',
+              autoScrollEditorIntoView: true,
+              showPrintMargin: false,
+              useWorker: false
+            }"
+          />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <button class="icon" @click="getDoc">
+            <i class="material-icons">book</i>
+            <span>Generate Documentation</span>
+          </button>
+        </li>
+      </ul>
+    </pw-section>
+
+    <pw-section class="green" label="Documentation" ref="documentation">
+      <ul>
+        {{
+          this.items
+        }}
+      </ul>
+    </pw-section>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
+
+<script>
+import AceEditor from "../components/ace-editor";
+
+export default {
+  components: {
+    "pw-section": () => import("../components/section"),
+    Editor: AceEditor
+  },
+
+  data() {
+    return {
+      collectionJSON: "[]",
+      items: []
+    };
+  },
+
+  methods: {
+    uploadCollection() {
+      this.rawInput = true;
+      let file = this.$refs.collectionUpload.files[0];
+      if (file !== undefined && file !== null) {
+        let reader = new FileReader();
+        reader.onload = e => {
+          this.collectionJSON = e.target.result;
+        };
+        reader.readAsText(file);
+        this.$toast.info("File imported", {
+          icon: "attach_file"
+        });
+      } else {
+        this.$toast.error("Choose a file", {
+          icon: "attach_file"
+        });
+      }
+    },
+
+    getDoc() {
+      let json = this.collectionJSON;
+      let html;
+      this.items = html;
+    }
+  }
+};
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 361623b24..44efd9307 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -227,7 +227,6 @@
                   <Editor
                     v-model="rawParams"
                     :lang="'json'"
-                    @keydown="formatRawParams"
                     :options="{
                       maxLines: '16',
                       minLines: '8',
@@ -1816,38 +1815,6 @@ export default {
         }
       });
     },
-    formatRawParams(event) {
-      if (event.which !== 13 && event.which !== 9) {
-        return;
-      }
-      const textBody = event.target.value;
-      const textBeforeCursor = textBody.substring(
-        0,
-        event.target.selectionStart
-      );
-      const textAfterCursor = textBody.substring(event.target.selectionEnd);
-      if (event.which === 13) {
-        event.preventDefault();
-        const oldSelectionStart = event.target.selectionStart;
-        const lastLine = textBeforeCursor.split("\n").slice(-1)[0];
-        const rightPadding = lastLine.match(/([\s\t]*).*/)[1] || "";
-        event.target.value =
-          textBeforeCursor + "\n" + rightPadding + textAfterCursor;
-        setTimeout(
-          () =>
-            (event.target.selectionStart = event.target.selectionEnd =
-              oldSelectionStart + rightPadding.length + 1),
-          1
-        );
-      } else if (event.which === 9) {
-        event.preventDefault();
-        const oldSelectionStart = event.target.selectionStart;
-        event.target.value = textBeforeCursor + "\xa0\xa0" + textAfterCursor;
-        event.target.selectionStart = event.target.selectionEnd =
-          oldSelectionStart + 2;
-        return false;
-      }
-    },
     copyRequest() {
       if (navigator.share) {
         let time = new Date().toLocaleTimeString();

From d4819bcd0a5cebb62b7d6104b9495cf97986d682 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Sat, 21 Dec 2019 08:44:10 +0530
Subject: [PATCH 2/7] :tada: Added navigation link to Documentation page in
 default layour

---
 .all-contributorsrc |  9 ---------
 README.md           |  5 ++---
 layouts/default.vue | 26 +++++++++++++++++++++++++-
 pages/doc.vue       |  4 ++--
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 6ecfa8b21..ca0269c27 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -52,15 +52,6 @@
         "code"
       ]
     },
-    {
-      "login": "terranblake",
-      "name": "Terran Blake",
-      "avatar_url": "https://avatars3.githubusercontent.com/u/8795767?v=4",
-      "profile": "https://www.lumahealth.io/",
-      "contributions": [
-        "code"
-      ]
-    },
     {
       "login": "AndrewBastin",
       "name": "Andrew Bastin",
diff --git a/README.md b/README.md
index 3cce2d1e4..44b70b869 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
   </p>
   <p>
 
-  [![Travis Build Status](https://img.shields.io/travis/com/liyasthomas/postwoman?logo=Travis)](https://travis-ci.com/liyasthomas/postwoman) [![GitHub release](https://img.shields.io/github/release/liyasthomas/postwoman/all?logo=GitHub)](https://github.com/liyasthomas/postwoman/releases/latest) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fpostwoman.io&logo=Postwoman)](https://postwoman.io) [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen?style=flat)](CONTRIBUTING.md) [![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors) [![Financial Contributors on Open Collective](https://img.shields.io/opencollective/all/postwoman?logo=Open-Collective&label=financial+contributors)](https://opencollective.com/postwoman) [![Donate on PayPal](https://img.shields.io/badge/support-PayPal-blue?logo=PayPal)](https://www.paypal.me/liyascthomas) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-blueviolet?logo=Telegram)](https://t.me/postwoman_app) [![Chat on Discord](https://img.shields.io/badge/chat-Discord-violet?logo=discord)](https://discord.gg/GAMWxmR) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fpostwoman.io%2F)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fpostwoman.io&text=%F0%9F%91%BD%20Postwoman%20%E2%80%A2%20API%20request%20builder%20-%20Helps%20you%20create%20your%20requests%20faster%2C%20saving%20you%20precious%20time%20on%20your%20development&original_referer=https%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3D%25F0%259F%2591%25BD%2520Postwoman%2520%25E2%2580%25A2%2520API%2520request%2520builder%2520-%2520Helps%2520you%2520create%2520your%2520requests%2520faster%2C%2520saving%2520you%2520precious%2520time%2520on%2520your%2520development%26url%3Dhttps%3A%2F%2Fpostwoman.io%26hashtags%3Dpostwoman%26via%3Dliyasthomas&via=liyasthomas&hashtags=postwoman)
+  [![Travis Build Status](https://img.shields.io/travis/com/liyasthomas/postwoman?logo=Travis)](https://travis-ci.com/liyasthomas/postwoman) [![GitHub release](https://img.shields.io/github/release/liyasthomas/postwoman/all?logo=GitHub)](https://github.com/liyasthomas/postwoman/releases/latest) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fpostwoman.io&logo=Postwoman)](https://postwoman.io) [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen)](CONTRIBUTING.md) [![Financial Contributors on Open Collective](https://img.shields.io/opencollective/all/postwoman?logo=Open-Collective&label=financial+contributors)](https://opencollective.com/postwoman) [![Donate on PayPal](https://img.shields.io/badge/support-PayPal-blue?logo=PayPal)](https://www.paypal.me/liyascthomas) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-blueviolet?logo=Telegram)](https://t.me/postwoman_app) [![Chat on Discord](https://img.shields.io/badge/chat-Discord-violet?logo=discord)](https://discord.gg/GAMWxmR) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fpostwoman.io%2F)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fpostwoman.io&text=%F0%9F%91%BD%20Postwoman%20%E2%80%A2%20API%20request%20builder%20-%20Helps%20you%20create%20your%20requests%20faster%2C%20saving%20you%20precious%20time%20on%20your%20development&original_referer=https%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3D%25F0%259F%2591%25BD%2520Postwoman%2520%25E2%2580%25A2%2520API%2520request%2520builder%2520-%2520Helps%2520you%2520create%2520your%2520requests%2520faster%2C%2520saving%2520you%2520precious%2520time%2520on%2520your%2520development%26url%3Dhttps%3A%2F%2Fpostwoman.io%26hashtags%3Dpostwoman%26via%3Dliyasthomas&via=liyasthomas&hashtags=postwoman)
 
   </p>
   <p>
@@ -315,11 +315,10 @@ See the [CHANGELOG](CHANGELOG.md) file for details.
     <td align="center"><a href="https://nicholaslaroux.com"><img src="https://avatars0.githubusercontent.com/u/1557529?v=4" width="100px;" alt="Nicholas La Roux"/><br /><sub><b>Nicholas La Roux</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=larouxn" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/yubathom"><img src="https://avatars3.githubusercontent.com/u/4117768?v=4" width="100px;" alt="Thomas Yuba"/><br /><sub><b>Thomas Yuba</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=yubathom" title="Code">💻</a></td>
     <td align="center"><a href="http://www.linkedin.com/in/nickpalenchar"><img src="https://avatars1.githubusercontent.com/u/7539781?v=4" width="100px;" alt="Nick Palenchar"/><br /><sub><b>Nick Palenchar</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nickpalenchar" title="Code">💻</a></td>
-    <td align="center"><a href="https://www.lumahealth.io/"><img src="https://avatars3.githubusercontent.com/u/8795767?v=4" width="100px;" alt="Terran Blake"/><br /><sub><b>Terran Blake</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=terranblake" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/AndrewBastin"><img src="https://avatars2.githubusercontent.com/u/9131943?v=4" width="100px;" alt="Andrew Bastin"/><br /><sub><b>Andrew Bastin</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=AndrewBastin" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/vlad0337187"><img src="https://avatars1.githubusercontent.com/u/12682937?v=4" width="100px;" alt="Vladislav"/><br /><sub><b>Vladislav</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=vlad0337187" title="Code">💻</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/vlad0337187"><img src="https://avatars1.githubusercontent.com/u/12682937?v=4" width="100px;" alt="Vladislav"/><br /><sub><b>Vladislav</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=vlad0337187" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/izerozlu"><img src="https://avatars3.githubusercontent.com/u/17386157?v=4" width="100px;" alt="izerozlu"/><br /><sub><b>izerozlu</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=izerozlu" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/JacobAnavisca"><img src="https://avatars2.githubusercontent.com/u/21232366?v=4" width="100px;" alt="Jacob Anavisca"/><br /><sub><b>Jacob Anavisca</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=JacobAnavisca" title="Code">💻</a></td>
     <td align="center"><a href="http://nityanandagohain.github.io"><img src="https://avatars3.githubusercontent.com/u/26831659?v=4" width="100px;" alt="Nityananda Gohain"/><br /><sub><b>Nityananda Gohain</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nityanandagohain" title="Code">💻</a></td>
diff --git a/layouts/default.vue b/layouts/default.vue
index 56c24d1b5..62bee0068 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -138,6 +138,14 @@
                 </g>
               </svg>
             </nuxt-link>
+            <nuxt-link
+              :to="localePath('doc')"
+              :class="linkActive('/doc')"
+              v-tooltip.right="'Documentation'"
+              aria-label="Documentation"
+            >
+              <i class="material-icons">books</i>
+            </nuxt-link>
             <nuxt-link
               :to="localePath('settings')"
               :class="linkActive('/settings')"
@@ -210,6 +218,22 @@
               </ul>
             </nav>
           </div>
+          <div v-else-if="$route.path === '/doc'">
+            <nav class="secondary-nav">
+              <ul>
+                <li>
+                  <a href="#collections" v-tooltip.right="$t('collections')">
+                    <i class="material-icons">folder</i>
+                  </a>
+                </li>
+                <li>
+                  <a href="#documentation" v-tooltip.right="'Documentation'">
+                    <i class="material-icons">insert_drive_file</i>
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
           <div v-else-if="$route.path === '/settings'">
             <nav class="secondary-nav">
               <ul>
@@ -584,7 +608,7 @@ export default {
     });
 
     console.log("%cWe ❤︎ open source!", "background-color:white;padding:8px 16px;border-radius:8px;font-size:32px;color:red;")
-    console.log("%cContribute: https://github.com/liyasthomas/postwoman", "background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;text-decoration:none;")
+    console.log("%cContribute: https://github.com/liyasthomas/postwoman", "background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;")
   },
 
   watch: {
diff --git a/pages/doc.vue b/pages/doc.vue
index a9fd0ab1e..73562914b 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="blue" label="Collection" ref="collection">
+    <pw-section class="blue" label="Import Collection" ref="collections">
       <ul>
         <li>
           <label for="collectionUpload">
@@ -23,7 +23,7 @@
       </ul>
       <ul>
         <li>
-          <label for="rawBody">{{ $t("raw_request_body") }}</label>
+          <label for="rawBody">{{ $t("collections") }}</label>
           <Editor
             v-model="collectionJSON"
             :lang="'json'"

From 158c34d09186ce652c2e328f7edf263c55058343 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sun, 22 Dec 2019 09:20:38 +0530
Subject: [PATCH 3/7] Initial iteration on Collection

---
 assets/css/styles.scss |  1 +
 pages/doc.vue          | 20 ++++++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index d19cb85ea..ac82b6b4c 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -663,6 +663,7 @@ ol li {
   display: inline-flex;
   flex-direction: column;
   flex-grow: 1;
+  justify-content: center;
 }
 
 .flex-wrap {
diff --git a/pages/doc.vue b/pages/doc.vue
index 73562914b..7537c9e1f 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -98,8 +98,24 @@ export default {
 
     getDoc() {
       let json = this.collectionJSON;
-      let html;
-      this.items = html;
+      let collections = JSON.parse(json);
+      for (let i = 0; i < collections.length; i++) {
+        console.log("Collection", i + 1, collections[i].name);
+        let folders = collections[i].folders;
+        for (let i = 0; i < folders.length; i++) {
+          console.log("Folder", i + 1, folders[i].name);
+          let requests = collections[i].requests;
+          for (let i = 0; i < requests.length; i++) {
+            console.log("Request", i + 1, requests[i].name);
+          }
+        }
+        let requests = collections[i].requests;
+        for (let i = 0; i < requests.length; i++) {
+          console.log("Request", i + 1, requests[i].name);
+        }
+      }
+      // let html = this.obj2htmltable(json);
+      // this.items = html;
     }
   }
 };

From 5589c6142381057086e9105f1740c974df78b9af Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sun, 22 Dec 2019 15:26:13 +0530
Subject: [PATCH 4/7] :tada: Display actual Documentation

---
 pages/doc.vue | 64 ++++++++++++++++++++++++++++++++-------------------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/pages/doc.vue b/pages/doc.vue
index 7537c9e1f..6a68099b6 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -49,11 +49,45 @@
     </pw-section>
 
     <pw-section class="green" label="Documentation" ref="documentation">
-      <ul>
-        {{
-          this.items
-        }}
-      </ul>
+      <div>
+        <span v-for="(collection, index) in this.items" :key="index">
+          <span>
+            <h2>
+              Collection #{{ index + 1 }}: {{ collection.name || "None" }}
+            </h2>
+          </span>
+          <span v-for="(folder, index) in collection.folders" :key="index">
+            <h3>Folder #{{ index + 1 }}: {{ folder.name || "None" }}</h3>
+            <span v-for="(request, index) in folder.requests" :key="index">
+              <p>Request #{{ index + 1 }}: {{ request.name || "None" }}</p>
+              <p>path: {{ request.path || "None" }}</p>
+              <p>method: {{ request.method || "None" }}</p>
+              <p>auth: {{ request.auth || "None" }}</p>
+              <p>httpUser: {{ request.httpUser || "None" }}</p>
+              <p>httpPassword: {{ request.httpPassword || "None" }}</p>
+              <p>bearerToken: {{ request.bearerToken || "None" }}</p>
+              <h4>Headers</h4>
+              <span v-for="header in request.headers" :key="header.key">
+                <p>Key: {{ header.key || "None" }}</p>
+                <p>Value: {{ header.value || "None" }}</p>
+              </span>
+              <h4>Parameters</h4>
+              <span v-for="parameter in request.params" :key="parameter.key">
+                <p>Key: {{ parameter.key || "None" }}</p>
+                <p>Value: {{ parameter.value || "None" }}</p>
+              </span>
+              <h4>Payload</h4>
+              <span v-for="payload in request.bodyParam" :key="payload.key">
+                <p>Key: {{ payload.key || "None" }}</p>
+                <p>Value: {{ payload.value || "None" }}</p>
+              </span>
+              <p>rawParams: {{ request.rawParams || "None" }}</p>
+              <p>contentType: {{ request.contentType || "None" }}</p>
+              <p>requestType: {{ request.requestType || "None" }}</p>
+            </span>
+          </span>
+        </span>
+      </div>
     </pw-section>
   </div>
 </template>
@@ -97,25 +131,7 @@ export default {
     },
 
     getDoc() {
-      let json = this.collectionJSON;
-      let collections = JSON.parse(json);
-      for (let i = 0; i < collections.length; i++) {
-        console.log("Collection", i + 1, collections[i].name);
-        let folders = collections[i].folders;
-        for (let i = 0; i < folders.length; i++) {
-          console.log("Folder", i + 1, folders[i].name);
-          let requests = collections[i].requests;
-          for (let i = 0; i < requests.length; i++) {
-            console.log("Request", i + 1, requests[i].name);
-          }
-        }
-        let requests = collections[i].requests;
-        for (let i = 0; i < requests.length; i++) {
-          console.log("Request", i + 1, requests[i].name);
-        }
-      }
-      // let html = this.obj2htmltable(json);
-      // this.items = html;
+      this.items = JSON.parse(this.collectionJSON);
     }
   }
 };

From 10f6bb9cc628433aea9c4e220e50a0aceacc8054 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sun, 22 Dec 2019 15:49:26 +0530
Subject: [PATCH 5/7] :bug: Added error handler

---
 pages/doc.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/pages/doc.vue b/pages/doc.vue
index 6a68099b6..c91216409 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -131,7 +131,16 @@ export default {
     },
 
     getDoc() {
-      this.items = JSON.parse(this.collectionJSON);
+      try {
+        this.items = JSON.parse(this.collectionJSON);
+        this.$toast.info("Documentation generated", {
+          icon: "book"
+        });
+      } catch (e) {
+        this.$toast.error(e, {
+          icon: "code"
+        });
+      }
     }
   }
 };

From c3a6cc133fe119707afd144217dada00085045c2 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sun, 22 Dec 2019 23:28:36 +0530
Subject: [PATCH 6/7] :sparkles: Introducing API Documentation

---
 assets/css/styles.scss |  16 ++-
 pages/doc.vue          | 249 ++++++++++++++++++++++++++++++++++++-----
 2 files changed, 231 insertions(+), 34 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index ac82b6b4c..79e6c1d4a 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -251,7 +251,10 @@ nav.secondary-nav {
 
 h1,
 h2,
-h3 {
+h3,
+h4 {
+  display: flex;
+  align-items: center;
   margin: 0;
   font-weight: 700;
 }
@@ -526,7 +529,9 @@ kbd,
 select,
 input,
 textarea,
-pre {
+pre,
+code {
+  display: inline-flex;
   margin: 4px;
   padding: 8px;
   border-radius: 8px;
@@ -560,9 +565,10 @@ pre.ace_editor {
   z-index: 0;
 }
 
-code {
-  height: 336px;
-  border-radius: 8px;
+kbd,
+code,
+pre {
+  width: auto;
 }
 
 .select-wrapper {
diff --git a/pages/doc.vue b/pages/doc.vue
index c91216409..17685daf2 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="blue" label="Import Collection" ref="collections">
+    <pw-section class="blue" label="Collections" ref="collections">
       <ul>
         <li>
           <label for="collectionUpload">
@@ -10,7 +10,7 @@
               v-tooltip="'JSON'"
             >
               <i class="material-icons">folder</i>
-              <span>Import Collection</span>
+              <span>Import Collections</span>
             </button>
           </label>
           <input
@@ -23,7 +23,6 @@
       </ul>
       <ul>
         <li>
-          <label for="rawBody">{{ $t("collections") }}</label>
           <Editor
             v-model="collectionJSON"
             :lang="'json'"
@@ -50,49 +49,241 @@
 
     <pw-section class="green" label="Documentation" ref="documentation">
       <div>
-        <span v-for="(collection, index) in this.items" :key="index">
-          <span>
-            <h2>
-              Collection #{{ index + 1 }}: {{ collection.name || "None" }}
-            </h2>
-          </span>
-          <span v-for="(folder, index) in collection.folders" :key="index">
-            <h3>Folder #{{ index + 1 }}: {{ folder.name || "None" }}</h3>
-            <span v-for="(request, index) in folder.requests" :key="index">
-              <p>Request #{{ index + 1 }}: {{ request.name || "None" }}</p>
-              <p>path: {{ request.path || "None" }}</p>
-              <p>method: {{ request.method || "None" }}</p>
-              <p>auth: {{ request.auth || "None" }}</p>
-              <p>httpUser: {{ request.httpUser || "None" }}</p>
-              <p>httpPassword: {{ request.httpPassword || "None" }}</p>
-              <p>bearerToken: {{ request.bearerToken || "None" }}</p>
+        <span
+          class="collection"
+          v-for="(collection, index) in this.items"
+          :key="index"
+        >
+          <h2>
+            <i class="material-icons">folder</i>
+            {{ collection.name || "None" }}
+          </h2>
+          <span
+            class="folder"
+            v-for="(folder, index) in collection.folders"
+            :key="index"
+          >
+            <h3>
+              <i class="material-icons">folder_open</i>
+              {{ folder.name || "None" }}
+            </h3>
+            <span
+              class="request"
+              v-for="(request, index) in folder.requests"
+              :key="index"
+            >
+              <h4>
+                <i class="material-icons">insert_drive_file</i>
+                {{ request.name || "None" }}
+              </h4>
+              <p class="doc-desc">
+                <span>
+                  Path: <code>{{ request.path || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Method: <code>{{ request.method || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Authentication:
+                  <code>{{ request.auth || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Uername: <code>{{ request.httpUser || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Password: <code>{{ request.httpPassword || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Token: <code>{{ request.bearerToken || "None" }}</code>
+                </span>
+              </p>
               <h4>Headers</h4>
               <span v-for="header in request.headers" :key="header.key">
-                <p>Key: {{ header.key || "None" }}</p>
-                <p>Value: {{ header.value || "None" }}</p>
+                <p class="doc-desc">
+                  <span>
+                    {{ header.key || "None" }}:
+                    <code>{{ header.value || "None" }}</code>
+                  </span>
+                </p>
               </span>
               <h4>Parameters</h4>
               <span v-for="parameter in request.params" :key="parameter.key">
-                <p>Key: {{ parameter.key || "None" }}</p>
-                <p>Value: {{ parameter.value || "None" }}</p>
+                <p class="doc-desc">
+                  <span>
+                    {{ parameter.key || "None" }}:
+                    <code>{{ parameter.value || "None" }}</code>
+                  </span>
+                </p>
               </span>
               <h4>Payload</h4>
               <span v-for="payload in request.bodyParam" :key="payload.key">
-                <p>Key: {{ payload.key || "None" }}</p>
-                <p>Value: {{ payload.value || "None" }}</p>
+                <p class="doc-desc">
+                  <span>
+                    {{ payload.key || "None" }}:
+                    <code>{{ payload.value || "None" }}</code>
+                  </span>
+                </p>
               </span>
-              <p>rawParams: {{ request.rawParams || "None" }}</p>
-              <p>contentType: {{ request.contentType || "None" }}</p>
-              <p>requestType: {{ request.requestType || "None" }}</p>
+              <p class="doc-desc">
+                <span>
+                  Parameters: <code>{{ request.rawParams || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Content Type: <code>{{ request.contentType || "None" }}</code>
+                </span>
+              </p>
+              <p class="doc-desc">
+                <span>
+                  Request Type: <code>{{ request.requestType || "None" }}</code>
+                </span>
+              </p>
             </span>
           </span>
+          <span
+            class="request"
+            v-for="(request, index) in collection.folders"
+            :key="`request-${index}`"
+          >
+            <h4>
+              <i class="material-icons">insert_drive_file</i>
+              {{ request.name || "None" }}
+            </h4>
+            <p class="doc-desc">
+              <span>
+                Path: <code>{{ request.path || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Method: <code>{{ request.method || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Authentication:
+                <code>{{ request.auth || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Uername: <code>{{ request.httpUser || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Password: <code>{{ request.httpPassword || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Token: <code>{{ request.bearerToken || "None" }}</code>
+              </span>
+            </p>
+            <h4>Headers</h4>
+            <span v-for="header in request.headers" :key="header.key">
+              <p class="doc-desc">
+                <span>
+                  {{ header.key || "None" }}:
+                  <code>{{ header.value || "None" }}</code>
+                </span>
+              </p>
+            </span>
+            <h4>Parameters</h4>
+            <span v-for="parameter in request.params" :key="parameter.key">
+              <p class="doc-desc">
+                <span>
+                  {{ parameter.key || "None" }}:
+                  <code>{{ parameter.value || "None" }}</code>
+                </span>
+              </p>
+            </span>
+            <h4>Payload</h4>
+            <span v-for="payload in request.bodyParam" :key="payload.key">
+              <p class="doc-desc">
+                <span>
+                  {{ payload.key || "None" }}:
+                  <code>{{ payload.value || "None" }}</code>
+                </span>
+              </p>
+            </span>
+            <p class="doc-desc">
+              <span>
+                Parameters: <code>{{ request.rawParams || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Content Type: <code>{{ request.contentType || "None" }}</code>
+              </span>
+            </p>
+            <p class="doc-desc">
+              <span>
+                Request Type: <code>{{ request.requestType || "None" }}</code>
+              </span>
+            </p>
+          </span>
         </span>
       </div>
     </pw-section>
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.collection,
+.folder,
+.request,
+.doc-desc {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  flex: 1;
+  padding: 16px;
+
+  .material-icons {
+    margin-right: 16px;
+  }
+}
+
+.collection {
+}
+
+.folder {
+  border-left: 1px solid var(--brd-color);
+  margin: 16px 0 0;
+}
+
+.request {
+  border: 1px solid var(--brd-color);
+  border-radius: 8px;
+  margin: 16px 0 0;
+
+  h4 {
+    margin: 8px 0;
+  }
+}
+
+.doc-desc {
+  color: var(--fg-light-color);
+  border-bottom: 1px dashed var(--brd-color);
+  margin: 0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+</style>
 
 <script>
 import AceEditor from "../components/ace-editor";

From 2b40db285e9e64ed7b6c4aa9b3ce05d60fa42d03 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Mon, 23 Dec 2019 08:16:45 +0530
Subject: [PATCH 7/7] :sparkles: Introducing API Documentation

---
 README.md              |  7 +++++++
 assets/css/styles.scss |  5 +++++
 pages/doc.vue          | 21 +++++++++++++++++++--
 pages/settings.vue     |  7 +------
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 44b70b869..d855bf086 100644
--- a/README.md
+++ b/README.md
@@ -171,6 +171,13 @@ _Official Postwoman Proxy is hosted by ApolloTV - **[Privacy policy](https://apo
 
 _Requests with Pre-Request Scripts are indicated in History entries_
 
+📄 **API Documentation**: Create and share dynamic API documentation easily, quickly.
+
+**Use-cases:**
+ 1. Add your requests to Collections and Folders
+ 2. Export Collections and easily share your APIs with the rest of your team
+ 3. Import Collections and Generate Documentation on-the-go
+
 ⌨️ **Keyboard Shortcuts**: Optimized for efficiency.
 
 **Shortcuts:**
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 79e6c1d4a..48b6130c3 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -382,6 +382,11 @@ h3.title {
   margin: 4px;
 }
 
+.info {
+  margin-left: 4px;
+  color: var(--fg-light-color);
+}
+
 button {
   display: inline-flex;
   align-items: center;
diff --git a/pages/doc.vue b/pages/doc.vue
index 17685daf2..a14953d4a 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="page">
     <pw-section class="blue" label="Collections" ref="collections">
+      <ul class="info">
+        <li>
+          <p>
+            Import any Postwoman Collection to Generate Documentation on-the-go.
+          </p>
+        </li>
+      </ul>
       <ul>
         <li>
           <label for="collectionUpload">
@@ -76,6 +83,11 @@
                 <i class="material-icons">insert_drive_file</i>
                 {{ request.name || "None" }}
               </h4>
+              <p class="doc-desc">
+                <span>
+                  URL: <code>{{ request.url || "None" }}</code>
+                </span>
+              </p>
               <p class="doc-desc">
                 <span>
                   Path: <code>{{ request.path || "None" }}</code>
@@ -94,7 +106,7 @@
               </p>
               <p class="doc-desc">
                 <span>
-                  Uername: <code>{{ request.httpUser || "None" }}</code>
+                  Username: <code>{{ request.httpUser || "None" }}</code>
                 </span>
               </p>
               <p class="doc-desc">
@@ -160,6 +172,11 @@
               <i class="material-icons">insert_drive_file</i>
               {{ request.name || "None" }}
             </h4>
+            <p class="doc-desc">
+              <span>
+                URL: <code>{{ request.url || "None" }}</code>
+              </span>
+            </p>
             <p class="doc-desc">
               <span>
                 Path: <code>{{ request.path || "None" }}</code>
@@ -178,7 +195,7 @@
             </p>
             <p class="doc-desc">
               <span>
-                Uername: <code>{{ request.httpUser || "None" }}</code>
+                Username: <code>{{ request.httpUser || "None" }}</code>
               </span>
             </p>
             <p class="doc-desc">
diff --git a/pages/settings.vue b/pages/settings.vue
index e76587b94..80c1ec7f8 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -134,12 +134,7 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.info {
-  margin-left: 4px;
-  color: var(--fg-light-color);
-}
-</style>
+<style scoped lang="scss"></style>
 
 <script>
 export default {