Add Paged.js to support paged media

Paged.js will transform an HTML5 page into a set of printable pages. Margin, footer and header can be configured on each pages.
ggrossetie · Jan 23, 2019 · 1843f77 · 1843f77
1 parent f756915
commit 1843f77
Show file tree

Hide file tree

Showing 7 changed files with 29,906 additions and 43 deletions.
diff --git a/examples/document/document.css b/examples/document/document.css
@@ -3,23 +3,75 @@
 
 @page {
   margin: 0.5in 0.67in 0.67in 0.67in;
+  size: A4;
+}
+
+@page :left {
+  @bottom-right {
+    content: counter(page);
+    font-size: 0.8rem;
+    padding: 10pt 0 0 0;
+    margin: 10pt 10pt 30pt 10pt;
+    border-top: .1pt solid #d2d2d2;
+  }
+  @bottom-left {
+    margin: 10pt 0 30pt 0;
+    border-top: .1pt solid #d2d2d2;
+  }
+}
+
+@page :right {
+  @bottom-right {
+    margin: 10pt 0 30pt 0;
+    border-top: .1pt solid #d2d2d2;
+  }
+  @bottom-left {
+    content: counter(page);
+    font-size: 0.8rem;
+    padding: 10pt 0 0 0;
+    margin: 10pt 10pt 30pt 10pt;
+    border-top: .1pt solid #d2d2d2;
+  }
+}
+
+@page :first {
+  @bottom-right {
+    margin: 0;
+    padding: 0;
+    border: none;
+    content: normal;
+  }
+  @bottom-left {
+    margin: 0;
+    padding: 0;
+    border: none;
+    content: normal;
+  }
 }
 
 html {
   font: 10.5pt/1.15 'Noto Serif', serif;
   text-align: justify;
 }
 
+p[data-split-to], li[data-split-to], figcaption[data-split-to], blockquote[data-split-to],
+.sectionbody, [data-split-original] {
+  text-align-last: left !important;
+}
+
 #cover {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  width: 100vw;
   height: 100vh;
   page-break-after: always;
   align-items: flex-end;
 }
 
+.pagedjs_page.pagedjs_first_page {
+  counter-increment: page 0;
+}
+
 #cover h1 {
   color: #999;
   font-weight: 200;
@@ -90,3 +142,15 @@ table.grid-all > * > tr > .tableblock:last-child, table.grid-cols > * > tr > .ta
 table.grid-all > tbody > tr:last-child > .tableblock, table.grid-all > thead:last-child > tr > .tableblock, table.grid-rows > tbody > tr:last-child > .tableblock, table.grid-rows > thead:last-child > tr > .tableblock {
   border-bottom-width: 1px;
 }
+
+table {
+  page-break-inside: avoid;
+}
+
+tr {
+  page-break-inside: avoid;
+}
+
+.listingblock {
+  page-break-inside: avoid;
+}
diff --git a/examples/document/document.pdf b/examples/document/document.pdf
diff --git a/examples/document/templates/document.js b/examples/document/templates/document.js
@@ -4,6 +4,8 @@ module.exports = (node) => `<!DOCTYPE html>
 <meta charset="UTF-8">
 <link href="./asciidoctor.css" rel="stylesheet">
 <link href="./document.css" rel="stylesheet">
+<script src="../../lib/paged.polyfill.js"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body class="article">
 <div id="cover">

diff --git a/lib/converter.js b/lib/converter.js
@@ -21,10 +21,11 @@ function registerTemplateConverter (templates) {
       return this.baseConverter.convert(node, transform, opts)
     }
   }
+
   asciidoctor.ConverterFactory.register(new TemplateConverter(), ['html5'])
 }
 
-async function convert(inputFile, options, timings) {
+async function convert (inputFile, options, timings) {
   let html;
   let doc;
   if (timings) {
@@ -48,7 +49,7 @@ async function convert(inputFile, options, timings) {
   }
   const puppeteerConfig = {
     headless: true,
-    args: ['--no-sandbox']
+    args: ['--no-sandbox', '--allow-file-access-from-files']
   }
   const browser = await puppeteer.launch(puppeteerConfig);
   try {
@@ -85,7 +86,7 @@ async function convert(inputFile, options, timings) {
   }
 }
 
-function getCoreVersion() {
+function getCoreVersion () {
   return asciidoctor.getCoreVersion()
 }