✨ Introducing API Documentation

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:**

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;

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">

pages/settings.vue

@@ -134,12 +134,7 @@
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.info {
-  margin-left: 4px;
-  color: var(--fg-light-color);
-}
-</style>
 
 <script>
 export default {