Merge pull request #13 from nextbitlabs/feature/default-add-date-slide-number

Update sample slide and README

Author: riccardoscalco

readme.md

@@ -1,10 +1,14 @@
+# onepunch
+
 **onepunch** is a command-line interface to create PDF presentations using web technology.
 
-**onepunch** is designed for designers, it does not provide any default style. Designers can write CSS files and link them in the `index.html`.
+**onepunch** is designed for designers, it does not provide any default style.
+Designers can write CSS files and link them in the `index.html`.
 
 ### Prerequisites
 
-To use **onepunch**, you should have installed **node** and **npm** in your system. Please follow the [official instructions](https://www.npmjs.com/get-npm).
+To use **onepunch**, you should have installed **node** and **npm** in your system.
+Please follow the [official instructions](https://www.npmjs.com/get-npm).
 
 ### Install
 
@@ -14,7 +18,8 @@ Install **onepunch** globally with the following command:
 $ npm install -g @nextbitlabs/onepunch
 ```
 
-Please note that onepunch makes use of [puppeteer](https://github.com/puppeteer/puppeteer/), which will download chromium. This is necessary to print the PDF file.
+Please note that onepunch makes use of [puppeteer](https://github.com/puppeteer/puppeteer/), which will download chromium.
+This is necessary to print the PDF file.
 
 Update **onepunch** to the latest release with:
 
@@ -28,7 +33,13 @@ $ npm update -g @nextbitlabs/onepunch
 $ onepunch init [-n directory-name]
 ```
 
-The command above creates the directory `directory-name` with all the files needed to bootstrap the presentation. The configuration file `onepunch.json` contains configuration parameters, for the moment only the presentation *width* and *height* (in pixels) are available.
+The command above creates the directory `directory-name` with all the files needed to bootstrap the presentation.
+
+The configuration file `onepunch.json` contains configuration parameters, with the following available:
+- `width` and `height`, numeric: slide width and height in pixels;
+- `progress`, string: available `line`, to show a progress line at the bottom of the page, or `none`, to suppress it;
+- `date`, string: presentation date, used by tags `<span data-onepunch="date"></span>` along the presentation;
+- `slideNumber`, bool: whether to visualize the slide number in tags `<span data-onepunch="slide-number"></span>`.
 
 ### View the presentation
 
@@ -53,19 +64,20 @@ Flag `-i` (or `--input`) specifies the HTML file to print, it defaults to "index
 Flag `-o` (or `--output`) specifies the name of the PDF file in output, it defaults to "index.pdf".
 
 ### Update
-
-Update files in the `src` directory according to the latest release of **onepunch**, please note that any custom change inside directory `src` will be overwritten:
+Update **onepunch** to the latest release with:
 
 ```sh
-$ onepunch update
+$ npm update -g @nextbitlabs/onepunch
 ```
 
-The above command assumes you have installed the latest release of **onepunch**.
-If this is not the case, update **onepunch** to the latest release with:
+To align the `src` directory of a past presentation to the latest release of **onepunch**,
+first update **onepunch** itself with the command above, then use:
 
 ```sh
-$ npm update -g @nextbitlabs/onepunch
+$ onepunch update
 ```
+This will make any new feature available to the current presentation.
+Please note that any custom change inside directory `src` will be overwritten.
 
 ### Create custom styles
 
@@ -74,14 +86,14 @@ Each slide is created by means of tag `article`, for example:
 ```html
 <main>
 
-  <!-- Slides 1 -->
+  <!-- Slide 1 -->
   <article>
     <header>
       <h1>My Presentation Title</h1>
     </header>
   </article>
 
-  <!-- Slides 2 -->
+  <!-- Slide 2 -->
   <article>
     <header>
       <h1>My Presentation Title</h1>
@@ -94,7 +106,8 @@ Each slide is created by means of tag `article`, for example:
 </main>
 ```
 
-As usual, designers can define CSS classes to apply custom style. For example, the following class defines a specific grid layout:
+As usual, designers can define CSS classes to apply custom style.
+For example, the following class defines a specific grid layout:
 
 ```css
 .layout-1 {

template/index.html

@@ -13,6 +13,9 @@
 				<header>
 					<h1>My Presentation</h1>
 				</header>
+				<footer>
+					<span data-onepunch="date"></span> / Slide <span data-onepunch="slide-number"></span>
+				</footer>
 			</article>
 
 		</main>

template/onepunch.json

@@ -2,6 +2,6 @@
 	"width": 960,
 	"height": 600,
 	"progress": "line",
-	"date": "",
-	"slideNumber": false
+	"date": "October 21, 2015",
+	"slideNumber": true
 }

template/readme.md

@@ -1,19 +1,41 @@
-Please edit file `index.html` to create your presentation.
+# **onepunch** presentation
 
-Start a local server with:
+### Configuration
+The configuration file `onepunch.json` contains configuration parameters, with the following available:
+- `width` and `height`, numeric: slide width and height in pixels;
+- `progress`, string: available `line`, to show a progress line at the bottom of the page, or `none`, to suppress it;
+- `date`, string: presentation date, used by tags `<span data-onepunch="date"></span>` along the presentation;
+- `slideNumber`, bool: whether to visualize the slide number in tags `<span data-onepunch="slide-number"></span>`.
+
+### View the presentation
+
+Inside the project directory, run:
 
 ```sh
-$ onepunch serve
+$ onepunch serve [-i htmlfile]
 ```
 
-Print the presentation in a PDF file with:
+The command above starts a local server and opens the browser, use the arrow keys to see the next and previous slides.
+Flag `-i` (or `--input`) specifies the HTML file to open, it defaults to "index.html".
+
+### Print the PDF
+
+Inside the project directory, run:
 
 ```sh
-$ onepunch print
+$ onepunch print [-i htmlfile] [-o pdffile]
 ```
 
-Update files in the `src` directory according to the latest release:
+Flag `-i` (or `--input`) specifies the HTML file to print, it defaults to "index.html".
+Flag `-o` (or `--output`) specifies the name of the PDF file in output, it defaults to "index.pdf".
+
+### Update
+
+To align the `src` directory of a past presentation to the latest release of **onepunch**,
+first update **onepunch** itself, then use:
 
 ```sh
 $ onepunch update
 ```
+This will make any new feature available to the current presentation.
+Please note that any custom change inside directory `src` will be overwritten.

template/src/index.css

@@ -1,3 +1,7 @@
+:root {
+	--primary-color: #000000;
+}
+
 html, body {
 	margin: 0;
 	padding: 0;