feat(Pages extension): Add the pages extension

Closes #23.

src/extensions/extensions.ts

@@ -9,12 +9,14 @@ export const extensions: {
   'cite-mla': Promise<unknown>
   code: Promise<unknown>
   math: Promise<unknown>
+  pages: Promise<unknown>
   person: Promise<unknown>
 } = {
   cite: import('./cite'),
   'cite-apa': import('./cite-apa'),
   'cite-mla': import('./cite-mla'),
   code: import('./code'),
   math: import('./math'),
+  pages: import('./pages'),
   person: import('./person')
 }

src/extensions/pages/README.md

@@ -0,0 +1,18 @@
+# Pages extension
+
+Provides a [`@media print` CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@page) to modify properties when printing a document e.g. to PDF.
+
+## Notes
+
+- This is an initial, basic, implementation.
+
+- In the future, we may use https://www.pagedmedia.org/paged-js/ for better support for the `@page` rule.
+
+- That might allow theme authors to specify additonal things to go in printed pages e.g. headers and footers, for their theme.
+
+
+## Resources
+
+- https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/
+
+- https://www.pagedmedia.org/paged-js/

src/extensions/pages/index.ts

@@ -0,0 +1,3 @@
+// Do any initialization that your extension requires here.
+
+export {}

src/extensions/pages/styles.css

@@ -0,0 +1,21 @@
+@media print {
+  /* Document nodes to avoid a break after */
+  :--Heading {
+    page-break-after: avoid;
+  }
+
+  /* Document nodes to avoid a break inside */
+  :--Figure,
+  :--Table,
+  :--Datatable,
+  :--MathBlock,
+  :--CodeBlock,
+  :--CodeChunk {
+    page-break-inside: avoid;
+  }
+
+  /* Elements not to display */
+  stencila-action-menu {
+    display: none;
+  }
+}

src/themes/skeleton/index.ts

@@ -1,4 +1,5 @@
+import '../../extensions/cite-apa'
 import '../../extensions/code'
 import '../../extensions/math'
+import '../../extensions/pages'
 import '../../extensions/person'
-import '../../extensions/cite-apa'

src/themes/skeleton/styles.css

@@ -5,6 +5,7 @@
 @import '../../extensions/cite-apa/styles.css';
 @import '../../extensions/code/styles.css';
 @import '../../extensions/math/styles.css';
+@import '../../extensions/pages/styles.css';
 @import '../../extensions/person/styles.css';
 
 :--ArrayValidator {