Giter Club home page Giter Club logo

livedocs's Introduction

#LiveDocs Given a json spec generates a html file which can be used to test calls to an API.

##Install

  npm install -g livedocs

##Usage

To generate Live docs from a spec file just run the livedocs command, the first argument should point to an live docs spec file, the second argument should point to a folder to place the html.

  livedocs ./specs/sample.json ./out

Note that at the moment the ./out folder needs to have a folder containing the major version number of your api.

eg, if you are on version 2.3.99 and that's what it says in your spec, you should ensure there is a folder called v2 in your out directory.

Custom Appearance

Livedocs 2.0.0 accepts 3 new arguments which allow you to customise the presentation and auth method of the generated docs.

livedocs ./livedocs-spec.json ./docs --css custom-docs/style.css --jade ./custom-docs/top.jade --js ./custom-docs/generate-token.js

If you add a js file it should expose two global functions:

window.getQueryHash = function() {};
window.getHeaderHash = function() {};

##Authentication

Livedocs does not support OAuth, it is designed to work with APIs that can serve content to a standalone web page.

We use a key and secret to generate a hash and then send the hashed value along to the server.

##Spec Format The best way to get an idea how the spec should be formed is to look at the examples in the spec directory.

This is an example JSON document taken as input:

And this is the HTML file generated from the html form:

##Format Overview:

{
  "server": "api.mydomain.com",
  "title": "My API Page Title",
  "prefix": "/api/v1",
  "version": "3.2.1",
  "endpoints" : [
    {
      "name": "Assets",
      "description": "All the asset methods",
      "methods": [
        {
          "name": "Create an Asset",
          "synopsis": "Create a new asset.",
          "method": "GET",
          "url": "/assets",
          "parameters": [
            {
              "name": "assetId",
              "required": true,
              "type": "string",
              "location": "query",
              "default": "1",
              "description": "The ID of the asset you wish to create."
            }
          ]
        }
      ]
    }
  ]
}

###Endpoints

An endpoint is a collection of methods with at least a name property.

Endpoints consist of a name, description and an array of methods.

Methods

Each method can have the following properties:

{
  "name": "Create an Asset",
  "synopsis": "What the method does, supports  markdown.",
  "uri": "/assets",
  "method": "GET",
  "parameters": []

}

Note that you can specify middleware here too but it will not appear in the livedocs viewer.

Parameters

Each method should define the parameters which can be passed to the method.

For each parameter you have the following fields:

####name

The name of the method.

####required

Will not allow the test form to be submitted without this value. If the middleware is used the request can also be rejected serverside if the value is missing.

Description

The description that will appear in the testing harness. This field supports Markdown.

####type

This is used for validation, possible values are:

  • string
  • json
  • number

####input

This defines the HTML input that will be used to collect the data. Supported options include:

  • select
  • textarea
  • checkbox

If no input is specified livedocs will default to an input.

If no input type is specified it will become an input. If location is set to body it will be the only field sent in the body.

####Options

If you specify select as the input type you should also add an options array to the parameter object to state which values are allowed for this list.

{
    "name": "order",
    "location": "query",
    "required": true,
    "default": "ASC",
    "input": "select",
    "type": "string",
    "options": [
        "ASC",
        "DESC"
    ],
    "description": "How to order the fields, ASC or DESC."
}

Severside middleware can also be used to ensure values are only accepted which exist in the options array.

Here is a description of the parameters you can set:

parameter:

  {
    "name": "",
    "default": "",
    "location": "query/body/header",
    "hidden": "",
    "type": "number/string/json //html5 input type - text if none provided.",
    "input": "input/checkbox/select - default is input",
    "required": true

  }

##Parameter Examples:

##About Live Docs

Livedocs is inspired by Mashery's IODocs (https://github.com/mashery/iodocs)

The differences between the two are:

1.. Decent support for PUTTING/POSTING JSON bodies. The was actually one of the main reason for writing my own, at the time I started writing there was no support for PUT/POST JSON bodies. I found a pull request from two years previous that had not been responded. I poked mashery about this, but by the time they got back to me (only a day later) I had written most of Livedocs.

2.. No server, livedocs generates a HTML file from your routes, so as long as you have CORS enabled you can post directly to your API from your browser. this can make debugging easier and removes an level of abstraction that was unnecessary. For me at least.

3.. Standalone file, Livedocs works as a standalone file, which means you can just send your consumers a HTML file along with any required auth and they can start using testing your API immediately.

3.. Parameter Validation, Livedocs uses the same data validation types as HTML5 so you get HTML5 validation for free on the front end (assuming your using a reasonably modern browser). I have also written Restify middleware which can automatically validate against the main data types serverside.

eg, if you specified a field as required, if that parameter is no sent to the server the request will be rejected by the middleware just because its in your route spec.

4.. eco system - Livedocs has a number of other plugins that can be used with it to automatically create your routes from folders, auto validate....

5.. In browser crypto, lets users enter their key and secret and it will work out the hash for them.

I did look at making the modifications to IODocs but it felt like IODocs was trying to do more than I needed.

#Issues

Please report any issue here:

https://github.com/simonmcmanus/livedocs/issues

This guide is a work in progress, if you spot any mistakes, please create a github issue.

#Contributing

Please submit pull requests.

#Developing

This command will watch all the relevant files and regenerate the html file when changed.

  grunt dev

#Additional Components:

In the near future I plan to open source the following components which work with Livedocs:

##Livedocs Router

https://github.com/simonmcmanus/livedocs-routeLoader

Store your routes in a logical folder struture and automatically create the spec file and your application from the folder structure

##Livedocs Middleware:

https://github.com/simonmcmanus/livedocs-middleware

validator - check for required values, type checks and ensure enumerated list values are valid.

livedocs's People

Contributors

mikeralphson avatar ninjatadpole avatar simonmcmanus avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

livedocs's Issues

the dependencies is out of date.

C:\Github\livedocs>npm install -g livedocs
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: Use the "buffer" module (https://www.npmjs.com/package/buffer) instead
npm ERR! code ETARGET
npm ERR! notarget No matching version found for esprima-six@~0.0.3
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'derequire'
npm ERR! notarget

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.