rtorr / ampersandjs.com

The documentation site for ampersand.js

Documentation site for ampersand.js

This generates the static site that lives here: http://ampersandjs.com/

How it works

The dynamic portions of the site are pulled down from The Internet™.

Specifically, we use module-details to fetch and parse complete info about a module from the npm registry.

The specific modules that get include listed and read from the package.json file in this repository.

As of this writing the relevant portion looks like this:

  ...
  "coreModules": [
    "ampersand",
    "ampersand-state",
    "ampersand-model",
    "ampersand-collection",
    "ampersand-rest-collection",
    "ampersand-view",
    "ampersand-view-switcher",
    "ampersand-router"
  ],
  "formModules": [
    "ampersand-form-view",
    "ampersand-input-view",
    "ampersand-checkbox-view",
    "ampersand-array-input-view",
    "ampersand-select-view"
  ],
  "featuredModules": [
    "bows",
    "emoji-images",
    "getusermedia"
  ],
  ...

The core and form modules are all fetched and dates compared to figure out which are in fact, the most "recent" for use in the home page "recently released" section.

The featured modules are grabbed and rendered in order listed in the "featuredModules" section.

So, updating "recent" doesn't require anything other than running the build script.

Updating featured, just requires picking 3 modules, they will be shown in the order they're listed.

The "docs" pages

These are built entirely from README.md files of the listed projects. They're run through a filter that removes hidden sections (such as "browser support" and "license"), and we also remove anything in between HTML comments in README's that look like this:

<!-- starthide -->
This text will not show up in generated docs
<!-- endhide -->

It's then converted to HTML and rendered using the jade templates.

Perhaps a bit convoluted, but works well enough.

The "learn" pages

These are all in markdown in the learn_markdown directory. There's a bit of metadata at the top.

This is the page title (used to generate what the nav calls it) and an order value that will be used to sort them all.

These don't have to be sequential and nothing will blow up if there are two that are the same or whatnot, they're simply run through a sorter that uses that value to attempt to sort them.

Adding a video

To add a video embed from Vimeo or YouTube, please wrap the iframe with a div.video-container.

Be sure the iframe does not have a set width or height.

Running that fabled "build" script

npm run build

Using something like http-server from npm will make working on the docs a bit easier, because links will work properly.

install it like so:

npm i -g http-server

There's a quick and dirty -w option that will rebuild if anything changes:

npm run build -w

So you can have that in one terminal tab, and just run http-server in the root project directory in another tab and you're up and running.