Skip to content

Instantly share code, notes, and snippets.

@SohanChy

SohanChy/api_doc_gen.html

Last active February 11, 2019 05:58
Show Gist options
  • Save SohanChy/a8d21180525929e1426f121b577da114 to your computer and use it in GitHub Desktop.
Save SohanChy/a8d21180525929e1426f121b577da114 to your computer and use it in GitHub Desktop.
Download ZIP
Api doc generator for TH wiki format
Raw
api_doc_gen.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Api Doc Gen</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
</div>
<div id="inputForm" class="column is-three-quarters">
<h1 class="title">
Api Doc Gen
</h1>
<div class="field">
<label class="label">Name</label>
<div class="control">
<input name="eName" class="input" type="text" placeholder="Login">
</div>
</div>
<div class="field">
<label class="label">Endpoint</label>
<div class="control">
<input name="endpoint" class="input" type="text" placeholder="POST /api/auth/login">
</div>
</div>
<div class="field level-right">
<div class="control">
<button onclick="insertCopy()" id="plusButton" class="button is-link is-rounded"> <i class="fas fa-plus"></i></button>
</div>
</div>
<div id="parametersEntry">
</div>
<br />
<div class="field">
<label class="label">Usage</label>
<div class="control">
<input name="usage" class="input" type="text" placeholder="POST /api/auth/login">
</div>
</div>
<div class="field">
<div class="control">
<textarea name="output" class="textarea is-small is-info" placeholder="Output"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea name="errorOutput" class="textarea is-small is-info" placeholder="Error"></textarea>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link" onclick="generate()">Generate</button>
</div>
<div class="control">
<button class="button is-text">Clear</button>
</div>
</div>
</div>
<div class="column">
</div>
</div>
</div>
</section>
<hr>
<br><br><br><br>
<section class="container" id="genDoc">
<h4 id="dName"></h4>
<div class="table-wrap"><table class="confluenceTable tablesorter tablesorter-default">
<thead><tr class="tablesorter-headerRow"><th class="confluenceTh sortableHeader" data-column="0" tabindex="0" unselectable="on" style="user-select: none;"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner"><strong>Name</strong></div></div></div></div></th><th class="confluenceTh sortableHeader" data-column="1" tabindex="0" unselectable="on" style="user-select: none;"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner">Description</div></div></div></div></th></tr></thead><tbody><tr><td class="confluenceTd">
<strong>Endpoint</strong></td><td class="confluenceTd"><pre id="dEndpoint"></pre></td></tr>
<tr id="paramRow">
</tr>
<tr><td colspan="1" class="confluenceTd">
<strong>Usage</strong></td><td colspan="1" class="confluenceTd"><pre id="dUsage"></pre></td></tr><tr><td colspan="1" class="confluenceTd">
<strong>Output</strong></td><td colspan="1" class="confluenceTd">
<pre id="dOutput">
</pre>
</td></tr><tr><td colspan="1" class="confluenceTd">
<strong>Error</strong></td><td colspan="1" class="confluenceTd">
<pre id="dError">
</pre></td></tr></tbody></table></div>
</section>
<div class="is-invisible">
<div id="paramInputGroup">
<div class="field-body">
<div class="field">
<p class="control is-expanded has-icons-left">
<input name="pName[]" class="input" type="text" placeholder="Parameter Name">
<span class="icon is-small is-left">
<i class="fas fa-list-alt"></i>
</span>
</p>
</div>
<div class="field">
<p class="control is-expanded has-icons-left">
<input name="pType[]" class="input" type="text" placeholder="Type: String/Int...">
<span class="icon is-small is-left">
<i class="fas fa-list-alt"></i>
</span>
</p>
</div>
<div class="field">
<p class="control is-expanded has-icons-left">
<input name="pDesc[]" class="input" type="text" placeholder="Required/Optional/[1,2]">
<span class="icon is-small is-left">
<i class="fas fa-list-alt"></i>
</span>
</p>
</div>
</div>
</div>
</div>
<script>
var i = 0;
const entryGroup = document.getElementById("paramInputGroup");
function insertCopy() {
const newEntryGroup = entryGroup.cloneNode(true);
i = i + 1;
newEntryGroup.setAttribute("id", "paramInputGroup_" + i.toString());
var container = document.getElementById("parametersEntry");
container.appendChild(newEntryGroup);
}
document.onkeyup = function (e) {
if (e.ctrlKey && e.which == 13) {
insertCopy();
}
};
(function() {
insertCopy();
})();
</script>
<script>
function generate(){
const inputs = toJSON(document.getElementById("inputForm"));
document.getElementById("dName").innerHTML = inputs.eName;
document.getElementById("dEndpoint").innerHTML = inputs.endpoint;
document.getElementById("dUsage").innerHTML = inputs.usage;
document.getElementById("dOutput").innerHTML = strAddAfterEveryNewline(inputs.output,70);
document.getElementById("dError").innerHTML = strAddAfterEveryNewline(inputs.errorOutput,70);
var insertString = "";
var i = 0;
for(i = 0; i < inputs.pName.length; i++){
if(!isEmpty(inputs.pName[i])){
var template = `<tr><td colspan="1" class="confluenceTd"><span style="color: rgb(40,40,40);">${inputs.pName[i]}</span></td>
<td colspan="1" class="confluenceTd"><p>${inputs.pType[i]}</p></td>`
if(inputs.pDesc[i]){
template = template + `<td colspan="1" class="confluenceTd">${inputs.pDesc[i]}</td></tr>`;
}
else {
template = template + `<td colspan="1" class="confluenceTd"><span style="color: rgb(128,128,128);">Optional</span></td></tr>`;
}
insertString = insertString + template;
}
}
if(insertString){
var rowStr = `<td class="confluenceTd">
<strong>Parameter</strong></td><td class="confluenceTd"><div class="table-wrap"><table class="confluenceTable tablesorter tablesorter-default">
<thead><tr class="tablesorter-headerRow"><th class="confluenceTh sortableHeader" data-column="0" tabindex="0" unselectable="on" style="user-select: none;"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner">
<div class="tablesorter-header-inner"><div class="tablesorter-header-inner">Name</div></div></div></div></th><th class="confluenceTh sortableHeader" data-column="1" tabindex="0" unselectable="on" style="user-select: none;"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner">Value</div></div></div></div></th><th class="confluenceTh sortableHeader" data-column="2" tabindex="0" unselectable="on" style="user-select: none;"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner"><div class="tablesorter-header-inner">Required</div></div></div></div></th></tr></thead>
<tbody id="paramTableBody">
${insertString}
</tbody>
</table></div></td>`;
document.getElementById("paramRow").innerHTML = rowStr;
}
else {
document.getElementById("paramRow").innerHTML = "";
}
var newWindow = window.open();
newWindow.document.write(document.getElementById("genDoc").innerHTML);
}
function isEmpty(str) {
return (!str || 0 === str.length);
}
function toJSON( form ) {
var obj = {};
var elements = form.querySelectorAll( "input, select, textarea" );
for( var i = 0; i < elements.length; ++i ) {
var element = elements[i];
var name = element.name;
var value = element.value;
if(name){
if(name.endsWith("[]")){
cleanName = name.replace('[]','');
if(obj[ cleanName ] === undefined){
obj[ cleanName ] = [];
}
obj[ cleanName ].push(value);
}
else {
obj[ name ] = value;
}
}
}
return obj;
}
function strAddAfterEveryNewline(str, n){
var arr = str.split("\n");
for(var i = 0; i < arr.length; i ++){
if(arr[i].length > n){
arr[i] = strAddAfterEvery(arr[i],n).join('\n');
}
}
return arr.join("\n");
}
function strAddAfterEvery(str, n) {
var ret = [];
var i;
var len;
for(i = 0, len = str.length; i < len; i += n) {
ret.push(str.substr(i, n))
}
return ret
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment