juliancwirko:pretty-diff

v1.0.1Published 9 years ago

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

Pretty Diff - package for Meteor

Pretty Diff is here because sometimes you want to share changes in your code with your clients. The fastest way to do this is to use git diff which is hard to read for non technical person.

This package tries to solve that problem. You can use it in your Meteor apps.

Working example

Usage

Install it:
$ meteor add juliancwirko:pretty-diff

In your Meteor app use three templates:

{{> prettyDiffInput}}
{{> prettyDiffError}}
{{> prettyDiffOutput}}

The first one is a file input, the second displays errors (mainly when the file format is wrong - not so important) and the third one is an autogenerated side-by-side diff output. It will be similar to that one from GitHub or Bitbucket (css/html formated).

After all this you will be able to download a ready-to-send html version. You can add a custom title and description to it. This is optional.

How it works?

You simply need to generate your .diff file by running git diff > foo.diff (the simplest way, more: http://git-scm.com/docs/git-diff) (it can be any proper plain/text, plain/x-patch or plain/x-diff file). Then you should load it into the browser using the file input above. The file will not be stored anywhere so your data is safe. It will only be processed to generate html. (You can also clone this entire app and run it locally)

Customization

You can overwrite all css styles and place your 'input', 'error' and 'output' templates in different places on the page. (that’s why it isn't one template).

If you want more custom changes (template overwrites etc.) you can use this package: https://github.com/aldeed/meteor-template-extension

There is also a triggered custom jQuery event pretty-diff-success on .js-fake-file-name You can use it for some UI operations after file load. Example:

Template.jumbotron.events({
    'pretty-diff-success .js-fake-file-name': function () {
        $('html, body').stop(true, false).animate({
            scrollTop: $('main').position().top
        }, 'slow', 'linear');
    }
});

Also you can use global helper isPrettyDiffDataLoaded Example:

{{#unless isPrettyDiffDataLoaded}}
    {{> promoTemplate}}
{{else}}
    {{> prettyDiffOutput}}
{{/unless}}

Third parties used here (thanks!)

TODO

  • labels customization
  • more customization options for html export file
  • pdf export
  • ??? (PR are welcomed)