Local Prototype JS API Docs

By Zach Dennis on 02 10 2009

I like to have useful information accessible to me at a moment’s notice. I’m a fan of Sam Stephenson’s Prototype library and I really like the layout and usefulness of their API page, http://api.prototypejs.org . As much as I love going out to the internets to get the latest documentation I love it available locally. Here’s a short step by step on how to build Prototype’s docs locally.

First, grab the Prototype source from github and make sure you’ve got updated submodules. Sprockets and PDoc are both needed to build Prototype’s documentation:

git clone git://github.com/sstephenson/prototype.git
cd prototype
git submodule init
git submodule update vendor/sprockets vendor/pdoc

Next, you’ll need to make sure you have the following ruby libraries installed: rake, maruku, and treetop:

sudo gem install -r rake maruku treetop

Now build the docs:

rake doc:build

This will create a doc/ subdirectory with all of the html/js/css files. Open doc/index.html and you’re all set! Unfortunately the default template being used isn’t the same that is at http://api.prototypejs.org . There’s no nice sidebar. We can fix this by using savetheclocktower’s prototype-pdoc templates. Change directories back to the directory where you had cloned prototype. We need to clone another project from github:

git clone git://github.com/savetheclocktower/prototype-pdoc-template.git

Now all we’ve got to do is symlink the html templates from prototype-pdoc-template into the prototype directory and rebuild the docs:

cd prototype/templates
mv html html.original
ln -s ../../prototype-pdoc-template/html html
rake doc:build

That’s it! Open up doc/index.html and you’ll see the searchable sidebar. Now if you’re on OSX go create a Fluid app for the docs and give it a nice Prototype icon. You can find a good PNG logo inside the Prototype project at templates/htmlimages/logo.png

In the end it’s a beautiful thing to have quickly at your fingertips.