@sewatech/bespoke-course NPM

= Bespoke for Course template :uri-bespoke: http://markdalgleish.com/projects/bespoke.js/ :uri-asciidoctor-bespoke: https://github.com/asciidoctor/asciidoctor-bespoke/ :bespoke-course-version: 0.4.3

== Overview

The goal of the bespoke-course project is to enable the writing of course slidedecks based on {uri-bespoke}Bespoke.js and the {uri-asciidoctor-bespoke}Asciidoctor converter for Bespoke.js.

== Prerequisites

In order to use bespoke-course, you must satisfy the same prerequisites as {uri-asciidoctor-bespoke}#prerequisitesasciidoctor-bespoke.

. NodeJS + tested with v9, v10 and v12

$ npm install

. Ruby et Bundler + tested with Ruby 2.5

bundle install

It is not mandatory to install Gulp globally, as the npm run-script command uses a local installation of Gulp.

== Setup

=== All by hand

Create a directory, add a package.json file and define the JavaScript dependendies:

source,json,subs="verbatim,quotes,attributes"

{ "name": "example-course", "version": "1.0.0", "scripts": { "build": "gulp build", "start": "gulp serve", "print": "print-slides --bc_course=$npm_package_name" }, "dependencies": { "@sewatech/bespoke-course": "^{bespoke-course-version}" }, "devDependencies": { "gulp": "4.x" }

}

Download the dependencies:

$ npm install

Add a Gemfile file and define the Ruby dependencies:

source,subs="verbatim,quotes"

source 'https://rubygems.org'

gem 'asciidoctor', '~> 1.5', '>= 1.5.6.2'

gem 'asciidoctor-bespoke', github: 'sewatech/asciidoctor-bespoke'

Download the dependencies:

$ bundle install

Add a gulpfile.js file:

source,javascript,subs="verbatim,quotes"

'use strict';

require('@sewatech/bespoke-course/gulpfile.js');

Create the main source file src/index.adoc:

source,asciidoc,subs="verbatim,quotes"

= Sample Slidedeck \include::{template_dir}/headers.adoc[]

\include::{template_dir}/start.adoc[]

\include::{template_dir}/end.adoc[]

Build the slidedeck:

$ npm run build

Or run it in a local server:

$ npm start

=== From example

The node module provides an empty project in its template/ directory.

Initialize the JavaScrip project, and add the dependency:

$ npm init -y $ npm install @sewatech/bespoke-course $ cp -r node_modules/@sewatech/bespoke-course/template/* ./

Download the dependencies (JS and Ruby):

$ npm install $ bundle install

Build the slidedeck:

$ npm run build

Or run it in a local server:

$ npm start

=== Yeoman

-TBD-

== Creating Slides

=== One file per chapter

Create a new src/chapter1.adoc file with a second level title, and 2 styles: title and chapter.

source,asciidoc,subs=""

.title.chapter == Chapter 1

Subject 1
Subject 2

.cue

This chapter is the first one.

Include the file in the index.adoc:

source,asciidoc,subs="verbatim,quotes"

= Sample Slidedeck \include::{template_dir}/headers.adoc[]

\include::{template_dir}/start.adoc[]

//======================== \include::chapter1.adoc[] //========================

\include::{template_dir}/end.adoc[]

=== Content slides

The other slides are regular https://github.com/asciidoctor/asciidoctor-bespoke#content-slides[asciidoc content slides], with https://github.com/asciidoctor/asciidoctor-bespoke/blob/master/README.adoc#speaker-notes[speaker notes].

source,asciidoc,subs=""

== Slide 1.1

Bla Bla

.cue

Notes for the first slide

== Slide 1.2

Bla Bla Bla

.cue

Notes for the second slide

To show the speaker notes on the screen, just hover the title of the slide.

=== Formatting

The template provides some CSS classes.

Margin and padding margin-top-1, margin-top-2,... (up to 20) margin-bottom-N, margin-left-N, margin-right-N padding-top-1, margin-top-2,... margin-bottom-N, margin-left-N, margin-right-N
Absolute position top-1, top-2,... (up to 20) bottom-N, left-N, right-N
Alignment ** center
Width width-100, width-95, width-90,..., width-5 5 by 5, in %
Text small, big line-through, underline ** Maximum 3 levels of bullet points

=== Grid

CSS styles for grids: