annotato

Annotato is a tool designed for viewing source code with lots of comments, whether they are written in a literate programming style or just very well-documented.

Main technologies used are Preact, GraphQL (via Apollo).

Usage

To view a github repository in the tool, navigate to https://annotato.nikbrendler.com/github.com/:owner/:repo. Some example links can be found in Examples.

Motivation

Check out this blog post to read more about motivation for using this tool.

Examples

Here's a few examples of code that are written in this style.

backbone.js - This tool was inspired heavily by how Backbone presents their docs, using docco.
The annotato source code! I recommend starting with the data layer stuff, which is the main meat of this tool, or the literate programming stuff.

Feel free to open an issue/PR to add other examples!

Development

To work with the code itself:

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# test the production build locally
npm run serve

# run tests with jest and preact-render-spy
npm run test

For detailed explanation on how things work, checkout the CLI Readme.

Failure Injections

There are a few failure injections that can be used in dev to test error states manually. To use an injection, add ?inject=${Injection Name} to the URL.