Preview paginée avec Paged.js #718

thom4parisot · 2023-01-09T03:24:46Z

Ce que c'est censé faire :

exposer une propriété css dans l'Article, et setStylesheet comme mutation
transformer le HTML issu de la preview avec Paged.js
scoper les CSS uniquement à la zone de rendu (soit en trouvant un truc pour les préfixer, soit avec WebComponent + ShadowDOM ?)
quand on fait Ctrl+P/Cmnd+P, ça imprime avec le style @print seulement

Renseigner les réglages de preview

Ça se passe uniquement avec GraphQL sur stylo-dev pour le moment. Le temps d'avoir un truc qui fonctionne.

query updateStylesheet ($article: ID!, $settings: ArticlePreviewSettings!) {
  article (article: $article) {
  	setPreviewSettings(settings: $settings) {
      preview {
		stylesheet
		template
	  }
    }
  }
}

Deux éléments sont spécifiables :

stylesheet : la feuille de style servant à l'impression — toute feuille de style utilisée pour du @media print, @page et fonctionnant avec Paged.js devrait passer ;
template : tout template HTML passé à Pandoc devrait fonctionner — même s'il contient des scripts et styles (ils seront nettoyés, et la stylesheet lui sera substituée)

Les query variables :

{
  "article": "...",
  "preview": {
    "template": "<!doctype html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <title>$supertitle$</title>\n  <link rel=\"stylesheet\" href=\"print.css\">\n  <link rel=\"stylesheet\" href=\"print-interface.css\">\n  <script src=\"https://unpkg.com/pagedjs@0.3.5/dist/paged.polyfill.js\"></script>\n</head>\n<body>\n<main>\n  <section class=\"cover\">\n    <h1 class=\"title\" id=\"main-title\">$title$</h1>\n    <h2>$authors$</h2>\n  </section>\n  <section class=\"content\">\n  $body$\n  </section>\n  <section class=\"colophon\">\n  <small>$colophon$</small>\n  </section>\n</main>\n</body>\n</html>\n",
    "stylesheet": "@page {\n  size: 8.5in 11in;\n  margin: 20mm 25mm;\n  /* marks: crop; */\n\n  @footnote {\n    margin: 0.6em 0 0 0;\n    padding: 0.3em 0 0 0;\n    max-height: 10em;\n  }\n\n  @top-center {\n    vertical-align: bottom;\n    padding-bottom: 10mm;\n    content: string(booktitle);\n  }\n}\n\n@page :left {\n  margin: 20mm 40mm 20mm 30mm;\n\n  @top-left {\n    vertical-align: bottom;\n    padding-bottom: 10mm;\n    content: string(page-number, first-except);\n    letter-spacing: 0.1em;\n    margin-left: -1em;\n    font-size: 0.9em;\n }\n\n @bottom-left-corner {\n   content: counter(page);\n }\n}\n\n@page :right {\n  margin: 20mm 30mm 20mm 40mm;\n\n  @top-right {\n    vertical-align: bottom;\n    padding-bottom: 10mm;\n    content: string(page-number, first-except);\n    letter-spacing: 0.08em;\n    margin-right: -1em;\n    font-size: 0.9em;\n }\n\n @bottom-right-corner {\n   content: counter(page);\n }\n\n @top-center{\n   content: string(booktitle);\n  }\n}\n\n@page cover {\n  @top-center{\n    content: none;\n   }\n}\n\n\n@font-face {\nfont-family: 'Stix';\nfont-weight: normal;\nfont-style: normal;\n}\n\n@font-face {\nfont-family: 'Stix';\nfont-weight: bold;\nfont-style: normal;\n}\n\n@font-face {\nfont-family:'Stix';\nfont-weight: normal;\nfont-style: italic;\n}\n\n@font-face {\nfont-family:'Stix';\nfont-weight: bold;\nfont-style: italic;\n}\n\n.stylo-pagedjs-container section:nth-child(1) h1 {\n  string-set: booktitle content(text);\n}\n\n.stylo-pagedjs-container section {\n  break-before: right;\n  break-after: always;\n}\n\n\n.stylo-pagedjs-container  {\nfont-size: 1em;\nline-height: 1.33em;\nfont-family: 'Stix', serif;\nfont-variant-numeric: oldstyle-nums;\n}\n\n.stylo-pagedjs-container p {\npadding: 0;\nmargin: 0;\ntext-align: justify;\n}\n\n.stylo-pagedjs-container header + p:first-line {\ntext-transform: lowercase !important;\nfont-variant: small-caps;\nfont-size: 1.1em;\n}\n\n.stylo-pagedjs-container p + p {\ntext-indent: 1.33em;\n}\n\n.stylo-pagedjs-container .decoration-rw {\ntext-align: center;\npadding-top: 1em;\npadding-bottom: 1em;\npadding-left: 0em;\npadding-right: 0em;\n}\n\n.stylo-pagedjs-container .copyright-rw {\nfont-size: .8em;\nline-height: 1em;\ntext-align: left;\npadding-top: 2em;\n}\n\n.stylo-pagedjs-container .copyright-rw p {\nmargin-bottom: 1em;\ntext-indent: 0;\n}\n\n.stylo-pagedjs-container .dedication-rw p {\ntext-align: center;\ntext-indent: 0;\n}\n\n.stylo-pagedjs-container .Dedication-rw {\nmargin-top: 3em;\n}\n\n.stylo-pagedjs-container .leading-line-rw {\nheight: 1.33em;\n}\n\n.stylo-pagedjs-container .fp-rw {\ntext-indent: 0;\n}\n\n\n\n.stylo-pagedjs-container h1 {\nfont-size: 1.5em;\nline-height: 1.33em;\ntext-align: center;\npadding-bottom: 0em;\ntext-align: center;\ntext-transform: uppercase;\nfont-weight: normal;\nletter-spacing: 4px;\n}\n\n.stylo-pagedjs-container h2 {\ntext-align: center;\nfont-size: 1.33em;\nline-height: 1.2em;\ntext-align: center;\npadding-bottom: 0em;\ntext-align: center;\ntext-transform: uppercase;\nfont-weight: normal;\nletter-spacing: 3px;\n}\n\n.stylo-pagedjs-container .title-author-rw {\ntext-align: center;\nfont-size: 1.5em;\ntext-indent: 0;\n}\n\n.stylo-pagedjs-container .title-num-rw {\ntext-align: center;\nfont-size: 1.5em;\ntext-indent: 0;\nmargin-top: 1em;\nmargin-bottom: 1em;\n}\n\n.stylo-pagedjs-container .title-sub-rw {\ntext-align: center;\nfont-size: 1.5em;\ntext-indent: 0;\n}\n\n.stylo-pagedjs-container .imprint-rw {\ntext-align: center;\n}\n\n.stylo-pagedjs-container .extract-verse-rw {\nmargin-top: 1.33em;\nmargin-bottom: 1.33em;\npadding-left: 20pt;\n}\n\n.stylo-pagedjs-container .extract-rw {\nmargin-top: 1.33em;\nmargin-bottom: 1.33em;\npadding-left: 20pt;\n}\n\n.stylo-pagedjs-container .extract-verse-rw p {\ntext-align: left;\ntext-indent: -20pt;\nmargin-left: 20pt;\n}\n\n.stylo-pagedjs-container .epigraph-rw {\nmargin-top: 1.33em;\nmargin-bottom: 1.33em;\npadding-left: 20pt;\npadding-right: 20pt;\n}\n\n.stylo-pagedjs-container .sc-rw {\nfont-size: 75%;\n}\n.stylo-pagedjs-container .block-rw {\nmargin-top: 1em;\nmargin-bottom: 1em;\nmargin-left: 20pt;\nmargin-right: 20pt;\n}\n\n.stylo-pagedjs-container span.dropcap-rw {\nfloat: left;\nfont-size: 2.7em;\nline-height: .87em;\n}\n\n\n.stylo-pagedjs-container .signature-rw {\nmargin-left: 50%;\ntext-align: left;\ntext-indent: 0;\n}\n\n.stylo-pagedjs-container .AdCard-rw h4 {\ntext-align: center;\n}\n\n.stylo-pagedjs-container .AdCard-rw p {\ntext-align: center;\ntext-indent: 0;\n}\n\n.stylo-pagedjs-container .FrontSales-rw h4, .FrontSales-rw h2 {\ntext-align: center;\n}\n\n.stylo-pagedjs-container .FrontSales-rw p {\ntext-indent: 0;\n}\n\n\n\n/* NAVIGATION */\n\n.stylo-pagedjs-container a {\ncolor: black !important;\n}\n\n.stylo-pagedjs-container #toc ol {\nlist-style-type: none;\nmargin: 0 0 0 2em;\npadding: 0 0 0 0;\n}\n\n.stylo-pagedjs-container #toc ol ol {\nlist-style-type: none;\nmargin: 0 0 0 1em;\npadding: 0 0 0 0;\n}\n\n\n\n\n\n.stylo-pagedjs-container #toc ol li {\nmargin: 0 0 0 0;\npadding: 0 0 0 0;\n}\n\n.stylo-pagedjs-container #toc ol li a {\ntext-decoration: none;\nfont-family: sans-serif;\n}\n\n.stylo-pagedjs-container .toc-short ol li a {\ntext-decoration: none;\nfont-family: sans-serif;\n}\n\n\n.stylo-pagedjs-container .toc-short ol {\nlist-style-type: none;\nmargin: 0 0 0 2em;\npadding: 0 0 0 0;\n}\n\n\n.stylo-pagedjs-container #guide {\ndisplay: none;\n}\n\n\n.stylo-pagedjs-container header {\npadding: 3em 0 2em 0;\n}\n\n.stylo-pagedjs-container header a {\ntext-decoration: none;\ncolor: black;\n}\n\n\n\n\n\n.stylo-pagedjs-container .center {\ntext-align: center;\ntext-indent: 0;\n}\n\n.stylo-pagedjs-container img {\nmax-width: 100%;\nmax-height: 100%;\n}\n\n\n\n.stylo-pagedjs-container .title-other-rw {\ntext-align: center;\ntext-indent: 0;\nmargin-top: .5em;\n}\n\n.stylo-pagedjs-container .dateline-rw {\ntext-align: left;\ntext-indent: 0;\nmargin-top: 1.33em;\nmargin-bottom: 1.33em;\n}\n\n\n.stylo-pagedjs-container .frontmatter-rw h1 {\nfont-size: 1.5em;\n}\n\n.stylo-pagedjs-container .backmatter-rw h1 {\nfont-size: 1.5em;\n}\n\n\n\n  .stylo-pagedjs-container .direction-rw {\n   text-align: center;\n   text-indent: 0;\n   font-style: italic;\n   margin: 1em 0 1em 0;\n   }\n\n   .stylo-pagedjs-container .source-rw {\nmargin-bottom: 0em;\ntext-align: right !important;\nfont-variant: small-caps;\ntext-transform: lowercase;\nfont-size: 1.1em;\npage-break-before: avoid;\n}\n\n.stylo-pagedjs-container div.block-rw {\nborder-top: 2px solid #EEE;\nborder-bottom: 2px solid #EEE;\npadding: 6pt 0 6pt 0;\n}\n\n.stylo-pagedjs-container .list-simple-rw p {\ntext-indent: 0;\ntext-align: left;\n}\n\n.stylo-pagedjs-container .headline-rw p {\ntext-indent: 0;\ntext-align: center;\npadding-top: 6px;\n}\n\n.stylo-pagedjs-container div.photo {\nmargin-top: 1em;\npadding-top: 2em;\ntext-align: center;\n\n}\n\n.stylo-pagedjs-container div.photo p {\ntext-align: center;\npadding: 6px;\nfont-style: italic;\n\n\n\n}\n\n\n\n\n\n.stylo-pagedjs-container .-epub-media-overlay-active {\n    background-color: #abc;\n}\n\n\n@media all and (orientation:portrait) {\n  .stylo-pagedjs-container p { font-family: serif; }\n}\n\n\n@media all and (orientation:landscape) {\n  .stylo-pagedjs-container p { font-family: sans-serif; }\n\n}"
}

Pour générer le contenu de la variable `preview.template`, j'ai collé ça dans les devtools 👀

copy(JSON.stringify(`


  
  
  
  <title>$supertitle$</title>
  
  
  <script src="https://unpkg.com/pagedjs@0.3.5/dist/paged.polyfill.js"></script>



  
    $title$
    $authors$
  
  
  $body$
  
  
  $colophon$
  



`))

Pour générer le contenu de la variable `preview.stylesheet`, j'ai collé ça dans la console des devtools (très long) 👀

copy(JSON.stringify(`@page {
    size: A4;
    margin-left: 1.8cm;
    margin-right: 1.8cm;
    margin-top: 2cm;
    margin-bottom: 2cm;
/* pied de page */
  @bottom-left {
    content: string(main-title);
    width: 100%;
  }

  @bottom-right {
    content: counter(page);
  }

}
@media print {

#main-title {

string-set: main-title content(text);

}

#subtitle {

string-set: subtitle content(text);

}

body {

font-family: monospace;

font-size: 0.975em;

}
p, li {

line-height: 1.5em;

}
p {

margin: 1em auto;

}
img {

width: 100%;

}
#titre {

string-set: titre content(text);

}
#titre_site {

string-set: titre_site content(text);

}
.titre-site {

visibility: hidden;

}

h1, h2, h3, h4, h5, h6 {

page-break-after: avoid;

}

h1:first-child, h2:first-child, h3:first-child {

margin-top: 0;

}

h1 {

break-before: page;

text-align: right;

text-transform: uppercase;

font-size: 2.5em;

margin-bottom: 1em;

}

h2.subtitle {

font-size: 2em;

margin-top: 0em;

}

h2 {

font-size: 1.25em;

margin: 1.5em auto 0 auto;

text-transform: uppercase;

}

h3 {

font-size: 1.25em;

margin-top: 1.5em;

}

h4 {

margin-bottom: -0.75em;

}
.main-content {

display: block;

}
hr {

visibility: hidden;

break-after: page;

}

/.break {

break-after: page;

}/
/* gestion des citations */

.hugo-cite-intext {

display: inline-block;

vertical-align: baseline; /*compensate for lower height */

position: relative;

/*font-size: .85em; / / reduce to avoid some breaks */

a {

text-decoration: none;

color: inherit;

}

}

.hugo-cite-intext

.hugo-cite-citation {

visibility: hidden;

background-color: #ffffff;

color: inherit;

border: 1px solid currentColor;

padding: 1rem;

position: absolute;

width: 350px;

max-width: 100vw;

z-index: 1;

bottom: 140%;

left: 0;

margin-left: -50px;
  z-index: 2;
  transition:
    visibility 0s .3s,
    transform .3s ease 0s,
    opacity .3s ease 0s;
  opacity: 0;
  transform: translateY(-8px);

}

.visually-hidden {

clip: rect(1px, 1px, 1px, 1px);

height: 1px;

overflow: hidden;

position: absolute;

width: 1px;

}
.numero {

font-size: 1.5em;

font-weight: 800;

display: inline-block;

opacity: 0.3;

}
.module h2 {

font-size: 1.75em;

margin-top: 1.75em;

margin-bottom: 0;

display: inline-block;

padding-left: 1em;

}
.module time {

display: inline-block;

margin-right: auto;

opacity: 0.5;

padding-left: 1em;

}
figure {

margin: 2.625em auto 2.625em auto;

}
figcaption {

text-align: center;

page-break-before: avoid;

}
svg {

width: 100%;

height: auto;

}
.cover h1 {

page-break-before: avoid;

font-size: 2em;

margin: 0 auto 0 auto;

text-align: left;

line-height: 1em;

}
.cover p {

font-size: 1.25em;

}
.cover h2 {

font-size: 1.25em;

margin: 0.5em auto;

}
.cover small {

display: block;

font-size: 1.25em;

}
.colophon {

margin-top: 7em;

}
.resume {

margin-bottom: 3em;

}
/* pandoc'class */

.csl-entry {

margin-bottom: 1em;

}
header p {

margin: 0 auto;

}
header h1 {

font-size: 6.5em;

}
header {

margin-bottom: 2em;

}
.renvoi {

padding: 0.5em;

border: dotted black 2px;

}

/*

.columns {

margin: 0;

column-count: 2;

column-gap: 5mm;

font-size: 0.9em;

}
.columns p {

margin: 1.5em auto;

line-height: 1.5em;

text-align: justify;

hyphens: auto;

}

.columns p:first-child {

margin-top: 0;

}

.columns h4 {

margin-top: 3em;

margin-bottom: -1.5em;

line-height: 1.5em;

}

.columns h4:first-child  {

margin-top: 0;

}

*/

.encadre {

border: solid 2px black;

margin: 2em 0 2em 0;

padding: 0.5em;

}

.encadre h2 {

text-transform: none;

font-size: 1em;

}

.plus {

margin-bottom: 1.5em;

}

.columns ul {

margin-top: -1em;

}

#usages-de-stylo-statistiques {

margin-top: 2em;

}

`))

netlify · 2023-01-09T03:33:37Z

✅ Deploy Preview for stylo-dev ready!

Name	Link
🔨 Latest commit	`9530dd0`
🔍 Latest deploy log	https://app.netlify.com/sites/stylo-dev/deploys/63c5cba4453ba0000913774a
😎 Deploy Preview	https://deploy-preview-718--stylo-dev.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

front/src/components/Write/Write.jsx

But preserve it as a hidden feature

thom4parisot commented Jan 9, 2023

View reviewed changes

front/src/components/Write/Write.jsx Outdated Show resolved Hide resolved

thom4parisot force-pushed the feature/css-print-api branch 4 times, most recently from 9ace254 to 465d5ab Compare January 11, 2023 19:37

thom4parisot added this to the v1.8 milestone Jan 11, 2023

thom4parisot force-pushed the feature/css-print-api branch 2 times, most recently from b14424b to 0914c03 Compare January 13, 2023 20:15

thom4parisot added 11 commits January 16, 2023 16:42

Remove HTML Preview buttons

5f7b77d

But preserve it as a hidden feature

Factor readonly, preview and writing mode

f1d7c33

Convert HTML preview into Paged.js Preview if we have a user style

ef4a0a8

Deactivate Legacy browsers for now

aeacec9

Autoprefix CSS input

a398c03

Expose and mutate preview stylesheet+template from within the API

bb903ee

Render preview with Pandoc template, and style

2f04ad4

Force hide elements with the hidden HTML attribute

aa00b21

Fix janky package-lock.json due to rebase

55e86aa

Display Paged Preview only when CSS are available

86a0c9f

Wrap UI in @media print{ display: none }

9530dd0

thom4parisot force-pushed the feature/css-print-api branch from 0914c03 to 9530dd0 Compare January 16, 2023 22:11

thom4parisot marked this pull request as ready for review January 16, 2023 22:12

thom4parisot merged commit 4210321 into master Jan 16, 2023

thom4parisot deleted the feature/css-print-api branch January 16, 2023 22:13

thom4parisot mentioned this pull request Jan 20, 2023

Prototyper une prévisualisation miniature de l'export PDF à même la modale d'export #778

Open

thom4parisot restored the feature/css-print-api branch November 21, 2024 15:02

thom4parisot deleted the feature/css-print-api branch November 21, 2024 15:03

thom4parisot mentioned this pull request Jan 8, 2025

Remplacer la preview par un appel direct à la Pandoc API et débrancher stylo-export-legacy #1178

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Preview paginée avec Paged.js #718

Preview paginée avec Paged.js #718

Uh oh!

thom4parisot commented Jan 9, 2023 •

edited

Loading

$title$

$authors$

Uh oh!

netlify bot commented Jan 9, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Preview paginée avec Paged.js #718

Preview paginée avec Paged.js #718

Uh oh!

Conversation

thom4parisot commented Jan 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Renseigner les réglages de preview

$title$

$authors$

Uh oh!

netlify bot commented Jan 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for stylo-dev ready!

Uh oh!

Uh oh!

Uh oh!

thom4parisot commented Jan 9, 2023 •

edited

Loading

netlify bot commented Jan 9, 2023 •

edited

Loading