Ractive.js Website

Super basic setup

You only need a text editor with Markdown support and preview to start writing documentation. Simply fork the repo, clone your fork and start writing.

# Fork this repo and clone your fork
git clone git@github.com:YOUR_USERNAME/ractivejs.github.io.git ractive.js.org
cd ractive.js.org

# Start editing the docs!

Running the site locally

If you want to run the full site locally, you will need a virtualenv setup. Install the following additional software and do the following commands. Installation of the additional software may vary by platform. Refer to their platform-specific documentation to know more.

• Python 2.7
• pip
• virtualenv

# Create a virtualenv and activate it
virtualenv ractivejs.github.io
cd ractivejs.github.io

# Fork this repo and clone your fork
git clone git@github.com:YOUR_USERNAME/ractivejs.github.io.git src
cd src

# Start the virtualenv
source ../bin/activate

# on Windows start the virtualenv with
..\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Start the webserver
mkdocs serve

# When done developing, deactivate the virtualenv
deactivate

Finding and fixing broken links

# Install broken-link checker
npm install -g broken-link-checker

# Run broken-link checker while mkdocs is running
blc -egorv http://localhost:8000

Conventions

• Everything is written in vanilla Markdown.
• Current documentation goes in the docs directory.
• Legacy documentation goes in the legacy directory.
• Paths should be in lowercase kebab-style (i.e. path-to/my/hello-world.md).
• All links must be relative to the current file.
• Pages should start with a title as first heading.
• The nav bar is managed in mkdocs.yml under pages.

• Providing examples:

  • Create a bare minimum example in the playground that demonstrates only the related property.
  • Get the content data of your example (eg. N4IgF...uEA) and use it to place a RUN IT button right above your code section.
  • Strip down your example (remove unnecessary parts, like el: '#container', unnecessary parts of template, the new keyword, ...) and place it in a code section under Examples header.
  • Follow the other examples' coding style, use 2 spaces per indentation.

  • Example of an example:

    1. Actual working code:

       Html:

       <div id="output"></div>

       Script:

       ractive = new Ractive({
           el: '#output',
           template: `
               <h2>Check the console</h2>
           `,
           data: {
               foo: {
                   bar: 1,
                   baz: 2
               }
           }
       })
       
       console.log(ractive.get('foo')) // => {bar: 1, baz: 2}

    2. Stripped version that is placed into the Examples section:

       <div data-playground="N4IgFiBcoE5SAbAhgFwKYGcUgL4BoQN4YkBjFASwDc0ACAXloDs0B3WgJTMpoApgAOkwEoRaBJFoByAMQB7AK4oADkql4htLbXQBbZcnSSABpu3mAPGABMAPgDCYNKQDWOp7VJymGOQjQWAPQ2tmZaxhpM5gAmqEiSglHaIgBmcnIJYbQiIgBGSDCSAIx42UlaOSj5AF6S1lkiOFlNTDgAlEJCXj5+aAB0CHIA5rwk5NT9Q2govFJpclJtbbSBgQy2tMD5hbQltDV1OCAE2JAgFtHUtBTR9AIgiipK97ZBl1S2uEA"></div>
       
       ```js
       ractive = Ractive({
           data: {
               foo: {
                   bar: 1,
                   baz: 2
               }
           }
       })
       console.log(ractive.get('foo')) // => {bar: 1, baz: 2}            
       ```