Coder Social home page Coder Social logo

surveylegend / hapi-docs Goto Github PK

View Code? Open in Web Editor NEW
64.0 9.0 11.0 5.24 MB

Beautiful API documentation generator for Hapi using Vue

License: MIT License

JavaScript 27.44% HTML 0.70% Vue 68.82% Procfile 0.05% SCSS 3.00%
hapi hapi-plugin api api-documentation static-site-generator vue api-docs-generator

hapi-docs's Introduction

npm downloads MIT license

Introduction

NOTE: Version 3.x of this project is in pure ESM and can not be used in CommonJS projects. If you want to use this project in a CommonJS project, please use v2.x. Version 2 and 3 are at feature parity, it's jst the imports and exports that differ. This is to support those who have not made the switch to ESM yet.

hapi-docs is perhaps the best and most modern API Documentation Generator out there. From your code blocks to description texts, you simply type everything in Markdown. Then all you need to do is to enjoy a blazing fast single-page responsive documentation, which smartly supports linkability, Syntax highlighting, RTL languages, and perfectionist eyes. hapi-docs is an open-source library brought to you by SurveyLegend®.

Features

  • Intuitive design — Inspired by Stripe’s API docs. The description of your API resides on the left part of the documentation, while all of the code examples reside on the right. Of course the layout is fully responsive and flawlessly adapts to tablets and phones.

  • Single page — The whole documentation resides on a single page, without sacrificing linkability. As you scroll through the documentation, your browser’s hash will update to the nearest section, which means linking to a particular point in the documentation remains natural and easy.

  • Scroll spy — Thanks to our custom and optimized scroll spy script, the far left navigation will smartly display your current position in the documentation, while scrolling through the documentation. It's swift and remains excellent even for larger documents.

  • Dark theme — Seamless switching between light and dark theme using a toggle. Supports prefers-color-scheme media query for automatic switching as well.

  • Markdown support — Use Markdown to describe your API. Markdown makes it easy to articulate your documentation.

  • Code examples in multiple languages — Configurable support for multiple languages. Easily choose which language to currently display in your documentation by switching between tabs.

  • Syntax highlighting — Supports over 100 languages out of the box.

  • RTL Support — Full Right-to-Left support for languages such as Arabic, Persian (Farsi), Hebrew, etc.

  • Anchor tags — With one click, users can easily link to a parameter, thanks to auto generated anchor tags.

Installation

This package can be used in hapi v19 or higher.

You can install the package via yarn:

$ yarn add @surveylegend/hapi-docs

Usage

Note Inert is a required dependency for hapi-docs to work properly.

import { readFile } from 'node:fs/promises'
import Hapi from '@hapi/hapi'
import Inert from '@hapi/inert'
import Joi from 'joi'
import HapiDocs from '@surveylegend/hapi-docs'

async function startServer() {
    const server = Hapi.server({
        host: 'localhost',
        port: 3000
    })
    
    const { version } = JSON.parse((await readFile('./package.json')).toString())

    await server.register([
        {
            plugin: Inert
        },
        {
            plugin: HapiDocs,
            options: {
                info: {
                    title: 'Test API Reference',
                    version
                }
            }
        }
    ])

    await server.start()

    console.log(`Server listening on ${server.info.uri}`)
}

startServer().catch(console.error)

Demo

You can see a live demo version of hapi-docs. Check it out at hapi-docs

Documentation

Plugin Options

  • endpoint: (string) The path of the documentation - default: /docs
  • basePath: (string) The base path before the API, i.e. /v2 - default: /
  • templatePath: (string) The absolute path to the template folder, i.e. /template
  • host: (string) The hostname or IP serving the API, i.e. localhost:3000
  • scheme: (string) The transfer protocol of the API, i.e. http, https
  • pathPrefixSize: (number) The segment of the URL path that is used to group endpoints - default: 1
  • sortTags: (string) The sort method for groups, i.e. name, ordered - default: name
  • sortEndpoints: (string) The sort method for endpoints, i.e. path, method, ordered - default: path
  • info
    • title: (string) The title of the documentation - default: API Reference
    • version: (string) The version number of the API - default: 0.0.1
    • descriptions: (array) The description of the API.
  • tags: (array) Contains tag objects
    • name: (string) The name of the group.
    • descriptions: (array) The description of the group.
    • order: (int) The order which groups are sorted by.
    • deprecated: (boolean) Whether a group is deprecated - default: false
    • internal: (boolean) Whether a group is internal - default: false
    • uppercase: (boolean) Whether a group name is uppercase - default: false
  • errors:
    • descriptions: (array) The description of the errors.
    • codes: (array) Contains error code objects
      • status: (string) The status of the error code, i.e. 418 - I'm A Teapot
      • description: (string) The description of the error code.
  • auth: (boolean, string or object) The security strategy used for plugin resources - default: false

Route Options

  • order: (int) The order which endpoints are sorted by.
  • deprecated: (boolean) Whether an endpoint is deprecated - default: false
  • internal: (boolean) Whether an endpoint is internal - default: false

Tagging API Routes

If you want a route to appear in the documentation, you have to set tags: [api] for this specific route.

Here is an example snippet of a route option:

{
  method: 'GET',
  path: '/route',
  options: {
    handler: [...],
    [...]
    tags: ['api']
  }
}

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security-related issues, please email [email protected] instead of using the issue tracker.

Credits

Developed and designed by:

hapi-docs is inspired by hapi-swagger, lout, and Stripe’s API docs; and fully sponsored by SurveyLegend®.

License

The MIT License (MIT). Please see License File for more information.

hapi-docs's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hapi-docs's Issues

Ability to document miscellaneous information

It would be very useful if there was a way to document "extra information", such as how to build CDN urls, for example.

I would suggest this is added much like errors, auth, etc, as an array of optional pages which could be inserted into the docs, i.e:

{ plugin: HapiDocs,
      options: {
        pages: [
          {
            name: 'CDN Urls',
            title: 'Some page title here'
            descriptions: [
              "Some different pararaphs go here",
              "Relating to the subject matter"
            ]
          }
        ],
        ...
      }
}

Undocumented dependency requirements

If you attempt to run this on a project without the Inert plugin installed, the plugin fails to run. This appears in your integration example but is not explicitly documented :)

the stacktrace is here:

{ AssertionError [ERR_ASSERTION]: Unknown handler: directory
    at new AssertionError (internal/assert.js:269:11)
...

Dependency issues with vue-cli

I've fixed this in my fork but I'm not a Vue user so I'm not sure it's the correct fix.

You'll get this error trying to install:

npm ERR! code 1
npm ERR! path /home/ant/Projects/hapi-docs
npm ERR! command failed
npm ERR! command sh -c vue-cli-service build

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ant/.npm/_logs/2021-02-25T09_17_44_566Z-debug.log
❯ npm install --save-dev @vue/cli-service@latest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: @surveylegend/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.12" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"3.0.6" from @vue/[email protected]
npm ERR! node_modules/@vue/compiler-sfc
npm ERR!   peerOptional @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/[email protected]
npm ERR!   node_modules/@vue/cli-service
npm ERR!     dev @vue/cli-service@"4.5.11" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/ant/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ant/.npm/_logs/2021-02-25T09_18_18_185Z-debug.log

Regressing @vue/cli-service to v4.4 will remove the dependency on Vue 3 and allow the project to build.

Validation documentation isn't comprehensive

It seems that the documentation generator ignores important items such as:

  • Nested object documentation
  • Conditionals like Joi.when
  • Min + Max on arrays
  • String sizes
  • Nested array items
  • Restricted inputs (Joi.only())

Would be great to support these!

Make it easier to add all routes

From the usage instructions of hapi-docs:

If you want a route to appear in the documentation, you have to set tags: [api] for this specific route.

I find this really annoying, for a few reasons:

  1. I have to go in and add tags : ['api'] to every single API route individually, of which I have a large number. Adding these tags is tedious.
  2. We use an /api prefix in the URL, as many people do, to delineate which routes are APIs. The tag needlessly duplicates this information.
  3. I am forced to add an api tag to any route that I want to document, even if the route is not an API. Thus, the tag is actually nonsensical.

What I really want is to document all routes by default, the way that lout does. Or at least make it easy to document all routes under the /api URL prefix at once, without adding tags to each individual route.

Where should I place logo?

Thanks for this beautiful library in advance!

I couldn't find which directory I should place my logo. I created /src/assets/images/logo.png path in my root directory, it didn't work. Can you help me with this?

Migrate to @hapi

The hapi ecosystem migrated to scoped packages a few days ago and all the other packages have been deprecated. I think your dependencies needs to be updated.

If I have some time this weekend I'll try to put up a PR.

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.