first draft

.gitignore

+node_modules
+.vscode
\ No newline at end of file

assets/css/interface.css

+/* CSS for Paged.js interface */
+
+/* Change the look of the preview here*/
+
+:root {
+    --color-background: whitesmoke;
+    --color-pageBox: #666;
+    --color-paper: white;
+    --color-marginBox: transparent;
+}
+
+/* Defining the preview: */
+@media screen {
+    body {
+        background-color: var(--color-background);
+    }
+
+    .pagedjs_pages {
+        display: flex;
+        width: calc(var(--pagedjs-width) * 2);
+        flex: 0;
+        flex-wrap: wrap;
+        margin: 0 auto;
+    }
+
+    .pagedjs_page {
+        background-color: var(--color-paper);
+        box-shadow: 0 0 0 1px var(--color-pageBox);
+        margin: 0;
+        flex-shrink: 0;
+        flex-grow: 0;
+        margin-top: 5em;
+    }
+
+    .pagedjs_first_page {
+        margin-left: var(--pagedjs-width);
+    }
+
+    .pagedjs_page:last-of-type {
+        margin-bottom: 5em;
+    }
+
+    /* show the margin-box */
+    .pagedjs_margin-top-left-corner-holder,
+    .pagedjs_margin-top,
+    .pagedjs_margin-top-left,
+    .pagedjs_margin-top-center,
+    .pagedjs_margin-top-right,
+    .pagedjs_margin-top-right-corner-holder,
+    .pagedjs_margin-bottom-left-corner-holder,
+    .pagedjs_margin-bottom,
+    .pagedjs_margin-bottom-left,
+    .pagedjs_margin-bottom-center,
+    .pagedjs_margin-bottom-right,
+    .pagedjs_margin-bottom-right-corner-holder,
+    .pagedjs_margin-right,
+    .pagedjs_margin-right-top,
+    .pagedjs_margin-right-middle,
+    .pagedjs_margin-right-bottom,
+    .pagedjs_margin-left,
+    .pagedjs_margin-left-top,
+    .pagedjs_margin-left-middle,
+    .pagedjs_margin-left-bottom {
+        box-shadow: 0 0 0 1px inset var(--color-marginBox);
+    }
+
+    /* uncomment this part for a recto/verso book : ------------------------------------ */
+
+    /* 
+    .pagedjs_pages {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .pagedjs_first_page {
+        margin-left: 0;
+    }
+
+    .pagedjs_page {
+        margin: 0 auto;
+        margin-top: 10mm;
+    } 
+    */
+}
\ No newline at end of file

assets/css/pagedjs.css

+/* paged.js interface  */
+@media screen {
+#print {
+    width: 60px;
+    position: fixed;
+    z-index: 20000;
+    background: var(--color-body);
+    fill: white;
+    padding: 1em;
+    right: 0;
+    top: 0;
+  }
+}
+  
\ No newline at end of file

assets/css/print.css

+  /* paged.js style example*/
+
+@media print {
+
+  /* h1 will be used to define running head */
+  h1 {
+    string-set: title content(text);
+  }
+
+  @page  {
+    size: A4;
+
+    @bottom-center  {
+      content: element(footer);
+    }
+  }
+
+  @page :right {
+    margin-top: 15mm;
+    margin-left: 20mm;
+    margin-right: 15mm;
+    margin-bottom: 25mm;
+
+    @top-right  {
+      content: counter(page);
+      font-size: 0.7em;
+    }
+
+    @top-left  {
+      content: string(title);
+      font-size: 0.7em;
+    }
+  }
+
+  @page :left {
+    margin-top: 15mm;
+    margin-left: 15mm;
+    margin-right: 20mm;
+    margin-bottom: 25mm;
+
+    @top-left  {
+      content: counter(page);
+      font-size: 0.7em;
+      width: 5ch;
+    }
+
+    @top-right  {
+      content: string(title);
+      font-size: 0.7em;
+    }
+  }
+}

layouts/partials/print-button.html

+<button id="print">
+<svg id="icon-preview" data-name="icon-preview" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><title>preview</title><rect x="36" y="85" width="5" height="71" fill="black"/><polygon points="129 159 129 179 41 179 41 159 36 159 36 184 134 184 134 159 129 159"/><path d="M193,101A88.76,88.76,0,0,0,69.59,85H21.06A8.07,8.07,0,0,0,13,93.06v54.88A8.07,8.07,0,0,0,21.06,156H147.94a8.07,8.07,0,0,0,8.06-8.06V128.72A89.14,89.14,0,0,0,193,101Zm-69.87,29a83.33,83.33,0,0,1-63.38-29,83.77,83.77,0,0,1,126.77,0A83.34,83.34,0,0,1,123.16,130Z"/><path d="M125.66,75.89a25.58,25.58,0,0,0-9.94,1A12.61,12.61,0,1,1,99.06,93.56a25.22,25.22,0,1,0,26.6-17.67Z"/><path d="M129,69.63c1.68.1,3.34.24,5,.42V17H36V82h5V22h88Z"/></svg>
+</button>

readme.md

+# Use Paged.js inside Hugo the easy way :)
+
+Paged.js is a library that transforms HTML and CSS into beautiful paginated document, ready to be printed or saved as PDF. If you want to know more about Paged.js, please go to [https://www.pagedjs.org]
+
+## Using the plug-in
+
+
+## Styling your css
+
+The paged.js module includes a couple of CSS files to work:
+
+- `theme/pagedjs/assets/css/print.css` that contains the styles used for printing (setting up the page size, the running heads, etc.). If you want to change how the PDF will look once printed, you can check [https://www.pagedjs.org](https://www.pagedjs.org).
+-`theme/pagedjs/assets/css/pagedjs.css` to define the `#Print` button css properties;
+- `theme/pagedjs/assets/css/interface.css` that offer the minimum styles to have a book-looking preview on screen.
+
+If you want to use your own style, you can create a `print.css`, a `pagedjs.css` or a `interface.css` in your Hugo’s project `assets/css/` directory, or, if your making a theme, in the `themes/name-of-the-theme/assets/css/`. Modifying any of the provided CSS files will make it harder to update when new version of paged.js is released.
+
+## Contributors
+
+
+
+
+## License
+
+MIT
\ No newline at end of file

theme.toml

+name = "Paged.js Plugin"
+license = "MIT"
+licenselink = "LICENSE"
+description = "Make PDF with hugo in the browser, using paged.js"
+homepage = "https://github.com/holehan/hugo-component-matomo"
+tags = ["Paged.js", "PrintCSS", "documentation", "PDF", "Publishing"]
+min_version = "0.60"
+
+[author]
+  name = "julien taquet"
+  homepage = "who needs a website anyway?"