✨ Introducing API Documentation
This commit is contained in:
Liyas Thomas
@@ -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 {
|
||||
|
||||
249
pages/doc.vue
249
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";
|
||||
|
||||
Reference in New Issue
Block a user