Meteor Community Logo

Meteor Community

Packosphere

undefined's Avatar

mdg:tutorial-diff-box

v0.2.0•Published 9 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

To display Git patches parsed by mdg:tutorial-step-diff-compiler in a nice code box, use the mdg:tutorial-diff-box package.

meteor add mdg:tutorial-diff-box

Features

Diff box screenshot

The code box currently displays:

  1. The step number and commit message in the top left
  2. Filename and link to GitHub in the top right
  3. Code with gray background for context and green background for changed/added lines, code highlighted based on the file extension of the file

Usage

This assumes you have already done the steps to set up the patch build plugin.

In your client-side JavaScript code, register a tutorial:

1DiffBox.registerTutorial("simple-todos", {
2  gitHubRepoName: "meteor/simple-todos",
3  patchFilename: "simple-todos.multi.patch"
4});

This is used to generate the links to GitHub, and reduce the amount of boilerplate by defining a short name like "react" instead of "react.multi.patch".

Now you should be able to use diff boxes in your Spacebars templates:

1{{> DiffBox tutorialName="simple-todos" step="4.1"}}