✨ Introducing API Documentation
This commit is contained in:
Liyas Thomas
@@ -251,7 +251,10 @@ nav.secondary-nav {
|
|||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3,
|
||||||
|
h4 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
@@ -526,7 +529,9 @@ kbd,
|
|||||||
select,
|
select,
|
||||||
input,
|
input,
|
||||||
textarea,
|
textarea,
|
||||||
pre {
|
pre,
|
||||||
|
code {
|
||||||
|
display: inline-flex;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@@ -560,9 +565,10 @@ pre.ace_editor {
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
kbd,
|
||||||
height: 336px;
|
code,
|
||||||
border-radius: 8px;
|
pre {
|
||||||
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-wrapper {
|
.select-wrapper {
|
||||||
|
|||||||
243
pages/doc.vue
243
pages/doc.vue
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<pw-section class="blue" label="Import Collection" ref="collections">
|
<pw-section class="blue" label="Collections" ref="collections">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<label for="collectionUpload">
|
<label for="collectionUpload">
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
v-tooltip="'JSON'"
|
v-tooltip="'JSON'"
|
||||||
>
|
>
|
||||||
<i class="material-icons">folder</i>
|
<i class="material-icons">folder</i>
|
||||||
<span>Import Collection</span>
|
<span>Import Collections</span>
|
||||||
</button>
|
</button>
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
@@ -23,7 +23,6 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<label for="rawBody">{{ $t("collections") }}</label>
|
|
||||||
<Editor
|
<Editor
|
||||||
v-model="collectionJSON"
|
v-model="collectionJSON"
|
||||||
:lang="'json'"
|
:lang="'json'"
|
||||||
@@ -50,41 +49,190 @@
|
|||||||
|
|
||||||
<pw-section class="green" label="Documentation" ref="documentation">
|
<pw-section class="green" label="Documentation" ref="documentation">
|
||||||
<div>
|
<div>
|
||||||
<span v-for="(collection, index) in this.items" :key="index">
|
<span
|
||||||
<span>
|
class="collection"
|
||||||
|
v-for="(collection, index) in this.items"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
<h2>
|
<h2>
|
||||||
Collection #{{ index + 1 }}: {{ collection.name || "None" }}
|
<i class="material-icons">folder</i>
|
||||||
|
{{ collection.name || "None" }}
|
||||||
</h2>
|
</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>
|
</span>
|
||||||
<span v-for="(folder, index) in collection.folders" :key="index">
|
</p>
|
||||||
<h3>Folder #{{ index + 1 }}: {{ folder.name || "None" }}</h3>
|
<p class="doc-desc">
|
||||||
<span v-for="(request, index) in folder.requests" :key="index">
|
<span>
|
||||||
<p>Request #{{ index + 1 }}: {{ request.name || "None" }}</p>
|
Method: <code>{{ request.method || "None" }}</code>
|
||||||
<p>path: {{ request.path || "None" }}</p>
|
</span>
|
||||||
<p>method: {{ request.method || "None" }}</p>
|
</p>
|
||||||
<p>auth: {{ request.auth || "None" }}</p>
|
<p class="doc-desc">
|
||||||
<p>httpUser: {{ request.httpUser || "None" }}</p>
|
<span>
|
||||||
<p>httpPassword: {{ request.httpPassword || "None" }}</p>
|
Authentication:
|
||||||
<p>bearerToken: {{ request.bearerToken || "None" }}</p>
|
<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>
|
<h4>Headers</h4>
|
||||||
<span v-for="header in request.headers" :key="header.key">
|
<span v-for="header in request.headers" :key="header.key">
|
||||||
<p>Key: {{ header.key || "None" }}</p>
|
<p class="doc-desc">
|
||||||
<p>Value: {{ header.value || "None" }}</p>
|
<span>
|
||||||
|
{{ header.key || "None" }}:
|
||||||
|
<code>{{ header.value || "None" }}</code>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
</span>
|
</span>
|
||||||
<h4>Parameters</h4>
|
<h4>Parameters</h4>
|
||||||
<span v-for="parameter in request.params" :key="parameter.key">
|
<span v-for="parameter in request.params" :key="parameter.key">
|
||||||
<p>Key: {{ parameter.key || "None" }}</p>
|
<p class="doc-desc">
|
||||||
<p>Value: {{ parameter.value || "None" }}</p>
|
<span>
|
||||||
|
{{ parameter.key || "None" }}:
|
||||||
|
<code>{{ parameter.value || "None" }}</code>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
</span>
|
</span>
|
||||||
<h4>Payload</h4>
|
<h4>Payload</h4>
|
||||||
<span v-for="payload in request.bodyParam" :key="payload.key">
|
<span v-for="payload in request.bodyParam" :key="payload.key">
|
||||||
<p>Key: {{ payload.key || "None" }}</p>
|
<p class="doc-desc">
|
||||||
<p>Value: {{ payload.value || "None" }}</p>
|
<span>
|
||||||
|
{{ payload.key || "None" }}:
|
||||||
|
<code>{{ payload.value || "None" }}</code>
|
||||||
</span>
|
</span>
|
||||||
<p>rawParams: {{ request.rawParams || "None" }}</p>
|
</p>
|
||||||
<p>contentType: {{ request.contentType || "None" }}</p>
|
|
||||||
<p>requestType: {{ request.requestType || "None" }}</p>
|
|
||||||
</span>
|
</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>
|
||||||
|
<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>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -92,7 +240,50 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<script>
|
||||||
import AceEditor from "../components/ace-editor";
|
import AceEditor from "../components/ace-editor";
|
||||||
|
|||||||
Reference in New Issue
Block a user