Bespoke-pdf NPM

bespoke-pdf

PDF generator for Bespoke.js

Bespoke Plugin

Download

Download the production version or the development version, or use a package manager.

Usage

bespoke-pdf is simultaneously a bespoke plugin, and a gulp task - the bespoke plugin provides hooks for the gulp task. Both pieces are necessary.

This bespoke plugin is shipped in a UMD format, meaning that it is available as a CommonJS/AMD module or browser global.

For example, when using CommonJS modules:

var bespoke = require('bespoke'),
  pdf = require('bespoke-pdf');

bespoke.from('article', [
  pdf()
]);

Options

setup Function

bespoke.from('article', [
  pdf({
    setup: function () {  
      //prime slide environment for pdf output
      //for instance, disable the "camera" slide or whatever
    }
  })
]);

evalDelay Number

Delay between each shot

When using browser globals:

bespoke.from('article', [
  bespoke.plugins.pdf()
]);

Package managers

npm

$ npm install bespoke-pdf

Bower

$ bower install bespoke-pdf

Gulp Task

Once the bespoke-pdf has been included in a presentation, it can be integrated into a gulpfile.

For this part, bespoke-pdf must be installed via npm.

var pkg = require('./package.json'),
  pdf = require('bespoke-pdf'),
  rimraf = require('gulp-rimraf');

gulp.task('pdf', ['connect'], function () { 
  return pdf(pkg.name + '.pdf')
    .pipe(gulp.dest('dist'));
});

gulp.task('clean:pdf', function() {
  return gulp.src('dist/' + pkg.name + '.pdf')
    .pipe(rimraf());
});

PDF Output Customizations

In some cases, we don't want certain presentation visuals landing in generated PDF's. During PDF generation, bespoke-pdf adds a pdf class to the root <html> element. We can use this class to style any part of the page, e.g. in Stylus:

  .pdf
    #my-fancy-overlay
      display none

Likewise there may be particular slides. Any hidden section element will be removed from the deck prior to PDF generation.

For instance, say we're using bespoke-hash and we have a slide called named-route, we could do

  .pdf
    [data-bespoke-hash="named-route"]
      display none

bespoke-pdf will detect this and remove the slide.

To enable the use markdown without littering it with structural HTML tags, bespoke-pdf also provides another way to style and hide slides by adding a data-pdf-id attribute based on the slides headline, which is determined by the first h1, h2, h3, h4, h5, li, p or span element in that order.

For instance, say there's a slide with an h2 element named "Emphatic Slide!". bespoke-pdf automatically creates a data-pdf-id attribute with the value of emphatic-slide! (we lowercase and replace spaces with dashes).

This allows us to remove it like so:

[data-pdf-id="emphatic-slide!"]
  display none

See the example/src/styles/main.styl file for an example of this - and notice that example/dist/presentation-hello-world.pdf lacks the "Emphatic Slide!" slide.

License

MIT License

bespoke-pdf v1.1.3