Popcorn.js Documentation

The Popcorn.js documentation was written using Jekyll, YAML Front Matter and the liquid templating system.

Requirements

• Ruby - I would recommend using RubyGems
• Jekyll - sudo gem install jekyll if you run into any issues, take a look here
• Pygments - used for styled code samples, take a look at the installation instructions

Setting Up a Local Instance

If you want to setup a local instance to test with run the following command (after installing all of the requirements listed above):

jekyll serve --baseurl '/popcorn-docs'

This will setup up a local copy of the documentation that can be accessed at http://localhost:4000/popcorn-docs/

Writing Documentation

All of our documentation is written in Markdown and is organized into the following format (for the most part):

---
// This is the title of the item we are documenting
// this ends up being the id for the generated element on the page, so be sure to make it unique!
title: Footnote
---

// Title as it will appear on the page, probably the same as the above title
# Footnote #

// A header for the purpose
## Purpose ##

// A brief explanation of what this method/function/etc is supposed to do
Adds text to an element on the page.

// A header for the options (if there is any)
## Options ##

// If there are any options that need to be explained (function parameters, object properties, etc) do it here
// A bulleted list describing each option
// Be sure to specify the desired type(s) i.e Number
* **start** \[Number\] - The time you want the footnote to appear.
* **end** \[Number\] - The time you want the footnote to be hidden.
* **text** \[String\] - The text you want to appear in the target.
* **target** \[String\] - The id of the document element that the text is to be attached to. This target element must exist on the DOM

// Provide a brief code sample and/or a jsfiddle showcasing a live example
## Example ##

// Be sure to wrap any code snippets in the following line of liquid templating code
// to make sure that we get code highlighting and line numbers
{% highlight js linenos %}
    var p = Popcorn( "#video" ).footnote({
      start: 5,
      end: 15,
      text: 'This text will appear in "target". ',
      target: "footnotediv"
    });
// also be sure to close it once your code snippet is done
{% endhighlight %}

Community

• File a Bug