From b70b52bde15cffea0e3976b793d8409a8acabc45 Mon Sep 17 00:00:00 2001 From: Tsutomu Kawamura Date: Wed, 15 Mar 2017 18:16:29 +0900 Subject: [PATCH] Update package.json and README --- README.md | 117 ++++++++++----------------------------------------- package.json | 29 ++----------- 2 files changed, 27 insertions(+), 119 deletions(-) diff --git a/README.md b/README.md index 27bcdc9..32dcc24 100644 --- a/README.md +++ b/README.md @@ -4,19 +4,14 @@ > Front-end printing solution - previewable and live-reloadable! -Recently, we say "front-end" everyday. Then why don't we make the printing documents in front-end? We believe we can make it perfectly without back-end. Paper CSS is just [a small snippet of CSS](https://raw.githubusercontent.com/cognitom/paper-css/master/paper.css), but it helps us create them in browser easily. - -- ***New!***: HTML --> PDF generation via CLI. [See detail here](CLI). +Recently, we say "front-end" every day. Then why don't we make the printing documents in front-end? We believe we can make it perfectly without back-end. Paper CSS is just [a small snippet of CSS](https://raw.githubusercontent.com/cognitom/paper-css/master/paper.css), but it helps us create them in browser easily. ## Table of Contents - [Installation](#installation) -- [Usage](#usage) -- [CLI](#cli) - - [preview](#preview) - - [create](#create) - - [export](#export) -- [Try](#try) +- [Basic Usage](#basic-usage) +- [Live Preview](#live-preview) +- [PDF Generation](#pdf-generation) - Why Paper CSS? - [Previewable](#previewable) - [Live-reloading](#live-reloading) @@ -28,7 +23,7 @@ Recently, we say "front-end" everyday. Then why don't we make the printing docum Get Paper CSS from [cdnjs](https://cdnjs.com/libraries/paper-css) (recommended): ```html - + ``` Or download [paper.css](https://raw.githubusercontent.com/cognitom/paper-css/master/paper.css) file from GitHub manually, or via npm: @@ -37,7 +32,7 @@ Or download [paper.css](https://raw.githubusercontent.com/cognitom/paper-css/mas $ npm install paper-css ``` -## Usage +## Basic Usage Load paper-css into `` like this: @@ -50,7 +45,7 @@ Load paper-css into `` like this: ``` -Set the class of `` and set also "sheet" for each sheet. +Set the class of `` and also set "sheet" for each sheet. ```html @@ -71,113 +66,47 @@ Set the class of `` and set also "sheet" for each sheet. See also [the examples](examples/) for detail. -## CLI - -We have small tool for previewing and PDF generation with ease. To use Paper CSS as a CLI tool, install it in global: - -```bash -$ npm install --global paper-css -``` - -**Note**: to use Paper CSS as just CSS, you don't have to install CLI tool. - -`paper` has three subcommands: - -- [preview](#preview) -- [create](#create) -- [export](#export) - -### preview - -Preview your HTML file with live-reloading. The command below starts the preview server and open the HTML document in your browser automatically: - -```bash -$ paper preview -``` - -You can also omit `preview` subcommand. Simply type like this: - -```bash -$ paper -``` - -If you have no document yet, check [our examples](examples/) and the next section. +## Live Preview -**Note**: `paper preview` doesn't have any option at this point. - -### create - -```bash -$ paper create -``` - -Or use this shortcut: `$ paper c ` - -All options are optional. - -- `--size` or `-s`: page size - `A4`, `A5`, `A3` -- `--padding`: padding - `10mm`, `15mm`, `20mm`, `25mm`, `none` -- `--landscape` or `-l`: landscape mode - -### export - -Export your HTML as PDF. The command below generates a PDF file. +Install [live-server](https://github.com/tapio/live-server): ```bash -$ paper export +$ npm install --global live-server ``` -Or use this shortcut: `$ paper e ` - -All options are optional. - -- `--size` or `-s`: page size - `A4`, `A5`, `A3` -- `--landscape` or `-l`: in landscape orientation -- `--background` or `-b`: with background images or color -- `--wait`: waiting time (msec) before printing -- `--output` or `-o`: where to export PDF - -**Note**: *the value in CSS* is prior over options above, so you don't have to set `--size` or `--landscape` basically. - -Here's an example of usage: +Then, preview your HTML file: ```bash -$ paper export your-document.html --background --wait 3000 --output any/location/your-document.pdf +$ live-server your-document.html ``` -## Try +Your browser will open the document. And the browser will automatically reload the page when changes are detected. -If you haven't have our CLI yet, install it: +See more detail and all options [here](https://github.com/tapio/live-server#usage-from-command-line). -```bash -$ npm install --global paper-css -``` +## PDF Generation -Create an empty HTML document: +Install [electron-pdf](https://github.com/fraserxu/electron-pdf): ```bash -$ paper create first.html --size A5 --landscape - +$ npm install --global electron-pdf ``` -Open it in your favorite editor and open preview in the browser: +Then, generate a PDF file from your HTML file: ```bash -$ atom first.html -$ paper first.html +$ electron-pdf your-document.html your-document.pdf ``` -Edit the file and save your change. Then the preview will be automatically reloaded. To export it as PDF, type a command below: +See more details and all options [here](https://github.com/fraserxu/electron-pdf#all-available-options). -```bash -$ paper export first.html -``` +**Note**: we used to provide a small CLI tool `paper-css` while `v0.2.x`, we've dropped it in favor of `electron-pdf` which is a better option to do the same, basically. ## Why Paper CSS? ### Previewable -You can check the design and layout before printing. See the browser like when you build a webpage. +You can check the design and layout before printing. See the browser like when you build a web page. ![Preview](images/preview.png) @@ -187,7 +116,7 @@ You can check the design and layout before printing. See the browser like when y ### Live-reloading -It's just HTML/CSS, so we can edit it with live-reloading. See [preview](#preview) section above. +It's just HTML/CSS, so we can edit it with live-reloading. See [Live Preview](#live-preview) section above. ![Live reloading](images/live-reload.png) diff --git a/package.json b/package.json index 7b4de8e..70b13aa 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,6 @@ "name": "paper-css", "version": "0.2.3", "description": "Paper CSS for happy printing", - "bin": { - "paper": "./bin/paper.js" - }, "files": [ "bin", "lib", @@ -27,33 +24,15 @@ "url": "https://github.com/cognitom/paper-css/issues" }, "homepage": "https://github.com/cognitom/paper-css", - "dependencies": { - "async-to-gen": "^1.3.0", - "connect": "^3.5.0", - "connect-livereload": "^0.6.0", - "fs-promise": "^1.0.0", - "livereload": "^0.6.0", - "meow": "^3.7.0", - "nightmare": "^2.9.1", - "opn": "^4.0.2", - "portfinder": "^1.0.10", - "reify": "^0.4.4", - "serve-static": "^1.11.1" - }, "devDependencies": { "clean-css": "^3.4.23", - "mocha": "^3.2.0", - "request": "^2.79.0", - "request-promise-native": "^1.0.3", - "standard": "^8.6.0" + "electron-pdf": "^1.2.0", + "live-server": "^1.2.0" }, "scripts": { "build": "npm run minify && npm run export", "minify": "cleancss paper.css -o paper.min.css", - "test": "npm run standard && npm run mocha", - "standard": "standard lib/* test/*", - "mocha": "mocha --require reify --require async-to-gen/register test/*.js", - "preview": "./bin/paper.js examples/receipt.html", - "export": "./bin/paper.js export examples/receipt.html --output images/receipt.pdf" + "preview": "live-server examples/receipt.html", + "export": "electron-pdf examples/receipt.html images/receipt.pdf" } }