Laboon are modern documentation generator for your application, with simple configuration. That can generate beautiful and simple documentation from your JavaScript, TypeScript, Markdown or even Vue Component. With block comments /**...*/
annotation you can describe the function / docs and Laboon will generate a user interface for you.
Laboon is the name of large whale in the anime Straw Hat Pirates detail
Light Mode |
---|
Dark Mode |
Graph Preview |
We will update soon
Install laboon with :
$ npm install -g laboon
# or
$ yarn global add laboon
Show any options and format using laboon --help
$ laboon --help
π Modern documentation generator for your application
Usage
$ laboon <input>
Commands
clean Removing cache on generator
Options
--format, -f File format to compile
--exclude, -e Excluding file / folders
--source, -s Source directory to generate (optional)
--destination, -d Destination folder of docs (default .laboon)
--host, -h Host of development preview
--port, -p Port of development preview
--siteName, -S Set site name for Gridsome
--siteDescription, -D Set site description for Gridsome
--siteUrl, -U Set site url for Gridsome
--pathPrefix, -P Set path prefix for Gridsome
Examples
$ laboon -f vue -f md -e node_modules -s src -d docs
Last, run this command :
$ laboon
First of all, create laboon.yml on your project. With content like code below :
# laboon.yml
format: format # format
exclude: exclude # exclude
source: source # source
destination: destination # destination
siteName: siteName # siteName
siteDescription: siteDescription # siteDescription
siteUrl: siteUrl # siteUrl
pathPrefix: pathPrefix # pathPrefix
host: host # host
port: port # port
You can use separate folder for destination, eg. public/docs
Next, create block comment on your documented method or variable. Like below example inside PHP file :
<?php
namespace App\Http\Controllers;
use App\User;
use App\Http\Controllers\Controller;
class UserController extends Controller
{
/**
* @name Example API PHP
* @type Routes
* @method GET
* @parameters {
* username : String Required Null
* email : String Required Null
* }
*/
public function show($id)
{
return view('user.profile', ['user' => User::findOrFail($id)]);
}
}
Markdown file :
----
name : Example Document
type : Documents
----
# Hello World
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis natus dolore quo iste! Quibusdam quisquam laborum quos eligendi natus, reiciendis praesentium delectus ducimus enim. Aspernatur dicta provident veniam aliquam obcaecati!
### Example Flowchart
[flow]
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
[/flow]
Debitis natus dolore quo iste! Quibusdam quisquam laborum quos eligendi natus, reiciendis praesentium delectus ducimus enim. Aspernatur dicta provident veniam aliquam obcaecati!
JavaScript file :
class User {
/**
* @name Example API Node.js
* @type Routes
* @method GET
* @parameters {
* username : String Required Null
* email : String Required Null
* }
*/
index(req, res) {
res.json('name' => 'John Doe')
}
}
Or, even your Vue Component file :
<template>
<div>
<!-- Form header -->
<slot name="header">
<!-- `<th>title</th>` -->
<th>title</th>
</slot>
</div>
</template>
<script>
// This is a description of the component
export default {
name: 'MyComponent',
props: {
// The name of the form, up to 8 characters
name: {
type: [String, Number],
required: true,
validator () {}
}
},
methods: {
// @vuese
// Used to manually clear the form
clear () {
// Fire when the form is cleared
// @arg The argument is a boolean value representing xxx
this.$emit('onclear', true)
}
}
}
</script>
For further information about documenting Vue file, please see Vuese detail.
This project under MIT License