Commit 6e452dcc authored by julientaq's avatar julientaq

first draft

parents
node_modules
.vscode
\ No newline at end of file
/* 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
/* 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
/* 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;
}
}
}
<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>
# 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
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?"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment