feat: add css print

eleventy.config.js

@@ -23,6 +23,7 @@ module.exports = function(eleventyConfig) {
 
   // Watch our compiled assets for changes
   eleventyConfig.addWatchTarget('./src/compiled-assets/main.css');
+  eleventyConfig.addWatchTarget('./src/compiled-assets/print.css');
   //eleventyConfig.addWatchTarget('./src/compiled-assets/main.js');
   //eleventyConfig.addWatchTarget('./src/compiled-assets/vendor.js');
 

src/_data/cacheBust.js

@@ -4,6 +4,7 @@ const cacheBust = () => {
   // A "map" of files to cache bust
   const files = {
     mainCss: './src/compiled-assets/main.css',
+    printCss: './src/compiled-assets/print.css'
     // mainJs: './src/compiled-assets/main.js',
     // vendorJs: './src/compiled-assets/vendor.js',
   };

src/_layouts/base.njk

@@ -7,6 +7,7 @@
   <meta name="description" content="{{ description or metadata.description }}">
   <meta name="generator" content="{{ eleventy.generator }}">
   <link rel="stylesheet" href="/assets/main.css?{{ cacheBust.mainCss }}"/>
+  <link rel="stylesheet" media="print" href="/assets/print.css?{{ cacheBust.printCss }}" />
   <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
   <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
   <link rel="icon" href="/images/favicon.svg">
@@ -22,13 +23,7 @@
   </header>
 
   <main>
-{#    <div class="main-content">#}
       {{ content | safe }}
-{#    </div>#}
-{#    <aside class="right-side">#}
-{#      {% include "tagslist.njk" %}#}
-{#      {% include "other_links.njk" %}#}
-{#    </aside>#}
   </main>
 
   <footer class="main-footer">

src/assets/css/print.scss

@@ -0,0 +1,34 @@
+header,
+.right-side,
+.main-footer,
+.post-nav {
+  display: none;
+}
+
+main {
+  padding: 0;
+}
+
+p {
+  orphans: 3;
+  widows: 3;
+  font-size: 12px;
+}
+
+h1, h2, h3, h4 {
+  page-break-after:avoid;
+  break-after: avoid;
+}
+
+h1 {
+  font-size: 22px;
+}
+h2 {
+  font-size: 18px;
+}
+h3 {
+  font-size: 16px;
+}
+h4 {
+  font-size: 14px;
+}

src/assets/js/print.js

@@ -0,0 +1 @@
+import '../css/print.scss'

webpack.config.common.js

@@ -4,7 +4,10 @@ const path = require('path');
 
 module.exports = {
   // Our "entry" point
-  entry: './src/assets/js/index.js',
+  entry: {
+    main: './src/assets/js/index.js',
+    print: './src/assets/js/print.js'
+  },
   output: {
     // The global variable name any `exports` from `index.js` will be available at
     library: 'SITE',