Add support for mkdocs-material instant loading feature

Required large rewrite of how to handle injection of CSS and JS files

Author: timvink

README.md

@@ -14,7 +14,8 @@
 
 - Allow visitors to create PDFs from MkDocs sites
 - Support for pagination in PDFs
-- Support for generic and [mkdocs-material](https://github.com/squidfunk/mkdocs-material) themes, but works on all themes
+- Works on all MkDocs themes
+- Support for [mkdocs-material](https://github.com/squidfunk/mkdocs-material) features like instant loading and dark color themes.
 - Lightweight, no dependencies
 
 If you need to create PDFs programmatically, have a look at alternatives like [mkdocs-pdf-export-plugin](https://github.com/zhaoterryy/mkdocs-pdf-export-plugin) and [mkdocs-pdf-with-js-plugin](https://github.com/smaxtec/mkdocs-pdf-with-js-plugin).

mkdocs_print_site_plugin/css/print-site-material.css

@@ -13,7 +13,11 @@ https://github.com/squidfunk/mkdocs-material */
     margin-bottom: 0;
     list-style-position: inside;
 }
-#print-page-toc ul.print-site-toc-level-2,ul.print-site-toc-level-3,ul.print-site-toc-level-4,ul.print-site-toc-level-5,ul.print-site-toc-level-6 {
+#print-page-toc ul.print-site-toc-level-2,
+#print-page-toc ul.print-site-toc-level-3,
+#print-page-toc ul.print-site-toc-level-4,
+#print-page-toc ul.print-site-toc-level-5,
+#print-page-toc ul.print-site-toc-level-6 {
     margin-left: 1.6em;
 }
 #print-page-toc ul li {
@@ -35,20 +39,24 @@ ul.print-site-toc-level-2 li a {
 
 
 /* Box shadows don't do well in PDFs */
-table {
+#print-site-page table {
     border: 1px solid hsla(200, 18%, 26%, 1); /* #EFEFEF */
     box-shadow: none !important;
 }
 
 @media print {
-    td {
+    #print-site-page td {
         word-wrap: break-word;
     }
-
 }
 
 @page {
 
+    /* 
+        Note this CSS file is added to all MkDocs pages
+        So this @page logic will affect print of all pages
+    */
+
     size: a4 portrait;
     margin: 15mm 10mm 25mm 10mm;
     counter-increment: page;

mkdocs_print_site_plugin/css/print-site-mkdocs.css

@@ -5,11 +5,18 @@
  }
 
 @media print {
-    .col-md-3 { display: none !important; }
+
+    /* Hide side TOC banner */
+    #print-site-page .col-md-3 { display: none !important; }
 }
 
 @page {
 
+    /* 
+        Note this CSS file is added to all MkDocs pages
+        So this @page logic will affect print of all pages
+    */
+
     size: a4 portrait;
     margin: 15mm 10mm 15mm 10mm;
     counter-increment: page;

mkdocs_print_site_plugin/css/print_site.css renamed to mkdocs_print_site_plugin/css/print-site.css

@@ -11,7 +11,12 @@
 }
 
 /* Print site table of contents styling */
-h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
+#print-site-page h1:target, 
+#print-site-page h2:target, 
+#print-site-page h3:target, 
+#print-site-page h4:target, 
+#print-site-page h5:target, 
+#print-site-page h6:target {
     animation: highlight 1s ease;
 }
 @keyframes highlight {
@@ -24,56 +29,64 @@ h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
     /* included bookmarks on h1 and h2
     Doesn't work, but included In case Chrome gets support 
     for these experimental CSS features that define PDF bookmarks */
-    h1 {
+    #print-site-page h1 {
         bookmark-level: 1;
         bookmark-label: content(); 
         -ah-bookmark-level: 1;
         -ro-pdf-bookmark-level: 1;
     }
-    h2 {
+    #print-site-page h2 {
         bookmark-level: 2;
         bookmark-label: content(); 
         -ah-bookmark-level: 2;
         -ro-pdf-bookmark-level: 2;
     }
 
+    /* Remove print site banner */
     #print-site-banner { display: none; }
 
     /* Ensure all tabbed content is displayed and printed
     https://squidfunk.github.io/mkdocs-material/reference/content-tabs/ */
-    div.tabbed-content { display: block !important; }
-
+    #print-site-page div.tabbed-content { display: block !important; }
 
     /* PDF page breaks on each MkDocs page, except the first one */
-    section.print-page {
+    #print-site-page section.print-page {
         page-break-before: always;
     }
-    section.print-page:first-of-type {
+    #print-site-page section.print-page:first-of-type {
         page-break-before: avoid;
     }
 
-    p, pre, blockquote, .tabbed-set {
+    #print-site-page p, 
+    #print-site-page pre, 
+    #print-site-page blockquote, 
+    #print-site-page .tabbed-set {
         page-break-inside: avoid;
     }
 
     /* Avoid a page break immediately after a heading */
     /* Credits https://stackoverflow.com/a/9238898/5525118 */
-    h1 {
+    #print-site-page h1 {
         page-break-inside: avoid;
     }
-    h1::after {
+    #print-site-page h1::after {
         content: "";
         display: block;
         height: 100px;
         margin-bottom: -100px;
     }
 
-    footer { display : none; }
+    #print-site-page footer { display : none; }
 
 }
 
 @page {
 
+    /* 
+        Note this CSS file is added to all MkDocs pages
+        So this @page logic will affect print of all pages
+    */
+
     /* Prevent image page overflow */
     img { max-width: 500px !important; }
 

mkdocs_print_site_plugin/js/print-site-material.js

@@ -1,17 +1,29 @@
 /* 
-Generates a table of contents for the print site page.
-
-Only included when print-site-plugin option 'add_table_of_contents' is set to true
+Javascript functions to help make the print page more PDF friendly
 */
 
+
 /* 
-TODO: Look at https://www.cssscript.com/easy-table-of-contents/ and just change the list style.
+mkdocs-material compatibility
+Change theme to default mode, when printing
+
+Only called when theme 'material' is specified in the mkdocs.yml file
 */
+function change_material_theme(to="default") {
+
+  body = document.getElementsByTagName('body')[0];
+  body.setAttribute("data-md-color-scheme", to)
+}
+
 
+/*
+Generates a table of contents for the print site page.
+Only called when print-site-plugin option 'add_table_of_contents' is set to true
+*/
 function generate_toc() {
 
   var ToC = "<nav role='navigation' class='print-page-toc-nav'>" +
-      "<h1>Table of Contents</h1>"
+      "<h1 class='print-page-toc-title'>Table of Contents</h1>"
 
   var newLine, el, title, link;
 
@@ -22,6 +34,12 @@ function generate_toc() {
   for (var i = 0; i < toc_elements.length; i++) {
 
     el = toc_elements[i]
+
+    // Don't put the toc h1 in the toc
+    if ( el.classList.contains('print-page-toc-title') ) {
+      continue;
+    }
+
     title = el.innerHTML;
     link = "#" + el.id;
     tag = el.tagName
@@ -53,6 +71,4 @@ function generate_toc() {
 
     document.querySelectorAll("#print-page-toc")[0].innerHTML = ToC;
 
-}
-
-generate_toc();
+}