New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
svg-paper - npm Package Compare versions
Comparing version 0.0.6 to 0.0.7
| { | ||
| "name": "svg-paper", | ||
| "version": "0.0.6", | ||
| "version": "0.0.7", | ||
| "description": "The world's most maintainable way to create paper-printable documents 🖨💘", | ||
@@ -5,0 +5,0 @@ "homepage": "https://github.com/ttskch/svg-paper", |
173
README.md
@@ -20,7 +20,9 @@ # svg-paper | ||
| * [npm](#npm) | ||
| * [How to prepare SVG template](how-to-prepare-svg-template) | ||
| * [Basic usage](#basic-usage) | ||
| * [Beautify preview screen](beautify-preview-screen) | ||
| * [Passing variables from back-end to front-end](passing-variables-from-back-end-to-front-end) | ||
| * [PHP and Twig example](php-and-twig-example) | ||
| * [Tips](#tips) | ||
| * [Hiding content before placeholders are replaced](#hiding-content-before-placeholders-are-replaced) | ||
| * [With non Node.js back-end](#with-non-nodejs-back-end) | ||
| * [e.g. PHP and Twig](#eg-php-and-twig) | ||
| * [Hiding content before placeholders are replaced](#hiding-content-before-placeholders-are-replaced) | ||
| * [PDF generation](#pdf-generation) | ||
@@ -32,11 +34,9 @@ | ||
| You can print beautiful and maintainable paper documents by following steps: | ||
| You can print beautiful and maintainable paper documents by following steps. | ||
| 1. Design the document with [Adobe XD](https://www.adobe.com/products/xd.html), [Figma](https://www.figma.com/), or something | ||
| 1. Export it as SVG | ||
| 1. Embed SVG into your HTML and fix it with **svg-paper** | ||
| 1. Embed SVG into your HTML and fix it with **svg-paper** on client side | ||
| 1. That's it 💥 | ||
| To learn more please see [this doc](docs/workflows/README.md) 📝 | ||
| ## Installation | ||
@@ -46,13 +46,7 @@ | ||
| You can get built assets from [jsDelivr](https://www.jsdelivr.com/package/npm/svg-paper). | ||
| You can get the built assets from [jsDelivr](https://www.jsdelivr.com/package/npm/svg-paper). | ||
| ```html | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svg-paper@x.x.x/dist/svg-paper.min.css"> | ||
| <script src="https://cdn.jsdelivr.net/npm/svg-paper@x.x.x/dist/svg-paper.min.js"></script> | ||
| <script> | ||
| paper = new SvgPaper() | ||
| paper.replace('%placeholder%', 'Actual value') | ||
| </script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svg-paper/dist/svg-paper.min.css"> | ||
| <script src="https://cdn.jsdelivr.net/npm/svg-paper/dist/svg-paper.min.js"></script> | ||
| ``` | ||
@@ -62,3 +56,3 @@ | ||
| Of course you can install via [npm](https://www.npmjs.com/package/svg-paper). | ||
| Of course you also can install via [npm](https://www.npmjs.com/package/svg-paper). | ||
@@ -69,13 +63,28 @@ ```bash | ||
| ```js | ||
| import SvgPaper from 'svg-paper' | ||
| ## How to prepare SVG template | ||
| paper = new SvgPaper() | ||
| paper.replace('%placeholder%', 'Actual value') | ||
| ``` | ||
| See [this doc](docs/how-to-prepare-svg-template.md) 📝 | ||
| ## Basic usage | ||
| You can replace or adjust SVG contents in HTML easily with svg-paper like following. | ||
| First, just embed SVG content in `<body></body>` like following. | ||
| ```html | ||
| <body> | ||
| <svg>...</svg> | ||
| </body> | ||
| ``` | ||
| Next, load `svg-paper[.min].js` with `<script>` tag or import/require `svg-pager[.min].js` as a module. | ||
| ```html | ||
| <script src="svg-paper.min.js"></script> | ||
| <script> | ||
| const paper = new SvgPaper() | ||
| // ... | ||
| </script> | ||
| ``` | ||
| or | ||
| ```js | ||
@@ -87,3 +96,7 @@ import SvgPaper from 'svg-paper' | ||
| const paper = new SvgPaper() | ||
| ``` | ||
| Then you can replace or adjust SVG contents in DOM easily with svg-paper like following. | ||
| ```js | ||
| paper | ||
@@ -98,3 +111,3 @@ // replace placeholder to actual value | ||
| // set max width to 800 and brings the element #_caseName to the center of 800 width area | ||
| // set max width to 800 and brings the element #selector2 to the center of 800 width area | ||
| .adjustText('#selector2', 800, 'middle') | ||
@@ -122,2 +135,4 @@ | ||
| ## Beautify preview screen | ||
| To beautify preview screen, you should add only 3 lines to your HTML 👍 | ||
@@ -147,42 +162,22 @@ | ||
| To learn more about usage please see [this doc](docs/workflows/README.md) or [some test codes](js/tests/real-world.test.js). | ||
| ## Passing variables from back-end to front-end | ||
| ## Tips | ||
| svg-paper depends on DOM, so in most cases you have to pass variables to be replaced with placeholders in template from back-end to front-end. | ||
| ### Hiding content before placeholders are replaced | ||
| svg-paper replaces placeholders and adjust text/textarea after DOM loaded, so the content before replaced and adjusted will be shown on the screen for a moment 🤔 | ||
| This problem is very easy to solve just by adding some "blinder" layer on the content and disappear it after `.apply()` 👍 | ||
| ```html | ||
| <body> | ||
| <div id="blinder" style="width:100vw; height:100vh; background-color:#ccc"></div> | ||
| <svg>...</svg> | ||
| </body> | ||
| ``` | ||
| ```js | ||
| paper.apply() | ||
| document.querySelector('#blinder').style.display = 'none' | ||
| ``` | ||
| ## With non Node.js back-end | ||
| Even if your back-end isn't Node.js, of course you can use svg-paper 👍 | ||
| The most easy ways is just passing replacements and text/textarea adjustment parameters to front-end as JSON string. | ||
| ### e.g. PHP and Twig | ||
| ### PHP and Twig example | ||
| ```php | ||
| // Controller | ||
| public function paper(YourModel $model, YourPaperDefinition $paper) | ||
| public function paperAction($id) | ||
| { | ||
| $model = $repository->findById($id); | ||
| return $this->render('paper.html.twig', [ | ||
| 'svg' => $paper->getSvg(), | ||
| 'replacements' => $paper->getReplacements($model), | ||
| 'textAdjustments' => $paper->getTextAdjustments(), | ||
| 'textAreaAdjustments' => $paper->getTextAreaAdjustments(), | ||
| 'svg' => file_get_contents('/path/to/paper.svg'), | ||
| 'replacements' => [ | ||
| '%name%' => $model->name, | ||
| // ... and more | ||
| ], | ||
| ]); | ||
@@ -192,40 +187,2 @@ } | ||
| ```php | ||
| // YourPaperDefinition | ||
| class YourPaperDefinition | ||
| { | ||
| public function getSvg() | ||
| { | ||
| return file_get_contents('/path/to/paper.svg'); | ||
| } | ||
| public function getReplacements(YourModel $model): array | ||
| { | ||
| return [ | ||
| '%placeholder1%' => 'Actual value 1', | ||
| // ... and more | ||
| ]; | ||
| } | ||
| public function getTextAdjustments(): array | ||
| { | ||
| return [ | ||
| // selector => [args for SvgPaper.adjustText()] | ||
| '#selector1' => [1000], | ||
| '#selector2' => [800, 'middle'], | ||
| '#selector3' => [800, 'end'], | ||
| ]; | ||
| } | ||
| public function getTextareaAdjustments(): array | ||
| { | ||
| // selector => [args for SvgPaper.adjustTextarea()] | ||
| return [ | ||
| '#selector2' => [600, 300], | ||
| // ... and more | ||
| ]; | ||
| } | ||
| } | ||
| ``` | ||
| ```twig | ||
@@ -243,4 +200,3 @@ {# paper.html.twig #} | ||
| <div data-replacements="{{ replacements|json_encode }}"></div> | ||
| <div data-text-adjustments="{{ textAdjustments|json_encode }}"></div> | ||
| <div data-textarea-adjustments="{{ textAdjustments|json_encode }}"></div> | ||
| <script src="svg-paper.min.js"></script> | ||
@@ -255,4 +211,2 @@ <script src="your-script.js"></script> | ||
| const replacements = $('[data-replacements]').data('replacements') | ||
| const textAdjustments = $('[data-adjustments]').data('text-adjustments') | ||
| const textareaAdjustments = $('[data-adjustments]').data('textarea-adjustments') | ||
@@ -265,11 +219,24 @@ const paper = new SvgPaper() | ||
| for (let [selector, args] of Object.entries(textAdjustments)) { | ||
| paper.adjustText(selector, ...args) | ||
| } | ||
| paper.apply() | ||
| ``` | ||
| for (let [selector, args] of Object.entries(textareaAdjustments)) { | ||
| paper.adjustTextarea(selector, ...args) | ||
| } | ||
| ## Tips | ||
| ### Hiding content before placeholders are replaced | ||
| svg-paper replaces placeholders and adjust text/textarea after DOM loaded, so the content before replaced and adjusted will be shown on the screen for a moment 🤔 | ||
| This problem is very easy to solve just by adding some "blinder" layer on the content and disappear it after `.apply()` 👍 | ||
| ```html | ||
| <body> | ||
| <div id="blinder" style="width:100vw; height:100vh; background-color:#ccc"></div> | ||
| <svg>...</svg> | ||
| </body> | ||
| ``` | ||
| ```js | ||
| paper.apply() | ||
| document.querySelector('#blinder').style.display = 'none' | ||
| ``` | ||
@@ -276,0 +243,0 @@ |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-1.3%
188287
- Number of lines in readme file
- decreased by-12.04%
241
No dependency changes