export markdown from docs (#1358)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

assets/md/docs.md

@@ -0,0 +1,221 @@
+{{#collections}}
+
+# {{name}}
+
+## {{#folders}}
+
+## Folder: {{name}}
+
+{{#requests}}
+
+### {{name}}
+
+**Method**: {{method}}
+
+**RequestURL**: `{{{url}}}{{{path}}}`
+
+{{#isHeaders}}
+**Headers**:
+
+<table>
+<tr>
+<th>Key</th>
+<th>Value</th>
+</tr>
+{{#headers}}
+<tr>
+<td>{{{key}}}</td>
+<td>`{{{value}}}`</td>
+</tr>
+{{/headers}}
+</table>
+{{/isHeaders}}
+
+{{#isParams}}
+**Params**:
+
+<table>
+<tr>
+<th>type</th>
+<th>Key</th>
+<th>Value</th>
+</tr>
+{{#params}}
+<tr>
+<td>{{type}}</td>
+<td>{{{key}}}</td>
+<td>{{{value}}}</td>
+</tr>
+{{/params}}
+</table>
+{{/isParams}}
+
+{{#isAuth}}
+**Authentication Type**: {{{auth}}}  
+{{/isAuth}}
+
+{{#bearerToken}}
+**BearerToken**: `{{{.}}}`
+{{/bearerToken}}
+
+{{#isAuthBasic}}
+Username: `{{{httpUser}}}`  
+Password: `{{{httpPassword}}}`
+{{/isAuthBasic}}
+
+{{#isRawParams}}
+**RawParams**:
+
+```json
+{{{rawParams}}}
+```
+
+{{/isRawParams}}
+
+{{#contentType}}
+**ContentType**: `{{{contentType}}}`
+{{/contentType}}
+
+{{#preRequestScript}}
+**Pre Request Script**:
+
+```js
+{
+  {
+    {
+      preRequestScript
+    }
+  }
+}
+```
+
+{{/preRequestScript}}
+
+{{#testScript}}
+**Test Script**:
+
+```js
+{
+  {
+    {
+      testScript
+    }
+  }
+}
+```
+
+{{/testScript}}
+
+{{/requests}}
+
+---
+
+{{/folders}}
+
+{{#requests}}
+
+## {{name}}
+
+**Method**: {{method}}
+
+**RequestURL**: `{{{url}}}{{{path}}}`
+
+{{#isHeaders}}
+**Headers**:
+
+<table>
+<tr>
+<th>Key</th>
+<th>Value</th>
+</tr>
+{{#headers}}
+<tr>
+<td>{{{key}}}</td>
+<td>`{{{value}}}`</td>
+</tr>
+{{/headers}}
+</table>
+{{/isHeaders}}
+
+{{#isParams}}
+**Params**:
+
+<table>
+<tr>
+<th>type</th>
+<th>Key</th>
+<th>Value</th>
+</tr>
+{{#params}}
+<tr>
+<td>{{type}}</td>
+<td>{{{key}}}</td>
+<td>{{{value}}}</td>
+</tr>
+{{/params}}
+</table>
+{{/isParams}}
+
+{{#isAuth}}
+**Authentication Type**: {{{auth}}}  
+{{/isAuth}}
+
+{{#bearerToken}}
+**BearerToken**: `{{{.}}}`
+{{/bearerToken}}
+
+{{#isAuthBasic}}
+Username: `{{{httpUser}}}`  
+Password: `{{{httpPassword}}}`
+{{/isAuthBasic}}
+
+{{#isRawParams}}
+**RawParams**:
+
+```json
+{{{rawParams}}}
+```
+
+{{/isRawParams}}
+
+{{#contentType}}
+**ContentType**: `{{{contentType}}}`
+{{/contentType}}
+
+{{#preRequestScript}}
+**Pre Request Script**:
+
+```js
+{
+  {
+    {
+      preRequestScript
+    }
+  }
+}
+```
+
+{{/preRequestScript}}
+
+{{#testScript}}
+**Test Script**:
+
+```js
+{
+  {
+    {
+      testScript
+    }
+  }
+}
+```
+
+{{/testScript}}
+
+{{/requests}}
+
+{{/collections}}
+
+---
+
+Made with [Hoppscotch](https://github.com/hoppscotch/hoppscotch)

nuxt.config.js

@@ -321,6 +321,11 @@ export default {
           use: { loader: "worker-loader" },
           exclude: /(node_modules)/,
         })
+        config.module.rules.push({
+          test: /\.md$/i,
+          use: { loader: "raw-loader" },
+          exclude: /(node_modules)/,
+        })
       }
     },
     parallel: true,

package-lock.json

@@ -3382,6 +3382,11 @@
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
           "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
+        },
+        "mustache": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/mustache/-/mustache-2.3.2.tgz",
+          "integrity": "sha512-KpMNwdQsYz3O/SBS1qJ/o3sqUJ5wSb8gb0pul8CO0S56b9Y2ALm8zCfsjPXsqGFfoNBkDwZuZIAjhsZI03gYVQ=="
         }
       }
     },
@@ -11454,9 +11459,9 @@
       }
     },
     "mustache": {
-      "version": "2.3.2",
+      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/mustache/-/mustache-2.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.0.1.tgz",
-      "integrity": "sha512-KpMNwdQsYz3O/SBS1qJ/o3sqUJ5wSb8gb0pul8CO0S56b9Y2ALm8zCfsjPXsqGFfoNBkDwZuZIAjhsZI03gYVQ=="
+      "integrity": "sha512-yL5VE97+OXn4+Er3THSmTdCFCtx5hHWzrolvH+JObZnUYwuaG7XV+Ch4fR2cIrcYI0tFHxS7iyFYl14bW8y2sA=="
     },
     "mute-stream": {
       "version": "0.0.8",
@@ -13914,6 +13919,52 @@
         "unpipe": "1.0.0"
       }
     },
+    "raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "rc9": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-1.2.0.tgz",

package.json

@@ -33,6 +33,7 @@
     "firebase": "^8.1.2",
     "graphql": "^15.4.0",
     "graphql-language-service-interface": "^2.4.3",
+    "mustache": "^4.0.1",
     "nuxt": "^2.14.10",
     "nuxt-i18n": "^6.15.4",
     "paho-mqtt": "^1.1.0",
@@ -62,6 +63,7 @@
     "jest-serializer-vue": "^2.0.2",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
+    "raw-loader": "^4.0.2",
     "sass": "^1.30.0",
     "sass-loader": "^10.1.0",
     "vue-jest": "^3.0.7",

pages/doc.vue

@@ -72,6 +72,28 @@
           <p v-if="this.items.length === 0" class="info">
             {{ $t("generate_docs_first") }}
           </p>
+          <div v-else class="row-wrapper">
+            <div
+              v-tooltip.bottom="{
+                content: !fb.currentUser
+                  ? $t('login_with_github_to') + $t('create_secret_gist')
+                  : fb.currentUser.provider !== 'github.com'
+                  ? $t('login_with_github_to') + $t('create_secret_gist')
+                  : null,
+              }"
+            >
+              <button
+                :disabled="
+                  !fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
+                "
+                class="icon"
+                @click="createDocsGist"
+              >
+                <i class="material-icons">code</i>
+                <span>{{ $t("create_secret_gist") }}</span>
+              </button>
+            </div>
+          </div>
           <div>
             <span class="collection" v-for="(collection, index) in this.items" :key="index">
               <h2>
@@ -147,9 +169,9 @@
                       </span>
                     </p>
                   </span>
-                  <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
+                  <h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
-                  <span v-if="request.bodyParam">
+                  <span v-if="request.bodyParams">
-                    <p v-for="payload in request.bodyParam" :key="payload.key" class="doc-desc">
+                    <p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
                       <span>
                         {{ payload.key || $t("none") }}:
                         <code>{{ payload.value || $t("none") }}</code>
@@ -243,9 +265,9 @@
                     </span>
                   </p>
                 </span>
-                <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
+                <h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
-                <span v-if="request.bodyParam">
+                <span v-if="request.bodyParams">
-                  <p v-for="payload in request.bodyParam" :key="payload.key" class="doc-desc">
+                  <p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
                     <span>
                       {{ payload.key || $t("none") }}:
                       <code>{{ payload.value || $t("none") }}</code>
@@ -292,27 +314,27 @@
   @apply flex-col;
   @apply justify-center;
   @apply flex-1;
-  @apply p-8;
+  @apply p-4;
 
   .material-icons {
-    @apply mr-8;
+    @apply mr-4;
   }
 }
 
 .folder {
   @apply border-l;
   @apply border-brdColor;
-  @apply mt-8;
+  @apply mt-4;
 }
 
 .request {
   @apply border;
   @apply border-brdColor;
   @apply rounded-lg;
-  @apply mt-8;
+  @apply mt-4;
 
   h4 {
-    @apply mt-8;
+    @apply mt-4;
   }
 }
 
@@ -330,16 +352,53 @@
 </style>
 
 <script>
+import { fb } from "~/helpers/fb"
+import Mustache from "mustache"
+import DocsTemplate from "~/assets/md/docs.md"
+
 export default {
   data() {
     return {
+      fb,
       collectionJSON: "[]",
       items: [],
+      docsMarkdown: "",
     }
   },
   methods: {
+    async createDocsGist() {
+      await this.$axios
+        .$post(
+          "https://api.github.com/gists",
+          {
+            files: {
+              "api-docs.md": {
+                content: this.docsMarkdown,
+              },
+            },
+          },
+          {
+            headers: {
+              Authorization: `token ${fb.currentUser.accessToken}`,
+              Accept: "application/vnd.github.v3+json",
+            },
+          }
+        )
+        .then((response) => {
+          this.$toast.success(this.$t("gist_created"), {
+            icon: "done",
+          })
+          window.open(response.html_url)
+        })
+        .catch((error) => {
+          this.$toast.error(this.$t("something_went_wrong"), {
+            icon: "error",
+          })
+          console.log(error)
+        })
+    },
+
     uploadCollection() {
-      this.rawInput = true
       let file = this.$refs.collectionUpload.files[0]
       if (file !== undefined && file !== null) {
         let reader = new FileReader()
@@ -365,6 +424,25 @@ export default {
         this.$toast.info(this.$t("docs_generated"), {
           icon: "book",
         })
+        const docsMarkdown = Mustache.render(DocsTemplate, {
+          collections: this.items,
+          isHeaders() {
+            return this.headers.length
+          },
+          isParams() {
+            return this.params.length
+          },
+          isAuth() {
+            return this.auth !== "None"
+          },
+          isAuthBasic() {
+            return this.httpUser && this.httpPassword
+          },
+          isRawParams() {
+            return this.rawParams && this.rawParams !== "{}"
+          },
+        })
+        this.docsMarkdown = docsMarkdown.replace(/^\s*[\r\n]/gm, "\n")
       } catch (e) {
         this.$toast.error(e, {
           icon: "code",